Send msg.payload on html button

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
    }
]

Try this :

[{"id":"9e681f07834eca88","type":"ui_template","z":"5847b7aa62131d37","group":"62350f50d4b09ff8","name":"Button","order":6,"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: 1;\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<script>\n\n(function(scope) {\n\nscope.sendMsg = function(event) {\n  console.log(event.target)\n  scope.send({payload: event.target.checked ? \"checked\" : \"unchecked\"})\n}\n  \n})(scope)\n\n</script>\n\n\n\n\n\n<label class=\"container\">\n  <input type=\"checkbox\"  ng-click=\"sendMsg($event)\">\n  <span class=\"checkmark\"></span>\n</label>\n\n</body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":530,"y":1200,"wires":[["78ef36349fc4eaef"]]},{"id":"78ef36349fc4eaef","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":690,"y":1200,"wires":[]},{"id":"62350f50d4b09ff8","type":"ui_group","name":"Group1","tab":"554e77d51ad13f2d","order":1,"disp":false,"width":"11","collapse":false,"className":""},{"id":"554e77d51ad13f2d","type":"ui_tab","name":"Tab1","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

ps. i changed the css opacity to 1 because i didnt have your svg and i could see the checkbox

Or slightly simplier, no need for the function or the html tags <head> <body> etc

<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: 1;
  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>

<label class="container">
    <input type="checkbox"
       ng-model="checkboxModel"
       ng-true-value="true"
       ng-false-value="false"
       ng-change="send({payload: checkboxModel})">
  <span class="checkmark"></span>
</label>
2 Likes

Thanks for the answers sent, I would like to ask you another question with the subject, you already showed me how to make the button send the message, but now I have the following problem.

  1. The button does not keep the state, that is, if it is checked when changing the tab and returning again to the tab where the button is, the state of the button returns to unchecked.
  2. If the button receives a true or false message, it should change to check or uncheck

Thank you again for your help and for the time.

You have to use the Reload last value on refresh and Add output messages to stored state

image

.. in order to replay the last message (which is : sending the last state of that checkbox) and with some JS receive it again in order to re-set the state of that checkbox with ng-model

Example Flow:

[{"id":"835ec4de2012a71d","type":"ui_template","z":"5847b7aa62131d37","group":"62350f50d4b09ff8","name":"Button1","order":6,"width":0,"height":0,"format":"<label class=\"container\" >\n<input type=\"checkbox\" ng-model=\"checkboxModel1\" ng-checked=\"checkboxModel1\" ng-change=\"sendMsg()\">\n<span class=\"checkmark\"></span>\n</label>\n\n<script>\n  (function(scope) {\n\nscope.sendMsg = function() {\n  scope.send({topic: \"checkboxModel1\", payload: scope.checkboxModel1 })\n}\n\nscope.$watch('msg', function(msg) {\n    if (msg && msg.topic === \"checkboxModel1\") {\n      console.log(\"Msg from NR\", msg)\n      scope.checkboxModel1 = msg.payload\n    }\n})\n  \n})(scope)\n\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":1440,"wires":[["2e161faa8308e46a"]]},{"id":"2e161faa8308e46a","type":"debug","z":"5847b7aa62131d37","name":"1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":655,"y":1440,"wires":[],"l":false},{"id":"f5bfe28dbe6e9d9d","type":"ui_template","z":"5847b7aa62131d37","group":"91752fb80be218c7","name":"Button2","order":1,"width":0,"height":0,"format":"<label class=\"container\" >\n<input type=\"checkbox\" ng-model=\"checkboxModel2\" ng-checked=\"checkboxModel2\" ng-change=\"sendMsg()\">\n<span class=\"checkmark\"></span>\n</label>\n\n<script>\n  (function(scope) {\n\nscope.sendMsg = function() {\n  scope.send({topic: \"checkboxModel2\", payload: scope.checkboxModel2 })\n}\n\nscope.$watch('msg', function(msg) {\n    if (msg && msg.topic === \"checkboxModel2\") {\n      console.log(\"Msg from NR\", msg)\n      scope.checkboxModel2 = msg.payload\n    }\n})\n  \n})(scope)\n\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":1540,"wires":[["2dbd6171620df0b8"]]},{"id":"2dbd6171620df0b8","type":"debug","z":"5847b7aa62131d37","name":"2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":655,"y":1540,"wires":[],"l":false},{"id":"4330561661ce3237","type":"ui_template","z":"5847b7aa62131d37","group":"0031f3d7a634831f","name":"Button3","order":6,"width":0,"height":0,"format":"<label class=\"container\" >\n<input type=\"checkbox\" ng-model=\"checkboxModel3\" ng-checked=\"checkboxModel3\" ng-change=\"sendMsg()\">\n<span class=\"checkmark\"></span>\n</label>\n\n<script>\n  (function(scope) {\n\nscope.sendMsg = function() {\n  scope.send({topic: \"checkboxModel3\", payload: scope.checkboxModel3 })\n}\n\nscope.$watch('msg', function(msg) {\n    if (msg && msg.topic === \"checkboxModel3\") {\n      console.log(\"Msg from NR\", msg)\n      scope.checkboxModel3 = msg.payload\n    }\n})\n  \n})(scope)\n\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":1640,"wires":[["f798b0d5b9f30dfd"]]},{"id":"f798b0d5b9f30dfd","type":"debug","z":"5847b7aa62131d37","name":"3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":655,"y":1640,"wires":[],"l":false},{"id":"62350f50d4b09ff8","type":"ui_group","name":"Group1","tab":"554e77d51ad13f2d","order":1,"disp":false,"width":"11","collapse":false,"className":""},{"id":"91752fb80be218c7","type":"ui_group","name":"Group2","tab":"a6b592813baacd83","order":1,"disp":false,"width":"5","collapse":false,"className":""},{"id":"0031f3d7a634831f","type":"ui_group","name":"Group3","tab":"981cecffacccfcf7","order":1,"disp":true,"width":"9","collapse":false,"className":""},{"id":"554e77d51ad13f2d","type":"ui_tab","name":"Tab1","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"a6b592813baacd83","type":"ui_tab","name":"Tab2","icon":"dashboard","order":5,"disabled":false,"hidden":false},{"id":"981cecffacccfcf7","type":"ui_tab","name":"Tab3","icon":"dashboard","order":6,"disabled":false,"hidden":false}]

ps. open your Browser's Dev Tools to see the console.log of the message replay when its caught in scope.$watch

1 Like

Thank you very much for the help, the code and the examples you send me work perfect