Tag Archives: Node-Red-Contrib-UI

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;
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>

tmp9001So 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.


More Node Red UI

Updated 01/11/2016: Node-Red-UI is of course now Node Red Dashboard - you might want to check out the updates

Andrei has now added the gauges below natively to node-red-contrib-ui so my code below is of use only if you want to add something different – though the LEDs are still useful until he adds something to the package to do pretty lights.

In my last blog I touched the surface of Node-Red-Contrib-UI  - an add-in for the increasingly popular Node-Red – in my case running on a simple Raspberry Pi (but of course you can run it on a PC etc).

node-red-contrib-uiThe UI software comes in at a time when several vendors and enthusiasts alike are scrambling to come up with a mobile interface for IOT – the Internet of Things. Every last one of them has benefits and issues. NETIO is a venerable interface which is currently languishing or so it seems with no new features of any significance for some time. It does, however have some nice widgets.

jQuery Mobile presents some options – and that is fairly easy to implement though much more DIY than others. Blynk is coming along and offers a VERY pleasant interface – but it is UTTERLY non-user-expandable and I’m not 100% sure I believe that it will continue to develop at the current page forever – until now it was my current “best hope” and possibly still is – but I cannot yet get 100% reliability using it with Node-Red – and some widgets I think are relevant are on the back boiler for the designers. Who can tell which will succeed.

And then one of our readers had me take another look at node-red-contrib-ui – I won’t go into that as it is in the last blog entry (I suggest you read that first).

Something that caught my eye was a node called “paragraph” which would let you put in html – and which would accept parameters. It has all the makings of a useable “block” to make your own widgets and that is how I like it – the designer was MORE than helpful when I came up with newbie (dumb) questions and that for me builds a little loyalty.

So – the PARAGRAPH node basically opens up and lets you put in your own code with limitations which will hopefully go away. In the last blog I showed how to put a LED indicator and description into a node – and also discussed pulling in information from a web page with parameters.

And this is where jUSTGAGE comes in. www.justgage.com

Go to their website and you will see a beautiful gauge – and a deceptively simple web page (which I will call gauge.html) to display it.

Clearly having the code on your own computer is best so I grabbed the ZIP file and put the contents in a directory called justgage under the main UI folder (see last blog). I took their example and put it into a web page in the main ui (/dist) directory. I ran it and… nothing.  The version numbers for includes were wrong – and indeed just different so watch out for that – this is what i finally ended up with…

<script src="justgage/raphael-2.1.4.min.js"></script>
<script src="justgage/justgage-1.1.0.min.js"></script>
<div id="gauge" class="200x160px"></div>
var g = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Visitors"

And that’s all well and good – if you like a fixed gauge that doesn’t do anything  Smile

The next stage was to add in the code which would let me modify parameters… but first what doe this look like when you put it into a PARAGRAPH NODE. This isn’t as complicated as it looks – I needed to pass the title for the gauge, the min and max values and the actual value.

Here’s the code for the “gauge” node below (in a paragraph node)…

<iframe frameborder=0 scrolling="no" height="200px" ng-src="{{'gauge.html?min=0&max=40&title=Inside Temperature&val=' + msg.payload}}"></iframe>

The paragraph editor puts a red cross on this – but trust me it works – and if anyone knows how to get rid of the editor objection, let me know.

Of course the web page code now needs to be able to handle those parameters (in this case “val”, “min” etc)

Here is a modified version of the above code in the page “gauge.html” to handle parameters.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="justgage/raphael-2.1.4.min.js"></script>
<script src="justgage/justgage-1.1.0.min.js"></script>
<div id="gauge"></div>
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');

if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];

var g = new JustGage({
id: "gauge",
value: getUrlParameter('val'),
min: getUrlParameter('min'),
max: getUrlParameter('max'),
title: getUrlParameter('title')

tmpE1C8You could go chose to use a local copy of jQuery – I chose to use an online version (after all if the Internet connection isn’t working – you’re not going to be able to access this anyway!)

And it works – the sky is the limit – BUT the iframe is not ideal – the gauge refreshes completely every time you put a NEW (changed) value in – NOT satisfying – if nothing else however I may have given others some ideas – who can come back to me with a “much better way”.

In the case of a gauge we really need this built into node-red-contrib-ui along with input value, title and colour values along with min (which should optionally be minus) and max.

Scargill test node-red-contrib-ui moduleI did ask if any of you CSS types know where to look to slightly reduce the gaps between items. If you look at the display below – there’s a lot of wasted space.. I believe this has now been fixed by Andrei – the author of nod-red-contrib-ui

I’m showing here on the left my first attempt at actually doing something useful with this – thankfully on my thermostat system I keep all live information in a global object so it is easy to access on any page.  The panel on the left is actually working – adjusting the temperature up and down reflects in my Nextion LCD panel as well – so already this is a usable App.

This is VERY much a work in progress but to get the imagery you see on the left and an additional graph – I’m showing my flow page for node-red-config-ui as it stands.



Peter Scargill experimenting with Node-Red-Contrib-UI


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.