Hello,
I have created a custom checkbox button, based on internet codes, that allows me to use svg images in the background, now I am trying that when changing the button from unchecked to checked it sends as a "true" message and when it changes back to unchecked it sends "false" and finally that if you receive a message through the node's input change the state of the button.
If someone can correct the code and show me how it should be, I thank you very much.
this is the code of the button that I use inside a node </> Template :
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox, add a svg background */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 96px;
width: 96px;
background-image: url("/f000.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: transparent;
}
/* When the checkbox is checked, add a svg background */
.container input:checked ~ .checkmark {
background-image: url("/f001.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<label class="container">
<input type="checkbox" ng-true-value="'checked'" ng-false-value="'unchecked'">
<span class="checkmark"></span>
</label>
</body>
</html>
This is the code of the flow:
[
{
"id": "9e681f07834eca88",
"type": "ui_template",
"z": "c63156752fca1a29",
"group": "87e79a83.f45268",
"name": "Button",
"order": 0,
"width": 0,
"height": 0,
"format": "<!DOCTYPE html>\n<html>\n<style>\n/* The container */\n.container {\n display: block;\n position: relative;\n padding-left: 35px;\n margin-bottom: 12px;\n cursor: pointer;\n font-size: 22px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n/* Hide the browser's default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* Create a custom checkbox, add a svg background */\n.checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 96px;\n width: 96px;\n background-image: url(\"/f000.svg\");\n background-repeat: no-repeat;\n background-position: center center;\n background-size: cover;\n}\n\n/* On mouse-over, add a grey background color */\n.container:hover input ~ .checkmark {\n background-color: transparent;\n}\n\n/* When the checkbox is checked, add a svg background */\n.container input:checked ~ .checkmark {\n background-image: url(\"/f001.svg\");\n background-repeat: no-repeat;\n background-position: center center;\n background-size: cover;\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 9px;\n top: 5px;\n width: 5px;\n height: 10px;\n border: solid white;\n border-width: 0 3px 3px 0;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n</style>\n<body>\n\n<label class=\"container\">\n <input type=\"checkbox\" ng-true-value=\"'checked'\" ng-false-value=\"'unchecked'\">\n <span class=\"checkmark\"></span>\n</label>\n\n</body>\n</html>\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 150,
"y": 80,
"wires": [
[]
]
},
{
"id": "87e79a83.f45268",
"type": "ui_group",
"name": "Pan and zoom feature",
"tab": "",
"order": 1,
"disp": true,
"width": "14",
"collapse": false
}
]
