Freeboard has been on my "list of dashboards to test" for a while now, and I finally got around to it because I recently discovered that AL S-M had created an MQTT plugin for it.

Freeboard runs in your Web browser and has a number of data sources from which you can chose, including a generic JSON plugin which reads an HTTP URL for its data. After installing the Freeboard MQTT plugin as per instructions (make sure you get the development version of mqttws31.js!) we're ready to go. For posterity, this is how I patched index.html:

--- index.html.orig   2014-11-12 17:01:37.000000000 +0100
+++ index.html 2014-11-12 17:02:22.000000000 +0100
@@ -11,6 +11,7 @@
     <script src="js/freeboard.thirdparty.min.js"></script>
     <script type="text/javascript">
         head.js("js/freeboard+plugins.min.js",
+      "plugins/mqtt/paho.mqtt.plugin.js",
                 // *** Load more plugins here ***
                 function(){
                     $(function()

I also placed the plugin and the Paho MQTT JavaScript client here:

plugins/mqtt/mqttws31.js
plugins/mqtt/paho.mqtt.plugin.js

and modified paho.mqtt.plugin.js as follows:

--- plugins/mqtt/paho.mqtt.plugin.js.orig 2014-11-12 17:02:31.000000000 +0100
+++ plugins/mqtt/paho.mqtt.plugin.js   2014-11-12 17:33:12.000000000 +0100
@@ -10,7 +10,7 @@
        "display_name": "Paho MQTT",
         "description" : "Receive data from an MQTT server.",
        "external_scripts" : [
-          "<full address of the paho mqtt javascript client>"
+          "plugins/mqtt/mqttws31.js",
        ],
        "settings"    : [
            {

For test purposes, I added three MQTT sources (called Paho MQTT in the plugin). The first looks like this:

OwnTracks data source

You'll note that the port isn't your typical MQTT TCP port but rather a Websocket port such as that provided by Mosquitto's Websocket code. It's also here, whilst configuring the data source, that you specify the topic the plugin will subscribe to, and you specify JSON messages if the messages contain JSON.

source

When adding a pane, you specify the data source and data element you're interested in. As an example, I'm using the OwnTracks JSON format to show the value of altitude in a sparkline, so I configure the value as shown here. (I will not confess as to how long it took me to find out how that works.)

datasources["OwnTracks"]["msg"]["alt"]

In other words, ["OwnTracks"]["msg"] is the JSON payload received in the message, and ["alt"] is the JSON element therein. If you specified your payload as not being JSON, the value is in

datasources["DataSourceName"].msg

dashboard

I rather like the resulting dashboard. I can drag the widgets around, and I can save the dashboard (as a JSON) file to later reload that. (I can't get the Save to work in Safari.)

Related:

Flattr this
Dashboard, MQTT, and JSON :: 12 Nov 2014 :: e-mail

Comments

blog comments powered by Disqus