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.
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
svgdash/smtp0) to name the SVG object.
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
An MQTT client publishes to a specific topic, with a JSON payload containing something like this:
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