Hey guys,
I have been trying to solve this issue on my own for a bit, however I can't seem to find the solution..
I am creating my custom dashboard for my hot tub controls and I have all of my devices (filtration / heating / light / etc.) on a schedule and the massage jets on a physical button. My dashboard should therefore not only show the current status of each device (1/0) but also allow for a manual interference, providing a switch to manually turn off / on each of those devices via the dashboard. At the same time I need to avoid certain scenarios, for example someone turning on the jets pump and the filtration pump at the same time.
So I have turned to a md-switch which allows for input from each device (in the flow below simulated by inject nodes) to show the current status, for output (1/0) depending on the state of the switch and a ng-disabled element to disable certain buttons under certain conditions.
My issue is that the dashboard switch is not visually switching when pressed, however the payload 1 is send through correctly. When clicked a second time, it switches visually, too.
When switching through the inject nodes it also behaves correctly.
When removing the ng-disabled payloads from the flow, it also behaves correctly.
I suspect my angular logic within the md-switch element to be faulty, what do you guys think?
Appreciate your help!
Sebastian
One of my buttons looks like this:
My flow looks like this:
[{"id":"dba6909e.82e5c8","type":"ui_template","z":"560cce99.6b1c28","group":"a1c9bfe.afd404","name":"css","order":4,"width":"0","height":"0","format":"<style>\n.headline-container{\n display:flex;\n flex-direction:row;\n font-size:2em;\n text-transform:uppercase;\n padding:1em;\n background-color:#f3f6f8;\n}\n.headline-bold{\n font-weight:800;\n margin:0px 0.2em 0px 0px !important;\n} \n.headline-light{\n font-weight:400;\n margin:0px 0px 0px 0.2em !important;\n}\n.dashboard-container{\n padding:1em;\n display:flex;\n background-color:#fff;\n}\n.devices-container{\n padding:1em;\n display:flex;\n background-color:#f3f6f8;\n}\n.data-container{\n padding:1em;\n display:flex;\n flex-direction: column;\n background-color: #f3f6f8;\n}\n.data-container-double{\n padding:2em;\n display:flex;\n flex-direction: row;\n background-color:#f3f6f8;\n width:330px;\n}\n.data-container-row-one{\n display:flex;\n flex-direction: row;\n padding: 1em 0 0 0;\n justify-content: center;\n flex-grow:1;\n}\n.data{\n display:flex;\n flex-direction:row;\n font-size:2em;\n font-weight:400;\n letter-spacing:0.1em;\n}\n.data-icon{\n margin-right:1em;\n}\n.data-label{\n font-weight:400;\n letter-spacing:0.1em;\n text-transform:uppercase;\n}\n\n\n.data-icon-green{\n color:#75EA82;\n}\n\n.data-container-double-left{\n display:flex;\n flex-direction: column;\n justify-content: center;\n width:70%;\n}\n.data-container-double-right{\n display:flex;\n flex-direction: column;\n justify-content: center;\n width:30%;\n}\n.data-unit{\n font-weight:400;\n}\n\n.btn_on{\n color:#f27159;\n}\n.btn-container{\n padding:1em;\n display:flex;\n flex-direction: row;\n width:100%;\n}\n.btn{\n display: flex;\n flex-direction: column;\n justify-content:center;\n align-items:flex-start;\n}\n.btn-label{\n font-weight:800;\n text-align:left;\n text-transform: uppercase;\n letter-spacing:0.1em;\n}\n.btn-icon{\n cursor:pointer;\n outline: none;\n}\n.status-icon{\n height:auto;\n padding:0.5em;\n margin-right:1em;\n width:48px;\n height:48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius:20px;\n}\nmd-switch .md-bar {\n top:4px;\n height:16px;\n background-color: #3c4c5c; /*background color when switch is disabled */\n}\nmd-switch.md-checked:not([disabled]) .md-bar{\n background-color: #f27159; /*background color when switch is enabled*/\n} \n.md-thumb.md-ink-ripple::before{\n background-color: #fff; /*sliding circle color when switch is enabled*/\n}\nmd-switch .md-thumb {\n height:10px;\n width:10px;\n box-shadow:none;\n color: #fff; /*sliding circle color when switch is disabled*/\n}\nmd-switch .md-thumb-container{\n top:7px;\n left:5px;\n}\nmd-switch{\n margin:3px 0px 0px 0px !important;\n height:auto;\n \n}\n\n\n</style>\n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":710,"y":880,"wires":[[]]},{"id":"a5908aae.f27e","type":"switch","z":"560cce99.6b1c28","name":"1/0","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":1490,"y":900,"wires":[["e7b2412b.d9343","a95a4943.aaf1c"],["a81f4b06.76a56"]]},{"id":"7eb1ce91.24253","type":"switch","z":"560cce99.6b1c28","name":"1/0","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":1490,"y":800,"wires":[["374c9943.c070be","4eedead8.de0ffc"],["e6c615df.8c5b4","a95a4943.aaf1c"]]},{"id":"fc1d16fb.49a28","type":"switch","z":"560cce99.6b1c28","name":"1/0","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":1490,"y":1000,"wires":[["374c9943.c070be"],["a81f4b06.76a56"]]},{"id":"6e99522a.aa0efc","type":"change","z":"560cce99.6b1c28","name":"disabledheater","rules":[{"t":"set","p":"topic","pt":"msg","to":"disabledheater","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":2160,"y":1000,"wires":[["71a4b69c.efcec"]]},{"id":"374c9943.c070be","type":"change","z":"560cce99.6b1c28","name":"true","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":1810,"y":880,"wires":[["6f645840.0271f8"]]},{"id":"e6c615df.8c5b4","type":"change","z":"560cce99.6b1c28","name":"false","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1810,"y":920,"wires":[["6f645840.0271f8"]]},{"id":"e7b2412b.d9343","type":"change","z":"560cce99.6b1c28","name":"true","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":1810,"y":780,"wires":[["3e49f292.f1c746"]]},{"id":"a81f4b06.76a56","type":"change","z":"560cce99.6b1c28","name":"false","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1810,"y":820,"wires":[["3e49f292.f1c746"]]},{"id":"a95a4943.aaf1c","type":"change","z":"560cce99.6b1c28","name":"true","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":1810,"y":980,"wires":[["6e99522a.aa0efc"]]},{"id":"4eedead8.de0ffc","type":"change","z":"560cce99.6b1c28","name":"false","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1810,"y":1020,"wires":[["6e99522a.aa0efc"]]},{"id":"766e6a53.c6c59c","type":"inject","z":"560cce99.6b1c28","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":660,"wires":[["18def1d9.5e1c96"]]},{"id":"16671b7b.b9216d","type":"inject","z":"560cce99.6b1c28","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":740,"wires":[["18def1d9.5e1c96"]]},{"id":"fd145b9a.dba9b8","type":"inject","z":"560cce99.6b1c28","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":800,"wires":[["1604b0b0.93e62f"]]},{"id":"44796af9.855f94","type":"inject","z":"560cce99.6b1c28","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":880,"wires":[["1604b0b0.93e62f"]]},{"id":"da9f57d4.dfe6b8","type":"inject","z":"560cce99.6b1c28","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":940,"wires":[["c023bece.e2225"]]},{"id":"c5fd4f9c.5b63e8","type":"inject","z":"560cce99.6b1c28","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1020,"wires":[["c023bece.e2225"]]},{"id":"866ff6eb.074958","type":"comment","z":"560cce99.6b1c28","name":"Hot Tub Devices","info":"","x":100,"y":600,"wires":[]},{"id":"d6da4a98.432a48","type":"inject","z":"560cce99.6b1c28","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1080,"wires":[["ff44cb75.cb3cd8"]]},{"id":"b6f16255.7ca2e8","type":"inject","z":"560cce99.6b1c28","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1160,"wires":[["ff44cb75.cb3cd8"]]},{"id":"6e2de1cc.3d25d8","type":"inject","z":"560cce99.6b1c28","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1220,"wires":[["9b6ba7bd.73e72"]]},{"id":"5f02ed2c.897cac","type":"inject","z":"560cce99.6b1c28","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1300,"wires":[["9b6ba7bd.73e72"]]},{"id":"18def1d9.5e1c96","type":"change","z":"560cce99.6b1c28","name":"jets","rules":[{"t":"set","p":"topic","pt":"msg","to":"jets","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":700,"wires":[["71a4b69c.efcec"]]},{"id":"1604b0b0.93e62f","type":"change","z":"560cce99.6b1c28","name":"filtration","rules":[{"t":"set","p":"topic","pt":"msg","to":"filtration","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":840,"wires":[["71a4b69c.efcec"]]},{"id":"c023bece.e2225","type":"change","z":"560cce99.6b1c28","name":"heater","rules":[{"t":"set","p":"topic","pt":"msg","to":"heater","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":980,"wires":[["71a4b69c.efcec"]]},{"id":"ff44cb75.cb3cd8","type":"change","z":"560cce99.6b1c28","name":"light","rules":[{"t":"set","p":"topic","pt":"msg","to":"light","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":1120,"wires":[["71a4b69c.efcec"]]},{"id":"9b6ba7bd.73e72","type":"change","z":"560cce99.6b1c28","name":"valve","rules":[{"t":"set","p":"topic","pt":"msg","to":"valve","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":1260,"wires":[["71a4b69c.efcec"]]},{"id":"71a4b69c.efcec","type":"join","z":"560cce99.6b1c28","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"1","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":550,"y":1000,"wires":[["e1a4ecad.c6cdb"]]},{"id":"3e49f292.f1c746","type":"change","z":"560cce99.6b1c28","name":"disabledfiltration","rules":[{"t":"set","p":"topic","pt":"msg","to":"disabledfiltration","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":2160,"y":800,"wires":[["71a4b69c.efcec"]]},{"id":"6f645840.0271f8","type":"change","z":"560cce99.6b1c28","name":"disabledjets","rules":[{"t":"set","p":"topic","pt":"msg","to":"disabledjets","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":2150,"y":900,"wires":[["71a4b69c.efcec"]]},{"id":"e1a4ecad.c6cdb","type":"ui_template","z":"560cce99.6b1c28","group":"a1c9bfe.afd404","name":"Test","order":2,"width":0,"height":0,"format":"<div class=\"headline-container\">\n <p class=\"headline-bold\"> Hot Tub </p>\n <p class=\"headline-light\"> Devices </p>\n</div>\n<div class=\"devices-container\">\n<div class=\"btn-container\">\n<div class=\"status-icon\" style=\"color:#fff; background-color:{{msg.payload.jets=='1' ?'#f27159':'#3c4c5c'}}\">\n<img ng-src=\"https://www.vimasantorini.com/dashboard_icon/winds.png\" height=\"36px\" />\n</div>\n<div class=\"btn\">\n<div class=\"btn-label\">Jets</div> \n<md-switch ng-model=\"msg.payload.jets\" ng-true-value=\"1\" ng-false-value=\"0\" ng-change=\"send({payload : {jets:msg.payload.jets}})\" ng-disabled=\"msg.payload.disabledjets\"> \n</md-switch>\n</div>\n</div>\n</div>\n<div class=\"devices-container\">\n<div class=\"btn-container\">\n<div class=\"status-icon\" style=\"color:#fff; background-color:{{msg.payload.filtration=='1' ?'#f27159':'#3c4c5c'}}\">\n<img ng-src=\"https://www.vimasantorini.com/dashboard_icon/filter.png\" height=\"36px\" />\n</div> \n<div class=\"btn\">\n<div class=\"btn-label\">Filtration</div> \n<md-switch ng-model=\"msg.payload.filtration\" ng-true-value=\"1\" ng-false-value=\"0\" ng-change=\"send({payload : {filtration:msg.payload.filtration}})\" ng-disabled=\"msg.payload.disabledfiltration\"> \n</md-switch>\n</div>\n</div>\n</div>\n<div class=\"devices-container\">\n<div class=\"btn-container\">\n<div class=\"status-icon\" style=\"color:#fff; background-color:{{msg.payload.heater=='1' ?'#f27159':'#3c4c5c'}}\">\n<img ng-src=\"https://www.vimasantorini.com/dashboard_icon/hot.png\" height=\"36px\" />\n</div> \n<div class=\"btn\">\n<div class=\"btn-label\">Heater</div> \n<md-switch ng-model=\"msg.payload.heater\" ng-true-value=\"1\" ng-false-value=\"0\" ng-change=\"send({payload : {heater:msg.payload.heater}})\" ng-disabled=\"msg.payload.disabledheater\">\n</md-switch>\n</div>\n</div>\n</div>\n<div class=\"devices-container\">\n<div class=\"btn-container\">\n<div class=\"status-icon\" style=\"color:#fff; background-color:{{msg.payload.light=='1' ?'#f27159':'#3c4c5c'}}\">\n<img ng-src=\"https://www.vimasantorini.com/dashboard_icon/light.png\" height=\"36px\" />\n</div> \n<div class=\"btn\">\n<div class=\"btn-label\">Light</div> \n<md-switch ng-model=\"msg.payload.light\" ng-true-value=\"1\" ng-false-value=\"0\" ng-change=\"send(msg)\">\n</md-switch>\n</div>\n</div>\n</div>\n<div class=\"devices-container\">\n<div class=\"btn-container\">\n<div class=\"status-icon\" style=\"color:#fff; background-color:{{msg.payload.valve=='1' ?'#f27159':'#3c4c5c'}}\">\n<img ng-src=\"https://www.vimasantorini.com/dashboard_icon/valve.png\" height=\"36px\" />\n</div> \n<div class=\"btn\">\n<div class=\"btn-label\">Water Valve</div> \n<md-switch ng-model=\"msg.payload.valve\" ng-true-value=\"1\" ng-false-value=\"0\" ng-change=\"send(msg)\">\n</md-switch>\n</div>\n</div>\n</div>\n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":710,"y":1000,"wires":[["ffce34ef.5f6c2"]]},{"id":"ffce34ef.5f6c2","type":"split","z":"560cce99.6b1c28","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"topic","x":890,"y":1000,"wires":[["e9a34b49.6cf05"]]},{"id":"e9a34b49.6cf05","type":"switch","z":"560cce99.6b1c28","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"filtration","vt":"str"},{"t":"eq","v":"jets","vt":"str"},{"t":"eq","v":"heater","vt":"str"},{"t":"eq","v":"light","vt":"str"},{"t":"eq","v":"valve","vt":"str"}],"checkall":"true","repair":false,"outputs":5,"x":1050,"y":1000,"wires":[["d743a8e3.0d04d"],["eb245c25.623d5"],["fe63d0c7.d67d48"],["3a1bf77.3589e88"],["6605a544.e5e5bc"]]},{"id":"d743a8e3.0d04d","type":"rbe","z":"560cce99.6b1c28","name":"","func":"rbe","gap":"","start":"","inout":"out","property":"payload","x":1230,"y":800,"wires":[["7eb1ce91.24253"]]},{"id":"eb245c25.623d5","type":"rbe","z":"560cce99.6b1c28","name":"","func":"rbe","gap":"","start":"","inout":"out","property":"payload","x":1230,"y":900,"wires":[["a5908aae.f27e"]]},{"id":"fe63d0c7.d67d48","type":"rbe","z":"560cce99.6b1c28","name":"","func":"rbe","gap":"","start":"","inout":"out","property":"payload","x":1230,"y":1000,"wires":[["fc1d16fb.49a28"]]},{"id":"3a1bf77.3589e88","type":"rbe","z":"560cce99.6b1c28","name":"","func":"rbe","gap":"","start":"","inout":"out","property":"payload","x":1230,"y":1100,"wires":[[]]},{"id":"6605a544.e5e5bc","type":"rbe","z":"560cce99.6b1c28","name":"","func":"rbe","gap":"","start":"","inout":"out","property":"payload","x":1230,"y":1200,"wires":[[]]},{"id":"a1c9bfe.afd404","type":"ui_group","z":"","name":"Hot Tub Devices","tab":"a0ab3e0e.a8a7f","order":2,"disp":false,"width":"6","collapse":false},{"id":"a0ab3e0e.a8a7f","type":"ui_tab","z":"","name":"Hot Tub","icon":"dashboard","disabled":false,"hidden":false}]
