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

The 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>
<script>
var g = new JustGage({
id: “gauge”,
value: 67,
min: 0,
max: 100,
title: “Visitors”
});
</script>

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

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>
<script>
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split(‘&’),
sParameterName,
i;
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’)
});
</script>

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

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