Category Archives: node-red-contrib-ui

A successful Techy Day

So much going on today I thought I’d put the lot into one blog entry.

So, I’ve spent the day with my pal playing with one of several IOT solutions – familiar to regular readers – node-red-contrib-ui. This just keeps getting better.

tmp6D4ASo we spent our afternoon getting to grips with the new “template” node which Andrei the designer has been improving recently. We wanted an RGB controller which the UI does not (did not) currently feature. Getting to grips with Angular and how it interfaces with the UI is proving a challenge but the long and short of it is (I know a couple of you are about to get excited) – we have a working RGB controller.

Here it is. Just ignore my FREDDY experiments and the pretty coloured line of buttons…

Well, no, don’t ignore the buttons – I’m finding increasingly frustrating to have to use the big but still limited range of ANGULAR icons – so I’m about to write off to Andrei to see if we can maybe trap HTTP in the icon description to allow us to use any arbitrary online PNG file – preferably transparent ones – imagine you have a row of buttons for +, minus and auto.  The Angular icons do + and -  but how on earth do you represent “AUTO” – I could think of a 1000 examples where you just can’t do it with a limited set of icons… so that needs work…

Update 31/12/2015 – It is now my understanding that soon we will have the ability to use our own images as well as an expanded library – that is just excellent!!!

However I digress – see the bottom line – RED GREEN AND BLUE controllers (ignore the yellow, I’m experimenting). On the right is a BLACK BLOCK which changes colour as you move the sliders. So this TEMPLATE node in Node-Red UI- and this is all down to Andrei, has an input and an output – the output puts out  JSON string with R G B values…. the input expects msg.payload.r, msg.payload.g etc… well I didn’t have a CLUE how to do that so again Andrei helped. So here I will show you an example of use –, the template node and the input to manually set the controls. I CAN CONFIRM that all of this mirrors perfectly if for example you have this running on 2 phones at once – they remain in sync perfectly!!!!  This is just so good!


So above you see an inject (ignore the timestamp) – the function will set up 3 values to put into the template to affect the sliders – so for example you can set up initial conditions.

