Search code examples
mqttnode-red

Change Node-RED UI button color via MQTT

I have a node-red flow on a raspberry pi home security network, using MQTT as a message bus. How would one change colors on the UI buttons based on incoming MQTT messages?

I've not been able to find any examples of how to do this anywhere. I imagine this will be tied to CSS and javascript but I'm weak in these areas.

Solution

  • How to do this is described in the info tab for the dashboard ui button:

    The colours of the text and background may be set. They can also be set by a message property by setting the field to the name of the property, for example {{msg.background}}.

    so you can set the background of the button by configuring the button like this:

    enter image description here

    Then passing in a message with the msg.backgound set to the colour you want (colours can be any CSS colour safe name).

    You can use a function node or a change node to add the background property to the msg before passing it to the ui-button node.