Category Archives: node red ui

When writing that last blog entry about an LCD with time and date display and programmable temperature for Node-Red Dashboard, it occurred to me that it would be worthwhile making a simple one-liner (6*1) LCD with a 20-character display. At the same time I wanted to simplify it right down and here’s the result. Should make a good starting point for anyone wanting to develop their own.

In this case you simply fire a message at the template node. You only need one font for this from the ones used in the previous entry (really you should read the previous article to understand how to load the fonts in – trivial).

I’ve done a check on msg.payload and if the first character is a period I then use the remainder of the message to select colour – hence…

And that really is it – really simple to use – make the template 6*1,insert the code, make sure the font is in place and when you run it – you can select the sample text or play with the colours – enjoy.

Well, it looks like my revelations with hiding the mouse has upset WordPress – the previous blog on the subject makes some people’s mice disappear! Good job I wasn’t testing a self-destruct button.

It’s been a good day today – I discovered SLACK and I’ve been happily chatting to folk about my Node-Red-Dashboard issues and at the end of it all, not only have the issues gone away but I’m making progress.

So – there are a couple of things to notice and some you won’t.

So firstly – my button experience until now on Node-Red-Dashboard has been blighted by a SWIPE command which meant if you pressed a button near the right of the screen and in any way slid your finger to the right – the page would change – in the unreleased update to Node-Red-Dashboard (needs just a tad more work and docs apparently) that has gone. Excellent. I’ve seen this “feature” in other packages and it really does not work if you’re supposed to interact with buttons.

In my last blog on the subject you’ll see I can hide that top menu if needed (the blue menu is great on a phone – not much use on a thermostat)… and today I discovered that desktop TEMPLATES have a spacing round them that DID make it impossible to make your own buttons that would be size compatible with the UI built-in buttons.

That is all now history. So – the built in buttons – no text wrap which make it hard to make small, a visual effect on press that really is hardly noticeable, inability to change colour or indeed anything other than text colour – all problems now history.

The garish red, green and blue buttons you see above – note the rounded edges you control, there is an attractive and obvious colour change pm press (and return to original colour after press without you having to program it ), audible feedback on press (on phones with vibrators), wrap on text – indeed you can put anything in there - icons etc.

This is due to a combination on my insistence on having flexibility – my own experience and lots of help from several guys on the web today – thanks everyone for filling in the missing bits! The end result of all of this – I really DO think that Dashboard is able to take on the big boys and I’m currently backing away from the alternatives.

So – the enabling technology here is the node-red-dashboard template – this has LOTS of potential and it is now easy to accept incoming information – and send out a value on press or whatever. You’ll note elsewhere that I’ve used this to make whole pages with colour-changing icons etc., well here I’m using one template per button – but that’s just for the purpose of demonstration.

Things that needed considering – CSS for button sizing, JS to get the button colour and change it while pressing then change it back – I was not going to get into setting each and every button press colour etc. More CSS for styling. All described below and trivial to implement.

SO it turns out that if you put a template on a page – make sure it is the first one – you can put nothing but JS and CSS in it – and it will not do anything VISIBLE – but will supply your functions and CSS for the whole page – isn’t that HANDY!!!

Let’s take a look at what is driving the display up there (again ignoring the text at the top – start with the buttons). To the left you see a template all on it’s own – then 3 templates – then 3 buttons – not connected to anything as this is merely a demo.

So – the FIRST template has info we need – CSS and JS to make everything work – you just need this once for any page. The light blue buttons are there just to show you what buttons look like in Dashboard (i.e. not as good as they could be) – and the three templates are the three new coloured buttons you see above right – which react to being pressed both visually and with haptic feedback.

Let’s take a look at the FIRST template which makes it all possible. It looks easy now but trust me it has taken some head scratching to get this far.

NOTE: At the time of writing this colour change works on Chrome etc on a PC and Android phone – it does NOT work on Firefox/Chromium on a Pi – this needs resolving.

The class FILLED is important - this is the one that gets rid of the padding that both buttons and template use by default - to make the button fill to the size of the template. nr-dashboard-template is also involved. None of this seems to affect other items on the screen.

ROUNDED is simply a means of forcing rounding on buttons - you can adjust that radius to suit or eliminate it if you like.

The scripts - well VIBRATE merely invokes the haptic feedback when you press a button - easy when you know how.

TOUCHED and it's associated restore function are variations on the ones I used with images. The class allows on press for a button to store it's colour - change it's colour - wait for a while - and change it back - all without having to have individual colour control on the actual button - which simply has the default colour you select.

