Hi,
I understand there is a ready made dashboard on node red,
but to start - I don't want to use this, I'd like to my own simple html page , with a checkbox.
Below is my json:
I can see the html loads and my checkbox ( slider) appears to work ...
I'd like to get a dynamic output into my flow ( for a start to a debug message) that tells me when the checkbox is checked/unchecked) ..
I've tried setting and sending the payload using the javascript inside the html so that it is sent to the debug flow
I'm a real novice at this .. so apologies in advance , but I cant figure out how to set the payload to the checkbox state.
Is it possible and whats the best method to do this.
thanks
[{"id":"1e048a02.f47d96","type":"tab","label":"html1","disabled":false,"info":""},{"id":"f613dcc8.7b4f","type":"http in","z":"1e048a02.f47d96","name":"","url":"bg1","method":"get","upload":false,"swaggerDoc":"","x":120,"y":340,"wires":[["2e46aa3c.238fa6"]]},{"id":"2e46aa3c.238fa6","type":"template","z":"1e048a02.f47d96","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n<style>\n .switch {position: relative; display: inline-block; width: 120px; height: 68px} \n .switch input {display: none}\n .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px}\n .slider:before {position: absolute; content: \"\"; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}\ninput:checked + .slider {\n background-color: #2196F3;\n}\ninput:focus + .slider {\n box-shadow: 0 0 1px #2196F3;\n}\n input:checked+.slider {background-color: #2196F3}\n input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}\n\n/* Rounded sliders */\n.slider.round {\n border-radius: 34px;\n}\n\n.slider.round:before {\n border-radius: 50%;\n}\n</style>\n</head>\n<body>\n\n<h2>Toggle Switch</h2>\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"myCheck\" onclick=\"read_checkbox()\">\n <span class=\"slider round\"></span>\n <p id=\"text\" style=\"display:none\">Checkbox is CHECKED!</p>\n</label> \n\n<script>\n\nfunction read_checkbox() {\n\n // Get the checkbox\n var checkBox = document.getElementById(\"myCheck\");\n\n // If the checkbox is checked, display the output text\n if (checkBox.checked == true){\n console.log(\"Switch is ON\");\n } else {\n console.log(\"Switch is off\");\n }\n}\n</script>\n</body>\n</html>","output":"str","x":360,"y":340,"wires":[["10097ab5.9f5a85","af0ef541.75c348"]]},{"id":"af0ef541.75c348","type":"debug","z":"1e048a02.f47d96","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":610,"y":180,"wires":[]},{"id":"10097ab5.9f5a85","type":"http response","z":"1e048a02.f47d96","name":"","statusCode":"","headers":{},"x":610,"y":340,"wires":[]}]
function read_checkbox() {
// Get the checkbox
var checkBox = document.getElementById("myCheck");
// If the checkbox is checked, display the output text
if (checkBox.checked == true){
console.log("Switch is ON");
// the line below doesn't work
msg.payload = "Switch is on"
} else {
console.log("Switch is off");
// the line below doesn't work
msg.payload = "Switch is off"
}
}
