Node Red UI Miracles

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

<script type=”text/javascript” src=”http://files.jar2.net/jquery/wheelcolorpicker/example-v2/jquery.wheelcolorpicker.js”></script>
<link type=”text/css” rel=”stylesheet” href=”http://files.jar2.net/jquery/wheelcolorpicker/example-v2/css/wheelcolorpicker.css” />

<span style=”position: relative; z-index: 1;” ng-init=”init()”>
    <input id=”{{$id}}” style=”position: relative; z-index: 1;” type=”text” data-wheelcolorpicker=”” data-wcp-layout=”block”>
</span>

<script>
    scope.init = function() {
        var send = this.send;

        setTimeout(function(){
            var colorWheel = $(‘#’+this.$id);
            colorWheel.on(‘slidermove’, function() {
                send({payload: $(this).wheelColorPicker(‘getValue’, ‘rgb’)});
            });

            this.$on(‘$destroy’, function() {
                colorWheel.wheelColorPicker(‘destroy’);
            });
        }.bind(this), 0);
    };
</script>

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.

Here is the controller author’s page with a working example..

http://files.jar2.net/jquery/wheelcolorpicker/example-v2/example.html

Anyone up to this?