# How to put a button shaped switch

**URL:** <https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523>\
**Category:** Dashboard\
**Created:** [23 August 2018 19:50 UTC](https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523 "2018-08-23T19:50:39Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sergio](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sergio](https://discourse.nodered.org/u/Sergio)\
**Post date:** [23 August 2018 19:50 UTC](https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523/1 "2018-08-23T19:50:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 August 2018 20:57 UTC](https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523/2 "2018-08-23T20:57:00Z")

</div>

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](https://discourse.nodered.org/t/a-little-bit-of-a-flow-that-others-may-like/372/18)

---

<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:** [23 August 2018 23:18 UTC](https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523/3 "2018-08-23T23:18:47Z")

</div>

Take a look on this example I made

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3f0aad181799e876a22561e1f9179c99bf4f9c8f.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2951d5eb6b2196226f199ee6bd8e60eb58cfeb0e.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/329b19761d967cc0074739975a3eb62128a6c4ee.png)

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

---

<div class="post-metadata">

**Author:** ![Sergio](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sergio](https://discourse.nodered.org/u/Sergio)\
**Post date:** [23 August 2018 23:53 UTC](https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523/4 "2018-08-23T23:53:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sacks](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sacks/32/33276_2.png) [@Sacks](https://discourse.nodered.org/u/Sacks)\
**Post date:** [8 December 2020 09:30 UTC](https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523/5 "2020-12-08T09:30:33Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![Christian2](https://avatars.discourse-cdn.com/v4/letter/c/278dde/32.png) [@Christian2](https://discourse.nodered.org/u/Christian2)\
**Post date:** [27 March 2022 10:30 UTC](https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523/6 "2022-03-27T10:30:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 March 2022 11:17 UTC](https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523/7 "2022-03-27T11:17:59Z")

</div>

> [@Christian2](#):
>
> Only copying in my template is not success

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.

---

<div class="post-metadata">

**Author:** ![Christian2](https://avatars.discourse-cdn.com/v4/letter/c/278dde/32.png) [@Christian2](https://discourse.nodered.org/u/Christian2)\
**Post date:** [27 March 2022 13:16 UTC](https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523/8 "2022-03-27T13:16:35Z")

</div>

Aaaaaah ... 🙂 Thanks a lot, now I can play with it.

Kind regards,  
Christian

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 March 2022 15:48 UTC](https://discourse.nodered.org/t/how-to-put-a-button-shaped-switch/2523/9 "2022-03-27T15:48:24Z")

</div>