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:
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).
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;
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.
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:
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;
Hi
Using bigtimer for irrigation control and have noticed that if the timer is set to off for a particular day, if I select manual control (msg.payload=1 or 0), say to temporarily turn on/off an irrigator, the message is not processed through the node and my mqtt call to execute is not reached.
Any suggestions?
Cheers
Alan
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.
Subflows
Subflows don’t help because my duplication revolves around having to have 15 branches updating different tab/group combinations in the dashboard nodes and as these cannot be set dynamically within the message I have to maintain currently 15 x 7 dashboard nodes. This would normally be OK but as new locations appear and layout changes it becomes a maintenance headache. Did experiment with UI Builder but current direction of travel is to give up on Node Red Dashboard altogether and move these displays to Home Assistant keeping Node Red for data processing only.
Peter is the full flow available anywhere?
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.
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.
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.
hmmm, only four ble devices though?… Will take a look.
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!
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!).
take a look at latest Travis video, from about 14:00 to 25:00, to see how easy is to get those xiaomi sensors data via a basic esp32 device and tasmota: https://www.youtube.com/watch?v=oljs35TwlkU
That’s cool, thanks – I’d like to get rid of OpenMQTTgateway as it can be a bit flakey sometimes.
if you go on in that video, you’ll see how to use up to 4 devices with a single esp32, how to page them in tasmota main web gui, and other stuff 🙂
Just to add I’m running these sensors with ESPHome on an ESP32 and it is comfortably picking up 8 of these sensors currently – in case 4 is a limiting factor
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…
Tony, do you use node-red stand alone or the Home Assistant add-in?
https://community.home-assistant.io/t/home-assistant-community-add-on-node-red/55023
I run multiple node red dockers and a home assistant docker on a Linux server (unraid.net).
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/
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
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.