Mqtt with Beaglebone and ESP8266 – Freeboard

After the Mqtt web client installation

MQTT with Beaglebone and ESP8266 – WebServer and MQTT WebSocket

let’s install now the dashboard freeboard

Freeboard

In a ssh commad shell go into the /var/www/html  folder on Beaglebone as root and clone the freeboard github respository; change the owner of the freeboard folder in www-data:www-data

With a web browser go to the freeboard  folder on Beaglebone webserver to access the dashboard

freeboard

We have to add now Freeboard additional plugins. We add the following

  •  freeboard-mqtt

Clone the https://github.com/alsm/freeboard-mqtt github

Download the mqtt paho javascript library

Paho mqtt javascript library

Here is the direct link to the library

Last Version mqttws31.js

Create the mqtt folder under the Freeboard plugins folder and copy the mqttws31.js and paho.mqtt.plugin.js files

Edit the paho.mqtt.plugin.js file and insert the reference to the mqttws31.js library in the external_scripts section; in this case too we have to change the folder and contents owner

Change the owner

Edit the /var/www/html/freeboard/index.html file and insert the reference to the paho.mqtt.plugin.js plugin in the heads.js section

  • Add the dynamic-highcharts plugin

Clone in a folder the github

Copy the plugin_highcharts.js to the folder /var/www/html/plugins/thirdparty and change the owner

Edit again the file /var/www/html/freeboard/index.html and add the plugin as done above

Access now the Freeboard dashboard and add the links to the temperature and humidity topics, the gauges and timeseries mesauring the values in real time and in a specific range of time . Here are some settings:

  • Datasource

freeboard datasource

  • Gauge

freeboard gauge

  • Timeseries

freeboard timeseriesChrome/Chromium browser allows to save the settings in a json file. This settings can be loaded locally or loaded from the web server, saving for example the dashboard.json file in /var/www/html/freeboard,  with the url

The image shows the Freeboad interface with various widgets showing the status and timeseries of the ESP8266 relay and sensors

freeboard dashboard

In these series of articles we configured the envinronment to access the Beaglebone using the beaglebone.local/beaglebone alias

Debian sd card setup for Beaglebone Black

but you can use anyway the Beaglebone IP tho access the services provided by the board.

In the next article we’ll treat the Mqtt Android client

Mqtt with Beaglebone and ESP8266 – Android Client