Is there any way I can change the background color of the button?
Example, if (ON) , background = green, else (OFF) , background = red !?
Maybe this old thread ?
I did not put any code, this example is the type of application, depending on the state of the output, the color of the button is changed, so you do not need to put two buttons and that the mi button itself shows the state that is currently.
Sorry, I've read your reply multiple times and it is not clear (to me) what you are trying to say. Could you try restating your response? Thanks.
I want a single button to activate and deactivate something (a relay for example) but when I activate the relay, the button will turn green, and when I turn it off, the button will turn red!
Sergio,
I don't know how much you know about Node-Red, so it may be difficult to do.
You have the button on the screen. It has code and that goes off to do things.
The example posted at the top from dceejay is an example FLOW to show you how a button's colour is changed.
To get that part working, you copy it into Node-Red.
To help here is the code - again:
[{"id":"82c9dc8d.87c11","type":"ui_button","z":"a3ad1f25.b7363","name":"","group":"26332cb7.024dd4","order":0,"width":0,"height":0,"passthru":false,"label":"Start","color":"black","bgcolor":"{{background}}","icon":"","payload":"RUNNING","payloadType":"str","topic":"","x":150,"y":720,"wires":[["319cf0e6.f709a"]]},{"id":"319cf0e6.f709a","type":"delay","z":"a3ad1f25.b7363","name":"","pauseType":"delay","timeout":"0.5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":336,"y":719,"wires":[["6176046c.1b3b6c","2bd239b8.7085a6"]]},{"id":"6176046c.1b3b6c","type":"change","z":"a3ad1f25.b7363","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"RED","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":800,"wires":[["82c9dc8d.87c11"]]},{"id":"f59c0526.513b98","type":"change","z":"a3ad1f25.b7363","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":800,"wires":[["82c9dc8d.87c11"]]},{"id":"2bd239b8.7085a6","type":"delay","z":"a3ad1f25.b7363","name":"","pauseType":"delay","timeout":"3","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":560,"y":720,"wires":[["f59c0526.513b98"]]},{"id":"26332cb7.024dd4","type":"ui_group","z":"","name":"Default","tab":"e45fadc8.79108","disp":true,"width":"6","collapse":false},{"id":"e45fadc8.79108","type":"ui_tab","z":"","name":"Start","icon":"dashboard"}]
Copy that "line" of code (put your mouse over it, drag/select the code and copy it.
Go to Node-Red, and in the top right corner where the three lines are (similar to the browser menu) click and select import. Then, FROM CLIPBOARD.
Paste the code there and press enter.
That will put the code onto the browser window.
Click somewhere blank and click the DEPLOY button.
Then open the web page and go to that page.
(Start)
You will see a button.
Press it and it will turn red then in about 3 seconds it will turn green again.
The code supplied shows you how the colour change is done.
Getting it done with your code will need a bit of work from you to get the signals (to tell it which colour to be) from your flow to the button.
But basically you send the button a message with the colour, and in the button's settings you allow the colour to be set by putting stuff in where it has the background colour for the button.
Opening the button and looking will help you more than I can and a lot quicker too.
Good luck.
1 Like
Thank you very much, I learned
Good to hear.
Hope it all works out for you.
