28 April 2015

Discovering freeboard.io

- A no-hassle dashboard for the Internet of Things -

Recently I have spent some time exploring data visualisation solutions for the Internet of Things. In this post I am introducing two siblings, freeboard.io and dweet.io. The former is the dashboard, the latter is a simple data broker. Both are developed by Bug Labs and they are Made in NY. To keep this post short I’m covering only the basics and leaving the more advanced features to a future post.

A connected weather station

As an example, I took a hypothetical weather station reporting temperature and humidity measurements. The report could look something like this in JSON:

{
  "temperature": 21.5,
  "humidity": 65
}

The data broker

Next, I needed a service to store my weather data (this is called the data broker in the classical IoT architecture). To keep things simple I used dweet.io which is a Twitter-like messaging service for connected devices. I cover only the basic use of dweet.io here but it’s worth visiting their website for the detailed documentation.

To dweet a piece of information (i.e. a key and value pair), I simply call the following URL, where my-thing-name is my thing name:

https://dweet.io/dweet/for/my-thing-name?key=value

Naming the hypothetical weather station ws.001, it is easy to dweet from the command line using cURL:

$ curl https://dweet.io/dweet/for/ws.001?hello=world

{"this":"succeeded","by":"dweeting","the":"dweet","with":{"thing":"ws.001",
"created":"2015-04-25T19:38:08.938Z","content":{"hello":"world"}}}

The output above suggests that everything went fine, so visiting the following URL in a browser shows what ws.001 had to say:

http://dweet.io/follow/ws.001

Sending the JSON message above with temperature and humidity values goes like this:

$ curl -H 'Content-Type: application/json' -d '{"temperature": 21.5, "humidity": 65}' https://dweet.io/dweet/for/ws.001

{"this":"succeeded","by":"dweeting","the":"dweet","with":{"thing":"ws.001",
"created":"2015-04-25T19:45:54.318Z","content":{"temperature":21.5,"humidity":65}}}

Bug Labs provides a good introduction to their service at the website with more details.

The dashboard

Having the data broker sorted out I could move to visualising my weather data on freeboard.io. The service requires signing up first. After logging in it offers a brief tutorial about the its user interface. It takes about 5 minutes to complete, it’s worth following it through.

In freeboard.io there are three basic elements used to build a dashboard:

• Datasources fetch data from an external place. It can be a data broker service (dweet.io, FI-WARE Orion or PubNub are supported), some JSON content from an HTTP server or a piece of JavaScript code.
• Widgets display data in some textual or graphical form. Supported widgets types are text, gauge, graph, indicator light and even a Google map insert to name a few.
• Panes contain widgets to make your dashboard organised and neat.

It’s easy to build a simple dashboard for the weather station example in a few steps. First I created a new dashboard named “Weather Station” by using the “Create New” button On the My Freeboards page.

Then I added a new data source for the dweets of ws.001:

If the datasource works, the Last Updated field on the list of datasources shows when it was connected last time.

Next I added a new pane to the dashboard, then a new widget to the new pane displaying the temperature value of the datasource:

After creating a text widget for the humidity values the dashboard looked like this:

When the datasource receives new data from the device the dashboard gets updated immediately. It’s easy to test this with cURL:

$ curl -H 'Content-Type: application/json' -d '{"temperature": 27, "humidity": 67}'  https://dweet.io/dweet/for/ws.001

{"this":"succeeded","by":"dweeting","the":"dweet","with":{"thing":"ws.001",
"created":"2015-04-27T15:22:51.036Z","content":{"temperature":27,"humidity":67}}}

I created a more complex example using more widgets here.

Posted by TBo