msg.payload = {
  r: 10,
  g: 50,
  b: 100

return msg;

So there’s an incoming payload which we’re going to ignore – the bit I was not sure about was adding new stuff – ie msg.payload.r  and again Andrei came to the rescue – you’ll see I’ve initialised RGB values and then proven to myself that you can quickly alter them before sending MSG off to the template node. The output of the template node goes off in this case to a DEBUG node and there’s a JSON string with RGB values going out (that might be used to populate a global variable and off via MQTT to some RGB lighting).

Here is the content of the template.

<div layout="row" layout-align="space-between center">
    <md-slider ng-model="msg.payload.r" ng-change="send(msg)" flex="30" min="0" max="255" class="slider-red">
    <md-slider ng-model="msg.payload.g" ng-change="send(msg)" flex="30" min="0" max="255" class="slider-green">
    <md-slider ng-model="msg.payload.b" ng-change="send(msg)" flex="30" min="0" max="255" class="slider-blue">
    <div style="width: 32px; height: 32px;" ng-style="{'background-color': ('rgb(%d, %d, %d)'|sprintf:msg.payload.r:msg.payload.g:msg.payload.b)}">

(function(scope) {
    scope.$watch('msg.payload', function (v) {
        if (!v) scope.msg ={ payload: {r:0, g:0, b:0} };

    .slider-green .md-track-fill {
        background-color: green !important;
    .slider-green .md-thumb:after {
        background-color: green !important;
        border-color: green !important;
    .slider-blue .md-track-fill {
        background-color: blue !important;
    .slider-blue .md-thumb:after {
        background-color: blue !important;
        border-color: blue !important;

What you have there is not only the RGB controls – but all you need to know in order to make any custom system you like which has INPUTS and OUTPUTS. This is so very useful.

So there you go – a great new UI gadget.

Strangely enough – I needed that bit of knowledge about adding stuff to MSG as today another pal of mine pointed me to an ANDROID/IOS App called OWNTRACKS. It has a lot of uses but one of it’s features allows you to set up your phone to send regular LONGITUDE/LATITUDE messages to your own MQTT server.

Now, I went off on a crawl and found a NODE-RED node to do GEOFENCING – here it is.


So the ORANGE node is a node called GEOFENCE (node-red-contrib-geofence).  This is marvellous – so you feed it longitude and latitude and it compares against a set area and either passes the message through – or not.

On the left you see my MQTT node picking up a topic which I set on the phone. Next you see me convert the data to the right vars – exactly the same issue I had above so I killed 2 birds with one stone – here’s the function.

var fred=JSON.parse(msg.payload);

msg.location = {
  lon: 0,
  lat: 50

return msg;

So from my incoming MQTT in a format decided by the App, not me I’ve created 2 items which the geofence node understands – regular updates as to where I am.

Here’s the winner – the Geofence admin page when you click on the orange Geofence node.


This is so good I’m betting I don’t have to explain how it works – you simply put a square, circle or shape around a location, town, house or whatever – and if the incoming coordinates are in that area the whole message just gets passed through – if not, nothing gets passed through. There are other options!!

The obvious next move is a function with a check to ensure you were OUT of the area and coming IN and the string “I’m nearly home, get the kettle on” – passed to the speech system I showed you in my last blog. In my case I’d likely get beaten up for doing that but I’m sure you understand the MASSIVE potential for this.

Put welcome lights on when coming home, alarm the house when leaving etc etc etc… actually with an ESP8266 you could put the kettle on yourself!!! HEY that’s a good idea.

All of this takes only minutes to get going when you have info like this (I had to kind of fumble through much of it). You could use multiple nodes from the same MQTT input to do all sorts of analysis on movement. What’s needed next it really tmpFED7cheap GPS transmitters for the cats!! Just so many possibilities.

So – that was that – then when I got home tonight – the post was waiting for me.  This little number arrived in the post.. This bare board was less than £2 on Ebay…

Ok, it needs 2 MOSFETS, a couple of resistors (SMT) and a regulator and an ESP-12 and you have yourself a handy 0.1” centres development board – only for true soldering iron enthusiasts but I thought it would be worth having.

tmpD4F5As well as that, SEED STUDIOS sent me their LinkIT SMART 7699 board and a nice adaptor to go with it… I’ll have to write this up later when I get enough time to do it justice but on the left you see one of the little boards – it has 2 micro-USB sockets – 3 buttons (reset, program, user) and a WIFI module with lots of IO – the accompanying breakout board lets you do the whole thing with wires and connectors without going anywhere near a soldering iron.

Unlike ESPs (which are of course cheaper) these little devils run Linux!! Anyway, it’s late but here’s a link for interested parties..


And that is about it for one day. I’ve just found a cheap TIMER unit for my upstairs radiators so I can turn them off when we’re sleeping downstairs and by the time that turns up I’ll have a very pretty mobile application for my good lady to control the heating with.

Good night, all.


Pm2, Node-Red and the Rock

Well, this isn’t really about the Rock – but does this scenario mean anything to you? You’ve installed Node-Red on a new setup of Debian… and while it has always worked in the past, it just isn’t having it – you can run manually but attempts to run at powerup fail miserably?

The usual sequence of commands assuming you use PM2 to start up Node-Red is this…. and it is what I use in my scripts. I’m assuming ROOT user here.

cd /root
pm2 start /usr/local/bin/node-red -- -v
pm2 save
pm2 startup

It has worked a treat on countless installations so I’ve never thought twice about it.

So the first shock when installing Node-Red on not a Raspberry Pi but a ROCK – using Debian Jessie was that Node-Red wasn’t there.

which node-red

Well, that solved that – it is stored at /usr/bin/node-red

And that was fine – pm2 start /usr/bin/node-red would start up Node-Red (followed by “pm2 save”) but it STILL would not come up at power-on.

I scoured the web and just as when my Samsung S4 started to fail, I found all sorts of witchcraft out there until finally I came across an item specifically referring to JESSIE.

So here’s the solution that worked for me.

I went into /etc/init.d and DELETED the original pm2 file in there…

and did this..

pm2 startup systemd –u root

If not using root you might want to change that last bit.

And then started Node-Red as before…

pm2 start /usr/bin/node-red

pm2 save

I rebooted the Rock – and…. voila – one working Jessie Node-Red installation.

Why did I bother with all of this? Well, my Raspberry Pi installations are generally way over the top with databases and all sorts… and… it occurred to me that as I save variables in a JSON file, for the likes of my thermometer and control system – I really don’t need all that and I don’t want the worry of database systems wearing out my SD – so an absolute minimal system – Node-Red (without verbose logging), Node-Red-Contrib-UI and not a lot else – I want my Thermostat to work year in, year out, not just a few months!

Did I say UI there?  Until someone else comes up with a fix for the Blynk node being less than 100% reliable, it is going on the back boiler.

For Christmas I received a nice home weather centre, touted a “full colour”. Well, of course it isn’t – it’s just a clear LCD with black lettering and a nice set of coloured imagery in the background and that started me thinking – I wonder if it would be possible to put full-width backdrops into the DIVs in the UI. I’m about to drop Andrei an email Smile


Node Red UI

tmp924AIn my last blog item, I wrote about the IOT-Manager App for Android – much to the annoyance of a pal of mine who uses Apple (snigger). Among the replies was the questions “have use you used “node-red-contrib-ui”?

This was something I looked at when it first came out and dismissed due to lack of function. Well that has changed a lot and this is now well worth a look.

tmp44C4So this add-on for Node-Red – which I am running on a Raspberry Pi right now (waiting for my ROCK to arrive) shows some promise right now and potentially a LOT of promise.  So what you get is a number of nodes to make up a GUI and you access this on your PC by simply adding /ui to the normal Node-Red admin address (I’m not seeing any signs of password protection and that could be a problem)  – it really is that easy.

So the nodes you get are good – there is a graphing function, there are buttons, text,little up-down buttons of the type I’ve been begging for in BLYNK, sliders… this really has promise and importantly the nodes have inputs and outputs so you can force the values of the various controls.

However, apart from graphs, where this package appears to have limits are in two areas – the first is not a deal-breaker – styling – it’s all a little plain – but that’s ok, we can live with that. The second or so it seemed at first – is lack of gadgets.. i.e. gauges, LEDs etc.

But just hold on – there is a node called paragraph. On the surface you can inject a msg.payload into it and surround it by HTML. And that’s fine – not sure how you might use “includes” in there which would be a game-changer – but in the INFO it says “The Template can contain any valid html and angular/angular-material directives. You can use this node to create a dynamic user interface element that changes it's appearance based on the input message.”

I don’t know about you but my heart skipped a beat at this point –

tmp533AI looked up Angular and at first went off on a tangent with this – ok – so how is Google supposed to know I wasn’t after “angular gauge” – as it happens – I was.

I eagerly loaded in the includes into the node window– and the script and the html and… nothing… zilch.

So clearly – it’s not QUITE that simple.

I know nothing about Angular so I went off in search of more info. I could find nothing about the actual node itself – indeed there is not much out there at all about node-red-contrib-ui.

tmp163DThere is of course also HICHARTS which has some of the most wonderful charting on the planet and a GUAGE

But how would you get that into this “Paragraph” node…..

LEDS are easy – using the “moustache” mode it would be trivial to grab some LED images and indeed I’ll have that done by tonight.. but the gauges… must have gauges.

As I write this I’m talking to Andrei and already have programmable images – and I’m almost there with a simple gauge… more soon… watch this space.

So in my setup on the Pi, there is a directory /root/.node-red/node_modules/node-red-contrib-ui/dist

In that directory is the index.html file which makes the UI. You can refer to other files in that directory or those below it – so I created an “icons” directory with some images – and put this code in the “paragraph” node.

<div layout="row" layout-align="space-between">
    <p >
       <img height="32px" ng-src="{{(msg.payload||1)==1 ? 'icons/light1.png' : 'icons/light0.png'}}">


tmpB5F9I fired topic:”the topic” and payload:1 and lo… as you can see on the right my little red image came up – had I put 0 in the payload – a green icon would have appeared. I need to work on the styling so the image comes in line with the text but that is just MARVELOUS.

The gauge is coming somewhat more slowly… I now know that in that same directory you can put an html page with whatever it needs to return a gauge (jQuery etc) and you can pass a parameter. Here is an example – I won’t show you the actual page as it’s a mess and needs a rethink but the mechanism seems sound..

<iframe frameborder=0 scrolling=”no” ng-src=”{{‘test.html?val=’ + msg.payload}}”></iframe>

In the actual page you need to be able to get the command line argument and push it into your graph code… when I get something that looks nice and works efficiently I’ll put something in here – I’m sure Andrei is working on doing this PROPERLY but as a short term measure this will work and of course there are possibilities other than gauges. I should stress I have this kind of working – I’ve ONLY tested this on my PC and Samsung S4 and it works on those.

This could open up a lot of doors…  

Andrei – more inputs please – keep em coming – you’re doing a marvelous job and thanks for answering my silly questions.