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…

tmpED48

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…

tmpEF24

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.

tmpAE38

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?

Facebooktwittergoogle_pluspinterestlinkedin

9 thoughts on “Node Red UI Miracles

    1. Ok, I just replicated the first one - mind you in reality if you wanted to indicate on two different items you'd have to provide different checks but you could use bits in the input field for simplest..

      ie msg.payload&1 for one of them and msg.payload&2 for the other one??

      Heat


         

      Active

      1. Hi Pete,
        Ah that makes sense.

        As you mention above about wanting to load the status into the rgb wheel. that's got me thinking on how to save the status of each switch so that when the app loads it knows where it was. Rather than re-invert the wheel could you share a flow where you have archived this.

        Regards

        Paul

  1. Now that the "paragraph" node is gone, how does one get an icon to display on the right side like you have for your "heat" item? I used the paragraph before but I did an update to node-red-ui and not its gone.

    Thanks

  2. I love the looks of this .. I can see it being great for my mi-lights, led strips etc ... I am going to have to work on it .. and see about getting it to post a payload.msg/

  3. Hi Peter,
    Great Blog, great stuff here!
    I love the colorpicker!!!
    I have a little tipp for using the example with https enabled in node-red
    Since this would cause insecure mixed content I decided to include the files directly from a fork on github
    BUT this caused a Mimetype error =P
    So I searched on and found a nice feature of github: replace ray.gitusercontent.com with cdn.rawgit.com and It works!!!

    Hope this helps someone =D

    Thanks for the great blog !

Comments are closed.