Simple IoT Dashboards with Dweet.io & Freeboard.io

A few posts ago I made wrote an article about making a pretty nifty ESP8266 based Internet of Things Temperature & Humidity sensor, although I was particularly vague about dashboarding and instead simply threw the results into MySQL, finally over the Christmas period I got around to playing around with some free dashboarding services and stumbled accross Dweet.io (data collection and time series storage) and Freeboard.io (drawing the actual dashboards) to make relatively asthetically pleasing dashboards with next to no effort and here are the results…

Current Situation

Just to recap about what we currently have in place… So far there is a small ESP8266 device and a DHT22 sensor submitting results to a URL of my choosing hardcoded in the LUA script uploaded to the board every 5 minutes, this hits a very simple PHP script which validates some secret key the “sensor_id” and throws the results into a MySQL DB. I have always been horrible at making any UI related stuff and I particularly hate JavaScript so using Google Charts with some AJAX magic or likewise was a particular turn off for me, so I deicded to check out what free out of the box dashboarding stuff existed. Of course we could go down the Graphite / InfluxDB + Grafana route although I felt this was overkill for such a simple and small project so I wanted to find some hosted stuff out there suitable for small IoT projects. There where two routes I could envisage for making this happen, changing the hardcoded URL on the device itself to post directly to the dashboarding service or still going via my existing PHP script and then having a further Curl from the PHP script to post the data to the dashboarding service. In the end I opted for the second option because…

  • At the time of writing this article I was away from home and hence uploading the new LUA script wouldn’t be possible until I got back.
  • I still wanted the data to go into a MySQL database for long term warehousing because the free plan from Dweet.io only stores 24 hours of time series data.
  • It felt heavy creating 2 requests from the device itself on my home internet connection and any “multiplexing” of the data would be better suited to my server out on the internet, this way I could easily redirect the results whereever I wanted just by updating a script rather than having to reflash the device with alternative firmware / scripts.

Anyway my essential aim was to go from this…

mysql> select result_id, datetime, temp, humi from sensor_results ORDER BY result_id desc LIMIT 5;
+-----------+---------------------+------+------+
| result_id | datetime            | temp | humi |
+-----------+---------------------+------+------+
|    146931 | 2016-07-23 17:27:36 |   28 | 51.4 |
|    146930 | 2016-07-23 17:32:06 |   28 | 51.1 |
|    146929 | 2016-07-23 17:37:51 |   28 |   51 |
|    146928 | 2016-07-23 17:42:36 |   28 | 51.1 |
|    146927 | 2016-07-23 17:47:06 |   28 |   51 |
+-----------+---------------------+------+------+
5 rows in set (0.00 sec)

to this…

Dweet.io?

Dweet.io is a simple time series storage service designed for IoT devices, it comes in a free and paid variety, the free edition only allows you to store up to 24 hours, hence I still wanted to feed the data into MySQL also for warehousing. The service is accessed via HTTP(S) and the API is wide open, no accounts needed. First you need to decide a unique name for your thing, it can be anything you like as long as you remember it, once you have decided a name for your thing try and request the last 24 hours history from the API to see if your thing name has been used…

curl https://dweet.io/get/dweets/for/<my thing name>

Hopefully you should get a 404 back, this indicates the thing name you choose is not being used, if you get some other response back then you should choose another name rather than wrecking some other guy’s data set. Next we probably want to post some data into our thing’s time series dataset. First off we should decide our key value pairs we want to store, in the case of the DHT22 we want to store temperature & humidity, let’s send the Dweet API our first bit of info to test out the creation of the device. Dweet accepts values either as a post with the body containing JSON key value pairs or via a GET with the key value pairs in the query string, for simplicity and because our data is short lets use the GET method…

curl https://dweet.io/dweet/for/<my thing name>?temperature=20.0&humidity=50.0

You should get a 200 response from the Dweet API, when you submit your first set of data your thing name will be registered and the first data stored. You can now query to check the data has been stored accordingly by performing the original GET to find the data for the last 24 hours, you should see the data you just sent as an array inside of a JSON payload paired up with the date time of submission.

