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?
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
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.
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
Perfect example, that's what I need! I'll take a look and study to fully understand this flow! but thank you so much!
Here is a button with function node that toggles. It can just output a toggled state (along with color and text) or you can pass in a state to display and click to toggle (payload is only passed through on click).
Complete example:
[{"id":"526f7936.2e12","type":"function","z":"ee3f0235.27db08","name":"Toggle State","func":"var last_state = context.get(\"state\") || false;\nvar state = last_state // start the same\n\n// Usually we pass through the message and keep the state\n// When pressed, send the opposite of the state\nstate = msg.payload == \"PRESS\" ? !state : msg.payload;\n\n// If the state hasnt changed, stop the sequence here.\n// This matches the normal ui switch behavior\nif (state == last_state) \n return null;\n\ncontext.set(\"state\", state);\nmsg.payload = state\n\n// Use the new local state (will update when round-tripped)\nmsg.txt = state ? \"On\" : \"Off\";\nmsg.color = state ? \"default\" : \"grey\";\n\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":710,"y":200,"wires":[["95654861.3f8658","e32b3054.0e438"]]},{"id":"95654861.3f8658","type":"ui_button","z":"ee3f0235.27db08","name":"Toggle Switch","group":"ec6eb9f8.fb91f8","order":2,"width":"0","height":"0","passthru":false,"label":"{{msg.txt}}","tooltip":"","color":"","bgcolor":"{{msg.color}}","icon":"","payload":"PRESS","payloadType":"str","topic":"","x":720,"y":240,"wires":[["526f7936.2e12"]]},{"id":"731142f6.96047c","type":"inject","z":"ee3f0235.27db08","name":"On","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":470,"y":180,"wires":[["526f7936.2e12"]]},{"id":"91c50b5c.7aa63","type":"inject","z":"ee3f0235.27db08","name":"Off","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":470,"y":220,"wires":[["526f7936.2e12"]]},{"id":"e32b3054.0e438","type":"debug","z":"ee3f0235.27db08","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":920,"y":200,"wires":[]},{"id":"ec6eb9f8.fb91f8","type":"ui_group","name":"Default","tab":"bb57dc20.d8cec","order":1,"disp":true,"width":"6","collapse":false},{"id":"bb57dc20.d8cec","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
3 Likes
Hi,
sorry for the stupid question but I am starting to learn how to use the ui-templates 
How can I use your code for testing? Only copying in my template is not successful. Thanks.
Kind regards,
Christian
The code is a node-red flow. You don't put it into a template. Use CTRL-I to import the flow into node-red.
Aaaaaah ... 
Thanks a lot, now I can play with it.
Kind regards,
Christian
