Tag Archives: nodew-red-contrib-ui RGB Control

I’m writing this at 5am in the hope that some of our American friends are up and about to save me going mad.

You recall I wrote recently about Node-Red-Contrib-UI which allows you to make a UI for Node-Red for your mobile phone etc.

Don’t get me wrong, there are lots of UIs out there in various states of completion and reliability – but this particular one has my full attention as it is firstly very reliable… and secondly customisable.. and I like that – and there is no hidden APP or anything you can’t get your hands on.

Here is my current set up in Node-Red for this UI - I have split things up into 3 pages in the UI – general monitoring of my heating – the setup page – and a test of gauges…

and all of that is fine but until recently it was, visually all a bit BORING. Text and minimal icons. I convinced Andrei to add GAUGES and that’s a great start… and I just reasoned that you could manage to get 2 items on a line.. and hence…

So above it what your UI looks like by simply adding some nodes to the Node-Red editor – but what this REALLY needs is a nice RGB control. It happens that Andrei JUST added a TEMPLATE node.

But – it uses ANGULAR and I’m new to that. Andrei who developed this could not have given us a greater Christmas present than a TEMPLATE node in which you can put a page of html/Javascript – but more importantly – INCLUDES – which opens up a whole new world for this UI. I stumbled on this nice lighting control. http://files.jar2.net/jquery/wheelcolorpicker/example-v2/example.html

I ran the controller on it’s own – and what a lovely control. Did I DARE try embedding the code in node-red-contrib-ui? Sure did –I loaded the 3 relevant files (one css and 2 js) into the UI directory …… and I got a NICE colour controller in the UI but for two things – when the menu popped up – it lay BEHIND the controller. I solved that by wrapping the controller in a SPAN with a low Z-index. SOLVED.

Update 7.30am Wednesday

Thanks to even more help from Andrei – designer of Node-Red-Contrib-UI which is looking better by the moment, we can now display the controller in the UI – you can select a colour and as you move the mouse or finger around (see the javacsript in the SPAN) it will return the right value – at speed (this can be slowed down with the Node-Red DELAY function)

If we can get values INTO this RGB control and OUT OF IT – then the sky is the limit – there are SO many jQuery-based controlllers and displays out there free for the taking…

Here’s the code that goes into the TEMPLATE node. Right now we can values OUT of the node – but not INTO it (ie to preset the controller).

and here’s the result – I just added the node and pointed that to a debug node.

Isn’t that wonderful? With a bit of CSS polish this will be just beautiful. So move the slider around to pick a colour and as you do that … it fires out TGB into the debug box…

Why not use an RGB controller in the first place – because this is WAY more intuitive.. but the output is simple RGB, easily converted into something useful for an MQTT message to a controller.

It is even possible (while missing out the includes on the second one) to have 2 or more of these controllers on a page… and trust me – once it is all working I’ll have LOADS of them. Thanks to Andrei for help this morning.

I need help to figure out how to preload the control from an input value (in incoming msg.payload). Existing UIs don’t quite do this yet and it really important after a power cycle (or someone else using another copy of the UI to control stuff) to let the UI know the current state of the lighting.

Welcome to the Blog

Hi - I'm Pete and this is my technology blog. It is BIG. It is also the home of "ESP-GO". "The Script", Node-Red-Contrib-Bigtimer and many other useful toys. 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 and please subscribe to my YouTube channel http://www.youtube.com/PeterScargill

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.

If you want to buy me a coffee or help fuel my gadget habit, use the Paypal donate link below.

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.

Search for:

Email Newsletter

Enter a name and your real email address if you would like to receive occasional summary emails - sorry but invalid-looking or automated names and email addresses will be removed to help protect others.

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