Now lets extend the original PHP script to post the data to Dweet.io using Curl as well as storing in MySQL, add the following to the tail end of the script.

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://dweet.io/dweet/for/?temperature=$temperature&humidity=$humidity");
curl_exec($ch);
curl_close($ch);

Wait for the next time your ESP8266 sensor checks in to your PHP script and query your Dweet.io thing, you should see real world values getting entered into the time series data. You can query your device on Dweet.io and see the recent entries…

Wohooo, data is now being stored in Dweet.io and we can now consume the data in Freeboard to create some tasty dashboards.

Freeboard.io?

Freeboard.io is a simple web based dashboard service, you can create as many public dashboards as you like for free, although if you want to protect your dashboards you’ll need a paid account. Head over to freeboard.io to sign up for an account, once confirmed login and create your first dashboard, enter a name for the dashboard in the text box and click “Create Dashboard”, the page will refresh and you’ll be presented with a blank dashboard with editing tools in the pane at the top of the page. Before you start building the dashboard you’ll want to add your Dweet thing as a datasource. Under the datasource’s header click “add”, you’ll notice there are many types of data source you can use from raw JSON to Dweet and Xively, select Dweet.io as the datasource and complete the form including a nickname for the data source, your thing name and so on, the key only applies if you have a paid Dweet.io account with a lock on your thing.

Repeat these steps to add another data source of type weather, and enter your zip / postcode, this will allow you to display outside weather conditions from a local weather station to compare with your inside sensor. Now you have both of your data sources defined for your Dweet.io based sensor and outside weather from an internet weather service, next we will go on to building the dashboard’s display components.

Click add pane in the tool pane to create a new area to place our dashboard’s components, a blank pane will be added to your dashboard, click on the spanner icon in the top right of the pane to open it’s properties window, here you can define it’s size and name, just change the name to “Outside” and click save. Next click the plus symbol in the top right corner of the pane to add a dashboard component, select gauge from the type list, set the name as “Temperature” set the data source to “datasources[“Weather”][“current_temp”]”, this will tell the gauge to draw the current temperature from the weather service. You should select some suitable min and max values depending on your climate. Click save and the gauge will be added to the dashboard.

Now repeat these steps to add another gauge to the outside pane for humidity using the datasources[“Weather”][“humidity”] data source, and add another pane and add gauges for the Dweet.io datasource’s temperature and humidity. You should end up with something that looks like this…

Continue to add components such as gauges, text, maps, sparklines, clocks and other types of widgets until your dashboard has everything you want to display. In my case I decided to add another data source to display a clock and also some indicator lights to provide alarms for certain conditions. The weather data source contains a fair bit of information if you dig through it’s raw object such as wind speed, and general conditions.

Conclusion

Overall Dweet.io and Freeboard.io offer an inexpensive route to getting your IoT devices online without having to deploy any servers or write any code, you can prototype decent looking dashboards in a short period of time and can be used by almost anyone regardless of skill level. Let me know in the comments what kind of dashboards you come up with for your IoT devices. You can check out my dashboard live at the following URL: https://freeboard.io/board/xVzIXf. If you want to give Freeboard.io without having your own IoT device surf the public “recently updated” listings on Dweet.io and try building some dashboards with other people’s data feeds, who knows what you might find.

2 comments on “Simple IoT Dashboards with Dweet.io & Freeboard.io

  1. -

    Hey Robert,

    Great Post.

    I’m going pretty much down the same road, but I would like to get the dashboard data straight out of mysql. This is mainly because I want to be able to chart for different time intervals. While investigating, have you found a dashboarding tool that could do something close to that?

    Best

    • - Post author

      Hey Tiago,

      You are probably better off using some JS library and PHP or some other language to pull the data out of the MySQL DB and display it using some custom code… Google Charts API is great for fancy looking graphs or there are some self hosted ones such as chart.js if you’d prefer self hosted. Another option is to ditch MySQL and use some swanky new age time series data store such as Graphite, this has a HTTP API you can interact with and has some fancy graphing capabilities using Grafana or it’s built in web console.

      Best Regards,

      Rob

Leave a Reply

Your email address will not be published. Required fields are marked *