Hi I’m using Dasboard. I have a start button and I would like it to alternatively change its backgroung color when it’s been pushed to start the system. I tried to do think reinjecting msg.payload.background to the input of the button but with no success I have simplified the code to set the bac…

you need to tell the switch to listen to a msg property - eg {{background}} something like this (though this doesn’t fully set up the initial conditions.) [{"id":"82c9dc8d.87c11","type":"ui_button","z":"a3ad1f25.b7363","name":"","group":"26332cb7.024dd4","order":0,"width":0,"height":0,"passthru":…

Hi Very strange. I can’t copy/paste your code to node-red clipboard despite I can copy paste mine ! Are you sure your code can be copied to node-red clipboard ?

Ok, it works. Then, for my specific purpose I tried the following [{"id":"a983549e.8b2838","type":"ui_button","z":"c111e123.607238","name":"","group":"26725c43.69ad54","order":0,"width":0,"height":0,"passthru":true,"label":"Start","color":"BLACK","bgcolor":"{{background}}","icon":"","payload":"RUN…

Since the bottom two outputs of the switch go to change nodes that do the same thing you could eliminate one of them and have both output wires go to the one. you could also put the functionality of the switch and change nodes into a single function node so you would go from four nodes to one.

Here it is with a function node. [{"id":"46bc29aa.5006f","type":"ui_button","z":"ad370a57.8f265","name":"","group":"5012bb24.7ce1ac","order":0,"width":0,"height":0,"passthru":true,"label":"Start","color":"BLACK","bgcolor":"{{background}}","icon":"","payload":"RUNNING","payloadType":"str","topic":""…

Thank you very much indeed. The function look nice and concise ! But I’m coming back with the rest of my previous question: “is there a way to initialize the background colour value to an initial value like GREEN (before the button is pushed) ?” So: Not pushed => backgroud is green pushed => it’…

Sure, you could have an inject node that runs once at startup that goes to an change node that sets msg.payload to GREEN and the change node feeds into the button node.

Im’ not sure to catch you but I’ve done this and it doesn’t work as it would act as if the button is pushed at the inject time; [{"id":"5a3f39db.aa294","type":"ui_button","z":"b2115fa0.5e3218","name":"","group":"75360d56.3d6efc","order":0,"width":0,"height":0,"passthru":true,"label":"{{label}}","co…

Oh, sorry I added a check in the function node if it was green to not return anything. Here is the flow; [{"id":"ce6eaba0.96d29","type":"ui_button","z":"65f9d867.5a7ff","name":"","group":"7197259b.44998c","order":1,"width":0,"height":0,"passthru":true,"label":"Start","color":"BLACK","bgcolor":"{{ba…

Node-RED

Node-RED Forum

How to alternatively change button's color

General

hary 17 June 2018 13:51 13

Good, thank you very much.
Further question will come later for sure !

Topic		Replies	Views
Send msg.color to Button without Triggering Button Dashboard	3	582	12 May 2021
Examples of Colour change button and switch FAQs	32	36733	19 November 2020
Switch node icons color problem Dashboard	25	2134	22 October 2020
How To Modify Dashboard Button To Alternate Color / Text? Dashboard	9	6314	23 September 2021
Change background color of ui_switch dynamic Dashboard	12	2003	6 October 2022

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

How to alternatively change button's color

Related topics