A recipe for building a Web UI using MQTT for your IoT / Embedded App

Cook up a simple & tasty web UI for your embedded project with just a few simple ingredients!  Served on a bed of wholesome Linux goodness on an SBC, (my favourites are: Raspbery Pi or Odroid N2 but substitute alternatives for your own taste) – this is sure to delight family and friends alike!

Ingredients

For the back-end you will need:

Your embedded App  – this is the centrepiece of your creation, it will do some magic and communicate with the UI via MQTT.

python3 – always handy for thickening the sauce!

Flask – tiny & easy to set-up python system for serving your UI’s web pages and static files, perhaps a little lighter on the palette than the ubiquitous Node.js?

Mosquito – for sending MQTT messages between your app and the web UI for updating status and sending commands, MQTT lends a more contemporary taste than the sometimes overused AJAX!

For the front-end you will need:

bootstrap – presentation is soo important!

paho-js – for communicating with MQTT.

HTML & Javascript – the prefect seasoning, no need for some of the heavier spices like Angular.

How To Cook

(details coming soon, hopefully!)

Format std::time_point in ISO 8601 format with fractional seconds / microseconds in C++

A C++ function to format an std::time_point as an ISO 8601 string.

The C++ std chrono stuff is very useful but a bit of a head-wreck!  One of the things I had problems with was how to take an std::time_point value and format it as a string with the fractional seconds / microseconds included.  This sort of time resolution is often required for accurately time stamping machine vision images, especially when acquiring at  high rates from multiple cameras – accurate timestamps allow you to compare images from different cameras that were taken at the ‘same time’.

Anyway if you’re happy to wait for C++20 then you will have access to a format() function; but if you’re more eager to format your time strings now, then here is a function which may fit the bill, it (the function) has to jump through some hoops, but gets there in the end.

Note: This function uses the std::chrono::system_clock but it could be converted (or templated) for other std clocks..

Microsoft Teams stuck in a loop saying it needs sign in after a password change

An amusing MS Teams related problem hit me this morning after I changed my Domain Password – The MS Teams App piped up and said it need Sign In, when I hit OK it seemd to restart and then repeated the message, we were in an infinite loop of fun!

Now as much as I can happily live without Teams bugging me, I unfortunately needed it for a conference call so I had to coax it back to life.  What worked for me in the end was to wait until Teams came up with its message and then right-clicked on the teams icon in the task bar and chose the ‘Sign Out’ option.  I then shutdown and restarted Teams and everything was OK again.

 

Launching Flask on Port 80 without using sudo

Flask is a great python based HTTP server that’s really small and easy/fast to setup, it is really useful for deploying small Web based User Interfaces for IoT type devices.  By default flask will attach itself to port 5000.  To get my flask script to attach to port 80 I use:

This works fine, the only problem is that in order to successfully attach to port 80 the script must be run as root, so instead of just running:

I have to run:

Which isn’t great.

To get around this problem I used the tool: authbind

To Install:

And configure it for access to port 80:

(Not sure if the very loose 777 permission is required, must experiment)

Now I just have to launch my flask UI script using authbind and it will take care of the script’s permissions to bind to port 80 and I can connect from a browser:

More info on authbind here

Octave – Can’t scroll Window, Workaround

Strange problem with Octave (my version is 4.4.0), in the GUI I can’t scroll the ‘Command Window’, so if some code outputs lots of info I can’t scroll up to see it all, the window keeps jumping to the bottom as I try to scroll!

I am not sure why its happening, but a workaround is to enter the ‘pause’ command within the window, once pause executes I can scroll to my heart’s content.  I  then hit ctrl-c to exit pause.

It is possible that installing a newer version of Octave would fix this but I am not bothered to upgrade at the moment as all of the Maths bits seem to work very well!

 

Paho Javascript Client – Figure out received message’s MQTT topic

When using the Paho Javascript client from MQTT; when a message arrives via client.onMessageArrived(), how can we figure out the message’s topic.

This threw me for a bit as the documentation for the message object doesn’t mention ‘topic’ at all – but it turns out that the topic name is stored in the message.destinationName field! (panic over)

KDevelop hangs during C++ build on ARM Odroid N2

I have been using Hardkernel’s new Odroid N2 to develop a computer vision system with multiple Basler USB3 cameras. I have been using KDevelop on the Odroid to engineer the C++ code and in general all has been going very well (the Odroid N2 is a fantastic device). I did however hit an occasional problem where KDevelop would cause the Odroid to ‘hang’ during a build – especially when re-building a lot of files.

On investigation it seemed like KDevelop was just using up too much memory and putting the Odroid into a very bad place, sometimes the system would free up after a (long) period of time but most often it wouldn’t, it just ground to a halt thrashing memory (I presume). I am using the boost libraries and I think that a lot of IDEs and build systems have problems with boost as it’s very big! (Clion does especially!)

Anyway the solution was to limit how many parallel build instances (or jobs as it calls them) that KDevelop can run, to do this open the ‘Project / Open Configuration..’ menu and click on the ‘Make’ tab in the left-hand column, now check the ‘Override number of simultaneous jobs’ checkbox, and enter a number in the ‘Number of Simultaneous jobs’ box. A value of 3 works well for me, the builds are a little slower but no longer hang the system! I might try increasing it to see if I can get away with quicker builds…

Boost ASIO Simple UDP Send Packet Example

Boost.ASIO is great but if you don’t use it everyday it can be hard to remember how to use it to do even the simplest of things. I have included below a sample of simply sending a packet via UDP (ipv4), see the function called send_message(), this example code aims to be as minimal as it can be:

Those spouting software engineering dogma will often tell you to steer well clear of UDP for the usual, well understood reasons, but for a certain type of application where very low latency is important, it just can’t be beat!!

This is the bare-bones code, no error reporting etc. Also it won’t broadcast, to allow for broadcast you need to include the following two lines and supply a broadcast ip address when calling the function. Be careful if broadcasting a lot of data as it can really overload & mess-up network equipment!

Fixed – KDevelop not stopping at breakpoints on Ubuntu Mate

I couldn’t get KDevelop to stop at breakpoints even on simple ‘hello world’ C++ projects. It appeared that CMAKE_BUILD_TYPE was being correctly set and GDB worked fine from the command-line, but from within kdevelop breakpoints were never respected! I think the problem stemmed from the Cache Value for CMAKE_BUILD_TYPE being empty, this value can be seen in the Project / Open Configuration… menu:

kdevelop breakpoint broken

Following the advice from this post I added the following into the project’s CMakeLists.txt file:

[Originally from here]

I ran clean & rebuild etc. and then cache value was set correctly to ‘Debug’ and the debugger happily stops at breakpoints!

I hope this post helps folks as I spent _ages_ trying to get the breakpoints to work!!

PCL C2988 unrecognizable template declaration/definition Visual Studio 2017

If you get this compile error:

Error C2988 unrecognizable template declaration/definition

When you:

from the Point Cloud Library (PCL) in Visual Studio 2017, then either throw the following in before the #include, like this:

or upgrade your version of Visual Studio 2017 (I haven’t tested this yet myself!)

Not sure why, it’s something to do with workarounds for VS 2017 bugs or something…