My Node-Red Dashboard Controls for 2021

Node-Red Dashboard with custom coding

Some of you may recall my work on Node-RED Dashboard buttons which all started in 2016 and which then (after a health-related break) received an update at the end of 2019 as I started to get to grips with dashboard templates. Well, I’m back to it again and this time, with help from a couple of guys on the Node-Red forums, I’ve done a better job on my home automation dashboard setup, finally removing the need for any external (not Node-Red) dashboard arrangement such as Blynk – which simplifies matters.

For reference this Node-Rred setup is running on a Raspberry Pi, typically controlling esp8266-based devices (smart sockets running Tasmota firmware, LED strip, smart lights etc) and the image below shows two of my Node-Red Dashboard tabs as seen on an mobile phone (looks similar on a PC screen of course).

Here are a couple of mobile screenshots of my dashboard setup as of today:

Node-Red Dashboard tabs

The old on/off/auto buttons (three buttons for eaxh device) for controlling node-red-contrib-bigtimer are gone in favour of a single multi-purpose button with the aid of a little code in a dashboard template and some minor changes in the button setup.

Check out the RGB colour controls (first three) which when touched or clicked will open up into full colour control. As for the buttons, my wife convinced me to use green for manual or auto-on and black for off. Note the mistake on the radiator button colouring. I just spotted that.

Take a look at the coding in the original article linked to above. And here, for an example of one of these new setups, look at the coding for the first item above – “above desk” (light).

Overview of one of my Node-Red Dashboard controls

See the BigTimer in green above. The blue “above desk led” is a simple node-red-dashboard-led.

The cyan blocks are Node-Red-Dashboard buttons. The rest are function blocks containing a little custom code. The top 3 blocks are to do with RGB colour control, the rest are for simple on/off-auto control. The output of the timer goes via a function to MQTT. The only block missing in the image above is the MQTT node. In the process of doing this I learned a lot about string handling.

msg.payload="#"+global.get("deskRed").toString(16).padStart(2, "0")+global.get("deskGreen").toString(16).padStart(2, "0")+global.get("deskBlue").toString(16).padStart(2, "0");
return msg;
Node-Red Dashboard text input node for RGB control

The text input node has the settings shown in the image to the right.

The “fa” refers to the FA icons used heavily by Node-Red. The paint brush is important as the dashboard “text input” (which expands on touch/click to a full RGB control) is by default an ugly coloured rectangle with slight underline – that had to go .

Don’t even start me on the alternative colour control in Node-Red Dashboard. I could rant about that for ages. What I have here is a reasonable alternative.

After that colour control we have code specific to my LED RGB setup (in two cases including this one I’m using 5v serial RGB strip, in another, pwm-driven standard 12v LED strip).

global.set("deskRed",parseInt(String(msg.payload).substring(1,3),16));
global.set("deskGreen",parseInt(String(msg.payload).substring(3,5),16));
global.set("deskBlue",parseInt(String(msg.payload).substring(5,7),16));
msg.payload="sync";
return msg;

and now to the actual multi-purpose button – but first, note that I’ve dropped in a “template” node with some useful stuff. There is probably a better way, I replicated code for two tabs on my desktop. ~For some reason I can’t paste the code so here’s an image. This template has setting “added to site <head> section so it will work on both tabs.

Node-Red Dashboard template node

And now the rest of the code in function nodes, left to right:

if (msg.state=="ON Auto") msg.payload="green";
else if (msg.state=="OFF Auto") msg.payload="black";
else if (msg.state=="ON Override") msg.payload="green";
else if (msg.state=="OFF Override") msg.payload="black";
if (msg.state=="OFF Auto") msg.myIcon="fa-clock-o fa-3x";
else if (msg.state=="ON Auto") msg.myIcon="fa-clock-o fa-3x";
else if (msg.state=="OFF Override") msg.myIcon="fa-power-off fa-3x";
else if (msg.state=="ON Override") msg.myIcon="fa-power-off fa-3x";
flow.set("my_desk_rgb",msg.state);
return msg;

The multi-use button node – note that instead of using fixed icons and background colours these are being pulled in from the previous function:

Node-Red Dashboard button

The function AFTER the multi-use button node:

