# How to alternatively change button's color

**URL:** <https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820>\
**Category:** General\
**Created:** [14 June 2018 20:27 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820 "2018-06-14T20:27:49Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![hary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hary/32/12340_2.png) [@hary](https://discourse.nodered.org/u/hary)\
**Post date:** [14 June 2018 20:27 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/1 "2018-06-14T20:27:49Z")

</div>

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 background from WHITE to RED but no more success.  
Here is my code below.

`
[{"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":"WHITE","icon":"","payload":"RUNNING","payloadType":"str","topic":"","x":190.5,"y":131,"wires":[["f75050a8.a1e84"]]},{"id":"f75050a8.a1e84","type":"delay","z":"c111e123.607238","name":"","pauseType":"delay","timeout":"0.5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":376.5,"y":130,"wires":[["d8676d75.7f2fc"]]},{"id":"d8676d75.7f2fc","type":"change","z":"c111e123.607238","name":"","rules":[{"t":"set","p":"payload.Background","pt":"msg","to":"RED","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":555.5,"y":198,"wires":[["a983549e.8b2838"]]},{"id":"26725c43.69ad54","type":"ui_group","z":"","name":"Default","tab":"10911e50.771dda","disp":true,"width":"6","collapse":false},{"id":"10911e50.771dda","type":"ui_tab","z":"","name":"Start","icon":"dashboard"}]`

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [14 June 2018 21:42 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/2 "2018-06-14T21:42:35Z")

</div>

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.)

```auto
[{"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"}]

```

---

<div class="post-metadata">

