|
[{"id":"ca5421c2.cc3a5","type":"tab","label":"UIToggles","disabled":false,"info":""},{"id":"438a95b9.6a9eac","type":"ui_template","z":"ca5421c2.cc3a5","group":"9f2da61.3353758","name":"Dashboard UIToggle CCS","order":2,"width":12,"height":1,"format":"<style id=\"dashboard-styles-override\">\n.switchwrapper {\n margin: auto 0;\n}\n.toggle_radio{\n margin: auto;\n overflow: hidden;\n border-radius: 50px;\n position: relative;\n height: 19px;\n border: 1px solid var(--nr-dashboard-groupBorderColor);\n background: var(--nr-dashboard-widgetBgndColor);\n}\n.toggle_radio > * {\n float: left;\n}\n.toggle_radio input[type=radio]{\n display: none;\n}\n.toggle_4{\n width: 25%;\n}\n.toggle_3{\n width: 33%;\n}\n.toggle_2{\n width: 50%;\n}\n.toggle_radio label{\n display: block;\n height: 15px;\n margin: 0;\n line-height :15px;\n border-radius: 50px;\n cursor: pointer;\n z-index: 1;\n text-align: center;\n}\n.toggle_radio label >p {\n background:transparent !important;\n}\n.toggle_option_slider{\n \n height: 15px;\n position: absolute;\n top: 2px;\n border-radius: 50px;\n transition: all .3s ease;\n z-index:0;\n left:2px;\n opacity:0.5;\n background: var(--nr-dashboard-widgetColor);\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":130,"y":40,"wires":[[]]},{"id":"c770e530.b74478","type":"ui_template","z":"ca5421c2.cc3a5","group":"e2c488d6.e06ad8","name":"3-way switch","order":2,"width":6,"height":1,"format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'first_'+$id}}\" ng-model=\"value\" value=\"first\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'second_'+$id}}\" ng-model=\"value\" value=\"second\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'third_'+$id}}\" ng-model=\"value\" value=\"third\">\n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider toggle_3\"></div>\n <label class=\" toggle_3\" for=\"{{'first_'+$id}}\"><p>A</p></label>\n <label class=\" toggle_3\" for=\"{{'second_'+$id}}\"><p>B</p></label>\n <label class=\" toggle_3\" for=\"{{'third_'+$id}}\"><p>C</p></label>\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n scope.incomingChange = false\n scope.$watch('value', function(value) {\n switch(value){\n case 'first':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"3px\")\n break\n }\n case 'second':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"33%\")\n break\n }\n case 'third':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"66%\")\n break\n }\n }\n if(scope.incomingChange == true){\n scope.incomingChange = false\n return\n }\n if(!value){\n return\n }\n scope.send({payload: value})\n \n });\n scope.$watch('msg', function(msg) {\n if(msg){\n if(scope.value != msg.payload){\n scope.incomingChange = true\n scope.value = msg.payload\n }\n \n }\n });\n})(scope);\n</script>\n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":350,"y":240,"wires":[["e5fbeffc.05654"]]},{"id":"e5fbeffc.05654","type":"debug","z":"ca5421c2.cc3a5","name":"Selected option","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":560,"y":240,"wires":[]},{"id":"fffca1ba.ef777","type":"inject","z":"ca5421c2.cc3a5","name":"Select first","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"first","payloadType":"str","x":120,"y":200,"wires":[["c770e530.b74478"]]},{"id":"5d4d028f.3736dc","type":"inject","z":"ca5421c2.cc3a5","name":"Select second","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"second","payloadType":"str","x":110,"y":240,"wires":[["c770e530.b74478"]]},{"id":"32a2f720.f367b8","type":"inject","z":"ca5421c2.cc3a5","name":"Select third","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"third","payloadType":"str","x":120,"y":280,"wires":[["c770e530.b74478"]]},{"id":"de21e3f1.82753","type":"ui_template","z":"ca5421c2.cc3a5","group":"e2c488d6.e06ad8","name":"2-way switch","order":1,"width":6,"height":1,"format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'first_'+$id}}\" ng-model=\"value\" value=\"first\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'second_'+$id}}\" ng-model=\"value\" value=\"second\">\n \n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider toggle_2\"></div>\n <label class=\" toggle_2\" for=\"{{'first_'+$id}}\"><p>A</p></label>\n <label class=\" toggle_2\" for=\"{{'second_'+$id}}\"><p>B</p></label>\n\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n scope.incomingChange = false\n scope.$watch('value', function(value) {\n switch(value){\n case 'first':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"2px\")\n break\n }\n case 'second':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"49%\")\n break\n }\n\n }\n if(scope.incomingChange == true){\n scope.incomingChange = false\n return\n }\n if(!value){\n return\n }\n scope.send({payload: value})\n \n });\n scope.$watch('msg', function(msg) {\n if(msg){\n if(scope.value != msg.payload){\n scope.incomingChange = true\n scope.value = msg.payload\n }\n \n }\n });\n})(scope);\n</script>\n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":350,"y":160,"wires":[["56b0f8.831e0f08"]]},{"id":"56b0f8.831e0f08","type":"debug","z":"ca5421c2.cc3a5","name":"Selected option","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":560,"y":160,"wires":[]},{"id":"96d99491.c677b8","type":"inject","z":"ca5421c2.cc3a5","name":"Select first","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"first","payloadType":"str","x":120,"y":120,"wires":[["de21e3f1.82753"]]},{"id":"a07e0e6e.4244c","type":"inject","z":"ca5421c2.cc3a5","name":"Select second","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"second","payloadType":"str","x":110,"y":160,"wires":[["de21e3f1.82753"]]},{"id":"5ec61ac2.9a01c4","type":"ui_template","z":"ca5421c2.cc3a5","group":"e2c488d6.e06ad8","name":"4-way switch","order":3,"width":6,"height":1,"format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'first_'+$id}}\" ng-model=\"value\" value=\"first\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'second_'+$id}}\" ng-model=\"value\" value=\"second\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'third_'+$id}}\" ng-model=\"value\" value=\"third\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'fourth_'+$id}}\" ng-model=\"value\" value=\"fourth\">\n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider toggle_4\"></div>\n <label class=\" toggle_4\" for=\"{{'first_'+$id}}\"><p>A</p></label>\n <label class=\" toggle_4\" for=\"{{'second_'+$id}}\"><p>B</p></label>\n <label class=\" toggle_4\" for=\"{{'third_'+$id}}\"><p>C</p></label>\n <label class=\" toggle_4\" for=\"{{'fourth_'+$id}}\"><p>D</p></label>\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n scope.incomingChange = false\n scope.$watch('value', function(value) {\n switch(value){\n case 'first':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"3px\")\n break\n }\n case 'second':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"25%\")\n break\n }\n case 'third':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"50%\")\n break\n }\n case 'fourth':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"74%\")\n break\n }\n }\n if(scope.incomingChange == true){\n scope.incomingChange = false\n return\n }\n if(!value){\n return\n }\n scope.send({payload: value})\n \n });\n scope.$watch('msg', function(msg) {\n if(msg){\n if(scope.value != msg.payload){\n scope.incomingChange = true\n scope.value = msg.payload\n }\n \n }\n });\n})(scope);\n</script>\n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":350,"y":360,"wires":[["51fb29aa.c34508"]]},{"id":"51fb29aa.c34508","type":"debug","z":"ca5421c2.cc3a5","name":"Selected option","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":560,"y":360,"wires":[]},{"id":"32d36a7c.a9e9c6","type":"inject","z":"ca5421c2.cc3a5","name":"Select first","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"first","payloadType":"str","x":120,"y":320,"wires":[["5ec61ac2.9a01c4"]]},{"id":"8878f3d7.188a4","type":"inject","z":"ca5421c2.cc3a5","name":"Select second","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"second","payloadType":"str","x":110,"y":360,"wires":[["5ec61ac2.9a01c4"]]},{"id":"3824b305.e6cafc","type":"inject","z":"ca5421c2.cc3a5","name":"Select third","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"third","payloadType":"str","x":120,"y":400,"wires":[["5ec61ac2.9a01c4"]]},{"id":"a71786e7.e950d8","type":"inject","z":"ca5421c2.cc3a5","name":"Select fourth","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fourth","payloadType":"str","x":110,"y":440,"wires":[["5ec61ac2.9a01c4"]]},{"id":"f754f953.54c708","type":"ui_template","z":"ca5421c2.cc3a5","group":"9f2da61.3353758","name":"OnOffToggle","order":4,"width":6,"height":1,"format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'first_'+$id}}\" ng-model=\"value\" value=\"0\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'second_'+$id}}\" ng-model=\"value\" value=\"1\">\n \n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider toggle_2\"></div>\n <label class=\" toggle_2\" for=\"{{'first_'+$id}}\"><p>Off</p></label>\n <label class=\" toggle_2\" for=\"{{'second_'+$id}}\"><p>On</p></label>\n\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n scope.incomingChange = false\n scope.$watch('value', function(value) {\n switch(value){\n case '0':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"2px\")\n break\n }\n case '1':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"49%\")\n break\n }\n\n }\n if(scope.incomingChange == true){\n scope.incomingChange = false\n return\n }\n if(!value){\n return\n }\n scope.send({payload: value})\n \n });\n scope.$watch('msg', function(msg) {\n if(msg){\n if(scope.value != msg.payload){\n scope.incomingChange = true\n scope.value = msg.payload\n }\n \n }\n });\n})(scope);\n</script>\n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":350,"y":580,"wires":[[]],"info":"Off = 0\nOn = 1"},{"id":"4faa61eb.351d9","type":"ui_template","z":"ca5421c2.cc3a5","group":"9f2da61.3353758","name":"AutoManToggle","order":4,"width":6,"height":1,"format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'first_'+$id}}\" ng-model=\"value\" value=\"1\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'second_'+$id}}\" ng-model=\"value\" value=\"0\">\n \n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider toggle_2\"></div>\n <label class=\" toggle_2\" for=\"{{'first_'+$id}}\"><p>Auto</p></label>\n <label class=\" toggle_2\" for=\"{{'second_'+$id}}\"><p>Man</p></label>\n\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n scope.incomingChange = false\n scope.$watch('value', function(value) {\n switch(value){\n case '1':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"2px\")\n break\n }\n case '0':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"49%\")\n break\n }\n\n }\n if(scope.incomingChange == true){\n scope.incomingChange = false\n return\n }\n if(!value){\n return\n }\n scope.send({payload: value})\n \n });\n scope.$watch('msg', function(msg) {\n if(msg){\n if(scope.value != msg.payload){\n scope.incomingChange = true\n scope.value = msg.payload\n }\n \n }\n });\n})(scope);\n</script>\n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":360,"y":620,"wires":[[]],"info":"Manual = 0\nAuto = 1\n\nHowever, Auto is placed in the left most position as it is often the default"},{"id":"803fb828.db1e78","type":"comment","z":"ca5421c2.cc3a5","name":"Default Multi-Way Switch Templates","info":"Default Multi-Way Switch Templates","x":160,"y":80,"wires":[]},{"id":"3fcdd54.9f0f02a","type":"comment","z":"ca5421c2.cc3a5","name":"Automation - Command and State Toggle Examples","info":"Automation - Command and State Toggle Examples","x":210,"y":480,"wires":[]},{"id":"a1a04257.c99ee","type":"comment","z":"ca5421c2.cc3a5","name":"Automation - 2 State Toggles","info":"Automation - Command and State Toggle Examples","x":160,"y":520,"wires":[]},{"id":"6357e025.937f","type":"ui_template","z":"ca5421c2.cc3a5","group":"9f2da61.3353758","name":"OnAutoOffToggle","order":4,"width":6,"height":1,"format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'first_'+$id}}\" ng-model=\"value\" value=\"0\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'second_'+$id}}\" ng-model=\"value\" value=\"-1\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'third_'+$id}}\" ng-model=\"value\" value=\"1\">\n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider toggle_3\"></div>\n <label class=\" toggle_3\" for=\"{{'first_'+$id}}\"><p>Off</p></label>\n <label class=\" toggle_3\" for=\"{{'second_'+$id}}\"><p>Auto</p></label>\n <label class=\" toggle_3\" for=\"{{'third_'+$id}}\"><p>On</p></label>\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n scope.incomingChange = false\n scope.$watch('value', function(value) {\n switch(value){\n case '0':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"2px\")\n break\n }\n case '-1':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"33%\")\n break\n }\n case '1':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"66%\")\n break\n }\n }\n if(scope.incomingChange == true){\n scope.incomingChange = false\n return\n }\n if(!value){\n return\n }\n scope.send({payload: value})\n \n });\n scope.$watch('msg', function(msg) {\n if(msg){\n if(scope.value != msg.payload){\n scope.incomingChange = true\n scope.value = msg.payload\n }\n \n }\n });\n})(scope);\n</script>\n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":370,"y":740,"wires":[[]],"info":"Off = 0\nOn = 1\nAuto = -1\n\nMany Device FacePlates will arrange these selections as Off - Auto - On, with Auto being the center and preferred position."},{"id":"87263b06.9f4b78","type":"comment","z":"ca5421c2.cc3a5","name":"Automation - 3 State Toggles","info":"Automation - Command and State Toggle Examples","x":160,"y":680,"wires":[]},{"id":"c8bb006d.cdbc5","type":"ui_template","z":"ca5421c2.cc3a5","group":"9f2da61.3353758","name":"AutoManTrakToggle","order":4,"width":6,"height":1,"format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'first_'+$id}}\" ng-model=\"value\" value=\"0\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'second_'+$id}}\" ng-model=\"value\" value=\"1\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'third_'+$id}}\" ng-model=\"value\" value=\"-1\">\n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider toggle_3\"></div>\n <label class=\" toggle_3\" for=\"{{'first_'+$id}}\"><p>Auto</p></label>\n <label class=\" toggle_3\" for=\"{{'second_'+$id}}\"><p>Man</p></label>\n <label class=\" toggle_3\" for=\"{{'third_'+$id}}\"><p>Trak</p></label>\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n scope.incomingChange = false\n scope.$watch('value', function(value) {\n switch(value){\n case '0':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"2px\")\n break\n }\n case '1':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"33%\")\n break\n }\n case '-1':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"66%\")\n break\n }\n }\n if(scope.incomingChange == true){\n scope.incomingChange = false\n return\n }\n if(!value){\n return\n }\n scope.send({payload: value})\n \n });\n scope.$watch('msg', function(msg) {\n if(msg){\n if(scope.value != msg.payload){\n scope.incomingChange = true\n scope.value = msg.payload\n }\n \n }\n });\n})(scope);\n</script>\n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":380,"y":780,"wires":[[]],"info":"Auto = 1\nManual = 0\nTrack = -1\n\nThese options are listed in preferred order, rather than value order\n\nTrack is a Control Mode that is usually set by some event trigger.. for instance a heating loop where you are controlling a valve but you've suddenly lost a fan or pump..... You may want that valve to track to another variable (bumpless tranfers) or a predefined value (safety). Usually, you do not select a Track Mode... However, it might be that some will use this Toggle to display state instead of issueing commands... So it's here. However, it is good practice to use the toggle to issue commmands... and some other indication (test box) be used to show actual state.."},{"id":"6257e76f.d50d08","type":"ui_template","z":"ca5421c2.cc3a5","group":"9f2da61.3353758","name":"LocRemTrakToggle","order":4,"width":6,"height":1,"format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'first_'+$id}}\" ng-model=\"value\" value=\"0\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'second_'+$id}}\" ng-model=\"value\" value=\"1\">\n <input type=\"radio\" class=\"toggle_option toggle_3\" id=\"{{'third_'+$id}}\" ng-model=\"value\" value=\"-1\">\n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider toggle_3\"></div>\n <label class=\" toggle_3\" for=\"{{'first_'+$id}}\"><p>Loc</p></label>\n <label class=\" toggle_3\" for=\"{{'second_'+$id}}\"><p>Rem</p></label>\n <label class=\" toggle_3\" for=\"{{'third_'+$id}}\"><p>Trak</p></label>\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n scope.incomingChange = false\n scope.$watch('value', function(value) {\n switch(value){\n case '0':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"2px\")\n break\n }\n case '1':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"33%\")\n break\n }\n case '-1':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"66%\")\n break\n }\n }\n if(scope.incomingChange == true){\n scope.incomingChange = false\n return\n }\n if(!value){\n return\n }\n scope.send({payload: value})\n \n });\n scope.$watch('msg', function(msg) {\n if(msg){\n if(scope.value != msg.payload){\n scope.incomingChange = true\n scope.value = msg.payload\n }\n \n }\n });\n})(scope);\n</script>\n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":370,"y":820,"wires":[[]],"info":"Local = 0\nRemote = 1\nTrack = -1\n\nThese options are listed in preferred order, rather than value order\n\nTrack is a Setpoint Mode that is usually set by some event trigger (i.e. fan failure, pump failure).. The idea is in complex cascading control loops, using a track mode for the setpoint can make for bumpless tranfers when the event that caused the trigger is completed. Usually, you do not select a Track Mode... However, it might be that some will use this Toggle to display setpoint mode states instead of issueing a setpoint mode... So it's here. However, it is good practice to use the toggle to issue commmands... and some other indication (text box) be used to show actual state.."},{"id":"33d28ff4.5cecd","type":"comment","z":"ca5421c2.cc3a5","name":"Automation - 4 State Toggles","info":"Automation - Command and State Toggle Examples","x":160,"y":880,"wires":[]},{"id":"179542c8.47d61d","type":"ui_template","z":"ca5421c2.cc3a5","group":"9f2da61.3353758","name":"VesselCmndToggle","order":4,"width":"0","height":"0","format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'first_'+$id}}\" ng-model=\"value\" value=\"0\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'second_'+$id}}\" ng-model=\"value\" value=\"1\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'third_'+$id}}\" ng-model=\"value\" value=\"2\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'fourth_'+$id}}\" ng-model=\"value\" value=\"3\">\n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider toggle_4\"></div>\n <label class=\" toggle_4\" for=\"{{'first_'+$id}}\"><p>Stndby</p></label>\n <label class=\" toggle_4\" for=\"{{'second_'+$id}}\"><p>Fill</p></label>\n <label class=\" toggle_4\" for=\"{{'third_'+$id}}\"><p>Recirc</p></label>\n <label class=\" toggle_4\" for=\"{{'fourth_'+$id}}\"><p>Drain</p></label>\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n scope.incomingChange = false\n scope.$watch('value', function(value) {\n switch(value){\n case '0':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"2px\")\n break\n }\n case '1':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"25%\")\n break\n }\n case '2':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"50%\")\n break\n }\n case '3':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"74%\")\n break\n }\n }\n if(scope.incomingChange == true){\n scope.incomingChange = false\n return\n }\n if(!value){\n return\n }\n scope.send({payload: value})\n \n });\n scope.$watch('msg', function(msg) {\n if(msg){\n if(scope.value != msg.payload){\n scope.incomingChange = true\n scope.value = msg.payload\n }\n \n }\n });\n})(scope);\n</script>\n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":370,"y":940,"wires":[[]],"info":"This example is different modes/operations occuring in a vessel\nPerhaps you Fill it, Drain it, Recirculate the Contents, or Place it in Standby..\n\nHere we have Standby=0, Fill=1, Recirc=2, Drain=3 \n\nOther option might be Transfer in lieu of Drain"},{"id":"9f2da61.3353758","type":"ui_group","name":"AutomationExamples","tab":"d6d3c358.5fb46","order":1,"disp":true,"width":"12","collapse":false},{"id":"e2c488d6.e06ad8","type":"ui_group","name":"Flight","tab":"d6d3c358.5fb46","order":2,"disp":true,"width":"6","collapse":false},{"id":"d6d3c358.5fb46","type":"ui_tab","name":"UIToggles","icon":"radio_button_checked","order":11,"disabled":false,"hidden":false}] |