Rocker Switch HTML CSS output question

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


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.

Seems to output but the output is strange

2021

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

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>

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

and here is whwere the help is

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

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.