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.

3 thoughts on “BIPES IoT dashboard using freeboard

  1. Pingback: BIPES IoT dashboard using freeboard

  2. Daniel D Dunn

    Oh awesome! Good to see that our customized fork is useful out in the wild! This project looks really interesting, I’m always up for collaboration, especially on something like this!

    It’s come a a fairly long way since then, unfortunately at the cost of a bit more code size than the original Bug Labs variant, but the theming ability should be even better now, and we have multi-page dashboards with a switching API.

    Reply
    1. Rafael Aroca Post author

      Hi Daniel! It is an honor to receive a message from you! I loved the features you added to freeboard, and many of them are perfect for BIPES and we started using your fork as our first/main dashboard option. However, we had some difficulty making the EternityForest
      theme UI “lighter” and we included a link to switch between EternityForest
      and classical freeboard.

      If you could (would) like helping, it would be great. The integration with BIPES is quite simple due to the data sources we created. Do you think we could possibly have all the features of EternityForest freeboard with the simpler / lighter UI of the classical freeboard?

      Moreover, BIPES is quite simple to use….we can create IoT applications in a few minutes! Please, take a look, and feel free to join efforts with us, if you wish.

      We moved our codes to this repo: https://github.com/BIPES

      best regards and thanks for the message!

      Rafael

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s