# Help me make a toggle button

**URL:** https://discourse.nodered.org/t/help-me-make-a-toggle-button/36405
**Category:** Developing Nodes
**Created:** [23 November 2020 15:43 UTC](https://discourse.nodered.org/t/help-me-make-a-toggle-button/36405 "2020-11-23T15:43:31Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![murondo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/murondo/32/29014_2.png) [@murondo](https://discourse.nodered.org/u/murondo)
#### Post date: [23 November 2020 15:43 UTC](https://discourse.nodered.org/t/help-me-make-a-toggle-button/36405/1 "2020-11-23T15:43:31Z")

</div>

![Untitled-2 copy](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/09c14bef25321c6159ae5886657fe216c9fb12c7.jpeg)  
Click on the first button to turn on the third button below, and click on the third turn of the second button to turn on the first button on the first line.

If you click the middle, both buttons turn green and the buttons come up.

The toggle button works well, but when you click the middle stop button, both sides should be the stop button, but it doesn't work well.

I ask for your great answers.

```auto
[{"id":"e3fd0d92.f1ae9","type":"tab","label":"211동 화원 펌프","disabled":false,"info":""},{"id":"c6eaea61.ecd7c8","type":"ui_template","z":"e3fd0d92.f1ae9","group":"14130506.813cbb","name":"css etc","order":1,"width":0,"height":0,"format":"<style>\n .filled { \n height: 100% !important;\n\n padding: 0 !important;\n margin: 0 !important;\n }\n .nr-dashboard-template {\n padding: 0;\n margin: 0;\n }\n \n .rounded {\n border-radius: 12px 12px 12px 12px;\n}\n \n .bigfont {\n font-size: 18px;\n}\n\n .smallfont {\n font-size: 12px;\n}\n \n</style>\n\n<script>\n$('.vibrate').on('click', function() {\n navigator.vibrate(100);\n});\n\nfunction restore_bg(x) {\n $(this).css(\"background-color\", x);\n };\n\n$('.touched').on('mousedown', function() {\n \n var x= $(this).css(\"background-color\");\n $(this).css(\"background-color\", \"yellow\");\n \n setTimeout(restore_bg.bind(this,x),100);\n navigator.vibrate(80);\n });\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":40,"wires":[[]]},{"id":"2441dc4b.d3fc84","type":"debug","z":"e3fd0d92.f1ae9","name":"Lamp1 ui-switch","active":true,"tosidebar":true,"console":true,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1310,"y":1060,"wires":[]},{"id":"3eec7a57.b107d6","type":"change","z":"e3fd0d92.f1ae9","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":" payload.lamp1","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":1120,"wires":[["3c39d04d.ecbc4"]]},{"id":"3c39d04d.ecbc4","type":"json","z":"e3fd0d92.f1ae9","name":"","property":"payload","action":"","pretty":false,"x":1050,"y":1120,"wires":[["2441dc4b.d3fc84","f5f2f9e0.89d8b8"]]},{"id":"eb88cfd2.cf408","type":"change","z":"e3fd0d92.f1ae9","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":" payload.lamp2","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":1180,"wires":[["76d6c437.04a2dc"]]},{"id":"76d6c437.04a2dc","type":"json","z":"e3fd0d92.f1ae9","name":"","property":"payload","action":"","pretty":false,"x":1050,"y":1180,"wires":[["731bdaf8.17bd94","431ea18c.ac65"]]},{"id":"731bdaf8.17bd94","type":"debug","z":"e3fd0d92.f1ae9","name":"Lamp2 ui-switch","active":true,"tosidebar":true,"console":true,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1310,"y":1260,"wires":[]},{"id":"f5f2f9e0.89d8b8","type":"rpi-gpio out","z":"e3fd0d92.f1ae9","name":"","pin":"38","set":false,"level":"0","freq":"","out":"out","x":1280,"y":1120,"wires":[]},{"id":"431ea18c.ac65","type":"rpi-gpio out","z":"e3fd0d92.f1ae9","name":"","pin":"40","set":false,"level":"0","freq":"","out":"out","x":1280,"y":1180,"wires":[]},{"id":"853d7068.1da96","type":"inject","z":"e3fd0d92.f1ae9","name":"power off","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"lamp1\": \"true\", \"lamp2\": \"true\"}","payloadType":"json","x":100,"y":1140,"wires":[["d390c278.f1288"]]},{"id":"6acf995a.6d8768","type":"function","z":"e3fd0d92.f1ae9","name":"","func":"if (msg.payload === false ){\n msg.payload = true;\n}\nelse { msg.payload = true;\n}\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":480,"y":820,"wires":[["8ae6b78.9492148","2fced4c2.b11fbc","d390c278.f1288"]]},{"id":"d390c278.f1288","type":"ui_template","z":"e3fd0d92.f1ae9","group":"14130506.813cbb","name":"gpio38_40_off","order":6,"width":2,"height":2,"format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: {'lamp1': 'true', 'lamp2': 'true'}})\">\n<svg width=\"90px\" height=\"90px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#1A1A1A' : '#848688'}\">\n <polygon stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n </g>\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#848688' : '#1A1A1A'}\">\n <polygon points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n </g>\n <g ng-style=\"{stroke: (msg.payload || 0) % 2 === 0 ? '#E6E7E8' : 'black'}\">\n <line fill=\"none\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n </g>\n \n<!-- 내부 원형색상과 바깥쪽 색상 -->\n <circle fill=\"none\" stroke=\"{{(msg.payload || 0) % 2 === 0 ? '#cccccc' : '#3d3c3c'}}\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n <!-- 내부 원형색상 시작 -->\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#cccccc' : '#3d3c3c'}\">\n <circle cx=\"38\" cy=\"38\" r=\"26\" />\n </g>\n <!-- 내부원형 색상 끝-->\n \n <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n <!-- 글씨색상 시작 -->\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-size=\"14\" font-weight=\"normal\" font-family=\"Droid Sans\">Stoping</text>\n </g>\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n <text x=\"37\" y=\"44\" style=\"text-anchor:middle; color:black;\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">Stop</text>\n \n </g>\n <!-- 글씨색상 끝 -->\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":340,"y":1140,"wires":[["94457766.b77148","6acf995a.6d8768","9cae464c.45d598"]]},{"id":"9cae464c.45d598","type":"function","z":"e3fd0d92.f1ae9","name":"","func":"\nif (msg.payload === true ){\n msg.payload = false;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":480,"y":1260,"wires":[["2fced4c2.b11fbc","8ae6b78.9492148","d390c278.f1288"]]},{"id":"2fced4c2.b11fbc","type":"ui_template","z":"e3fd0d92.f1ae9","group":"14130506.813cbb","name":"gpio40_onoff","order":7,"width":2,"height":2,"format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: {'lamp1': 'false', 'lamp2': 'true'}})\"> \n<svg width=\"90px\" height=\"90px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#848688' : '#1A1A1A'}\">\n <polygon stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n </g>\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#1A1A1A' : '#848688'}\">\n <polygon points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n </g>\n <g ng-style=\"{stroke: (msg.payload || 0) % 2 === 0 ? 'black' : '#E6E7E8'}\">\n <line fill=\"none\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n </g>\n\n <circle fill=\"none\" stroke=\"{{(msg.payload || 0) % 2 === 0 ? 'red' : 'green'}}\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'red' : 'green'}\">\n <circle cx=\"38\" cy=\"38\" r=\"26\" />\n </g>\n <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">Start</text>\n </g>\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"14\" font-family=\"Droid Sans\">Starting</text>\n </g>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":490,"y":1440,"wires":[["9cae464c.45d598","3eec7a57.b107d6","eb88cfd2.cf408"]]},{"id":"8ae6b78.9492148","type":"ui_template","z":"e3fd0d92.f1ae9","group":"14130506.813cbb","name":"gpio38_onoff","order":5,"width":2,"height":2,"format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: {'lamp1': 'true', 'lamp2': 'false'}})\">\n\n<svg width=\"90px\" height=\"90px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#1A1A1A' : '#848688'}\">\n <polygon stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n </g>\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#848688' : '#1A1A1A'}\">\n <polygon points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n </g>\n <g ng-style=\"{stroke: (msg.payload || 0) % 2 === 0 ? '#E6E7E8' : 'black'}\">\n <line fill=\"none\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n </g>\n \n<!-- 내부 원형색상과 바깥쪽 색상 -->\n <circle fill=\"none\" stroke=\"{{(msg.payload || 0) % 2 === 0 ? 'green' : 'red'}}\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n <!-- 내부 원형색상 시작 -->\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'green' : 'red'}\">\n <circle cx=\"38\" cy=\"38\" r=\"26\" />\n </g>\n <!-- 내부원형 색상 끝-->\n \n <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n <!-- 글씨색상 시작 -->\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-size=\"14\" font-weight=\"normal\" font-family=\"Droid Sans\">Starting</text>\n </g>\n <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">Start</text>\n \n </g>\n <!-- 글씨색상 끝 -->\n </g>\n</svg>\n</md-button>\n\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":470,"y":880,"wires":[["6acf995a.6d8768","3eec7a57.b107d6","eb88cfd2.cf408"]]},{"id":"75c897d2.d1c288","type":"inject","z":"e3fd0d92.f1ae9","name":"power on","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"lamp1\": \"true\", \"lamp2\": \"false\"}","payloadType":"json","x":100,"y":1100,"wires":[["8ae6b78.9492148"]]},{"id":"25064789.f2a978","type":"inject","z":"e3fd0d92.f1ae9","name":"power off","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"lamp1\": \"false\", \"lamp2\": \"true\"}","payloadType":"json","x":100,"y":1180,"wires":[["2fced4c2.b11fbc"]]},{"id":"94457766.b77148","type":"function","z":"e3fd0d92.f1ae9","name":"","func":"if (msg.payload === false ){\n msg.payload = true;\n}\nelse { msg.payload = true;\n}\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":340,"y":1060,"wires":[["d390c278.f1288"]]},{"id":"14130506.813cbb","type":"ui_group","z":"","name":"211동 화원 모터펌프","tab":"85c83aff.43db18","order":8,"disp":true,"width":"6","collapse":true},{"id":"85c83aff.43db18","type":"ui_tab","z":"","name":"Home","icon":"home","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [22 January 2021 15:43 UTC](https://discourse.nodered.org/t/help-me-make-a-toggle-button/36405/2 "2021-01-22T15:43:49Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.