**Author:** ![hary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hary/32/12340_2.png) [@hary](https://discourse.nodered.org/u/hary)\
**Post date:** [15 June 2018 06:39 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/3 "2018-06-15T06:39:04Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 June 2018 06:58 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/4 "2018-06-15T06:58:43Z")

</div>

Sorry. Fixed try again

---

<div class="post-metadata">

**Author:** ![hary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hary/32/12340_2.png) [@hary](https://discourse.nodered.org/u/hary)\
**Post date:** [15 June 2018 08:05 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/6 "2018-06-15T08:05:50Z")

</div>

Ok, it works.

Then, for my specific purpose I tried the following

```auto
[{"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":"RUNNING","payloadType":"str","topic":"","x":190.5,"y":131,"wires":[["f75050a8.a1e84"]]},{"id":"f75050a8.a1e84","type":"delay","z":"c111e123.607238","name":"","pauseType":"delay","timeout":"0.5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":376.5,"y":130,"wires":[["91190073.520018"]]},{"id":"91190073.520018","type":"switch","z":"c111e123.607238","name":"","property":"background","propertyType":"msg","rules":[{"t":"eq","v":"RED","vt":"str"},{"t":"eq","v":"BLUE","vt":"str"},{"t":"else"}],"checkall":"false","outputs":3,"x":251.5,"y":329,"wires":[["926e0cf9.d9dc1"],["3a2fc8b1.c3844"],["8bcd516c.7dea88"]]},{"id":"926e0cf9.d9dc1","type":"change","z":"c111e123.607238","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"BLUE","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":482.5,"y":273,"wires":[["a983549e.8b2838"]]},{"id":"3a2fc8b1.c3844","type":"change","z":"c111e123.607238","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"RED","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":458,"y":324,"wires":[["a983549e.8b2838"]]},{"id":"8bcd516c.7dea88","type":"change","z":"c111e123.607238","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"RED","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":443,"y":385,"wires":[["a983549e.8b2838"]]},{"id":"26725c43.69ad54","type":"ui_group","z":"","name":"Default","tab":"10911e50.771dda","disp":true,"width":"6","collapse":false},{"id":"10911e50.771dda","type":"ui_tab","z":"","name":"Start","icon":"dashboard"}]
```

But is there a way to initialize the background colour value to an initial value like GREEN (before the button is pushed) ?  
Plus my code looks quite complicated ! Would it be a way to “shrink” it or a nicer way to do what I have done ?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 June 2018 10:35 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/7 "2018-06-15T10:35:38Z")

</div>

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.

```auto

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 June 2018 11:07 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/8 "2018-06-15T11:07:43Z")

</div>

Here it is with a function node.

```auto
[{"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":"","x":150,"y":660,"wires":[["2831a275.4480d6"]]},{"id":"2831a275.4480d6","type":"delay","z":"ad370a57.8f265","name":"","pauseType":"delay","timeout":"0.5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":350,"y":660,"wires":[["98038077.751848"]]},{"id":"98038077.751848","type":"function","z":"ad370a57.8f265","name":"Flip color RED/BLUE","func":"if (msg.background == \"RED\") {\n msg.background = \"BLUE\";\n} else {\n msg.background = \"RED\";\n}\nreturn msg;","outputs":1,"noerr":0,"x":260,"y":740,"wires":[["46bc29aa.5006f"]]},{"id":"5012bb24.7ce1ac","type":"ui_group","z":"","name":"Default","tab":"6d83550.bbe97ac","disp":true,"width":"6","collapse":false},{"id":"6d83550.bbe97ac","type":"ui_tab","z":"","name":"Start","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![hary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hary/32/12340_2.png) [@hary](https://discourse.nodered.org/u/hary)\
**Post date:** [16 June 2018 15:09 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/9 "2018-06-16T15:09:55Z")

</div>

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’s going from red to blue alternatively till the end of my program.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [16 June 2018 20:40 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/10 "2018-06-16T20:40:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hary/32/12340_2.png) [@hary](https://discourse.nodered.org/u/hary)\
**Post date:** [16 June 2018 21:17 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/11 "2018-06-16T21:17:12Z")

</div>

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;

```auto
[{"id":"5a3f39db.aa294","type":"ui_button","z":"b2115fa0.5e3218","name":"","group":"75360d56.3d6efc","order":0,"width":0,"height":0,"passthru":true,"label":"{{label}}","color":"BLACK","bgcolor":"{{background}}","icon":"","payload":"","payloadType":"str","topic":"","x":248,"y":136,"wires":[["7dbdec34.ba0ccc"]]},{"id":"7dbdec34.ba0ccc","type":"delay","z":"b2115fa0.5e3218","name":"","pauseType":"delay","timeout":"0.5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":448,"y":136,"wires":[["103cf544.cbf1eb"]]},{"id":"103cf544.cbf1eb","type":"function","z":"b2115fa0.5e3218","name":"Flip color RED/BLUE","func":"\nif (msg.background == \"RED\") {\n msg.background = \"BLUE\";\n} else {\n msg.background = \"RED\";\n msg.label = \"RUNNING\"\n}\nreturn msg;","outputs":1,"noerr":0,"x":358,"y":216,"wires":[["5a3f39db.aa294"]]},{"id":"8b2534b5.333aa8","type":"inject","z":"b2115fa0.5e3218","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"x":84.16665649414062,"y":87.46665954589844,"wires":[["af81528.09f58b"]]},{"id":"af81528.09f58b","type":"function","z":"b2115fa0.5e3218","name":"initiate values","func":"msg.background = \"GREEN\";\nmsg.label = \"START\";\nreturn msg;","outputs":1,"noerr":0,"x":305.16664123535156,"y":72.23332214355469,"wires":[["5a3f39db.aa294"]]},{"id":"75360d56.3d6efc","type":"ui_group","z":"","name":"Group 1","tab":"a68d9d39.6163c8","order":1,"disp":true,"width":"6","collapse":false},{"id":"a68d9d39.6163c8","type":"ui_tab","z":"","name":"Launching item","icon":"dashboard","order":1}]
```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [16 June 2018 21:38 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/12 "2018-06-16T21:38:06Z")

</div>

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":"{{background}} ","icon":"","payload":"RUNNING","payloadType":"str","topic":"","x":290,"y":300,"wires":[["dc905d80.9aef28"]]},{"id":"dc905d80.9aef28","type":"delay","z":"65f9d867.5a7ff","name":"","pauseType":"delay","timeout":"0.5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":490,"y":300,"wires":[["38fc85c1.b15a22"]]},{"id":"38fc85c1.b15a22","type":"function","z":"65f9d867.5a7ff","name":"Flip color RED/BLUE","func":"if (msg.background == \"GREEN\") {\n return null;\n}\nif (msg.background == \"RED\") {\n msg.background = \"BLUE\";\n} else {\n msg.background = \"RED\";\n}\nreturn msg;","outputs":1,"noerr":0,"x":400,"y":380,"wires":[["ce6eaba0.96d29"]]},{"id":"6feee2b4.ce77a4","type":"inject","z":"65f9d867.5a7ff","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":150,"y":220,"wires":[["7993f952.aab3e8"]]},{"id":"7993f952.aab3e8","type":"change","z":"65f9d867.5a7ff","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"GREEN","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":220,"wires":[["ce6eaba0.96d29"]]},{"id":"7197259b.44998c","type":"ui_group","z":"","name":"Default","tab":"58630127.d34698","disp":true,"width":"6","collapse":false},{"id":"58630127.d34698","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]`

---

<div class="post-metadata">

**Author:** ![hary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hary/32/12340_2.png) [@hary](https://discourse.nodered.org/u/hary)\
**Post date:** [17 June 2018 13:51 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/13 "2018-06-17T13:51:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hary/32/12340_2.png) [@hary](https://discourse.nodered.org/u/hary)\
**Post date:** [28 June 2018 07:52 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/14 "2018-06-28T07:52:48Z")

</div>

I’m now using this flow

```auto
[{"id":"555452dd.c3928c","type":"ui_button","z":"aa8f5fa1.bc60d8","name":"","group":"1708d647.04db7a","order":2,"width":0,"height":0,"passthru":true,"label":"{{label}} ","color":"{{color}} ","bgcolor":"{{background}} ","icon":"","payload":"","payloadType":"str","topic":"","x":270,"y":700,"wires":[["15b271cb.5dd326","d95f6dc1.6d0bf8","9ef07639.7806c8"]]},{"id":"15b271cb.5dd326","type":"delay","z":"aa8f5fa1.bc60d8","name":"","pauseType":"delay","timeout":"0.7","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":406,"y":700,"wires":[["36adca80.9c0f3e"]]},{"id":"36adca80.9c0f3e","type":"function","z":"aa8f5fa1.bc60d8","name":"Flip color RED/BLUE","func":"\nif (msg.background == \"GREEN\") {\n return null;\n}\nvar first = context.get('first')||true;\nif (msg.background == \"RED\") {\n msg.background = \"BLUE\";\n msg.color = \"WHITE\";\n if (!first){msg.payload = \"\"}\n} else {\n msg.color = \"BLACK\";\n msg.background = \"RED\";\n msg.label = \"Austeneziting RUNNING\";\n if (first){\n msg.payload = \"a\";\n context.set('first',false);\n \n }\n}\nreturn msg;","outputs":1,"noerr":0,"x":337,"y":743,"wires":[["555452dd.c3928c"]]},{"id":"cb507f25.6a75","type":"inject","z":"aa8f5fa1.bc60d8","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"x":123,"y":647.9999694824219,"wires":[["d21a57e4.5892e8"]]},{"id":"d21a57e4.5892e8","type":"change","z":"aa8f5fa1.bc60d8","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"GREEN","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"Austeniziting","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":276,"y":643,"wires":[["555452dd.c3928c"]]},{"id":"d95f6dc1.6d0bf8","type":"debug","z":"aa8f5fa1.bc60d8","name":"","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","x":369.16664123535156,"y":854.6833038330078,"wires":[]},{"id":"9ef07639.7806c8","type":"serial out","z":"aa8f5fa1.bc60d8","name":"","serial":"9939954d.414a","x":790,"y":640,"wires":[]},{"id":"1708d647.04db7a","type":"ui_group","z":"","name":"Group 1","tab":"bdf79f7a.36f0a8","order":1,"disp":true,"width":"6","collapse":false},{"id":"9939954d.414a","type":"serial-port","z":"","serialport":"/dev/ttyUSB0","serialbaud":"9600","databits":"8","parity":"none","stopbits":"1","newline":"\\n","bin":"false","out":"char","addchar":false},{"id":"bdf79f7a.36f0a8","type":"ui_tab","z":"","name":"Curing","icon":"dashboard"}]
```

It flips the colour from red to blue after pressing the button but I can’t get the payload sent only once when pushed. I want to send “a” only once when the button is pressed. That is my start signal to start the program running on my arduino.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [28 June 2018 08:07 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/15 "2018-06-28T08:07:57Z")

</div>

Clear the “If msg arrives on input, pass through to output” checkbox on the button. As you have it every time a message is passed into the button it sends it on to its output.

---

<div class="post-metadata">

**Author:** ![hary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hary/32/12340_2.png) [@hary](https://discourse.nodered.org/u/hary)\
**Post date:** [4 July 2018 09:58 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/16 "2018-07-04T09:58:02Z")

</div>

@Colin  
If I do that, my button doesn’t flip from red to blue any more despite it sends “a” only once of course !

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [4 July 2018 10:17 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/17 "2018-07-04T10:17:25Z")

</div>

Maybe a trigger node is a simpler approach ?

```auto
[{"id":"db21ab1e.708618","type":"trigger","z":"745a133b.dd6dec","op1":"{\"t\":\"white\", \"b\":\"red\",\"l\":\"RUNNING\"}","op2":"{\"t\":\"white\", \"b\":\"blue\",\"l\":\"STOPPED\"}","op1type":"json","op2type":"json","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":280,"y":2680,"wires":[["48b45df9.2d4894"]]},{"id":"48b45df9.2d4894","type":"ui_button","z":"745a133b.dd6dec","name":"","group":"c8032e76.f704e","order":2,"width":0,"height":0,"passthru":false,"label":"{{payload.l}} ","color":"{{payload.t}} ","bgcolor":"{{payload.b}} ","icon":"","payload":"a","payloadType":"str","topic":"","x":270,"y":2600,"wires":[["db21ab1e.708618"]]},{"id":"943778d0.97af88","type":"inject","z":"745a133b.dd6dec","name":"","topic":"","payload":"{\"t\":\"white\", \"b\":\"green\",\"l\":\"START\"}","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":"","x":130,"y":2600,"wires":[["48b45df9.2d4894"]]},{"id":"c8032e76.f704e","type":"ui_group","z":"","name":"Group 1","tab":"b10cea78.c28068","order":1,"disp":true,"width":"6","collapse":false},{"id":"b10cea78.c28068","type":"ui_tab","z":"","name":"Curing","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [4 July 2018 10:21 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/18 "2018-07-04T10:21:32Z")

</div>

give this a try

```auto
[{"id":"2e88253.7f5dbda","type":"switch","z":"b7eb5457.b00758","name":"","property":"switch","propertyType":"flow","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":230,"y":1681,"wires":[["14f62ee4.e04971"],["c2c59c67.3b499"]]},{"id":"14f62ee4.e04971","type":"function","z":"b7eb5457.b00758","name":"if is on","func":"msg.color = \"black\";\nmsg.background = \"#EF2F4F\";\nmsg.text = \"TURN OFF\";\nreturn msg;","outputs":1,"noerr":0,"x":359,"y":1662,"wires":[["fd6bda5d.76b828"]]},{"id":"c2c59c67.3b499","type":"function","z":"b7eb5457.b00758","name":"if is off","func":"msg.color = \"black\";\nmsg.background = \"#B4EEB4\";\nmsg.text = \"TURN ON\";\nreturn msg;","outputs":1,"noerr":0,"x":359,"y":1702,"wires":[["fd6bda5d.76b828"]]},{"id":"fd6bda5d.76b828","type":"ui_button","z":"b7eb5457.b00758","name":"on/off","group":"f21f2722.4727c8","order":5,"width":"7","height":"1","passthru":false,"label":"{{msg.text}}","color":"{{msg.color}}","bgcolor":"{{msg.background}}","icon":"","payload":"","payloadType":"str","topic":"button","x":543,"y":1678,"wires":[["b89410e2.c92a2"]]},{"id":"8bbeaf5b.07a0a","type":"switch","z":"b7eb5457.b00758","name":"","property":"switch","propertyType":"flow","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":816,"y":1679,"wires":[["ff1995a1.0f5498"],["d0d18551.0c6338"]]},{"id":"b89410e2.c92a2","type":"switch","z":"b7eb5457.b00758","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"button","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":685,"y":1678,"wires":[["8bbeaf5b.07a0a"]]},{"id":"ff1995a1.0f5498","type":"change","z":"b7eb5457.b00758","name":"","rules":[{"t":"set","p":"switch","pt":"flow","to":"off","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":970,"y":1651,"wires":[["23485693.901fba"]]},{"id":"6e2bfdfc.71f3f4","type":"inject","z":"b7eb5457.b00758","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":true,"onceDelay":0.1,"x":93,"y":1682,"wires":[["2e88253.7f5dbda"]]},{"id":"d0d18551.0c6338","type":"change","z":"b7eb5457.b00758","name":"","rules":[{"t":"set","p":"switch","pt":"flow","to":"on","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"1","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":972,"y":1700,"wires":[["23485693.901fba"]]},{"id":"23485693.901fba","type":"debug","z":"b7eb5457.b00758","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1162,"y":1673,"wires":[]},{"id":"fc21644c.625668","type":"inject","z":"b7eb5457.b00758","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":801,"y":1614,"wires":[["ff1995a1.0f5498"]]},{"id":"f21f2722.4727c8","type":"ui_group","z":"","name":"test","tab":"95e900a4.9d5ff","order":1,"disp":true,"width":"10","collapse":true},{"id":"95e900a4.9d5ff","type":"ui_tab","z":"","name":"test","icon":"dashboard","order":26}]

```

If you wanted faster behaviour just reduce the time from the inject node at the left from 1 to 0.1 sec

---

<div class="post-metadata">

**Author:** ![Leroxy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leroxy/32/4806_2.png) [@Leroxy](https://discourse.nodered.org/u/Leroxy)\
**Post date:** [19 January 2019 13:07 UTC](https://discourse.nodered.org/t/how-to-alternatively-change-buttons-color/820/19 "2019-01-19T13:07:02Z")

</div>

How can I change the background for a ui\_Switch?