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

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

Facebooktwittergoogle_pluspinterestlinkedin

9 thoughts on “More Node Red UI

  1. I have a simple page that populates with my sensor data, updating live and adding divs as sensors come online connecting to my Mosquitto server, with websockets enabled.
    Rather than use an iFrame, I just add or replace using jQuery. Here's the relevant bit that does the heavy lifting:

    I have a unique ID based upon the sensor's ESP8266 id number, so I name a jQuery selector using that:
    var selector = $('#' + sensor);
    I also create a string (like your paragraph node) that contains the DIV id the same way, followed with HTML for the contents:

    var divText = '<div id="'+ sensor +'" [the rest of the HTML that builds the div…]

    To see if the div exists, I check its length. If it does, I replace it. If not, I append it:

    if ((selector).length){
    $(selector).replaceWith(divText);
    }else{
    $("#ws").append(divText);
    };
    It all works quite reliably.

    I think I'll make a version using the gauges you wrote about. After I do that, I can make the code available to you, if you're interested.

    1. Hi Jim - well, so I think I need to see that in action but YES I AM DEFINITELY INTERESTED. I've moved on a little in that I now pass not only the value but min, max and title... I'll update the blog to show this.. the IFRAME is definitely not the solution because you can see the updates (thanks to cacheing I've realised you only see them when the value changes - but even then - it's a big overhead to update the lot every time and I would rather keep everything within Node-Red if possible.

      I think the paragraph node (it isn't mine - I'm using and exploring node-red-contrib-ui - I didn't write it) is the only option we have right now for exploring this stuff.

      Over to you - you have an eager listener...

      1. Hi Pete, Looks like Andrei has done some changes. I've just pulled in a new copy and restarted nodered. there is now a gauge and Radio button. A quick test with inject and the gauge works.

        P.

  2. I am trying to install your library, amazing work by the way. I am encountering a problem though..

    Just ran your install script, it worked fine and node-red is booted up. I uncommented the line os:requireos then deleted the bonescript/johnnyfive lines.

    I have ran " npm install node-red-contrib-ui" which seems to work fine, however there are no ui tools on my node-red and when i go to localhost:1880/ui I simply get "Cannot GET /ui"

    Apologies for the length but I have included all output from the console after installing your node and starting node-red

    please help, I really want to use the library

    pi@raspberrypi:~/.node-red $ npm install node-red-contrib-ui
    node-red-contrib-ui@1.2.19 ../node_modules/node-red-contrib-ui
    ├── serve-static@1.10.2 (escape-html@1.0.3, parseurl@1.3.1, send@0.13.1)
    └── socket.io@1.4.5 (has-binary@0.1.7, debug@2.2.0, socket.io-parser@2.2.6, engine.io@1.6.8, socket.io-adapter@0.4.0, socket.io-client@1.4.5)
    pi@raspberrypi:~/.node-red $ node-red-start

    Start Node-RED

    Once Node-RED has started, point a browser at http://10.0.0.22:1880
    On Pi Node-RED works better with the Iceweasel browser

    Use node-red-stop to stop Node-RED
    Use node-red-start to start Node-RED again
    Use sudo systemctl enable nodered.service to autostart Node-RED at every boot
    Use sudo systemctl disable nodered.service to disable autostart on boot

    To find more nodes and example flows - go to http://flows.nodered.org
    You may also need to install and upgrade npm
    sudo apt-get install npm
    sudo npm i -g npm@2.x

    4 Feb 19:17:56 - [info] Node.js version: v0.12.6
    4 Feb 19:17:56 - [info] Loading palette nodes
    4 Feb 19:18:11 - [info] Settings file : /home/pi/.node-red/settings.js
    4 Feb 19:18:11 - [info] User directory : /home/pi/.node-red
    4 Feb 19:18:11 - [info] Flows file : /home/pi/.node-red/flows_raspberrypi.json
    4 Feb 19:18:11 - [info] Server now running at http://127.0.0.1:1880/
    4 Feb 19:18:12 - [info] Starting flows
    4 Feb 19:18:12 - [info] Started flows
    Started Node-RED graphical event wiring tool..
    Started Node-RED graphical event wiring tool..

    1. Not my library - you should get in touch with Andrei. If you look up the GIT pages for the node-red-contrib-ui - you'll find ISSUES and you can add an issue there. I'm not seeing anything there that would stop the UI from appearing...

      Pete.

Leave a Reply to Jim O'Connell Cancel reply

Your email address will not be published. Required fields are marked *