Operate a switch node using a html button

#1

HI,

I have to create a function to operate a switch using a html buttons (ON_switch and OFF_switch) by using a template node and stay in the same url page /switchbtn when click.

[{"id":"3daf3076.cdfe9","type":"http in","z":"d7b2f523.cbf718","name":"","url":"/switchbtn","method":"get","upload":false,"swaggerDoc":"","x":190,"y":880,"wires":[["5a9367fd.faef78"]]},{"id":"5a9367fd.faef78","type":"template","z":"d7b2f523.cbf718","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <meta name=\"description\" content=\"\">\n    <meta name=\"author\" content=\"\">\n    <link rel=\"icon\" href=\"\">\n\n    <title>Home</title>\n\n    <!-- Bootstrap core CSS -->\n    <link href=\"https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <!-- Custom styles for this template -->\n    <link href=\"https://getbootstrap.com/docs/4.1/examples/sign-in/signin.css\" rel=\"stylesheet\">\n  <script type=\"text/javascript\"></script><link rel=\"stylesheet\" type=\"text/css\" href=\"https://getbootstrap.com/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.css\" /></head>\n\n  <body class=\"text-center\"><script type=\"text/javascript\" language=\"javascript\" src=\"https://getbootstrap.com/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.js?0=0&0=0&0=0\"></script>\n    <form class=\"form-signin\" method=\"post\" style=\"margin-top:-20px;\">\n      \n      <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\" style=\"background-color:#579e33;\">ON_Switch</button>\n      <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\" style=\"background-color:#ef1f2d;\">OFF_Switch</button>\n    \n    </form>\n  </body>\n</html>","output":"str","x":400,"y":880,"wires":[["ff14ad8c.bbea6","bfe912a0.b182d"]]},{"id":"ff14ad8c.bbea6","type":"http response","z":"d7b2f523.cbf718","name":"","statusCode":"","headers":{},"x":610,"y":880,"wires":[]},{"id":"bfe912a0.b182d","type":"ui_switch","z":"d7b2f523.cbf718","name":"","label":"switch","tooltip":"","group":"3549a6e5.8b361a","order":6,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":510,"y":960,"wires":[["dcae901.eaa8d7"]]},{"id":"dcae901.eaa8d7","type":"debug","z":"d7b2f523.cbf718","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":730,"y":960,"wires":[]},{"id":"3549a6e5.8b361a","type":"ui_group","z":"","name":"Demo","tab":"23ec798a.3b8f36","disp":true,"width":"12","collapse":false},{"id":"23ec798a.3b8f36","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

flow

#2

The switch node belongs to node-red-dashboard, which means once you add that to the flow, you will automatically have a dashboard at https://<ip>:1880/ui containing this button.
You can send true/false/on/off to the button and it will switch. See example.

So currently you are mixing up 2 things: template and dashboard. Unless I misunderstand what you are trying to do.

To build custom pages I would recommend ui-builder

1 Like