Blinking dashboards turn me on. Really. I love seeing things move and blink.

Andrew Hazelden's post on monitoring a solar hot water system using a dashboard created in SVG made a deep impression when I saw it, and I've been meaning to experiment with that. As I've been doing things with MQTT, I thought I'd finally give it a try, swiping bits of code created by Robert Hekkers.

What I have is an SVG file which can be updated in real-time using socket.io. A Web browser loads an HTML resource from a Web server. A bit of JavaScript in the page connects to a socket.io process and awaits data. On the other side, we push data into that socket, and the JavaScript tweaks the SVG to make things do "blinkenlights".

The SVG is scalable (the 'S' in SVG'), so I can zoom into it:

I drew the SVG with Inkscape, using its "XML Editor" to change object identifiers to something that makes sense to me. I'll be using the second level of the MQTT topic (e.g. svgdash/smtp0) to name the SVG object.

Furthermore, in the XML, I specify a type for the object: "num" will be a numeric value, and "slider" is a bar with a maximum width of "maxw", which will be displayed to show a particular level. The following example shows a "slider" for an object called "smtp0" (the left-most SMTP server in the SVG). Note the "maxw" and "type" elements I added manually

<rect
       style="fill:#e0e5de;....."
       id="smtp0"
       width="35.75985"
       height="10.547414"
       x="213.35257"
       y="640.42432"
       inkscape:label="#rect3549"
       type="slider"
       maxw="35" />

An MQTT client publishes to a specific topic, with a JSON payload containing something like this:

{
 "msg" : "ok",
 "status" : 0,
 "level" : 4193
}

The "msg" is a string which should probably be displayed on the SVG object. (Here I show it on the top left.) "status" is a Nagios/Icinga-type status (OK, WARNING, CRITICAL). "level" is used to fill objects of type "slider" or to post literally as text on objects of type "num". You get the idea. I hope.

If I add a component to the network, I simply choose a new topic, update the SVG, refresh the Web page, and that's it. Nice. Of course, if I were half a designer/developer, I could use something like the beautiful Raphaƫl to do this "electrically".

The code I have is up for grabs, so do feel free to improve on this. Enjoy!

Update: watch the blinkenlights

Flattr this
MQTT, SVG, and Node :: 22 Apr 2013 :: e-mail

Comments

blog comments powered by Disqus