Even More Node Red Contrib UI

As I write this – several conversations are going on around node-red-contrib-ui – and in the process I’ve found issues with the security setup in Node-Red itself – which have been fixed. Since I started this – the designed of the UI has responded to requests for gauges and a form of LED  – so here is the current state of play.

Firstly let me show you my current Node-Red setup for the UI

This will soon pale into insignificance as I add RGB lighting,  zone-dependent heating, security and other controls but not until I’m sure the web access is reasonably secure. Meanwhile, as you can see over on the top right there are a couple of experiments going on – but the main section is that attached to the 2-second injector.  I store my heating information in global variables in Node-Red so that any page can interact with them. I already have a decent NEXTION display for locally controlling the heating – but I’ve been struggling to get what I want in terms of a mobile interface.

At the end of the day today it is now possible to have password protection on both Node-Red editor – AND, separately on the UI itself – though for now, Microsoft’s EDGE seems to screw this up – but Chrome works perfectly.  The UI is not yet the prettiest or most polished – BLYNK for example looks a hell of a lot nicer – but this works. With Blynk you can’t even fire back at the buttons to predefine their state – here you can.

So the way I’ve implemented this – every 2 seconds (I could probably make it every second) I update the display. At this time there does not seem to be a way to tell if the UI is actually in use – perhaps the author might think about that – as it would save some processing not to update the UI when it is not in use though it is working just fine. Everything from temperature, through humidity, peak, off-peak, frost and hold as well as the time settings for my stat are sent to the display regularly and if any changes are made in the UI (up-down buttons pressed – that reflects in changes to the actual global variables.

No longer do we need cluged GAUGES as Andrei has kindly added them in. LEDs are engineered using the many ICONs available in the system. If you look at the HEAT and HEATING items above  – the orange function is as follows…

var stat=context.global.stat;
msg.topic=”Heat”;
msg.payload=stat.heating;
node.status({fill:”blue”,shape:”dot”,text:”Heat ” + msg.payload});
return msg;

As you can see – I grab the global variable for heating (the first line brings “context.global.stat” into a local pointer to save my typing) and populates msg.topic with “Heat” and msg.payload with “1” or “0” – that is passed onto the PARAGRAPH node which contains…

<div layout=”row” layout-align=”space-between center”>
    <p flex>{{msg.topic}}</p>
    <ng-md-icon icon=”wb_irradescent” ng-style=”{fill:msg.payload==’1′ ?’red’:’black’}” size=”32″></ng-md-icon>
</div>

So the text to the left will get “heat” – from the moustache input – and will use the internal icon “wb_irradescent” icon (no that’s not a spelling mistake – well, not mine anyway) and either present it in red or black depending on whether the heating is actually on or off.

The result is shown below.

The rest of the nodes are this simple or more so – mostly just used as intended.  I’ve asked that the spacing be considered – I think the lines are too far apart – and I’d love to see some theming options without having to delve into CSS… but remember – like my own Node-Red nodes – this stuff is free so we can do best to simply encourage Andrei to keep up the good work and develop this further – as it is, it is usable but for the security issue referred to above – and I’ve passed that question back to the Node-Red designers who likewise are making no charge for this and by the look of it working very hard to make the excellent Node-Red even better.

If terms like “msg.topic” etc mean little to you – go check out NODE-RED on Google. I’m using this on a Raspberry Pi 2, controlling little ESP-8266 units by MQTT (check out MOSQUITTO). Also see BLYNK, NETIO and other visual interfaces I’ve referred to in other items in this blog. Most are in active development, who knows which ones will win.