BIPES IoT dashboard using freeboard

Searching the web today, I found freeboard – an amazingly wonderful and powerful open source platform to easily build dashboards. As I understand, it was created by Jim Heising and Bug Labs.

https://github.com/Freeboard/freeboard

freeboard is completely client site and so organized and well structured, that in 5 minutes I cloned github repository and got freeboard running on BIPES server:

http://bipes.net.br/test/freeboard/index.html?load=dashboard.json

From that URL above, anyone can easily add widgets, datasources, panes, move panes, etc. Moreover, it can easily get data from MQTT server, so we can integrate it with BIPES EasyMQTT! As I looked for examples and plugins, I quickly found this fork, with highly flexible and complete customization options, by Daniel Dunn:

https://github.com/EternityForest/freeboard

This fork by Daniel Dunn has many options, I decided to test it integrated with BIPES! It worked nicely! Just access http://bipes.net.br/beta2/ui/ or https://bipes.net.br/beta2serial/ui/, go to the IOT tab, and see it working.

In order to test freeboard integration with BIPES, here is a test program:

This program was loaded on an ESP8266 board wih a DHT11 sensor. If you want to access / edit the blocks, the full program is here:

http://bipes.net.br/beta2/ui/#4qzj9f

Now we can use BIPES EasyMQTT JSON API to get the latest data published by the ESP8266 board and update a freeboard dashboard. Here are the endpoints I used:

http://bipes.net.br/easymqtt/gettopic_last.php?session=vn28pd&topic=Humidity

http://bipes.net.br/easymqtt/gettopic_last.php?session=vn28pd&topic=Temperature

http://bipes.net.br/easymqtt/gettopic_last.php?session=vn28pd&topic=relay

On the IOT tab, which is an iframe to freeboard index.html, I simply had to add a JSON data source for each of the 3 links above, adding each URL to each data source.

After that, it is possible to create panes and add widgets to panes. I used text, gauge and buttons widgets. For the text and gauge widgets, it is easy to select the data source with auto-completion:

For the buttons, I had to use one nice and powerful feature of freeboard, which is to trigger a Javascript code when the button is pressed.

In that way, I used the JS Editor and added this code, which will make a request to BIPES MQTT server and change the value of the relay topic after the click. Here is the code I used for on ON Button:

function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

this.onClick = function(){
    httpGetAsync("http://bipes.net.br/easymqtt/publish.php?session=vn28pd&topic=relay&value=1");
};

The OFF Button has the same configurations, but changing value=1 to value=0.

And here is the result:

While program is running on the ESP8266 board, data can be seen in real time, and if we click on the “Relay ON” button, a message is shown on the terminal.

If you want to play with this specific dashboard, you can download it from here:

http://bipes.net.br/beta2/ui/freeboard/dashboard_4qzj9f.json

Then open the IOT tab, click on upload freeboard and upload this file. You can modify / customize / adjust it.

Another interesting possibility is to load only the dashboard, without BIPES. For example, you used BIPES to create your program, but you only want to share the dashboard with other people. In that way, you can share the dashboard with a link like this:

http://bipes.net.br/beta2/ui/freeboard/index.html?load=dashboard_4qzj9f.json

Which, by the way, is responsive and loads / adjusts nicely to several devices. Here are some prints from this link on my Android phone:

Please note, that this text / discussion is a first impression / test of BIPES + freeboard integration. There are bugs and features to make a seamless integration:

• Zoom control: on some screens I tested, the freeboard toolbar stays out of the screen. Changing the zoom helps get access to the toolbar, but a better solution is needed;
• Add a nice “Powered by freeboard” somewhere (I removed the logo because it was too big, bug would like to see it);
• Implement storage / sharing of freeboard using BIPES style (link with code);
• Automatic integration with BIPES: when EasyMQTT session is created, automatically populate freeboard datasources;
• For BIPES Serial version, create a channel from the terminal to local datasources using Javascript variables, so that a serial protocol can send data to be viewed on the freeboard dashboard without Internet connection.