# Rocker Switch HTML CSS output question

**URL:** <https://discourse.nodered.org/t/rocker-switch-html-css-output-question/51514>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [25 September 2021 15:02 UTC](https://discourse.nodered.org/t/rocker-switch-html-css-output-question/51514 "2021-09-25T15:02:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![shel](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@shel](https://discourse.nodered.org/u/shel)\
**Post date:** [25 September 2021 15:02 UTC](https://discourse.nodered.org/t/rocker-switch-html-css-output-question/51514/1 "2021-09-25T15:02:42Z")

</div>

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

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [25 September 2021 15:27 UTC](https://discourse.nodered.org/t/rocker-switch-html-css-output-question/51514/2 "2021-09-25T15:27:19Z")

</div>

try this

```auto
<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.

---

<div class="post-metadata">

**Author:** ![shel](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@shel](https://discourse.nodered.org/u/shel)\
**Post date:** [25 September 2021 15:38 UTC](https://discourse.nodered.org/t/rocker-switch-html-css-output-question/51514/3 "2021-09-25T15:38:20Z")

</div>

Seems to output but the output is strange

![2021](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2c497e9b01381b74b8ab42aa78b106bd4a59c9eb.jpeg)

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

---

<div class="post-metadata">

**Author:** ![shel](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@shel](https://discourse.nodered.org/u/shel)\
**Post date:** [25 September 2021 15:44 UTC](https://discourse.nodered.org/t/rocker-switch-html-css-output-question/51514/4 "2021-09-25T15:44:37Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [25 September 2021 15:45 UTC](https://discourse.nodered.org/t/rocker-switch-html-css-output-question/51514/5 "2021-09-25T15:45:17Z")

</div>

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

 ![Screenshot_20210925-164218](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/924a1cfea760c0712d3b8dd1af4ff2f53f743e47.png)

and here is whwere the help is

 ![Screenshot_20210925-164442](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a641e64850a40d77f68a49800a176f2e13ad157a.png)

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [25 September 2021 21:41 UTC](https://discourse.nodered.org/t/rocker-switch-html-css-output-question/51514/6 "2021-09-25T21:41:51Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b25d30d1dea967903d783a04c470f509fbb23a33.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 October 2021 21:41 UTC](https://discourse.nodered.org/t/rocker-switch-html-css-output-question/51514/7 "2021-10-09T21:41:56Z")

</div>

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