Simple? Yes because the previous code makes it so. A button in a template - auto stretched by the code above and all it has added is the background colour - which the above code can manipulate - and the classes. That's it. The ng_click is what happens when you press the button - the template outputs a payload of whatever you've set. No, really that is it. so on that output, msg.payload will be whatever you set it to be.

With background colour control, RGB and related buttons become simple - a page full of colours for RGB controls becomes possible. Note in the class ROUNDED I changed the font size - well you could separate that off to a separate class - and create classes (say) BIGTEXT and LITTLETEXT for example - suitable for different size buttons.

When you grasp this - if you're not there already, immediately all sorts of ideas should come to mind -it's a bit like opening a new door to see all the things behind it. Within days my demo screen will look utterly amateurish as I start adding icons etc but today was important as it was, for me a confirmation that there really is not a lot you can't do with node-red-dashboard – so many congratulations to the original developer and the guys at IBM and everyone contributing.

If you go to the ANGULAR site and look at their examples - most of them work no problem - changing these rectangular buttons to round ones is a snap!

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.

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

msg.payload.b=190;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).

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

msg.location.lon=fred.lon;msg.location.lat=fred.lat;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 cheap GPS transmitters for the cats!! Just so many possibilities.

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.

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

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.

Yes I did think when writing the title that it reminded me of “Ruth Rendell Mysteries”.

There are times when I consider taking up a new career in bricklaying and this is one of them.

So I’m working with Node-Red and the UI (node-red-contrib-ui) which has a FUNCTION node which lets you use a weird combination of JavaScript and something called “Angular”. I am failing to get to grips with this one..

So right now the UI has a button – and it has a text box – but not on the same line – and this to me seems like an obvious marriage.

So Imagine the scenario.. you press the button which merely returns “1” to Node-Red so you know it has been pressed. Either as a result of that action or for other reasons you want the text on the right (or icons representing the text) to say – for the sake of example “Active”, “Sleep”,”Standby” – in other words an arbitrary message which is affected by the button press.

It all seemed obvious to me – you press the button and it sends “1” – you send an input to the node and it prints the incoming message.

At this point you will get a clear picture of just how far off the mark I am here – could be too much Christmas cheer or course.

Pressing the button returned “1” to Node-Red alright - however it also set the text on the right. Worse, sending a message “Active” to the node input put up the message as I needed – but ALSO sent that to the output. It just is NOT making sense to me. I want the button press to go back out – but incoming messages to go to that text area ONLY.

Here is my kluge to get around all of this.

The inject node on the left sends “Active” when pressed. The function (2nd left) copies this from msg.payload to msg2.payload. The modified template uses msg.payload2 for it’s text section.

And the last function only passes the message if it sees “1” in msg.payload.

Update: Even THAT doesn’t work… press the button – fine – press the inject – fine – press the button – it wipes the panel on the right!!

The template node in node-red-contrib-ui is clearly very powerful for creating user interface elements but I suspect it is going to take a variety of examples to give some of us the mental tools we need to make best use of it.

Any more takers on the above – there has to be a way to get this to work properly!

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.

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…

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.

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.

Welcome

Hi - I'm Pete and this is my technology blog. It is BIG. Use the search box below or check out the archives and other links below - be sure to SHARE what you like using the social media buttons.

Please register or log in - the top menu changes a lot when you are part of the party... and once in, don't forget to tick the box so you will get email follow-ups to comments.

I am tied to no organisation - I do this for the joy of learning. Maintaining a blog of this size takes a lot of work and I hope you find my contributions useful - if you want to help fund my gadget habit or buy me a coffee - here is a link.

Disclaimer: Because I have no idea of your level of technical skill or the requirements of your country laws in terms of electricity supply etc., I accept no responsibility for any damage caused through following advice in these pages. When dealing with mains voltages you should satisfy yourself that whatever you are doing is safe and if unsure, seek advice from someone who is sure.

Notice: I'm always happy to offer advice on stuff I've written - and indeed take advice. If I can help in any way just let me know but PLEASE don't ask me how to program in C/PASCAL/NODE/etc. There are many resources out there - if you want to program and can't - there's always Google.

Newsletter

The blog will send you occasional emails containing links to recent posts. No ads and your email will not be given to third parties. There's an un-subscribe link on each email. Invalid names will be deleted.

Links

EE Times | Electronic Engineering TimesEE Times connects the global electronics community through news, analysis, education, and peer-to-peer discussion around technology, business, products and design