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