if ((flow.get("my_desk_rgb")=="OFF Auto") || (flow.get("my_desk_rgb")=="ON Auto")) msg.payload="off";
else if (flow.get("my_desk_rgb")=="OFF Override") msg.payload="on";
else if (flow.get("my_desk_rgb")=="ON Override") msg.payload="auto";
node.status({fill:"blue",shape:"dot",text: flow.get("my_desk_rgb") + " " + msg.payload + global.get("handyDate")});
return msg;

Then the function for the LED and the node-red-contrib-ui-LED node itself

msg.payload=msg.state;
return msg;
node-red-contrib-ui-LED node
Facebooktwitterpinterestlinkedin

18 thoughts on “My Node-Red Dashboard Controls for 2021

  1. Nice to see how this is improving. I had similar issues as you with Dashboard but I gave up and moved to Home Assistant for the visuals in the end. I now use NodeRed for data manipulation & rules, MQTT for distribution and HA for display – there are mobile apps that work well and theming is good.
    With HA, I am displaying temp/humidity from lots of Xiaomi Mijia Bluetooth sensors (£4 each! – see https://www.youtube.com/watch?v=NXKzFG61lNs) with ESP32 openmqttgateway software linking BLE beacons to mqtt. Lots of esp8266/sonoff with water meter/temperature/alarm monitoring/433mhz (Tasmota). Hue lights & DIYHue lights. Enocean switches and sensors. Lots of Alexas…. etc etc.
    Home Assistant and Node Red makes it all seem easy to use! (My wife approves!).

    1. Pretty much cracked the visuals now in NR Dashboard, thanks to help from others and my sensible policy of blogging anything that moves in case I need to remember it months or years later.

      As of last night – haptic feedback is working on all of those buttons – and I’m using slightly different colouring (and of course different icons) depending on if something is on a timer (currently on or currently off) or ON manually or OFF manually. See pic. Ok, you might not like my choice of colours…

        1. Tony, this Home Assistant node-red add-in takes node-red and bundles in common nodes for HA and preloads HA values in the menus. This extra integration seems like it would simplify doing flows for HA. But I have concerns. Right now one guy does this add-in and he is pretty quick about fixing bugs and pulling in new versions of node-red when they are released, but that could change. So just wondering if you think this add-in is a good way to go or not. https://www.reddit.com/r/homeassistant/comments/8nzabp/community_hassio_addon_nodered/dzzp62h/

          1. Frenck (Franck Nijhof) is a full time Nabu Casa employee from more than an year now: https://www.nabucasa.com/about/

            and responsible of most of the hassio addons out there, he was hired for this and to manage the main blog: https://github.com/hassio-addons/repository

            if you don’t want to use his addon (which integrates nicely into HA authentication scheme), you can install separate HA and NR and have them communicate via this node, which is the one Frenck uses: https://flows.nodered.org/node/node-red-contrib-home-assistant-websocket

            1. MrShark, thanks for the info. I’ll try Frenk’s HA NR addon, the extra integration features look handy. As you noted, I can also run a parallel NR or switch from the addon if needed.

    1. Actually MI32Page 8 will show 8 on the main page, all seen Sensors will be reported via MQTT anyway 🙂
      Sorry for going off track Peter!

    1. I think I’ve included everything above – the floe for my entire home control… no, but if I’ve missed code off for any particular aspect of the buttons etc do let me know and I’ll update the blog entry.

      1. I can confirm that everything is there except for the node relating to the Alexa integration and the final function node following the bigtimer 1st output but they are both not necessary for the primary purpose of this piece. Retyping the template node can be fiddly and I’m still not sure I have got it 100% because if I leave the paintbrush as fa-2x in the “desk colour” node it ends up oversized and throwing out the alignments.

      2. I’ve mostly managed to implement this within my own NR setup, however my google foo is lacking with regards to the link node to the left of the function node before ‘colour’ text input. That then only leaves the contents of the function node ‘desk’ on the output of the BigTimer node.
        Apologies if I’ve misread anything related to these queries.

  2. This does highlight one of the most limiting aspects of node-red-dashboard for me. Because you cannot dynamically create/determine the Group/Tab that you want to update you end up having to duplicate large numbers of functions with virtually identical code. Invariably this means even small changes to a node end up having to be copied to many other nodes with all the maintenance headaches that entails. If I am missing an obvious workaround somebody please let me know but in the meantime I am trying to transfer a lot of my dashboard functions to the uibuilder node.

Leave a Reply

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

Leave the field below empty!

This site uses Akismet to reduce spam. Learn how your comment data is processed.