Rocker Switch HTML CSS output question

General
1

Trying to stretch my HTML CSS wings and found a rocker switch I'd like to incorporate in a flow. Problem is I can't get any out put of the switch. Hours of googling has not helped so in desperation if there is a CSS wizard that would care to point out my obvious errors it would be appreciated.
Thanks

[{"id":"690aa63fc4fa1157","type":"tab","label":"Rocker Switch","disabled":false,"info":""},{"id":"ba985be3cf4e6190","type":"ui_template","z":"690aa63fc4fa1157","group":"5ed16f9b2e45cd82","name":"Rocker","order":0,"width":0,"height":0,"format":"<div class=\"mid\">\n\n  <label class=\"rocker\">\n    <input class =\"checkbox\" type =\"checkbox\"/> \n    <span class=\"switch-left\" data-on=\"1\">Fan On </span>\n    <span class=\"switch-right\" data-off=\"0\">Fan Off</span>\n  </label>\n\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":470,"y":120,"wires":[["45b96197cba512cf"]]},{"id":"5f3dbc281cf510a3","type":"ui_template","z":"690aa63fc4fa1157","group":"5ed16f9b2e45cd82","name":"CSS Rocker","order":1,"width":0,"height":0,"format":"<style>\n\n\n/* Switch starts here */\n.rocker {\ndisplay: inline-block;\nposition: relative;\n/*\nSIZE OF SWITCH\n==============\nAll sizes are in em - therefore\nchanging the font-size here\nwill change the size of the switch.\nSee .rocker-small below as example.\n*/\nfont-size: 2em;\nfont-weight: bold;\ntext-align: center;\ntext-transform: uppercase;\ncolor: #888;\nwidth: 7em;\nheight: 4em;\noverflow: hidden;\nborder-bottom: 0.5em solid #eee;\n}\n\n.rocker-small {\nfont-size: 0.75em; /* Sizes the switch */\nmargin: 1em;\n}\n\n.rocker::before {\ncontent: \"\";\nposition: absolute;\ntop: 0.5em;\nleft: 0;\nright: 0;\nbottom: 0;\nbackground-color: #999;\nborder: 0.5em solid #eee;\nborder-bottom: 0;\n}\n\n.rocker input {\nopacity: 0;\nwidth: 0;\nheight: 0;\n}\n\n.switch-left,\n.switch-right {\ncursor: pointer;\nposition: absolute;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nheight: 2.5em;\nwidth: 3em;\ntransition: 0.2s;\n}\n\n.switch-left {\nheight: 2.4em;\nwidth: 2.75em;\nleft: 0.85em;\nbottom: 0.4em;\nbackground-color: #ddd;\ntransform: rotate(15deg) skewX(15deg);\n}\n\n.switch-right {\nright: 0.5em;\nbottom: 0;\nbackground-color: #bd5757;\ncolor: #fff;\n}\n\n.switch-left::before,\n.switch-right::before {\ncontent: \"\";\nposition: absolute;\nwidth: 0.4em;\nheight: 2.45em;\nbottom: -0.45em;\nbackground-color: #ccc;\ntransform: skewY(-65deg);\n}\n\n.switch-left::before {\nleft: -0.4em;\n}\n\n.switch-right::before {\nright: -0.375em;\nbackground-color: transparent;\ntransform: skewY(65deg);\n}\n\ninput:checked + .switch-left {\nbackground-color: #0084d0;\ncolor: #fff;\nbottom: 0px;\nleft: 0.5em;\nheight: 2.5em;\nwidth: 3em;\ntransform: rotate(0deg) skewX(0deg);\n}\n\ninput:checked + .switch-left::before {\nbackground-color: transparent;\nwidth: 3.0833em;\n}\n\ninput:checked + .switch-left + .switch-right {\nbackground-color: #ddd;\ncolor: #888;\nbottom: 0.4em;\nright: 0.8em;\nheight: 2.4em;\nwidth: 2.75em;\ntransform: rotate(-15deg) skewX(-15deg);\n}\n\ninput:checked + .switch-left + .switch-right::before {\nbackground-color: #ccc;\n}\n\n/* Keyboard Users */\ninput:focus + .switch-left {\ncolor: #333;\n}\n\ninput:checked:focus + .switch-left {\ncolor: #fff;\n}\n\ninput:focus + .switch-left + .switch-right {\ncolor: #fff;\n}\n\ninput:checked:focus + .switch-left + .switch-right {\ncolor: #333;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":470,"y":200,"wires":[[]]},{"id":"45b96197cba512cf","type":"debug","z":"690aa63fc4fa1157","name":"w","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":690,"y":120,"wires":[]},{"id":"5ed16f9b2e45cd82","type":"ui_group","name":"Rocker","tab":"783a543b812c092c","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"783a543b812c092c","type":"ui_tab","name":"Rocker","icon":"dashboard","disabled":false,"hidden":false}]
2

try this

<script>
this.scope.action = function(value) { return value; }
</script>

<div class="mid">
  <label class="rocker">
    <input class ="checkbox" type ="checkbox"/> 
    <span ng-click="send({payload:action(1)})" class="switch-left">Fan On </span>
    <span ng-click="send({payload:action(0)})" class="switch-right">Fan Off</span>
  </label>
</div>

There is an example in the template node help, example 3, send message is what you where after.

3

Seems to output but the output is strange

2021

[EDIT] can't find template help example 3, any pointers where it is?

4

Got it! Thanks @E1cid , modified your code to this


<span ng-click="send({payload:1})" class="switch-left">Fan On </span>
 <span ng-click="send({payload:0})" class="switch-right">Fan Off</span>
5

you seem to be missing the payload.
here's what i get

Screenshot_20210925-164218
Screenshot_20210925-1642181920×1080 205 KB

and here is whwere the help is

Screenshot_20210925-164442
Screenshot_20210925-1644421920×1080 204 KB

6

I have been trying to toggle the switch from an incoming msg... right now using two inject nodes to pass on the 0/1 payload.

In the past I found I change the template code with msg.template but that is not what I want to do here.

It seems like I need to either emulate a click or feed some other command ng-click?, but quickly got lost in my various attempts to find said command.

EG this seemed right, but didn't work.

image