Node-RED Dashboard

Reading Time: 4 minutes
Node-RED Dashboard

Ok, in a previous post about dashboards I’ve mentioned HADashboard which runs under appdaemon on Home Assistant. I’ve really liked this since I started using it a year or so ago. But it has its niggles (like a lot of things). I like to tinker so I’m often trying out new stuff even if what I have is working ok.

I’ve been using Node-RED for automations more or less since the start of my home automation journey. What I’m just starting to get into is the dashboard and I have to say that after a fairly easy learning curve I’m really enjoying it. It’s not as drag and drop as some interfaces I’ve seen but it’s probably more friendly than HADashboard.

Above, you can see the dash for my office. Temperature, light and motion on the left, controls for lights in the middle, and the blind and curtains on the right. I’m still just messing around at the moment.

This is what Node-RED looks like at the back end for this dashboard.

Node-RED flow

If you take one control, say the “Office ceiling”, you can see it’s in 3 parts. The first node is checking for a state change for the device. So if it gets turned on by a sensor, for example, Node-RED will get to hear and the switch will show as “On”.

The node in the middle is the actual switch. If I double click on that, I can adjust the properties like this:

Switch node in Node-RED

You can see the various properties in there. I’m using Fontawesome icons on my dashboard so you can choose an icon and add an effect. That’s how I have the ceiling lightbulb pointing down and the lamps pointing up.

The important bit is the bit in red. If you’re getting feedback from a device to control the visual representation of the switch then that needs to be unticked. If you leave it ticked, you end up with a disco effect when you control a device from a sensor or something. It only takes a tiny delay in the message and it all starts to go mad in the kitchen with lights flashing on and off. I even managed to blow an LED controller up where it was being powered on and off every few milliseconds until the controller just died.

So untick it when you start!

The right hand node is what controls the actual device. So if the device gets turned on by a sensor, the visual representation of the switch gets turned on, but that’s it. If you use your dashboard to switch a light on, the switch sends a signal to the device.

Whichever way you do it, the light gets switched on and Node-RED remains in sync with your devices.

Light on… light off

What I really love about this system is that it’s device responsive. On HADashboard I had to create 2 version of everything. One for phones and one for tablets and bigger screens. With Node-RED, it sorts itself out for you. This is the same dash on my phone. I’ve got it set so that it allows some of the groups to be collapsed. In this case, the device controls are collapsed and tapping the little arrow will open that group up.

Mobile dashboard

I’m still learning on a daily basis with this. The pros and cons I’ve found so far are:

  • Pros
    • Very user friendly to start creating dashboards
    • Lots of control over the layout – and more if you’re prepared to dig into some coding
    • Grid based approach
    • Mobile responsive
  • Cons
    • Not as much control over icons as I’d like
    • Can be tricky to customise the look and feel – you can set up a template node to override CSS and create your own themes

All in all, this is very close to perfect for me and I think this is the direction of travel until I reach a point where something is a real showstopper.