If you are looking for a quick and powerful way to visualize your IBM Watson IoT device messages using MQTT, I would highly recommend trying out freeboard.io. It is 100% open source and they even provide free online hosting if you do not wish to host it yourself.
You can see my live demo of my IoT freshwater aquarium dashboard on freeboard.io here: https://freeboard.io/board/l1XbFY
Unfortunately, there is no direct integration from Freeboard.io to support MQTT, but luckily they have a javascript developer console where you can integrate to anything! I have taken the Paho MQTT client and some similar open source code to make it work for my purposes. You can see the code here:
If you would like to use this custom plugin, here is how to hook it up.
- Make sure you are signed into freeboard
- Click “Developer Console”
Freeboard.io Developer Console - Add the following two plugins and then click OK:
- https://rawgit.com/benjaminchodroff/freeboard-mqtt/paho-mqtt-default/ibm.iotfoundation.plugin.js
- https://rawgit.com/benjaminchodroff/freeboard-mqtt/paho-mqtt-default/paho.mqtt.plugin.js
- Under datasources, click “Add” and select the new “IBM IoT Foundation” datasource
- Configure the new datasource with your details, including which device to listen to
Watson IoT Freeboard.io Configuration Now that your Datasource is configured, you should start to see it update automatically every time a new MQTT message is received. You can add widgets which can visualize this data by adding a Pane, then adding a widget, and then selecting data from your MQTT message.
I would recommend using JSON encapsulated messages so that it is easy to extract and manipulate the data. For example, I have a message which contains the pH of water and I can add this to a widget by using the value:
(datasources["IOT"]["b827eb14cce9"]["water_ph"]).toFixed(2)
