How to put a button shaped switch

#1

I know the switch option in the panel, however, I would like to put a button as a switch, pressing once it sends 1 and pressing again sends 0, to avoid the use of putting 2 buttons. Could someone help me with this?

0 Likes

#2

It is not possible by using only the button but it doesn't mean that it is impossible. It can be done in many different ways. I point out one possibility but it requires a bit understanding of javascript so it may be not the solutions you are looking for. Link to the thread: https://discourse.nodered.org/t/a-little-bit-of-a-flow-that-others-may-like/372/18

0 Likes

#3

Take a look on this example I made

[{"id":"8d2594ef.698d08","type":"switch","z":"75be3680.18cac8","name":"ON/OFF state","property":"switch","propertyType":"global","rules":[{"t":"eq","v":"1","vt":"str"},{"t":"eq","v":"0","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":420,"y":360,"wires":[["ab336f93.c9655"],["508ad1d9.d0683"]]},{"id":"ab336f93.c9655","type":"function","z":"75be3680.18cac8","name":"if is on","func":"msg.color = \"black\";\nmsg.background = \"#EF2F4F\";\nmsg.text = \"TURN OFF\";\nreturn msg;","outputs":1,"noerr":0,"x":590,"y":320,"wires":[["56f03a62.8a0884"]]},{"id":"508ad1d9.d0683","type":"function","z":"75be3680.18cac8","name":"if its off","func":"msg.color = \"black\";\nmsg.background = \"#B4EEB4\";\nmsg.text = \"TURN ON\";\nreturn msg;","outputs":1,"noerr":0,"x":600,"y":380,"wires":[["56f03a62.8a0884"]]},{"id":"56f03a62.8a0884","type":"ui_button","z":"75be3680.18cac8","name":"on/off","group":"ac2c8e97.2a413","order":5,"width":"7","height":"1","passthru":false,"label":"{{msg.text}}","color":"{{msg.color}}","bgcolor":"{{msg.background}}","icon":"ac_unit","payload":"none","payloadType":"str","topic":"button","x":750,"y":340,"wires":[["69fa3686.0a8ef8"]]},{"id":"69fa3686.0a8ef8","type":"switch","z":"75be3680.18cac8","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"button","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":870,"y":340,"wires":[["19fd650d.56963b"]]},{"id":"97ec2c21.d6aec","type":"inject","z":"75be3680.18cac8","name":"","topic":"","payload":"0","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"3","x":110,"y":260,"wires":[["7cbb7fc1.8618e"]]},{"id":"7cbb7fc1.8618e","type":"change","z":"75be3680.18cac8","name":"global switch start","rules":[{"t":"set","p":"switch","pt":"global","to":"0","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":260,"wires":[[]]},{"id":"96577bb1.6a6968","type":"inject","z":"75be3680.18cac8","name":"","topic":"","payload":"","payloadType":"date","repeat":"0.1","crontab":"","once":true,"onceDelay":0.1,"x":90,"y":360,"wires":[["65a47c10.e24204"]]},{"id":"19fd650d.56963b","type":"function","z":"75be3680.18cac8","name":"","func":"var obtaindata = global.get (\"switch\")\nif (obtaindata == \"1\"){msg.payload = 0}\nif (obtaindata == \"0\"){msg.payload = 1}\nreturn msg;\n\n","outputs":1,"noerr":0,"x":990,"y":340,"wires":[["aaa11540.2dc088","acb5e0be.d3ead"]]},{"id":"aaa11540.2dc088","type":"debug","z":"75be3680.18cac8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1290,"y":340,"wires":[]},{"id":"acb5e0be.d3ead","type":"change","z":"75be3680.18cac8","name":"re-wirte switch variable","rules":[{"t":"move","p":"payload","pt":"msg","to":"switch","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":1180,"y":280,"wires":[[]]},{"id":"b1729eea.50b7","type":"inject","z":"75be3680.18cac8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":720,"y":420,"wires":[["53f47fc.c84908"]]},{"id":"53f47fc.c84908","type":"function","z":"75be3680.18cac8","name":"check variable value for debug","func":"var obtaindata = global.get (\"switch\");\nmsg.payload = obtaindata;\n\nreturn msg;\n","outputs":1,"noerr":0,"x":970,"y":420,"wires":[["aaa11540.2dc088"]]},{"id":"65a47c10.e24204","type":"function","z":"75be3680.18cac8","name":"","func":"var obtaindata = global.get (\"switch\");\nmsg.payload = obtaindata;\n\nreturn msg;\n","outputs":1,"noerr":0,"x":250,"y":360,"wires":[["8d2594ef.698d08"]]},{"id":"ac2c8e97.2a413","type":"ui_group","z":"","name":"test","tab":"d92ab4b4.55f5c8","order":3,"disp":true,"width":"7","collapse":true},{"id":"d92ab4b4.55f5c8","type":"ui_tab","z":"","name":"test","icon":"fa-television","order":2}]

On this example you have a single button to get an output of 0/1 (as number) and the button color and text will swap depending on the previous state to show the allowable action after press.

Hope you like it.

image
image

For sure this is just an example, you will have it easy to change the button icon or text, the button colors and/or the desirable value for the final output

Regards

1 Like

#4

Perfect example, that's what I need! I'll take a look and study to fully understand this flow! but thank you so much!

0 Likes