Hi guys,
I used this Node Red Website example and got this 2 Checkbox switches.
https://flows.nodered.org/flow/1bffe6808d37bd96cce283939983e758
This is my Flow with the Switches
[{"id":"5de0bbd4.6c8574","type":"http in","z":"5910df1211cdae0b","name":"","url":"/mysitepost","method":"post","upload":false,"swaggerDoc":"","x":200,"y":760,"wires":[["80321000.f2dc5","75913f37.78e6e","199f8f9fc0bc3acb","7192ce70900c606a"]]},{"id":"80321000.f2dc5","type":"debug","z":"5910df1211cdae0b","name":"mysitepost","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":410,"y":760,"wires":[]},{"id":"8de9647.b8a9a98","type":"http response","z":"5910df1211cdae0b","name":"","statusCode":"","headers":{},"x":860,"y":720,"wires":[]},{"id":"ad88b28c.bc842","type":"function","z":"5910df1211cdae0b","name":"return msg.payload to client","func":"msg.payload = 'The following data was submitted and available in the msg.payload: '+msg.payload;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":590,"y":720,"wires":[["8de9647.b8a9a98"]]},{"id":"75913f37.78e6e","type":"json","z":"5910df1211cdae0b","name":"","property":"payload","action":"","pretty":false,"x":400,"y":720,"wires":[["ad88b28c.bc842"]]},{"id":"fe7999f83187bfc4","type":"http in","z":"5910df1211cdae0b","name":"","url":"/button","method":"get","upload":false,"swaggerDoc":"","x":250,"y":580,"wires":[["263c58b396e3385b"]]},{"id":"263c58b396e3385b","type":"function","z":"5910df1211cdae0b","name":"msg.url = \"timerpost\";","func":"msg.url = \"buttonpost\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":580,"wires":[["0b949b4851b19d65"]]},{"id":"f122b0278e4e7b50","type":"template","z":"5910df1211cdae0b","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"body {\n\tfont-family: arial, verdana, sans-serif;\n\tfont-size: 8px;\n\tbackground: #1E1E20;\n\ttext-align: center;\n}\n\n.switch {\n\tdisplay: inline-block;\n\tmargin: 10em 2em;\n\tposition: relative;\n\tborder-radius: 3.5em;\n\t-webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);\n\t-moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);\n\tbox-shadow: 0 0 0.5em rgba(255,255,255,0.2);\n}\n\n.switch label {\n\twidth: 100%;\n\theight: 100%;\n\tmargin: 0;\n\tpadding: 0;\n\tdisplay: block;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 10;\n}\n\n.switch input {\n\tdisplay: none;\n}\n\n.switch span {\n\tdisplay: block;\n\t-webkit-transition: top 0.2s;\n\t-moz-transition: top 0.2s;\n\t-ms-transition: top 0.2s;\n\t-o-transition: top 0.2s;\n\ttransition: top 0.2s;\n}\n\n.switch-border1 {\n\tborder: 0.1em solid #000;\n\tborder-radius: 3.5em;\n\t-webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n\t-moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n\tbox-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n}\n\n.switch-border2 {\n\twidth: 6.6em;\n\theight: 12.6em;\n\tposition: relative;\n\tborder: 0.1em solid #323232;\n\tbackground-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));\n\tbackground-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n\tbackground-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n\tbackground-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n\tbackground-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n\tbackground-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);\n\tborder-radius: 3.4em;\n}\n\n.switch-border2:before,\n.switch-border2:after {\n\tcontent: '';\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 0;\n\topacity: .3;\n\tborder-radius: 3.4em;\n}\n\n.switch-border2:before {\n\tbackground: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));\n\tbackground: -webkit-linear-gradient(#000, rgba(0,0,0,0));\n\tbackground: -moz-linear-gradient(#000, rgba(0,0,0,0));\n\tbackground: -ms-linear-gradient(#000, rgba(0,0,0,0));\n\tbackground: -o-linear-gradient(#000, rgba(0,0,0,0));\n\tbackground: linear-gradient(#000, rgba(0,0,0,0));\n}\n\n.switch-border2:after {\n\tbackground: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));\n\tbackground: -webkit-linear-gradient(rgba(0,0,0,0), #000);\n\tbackground: -moz-linear-gradient(rgba(0,0,0,0), #000);\n\tbackground: -ms-linear-gradient(rgba(0,0,0,0), #000);\n\tbackground: -o-linear-gradient(rgba(0,0,0,0), #000);\n\tbackground: linear-gradient(rgba(0,0,0,0), #000);\n}\n\n.switch-top {\n\twidth: 100%;\n\theight: 84%;\n\tposition: absolute;\n\ttop: 8%;\n\tleft: 0;\n\tz-index: 1;\n\tbackground-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));\n\tbackground-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n\tbackground-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n\tbackground-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n\tbackground-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n\tbackground-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);\n\tborder-radius: 3.4em;\n}\n\n.switch-shadow {\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 2;\n\tborder-radius: 3.4em;\n\t-webkit-box-shadow: 0 0 2em black inset;\n\t-moz-box-shadow: 0 0 2em black inset;\n\tbox-shadow: 0 0 2em black inset;\n}\n\n.switch-handle-left,\n.switch-handle-right {\n\tcontent: '';\n\tdisplay: block;\n\twidth: 3.6em;\n\theight: 0;\n\tposition: absolute;\n\ttop: 6.6em;\n\tz-index: 2;\n\tborder-bottom: 4.5em solid #111;\n\tborder-left: 0.7em solid transparent;\n\tborder-right: 0.7em solid transparent;\n\tborder-radius: 0;\n}\n\n.switch-handle-left {\n\tleft: 0.8em;\n}\n\n.switch-handle-right {\n\tright: 0.8em;\n}\n\n.switch-handle {\n\twidth: 3.6em;\n\theight: 4.5em;\n\tposition: absolute;\n\ttop: 6.6em;\n\tleft: 1.5em;\n\tz-index: 3;\n\tbackground: #333;\n\tbackground-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));\n\tbackground-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n\tbackground-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n\tbackground-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n\tbackground-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n\tbackground-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);\n\tborder-radius: 0;\n}\n\n.switch-handle-top {\n\twidth: 5em;\n\theight: 5em;\n\tposition: absolute;\n\ttop: 8.5em;\n\tleft: 0.8em;\n\tz-index: 4;\n\tbackground-color: #555;\n\tbackground-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));\n\tbackground-image: -webkit-linear-gradient(left, #5F5F5F, #878787);\n\tbackground-image: -moz-linear-gradient(left, #5F5F5F, #878787);\n\tbackground-image: -ms-linear-gradient(left, #5F5F5F, #878787);\n\tbackground-image: -o-linear-gradient(left, #5F5F5F, #878787);\n\tbackground-image: linear-gradient(to right, #5F5F5F, #878787);\n\tborder-top: 0.2em solid #AEB2B3;\n\tborder-radius: 2.5em;\n}\n\n.switch-handle-bottom {\n\twidth: 3.6em;\n\theight: 3.6em;\n\tposition: absolute;\n\ttop: 4.7em;\n\tleft: 1.5em;\n\tz-index: 3;\n\tbackground: #333;\n\tbackground-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));\n\tbackground-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n\tbackground-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n\tbackground-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n\tbackground-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n\tbackground-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);\n\tborder-top: 0.2em solid #141414;\n\tborder-radius: 1.8em;\n}\n\n.switch-handle-base {\n\twidth: 4.2em;\n\theight: 4.2em;\n\tposition: absolute;\n\ttop: 3.8em;\n\tleft: 1.2em;\n\tz-index: 2;\n\tborder-top: 0.2em solid rgba(255,255,255,0.35);\n\tborder-radius: 2.1em;\n\t-webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n\t-moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n\tbox-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n}\n\n.switch-led {\n\tposition: absolute;\n\tleft: 2em;\n\tborder-radius: 1.4em;\n}\n\n.switch-led-border {\n\tborder: 0.2em solid black;\n\tborder-radius: 1.3em;\n}\n\n.switch-led-light {\n\tborder-radius: 1.1em;\n\t-webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n\t-moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n\tbox-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n}\n\n.switch-led-glow {\n\twidth: 2em;\n\theight: 2em;\n\tposition: relative;\n\tborder-radius: 1em;\n}\n\n.switch-led-glow:before {\n\tcontent: '';\n\tdisplay: block;\n\twidth: 0.6em;\n\theight: 0.6em;\n\tposition: absolute;\n\ttop: 0.3em;\n\tleft: 0.7em;\n\tbackground: rgba(255,255,255,0.2);\n\tborder-radius: 0.3em;\n\t-webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);\n\t-moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);\n\tbox-shadow: 0 0 1em rgba(255,255,255,0.75);\n}\n\n.switch-led-glow:after {\n\tcontent: '';\n\tdisplay: block;\n\twidth: 0;\n\theight: 0;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\topacity: 0.2;\n\tfilter: alpha(opacity=20);\n\tborder: 1em solid #fff;\n\tborder-color: transparent #fff transparent #fff;\n\tborder-radius: 1em;\n\t-webkit-transform: rotate(45deg);\n\t-moz-transform: rotate(45deg);\n\t-ms-transform: rotate(45deg);\n\t-o-transform: rotate(45deg);\n\ttransform: rotate(45deg);\n}\n\n.switch-led:after {\n\tdisplay: block;\n\twidth: 100%;\n\tposition: absolute;\n\tleft: 0;\n\tcolor: #666;\n\tfont-family: arial, verdana, sans-serif;\n\tfont-weight: bold;\n\ttext-align: center;\n\ttext-shadow: 0 0.1em rgba(0,0,0,0.7);\n}\n\n.switch-led-green:after {\n\tcontent: 'ON';\n\ttop: -1.8em;\n}\n\n.switch-led-red:after {\n\tcontent: 'OFF';\n\tbottom: -1.8em;\n}\n\n.switch-led-green {\n\ttop: -5em;\n\tborder-top: 0.1em solid rgba(0,161,75,0.5);\n\tborder-bottom: 0.1em solid rgba(255,255,255,0.25);\n}\n\n.switch-led-green .switch-led-light {\n\tbackground: rgb(0,161,75);\n\tborder: 0.1em solid rgb(0,104,56);\n}\n\n.switch-led-red {\n\tbottom: -5em;\n\tborder-top: 0.1em solid rgba(237,28,36,0.2);\n\tborder-bottom: 0.1em solid rgba(255,255,255,0.25);\n\t-webkit-box-shadow: 0 0 3em rgb(237,28,36);\n\t-moz-box-shadow: 0 0 3em rgb(237,28,36);\n\tbox-shadow: 0 0 3em rgb(237,28,36);\n}\n\n.switch-led-red .switch-led-light {\n\tbackground: rgb(237,28,36);\n\tborder: 0.1em solid rgb(161,30,45);\n}\n\n.switch-led-red .switch-led-glow {\n\tbackground: #fff;\n\tbackground: rgba(255, 255, 255, 0.3);\n\tfilter: alpha(opacity=30);\n}\n\n/* Switch on */\n\n.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {\n\ttop: 1.5em;\n\tborder-bottom: 0;\n\tborder-top: 4.5em solid #111;\n}\n\n.switch input:checked~.switch-handle {\n\ttop: 1.5em;\n}\n\n.switch input:checked~.switch-handle-top {\n\ttop: -1em;\n\tborder-top: 0;\n\tborder-bottom: 0.2em solid #AEB2B3;\n}\n\n.switch input:checked~.switch-handle-bottom {\n\ttop: 4.2em;\n\tborder-top: 0;\n\tborder-bottom: 0.2em solid #141414;\n}\n\n.switch input:checked~.switch-handle-base {\n\ttop: 4.5em;\n\tborder-top: 0;\n\tborder-bottom: 0.2em solid rgba(255,255,255,0.35);\n}\n\n.switch input:checked~.switch-led-green {\n\t-webkit-box-shadow: 0 0 3em rgb(0,161,75);\n\t-moz-box-shadow: 0 0 3em rgb(0,161,75);\n\tbox-shadow: 0 0 3em rgb(0,161,75);\n}\n\n.switch input:checked~.switch-led-green .switch-led-glow {\n\tbackground: #fff;\n\tbackground: rgba(255, 255, 255, 0.4);\n\tfilter: alpha(opacity=40);\n}\n\n.switch input:checked~.switch-led-red {\n\t-webkit-box-shadow: none;\n\t-moz-box-shadow: none;\n\tbox-shadow: none;\n}\n\n.switch input:checked~.switch-led-red .switch-led-glow {\n\tbackground: rgba(255, 255, 255, 0);\n\tfilter: alpha(opacity=0);\n}\n\n","x":630,"y":660,"wires":[["c4933cbc527c7a51"]]},{"id":"0b949b4851b19d65","type":"template","z":"5910df1211cdae0b","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"","x":470,"y":660,"wires":[["f122b0278e4e7b50"]]},{"id":"b635a2f2b5aac451","type":"http response","z":"5910df1211cdae0b","name":"","statusCode":"","headers":{},"x":930,"y":660,"wires":[]},{"id":"c4933cbc527c7a51","type":"template","z":"5910df1211cdae0b","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head>\n\n <style>{{{payload.style}}}</style>\n<span class=\"switch\">\n\t<span class=\"switch-border1\">\n\t\t<span class=\"switch-border2\">\n\t\t\t<input id=\"switch1\" type=\"checkbox\" checked />\n\t\t\t<label for=\"switch1\"></label>\n\t\t\t<span class=\"switch-top\"></span>\n\t\t\t<span class=\"switch-shadow\"></span>\n\t\t\t<span class=\"switch-handle\"></span>\n\t\t\t<span class=\"switch-handle-left\"></span>\n\t\t\t<span class=\"switch-handle-right\"></span>\n\t\t\t<span class=\"switch-handle-top\"></span>\n\t\t\t<span class=\"switch-handle-bottom\"></span>\n\t\t\t<span class=\"switch-handle-base\"></span>\n\t\t\t<span class=\"switch-led switch-led-green\">\n\t\t\t\t<span class=\"switch-led-border\">\n\t\t\t\t\t<span class=\"switch-led-light\">\n\t\t\t\t\t\t<span class=\"switch-led-glow\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t<span class=\"switch-led switch-led-red\">\n\t\t\t\t<span class=\"switch-led-border\">\n\t\t\t\t\t<span class=\"switch-led-light\">\n\t\t\t\t\t\t<span class=\"switch-led-glow\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</span>\n\n<span class=\"switch\">\n\t<span class=\"switch-border1\">\n\t\t<span class=\"switch-border2\">\n\t\t\t<input id=\"switch2\" type=\"checkbox\" />\n\t\t\t<label for=\"switch2\"></label>\n\t\t\t<span class=\"switch-top\"></span>\n\t\t\t<span class=\"switch-shadow\"></span>\n\t\t\t<span class=\"switch-handle\"></span>\n\t\t\t<span class=\"switch-handle-left\"></span>\n\t\t\t<span class=\"switch-handle-right\"></span>\n\t\t\t<span class=\"switch-handle-top\"></span>\n\t\t\t<span class=\"switch-handle-bottom\"></span>\n\t\t\t<span class=\"switch-handle-base\"></span>\n\t\t\t<span class=\"switch-led switch-led-green\">\n\t\t\t\t<span class=\"switch-led-border\">\n\t\t\t\t\t<span class=\"switch-led-light\">\n\t\t\t\t\t\t<span class=\"switch-led-glow\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t<span class=\"switch-led switch-led-red\">\n\t\t\t\t<span class=\"switch-led-border\">\n\t\t\t\t\t<span class=\"switch-led-light\">\n\t\t\t\t\t\t<span class=\"switch-led-glow\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</span>\n\t\n<script>{{{payload.script}}}</script>","x":790,"y":660,"wires":[["b635a2f2b5aac451"]]}]
The Web site is aviable at: http://localhost:1880/button
I did something similar in the past where i got help here, i tryed a lot but i cant get the solution by my own so iam hoping that someone may know how to do this.
Iam looking to find a solution that you get in output in Node Red whenever a switch is checked. And if Possible that you can send the Status to the Website if a status change. For example i turn a light on from somewhere else that the dashboard gets the status and change the switch on.
Thx in advance
