How to alternatively change button's color

General
1

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"}]

2

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":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"}]
3

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 ?

4

Sorry. Fixed try again

6

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":"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 ?

7

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.

8

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":"","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"}]
9

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.

10

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.

11

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}}","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}]
12

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"}]

13

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

14

I’m now using this flow

[{"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.

15

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.

16

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

17

Maybe a trigger node is a simpler approach ?

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

give this a try

[{"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

19

How can I change the background for a ui_Switch?