nodeRED and creating end-user UIs

The #IoT world is spawning some nice new gizmos at the moment.  For me as a systems guy, one of the most important is @nodeRED, “a visual tool for wiring the Internet of Things“, recently launched by @knolleary and team at IBM.

In my world of IoT systems development the key features of nodeRed are:

  • its ability to talk a lot of protocols
  • its ability to implement rules (via “functions”)
  • its light weight (runs just fine on ‘Pi and ‘Bone) and
  • its openness and extensibility.

OK, so it doesn’t do websockets at the moment.  Not a problem, I added a couple of “nodes” that do that via a proxy so we’re up and running.  It would (currently) struggle with a large number of nodes and functions (rules). Not a problem, it will be easy to link in other subsystems and rules engines.

And another thing I should mention as an early-adopter: the turn-around on issues is impressive.  I found a few and was pleasantly surprised when they were fixed within hours.

There are already a few very useful blogs out there and I won’t repeat all that here, not that I’ve done all those things myself.  See these:

As we all know, the IoT must include people so we need to be able to hook end-user interfaces into a nodeRED flow.

One possibility is to pair nodeRED with something like OpenRemote.  However, after looking into that I decided it did not give enough flexibility.  Given all the great tools around jQuery UI, the benefits of a ready-made system are not that significant unless home entertainment is your focus.

So I’ve augmented the basic nodeRed with a user control panel.  This is important for me as I am current testing a system that is based on an #MQTT bus.  I need to be able to prod it and poke the system and nodeRED looks ideal for that given a few extensions.

Now nodeRed does have “inject” and “debug” which provide user interaction.  These are for developers of course, not end-users.  Even for devs, we need a method of control that does not require re-deployment and we need a more visual way to monitor what’s going on.

The solution is an html page which talks to nodeRed via a pubsub protocol.  Right now I am using faye, courtesy of @jcoglan.  This is based on websockets and implements the bayeux protocol.  I have written “nodes” fayein and fayeout for nodeRED and will publish these when they’re stable.  These are both clients and need a broker running in the background, just like MQTT does. So you fire up the faye server before using nodeRED with these nodes.

This is what a control panel looks like when making use of jquery ui and plugins on top of that. I have juxtaposed it with the node UI as you would need for testing.  Once tested the user would just get their control panel. As you can see, this one is mobile-sized.  With Phonegap it could be converted to a native phone app.


The above user UI elements could be auto-generated (next project) although these were hand-written.  They include switches and sliders for input and dials and lamps for output.  In this example I have used sliders doubling as dials to save space and all these controls are useful for both input and output.

BTW. You can do part of this with httpin.  However, as httpout does not (yet) support pubsub to a browser I preferred that both input and output work the same way, hence using faye for both.

For the demo I added two other hacks:

  • a jQuery button that looks like an electrical switch;
  • a modification to inject to allow it to generate random temperatures (easier than hooking up a sensor when testing the flow).

As you can see, the flow to implement thermostat functionality is very simple. The thermostat “function” just compares the temperature with the current set-point and sends out a command to the heater/ boiler.

I have also tested this with some other devices connected via MQTT.  These are easily hooked into the above nodeRED flow. Similarly one could easily send the data to xively and pull it back into a graph.  This would be a separate control panel element connected to xively via websockets. (I use highcharts or flot for this, configurable with jQuery.)

The next task is to extend this demo to more sensors and actuators using all 8 controls.  I’d also like to generate the dashboard html and specific .js automagically with server-side scripting to create a desired number of controls of each type.

I’ll report back here with more info after I use this on my real project and knock the wrinkles out of it.

Comments are closed.