How to Set Up a Dashboard for Your Connected Device

In this tutorial, I’m going to show you how to build a dashboard for your connected device. The tool I’m going to use is called Mongoose Embedded Web Server, it’s open source and free to use for non-commercial purposes.

What can you use this for? If you are tinkering with connectivity and want to pull data from a device into a readable format to your desktop, you’ll need to set up a dashboard. Something like the one at the top here.

Head to https://www.cesanta.com/products/mongoose and download Mongoose. Integrate it into your build tree by copying mongoose.c and mongoose.h. Out of the box, Mongoose supports Linux/Unix, MacOS, eCOS, Windows, Android, iPhone, TI CC3200 and ESP8266. But you can adapt it to your device also if it’s not supported already.

A dashboard can display whichever functions you want it to, as long as the data pulls in from the connected device. In this example (it ships with the firmware), I’ll show you how to create a simple settings page that controls two variables on the server with inputs and a button.

You can head over to GitHub to grab it or recreate from the images here.

A number of things are happening behind the scenes to make the dashboard work:

1. A template that contains bulk of the content of the page. Just regular HTML and CSS.
2. A bit of C code that provides current values of the variables: on lines 91 and 93 of the template, the special statements are parsed by the server and handle_ssi_call function provides the values.
3. A function that handles form data sent by the web page to update the values

Apart from that, there is just a small dispatcher function that routes the SSI event and the /save requests and a small bit that sets up the web server.

Note that SSI processing (the logic that parses statements) is only enabled on *.shtm and *.shtml files by default (specified by mg_serve_http_opts.ssi_pattern)

You can take the example code and build it out to pull and display the data that you want. Just going to place the image from the beginning of the tutorial here again for inspiration. This dashboard is made for connected air con units.

Check also other projects by Mongoose OS team.