Pillenförmige Schalter synchron mit globalen Variablen
Häufig braucht man einen Schalter, der bidirectional an eine globale Variable gekoppelt ist, bei Änderung Aktionen auslöst und den Status komprimiert/farblich anzeigt. In dieser Implementierung kann man den angezeigten Text und die Farbe statusabhängige definieren. Ich nutze diese Art für Anzeige von Nacht, Anwesend, Abwesend, etc. Es sieht dann so aus:
Keine.
Die Konfiguration besteht aus einem subflow und einem Dashbaord ui-template, die doppelt verknüpft sind. Getrennt deshalb um den Schaltern in Tabs zu positionieren. Änderungen der globalen Variablen steuert man links am subflow ein. Aktionen, die bei Änderung ausgelöst warden sollen sind mit dem rechten, unteren Ausgang zu verknüpfen. Die pillenförmige Gestaltung erfolgt über ein weiteres ui-template, welches man der Gruppe hinzu fügt.
Der subflow sieht so aus:
Hier sind der export des Subflows, des Schalter ui-templates und der pillenform:
[{"id":"8d78d4e0.c37328","type":"subflow","name":"pillColorToggle","info":"PURPOSE: Handle global variable changes and provide data for ui-template button in sync with global variable\n\nINPUT: boolen true, false or text \"pressbutton\"\n\nOUTPUT1: input for template button (value, colors, text, ...)\n\nOUTPUT2: message for other flows: boolean true, false only if changed!\n\nPROPERTIES: to define all colors, text for different states","category":"","in":[{"x":40,"y":204,"wires":[{"id":"20f5cc1d.cb1574"}]}],"out":[{"x":742,"y":95,"wires":[{"id":"72acb2da.fb431c","port":0},{"id":"597ee906.8109c8","port":0}]},{"x":742,"y":204,"wires":[{"id":"320e937f.44bdcc","port":0}]}],"env":[{"name":"variableGlobal","type":"str","value":"testboolean"},{"name":"textOn","type":"str","value":"boolean"},{"name":"textOff","type":"str","value":"boolean"},{"name":"colorBackgroundOn","type":"str","value":"CornflowerBlue "},{"name":"colorBackgroundOff","type":"str","value":"Silver"},{"name":"colorOn","type":"str","value":"White"},{"name":"colorOff","type":"str","value":"White"}],"inputLabels":["input true | false or buttonpress"],"outputLabels":["update button status","msg if value changed"]},{"id":"72acb2da.fb431c","type":"function","z":"8d78d4e0.c37328","name":"On","func":"msg.color = env.get(\"colorOn\");\nmsg.backgroundColor = env.get(\"colorBackgroundOn\");\nmsg.topic = env.get(\"textOn\");\nreturn msg;","outputs":1,"noerr":0,"x":549,"y":77,"wires":[[]]},{"id":"597ee906.8109c8","type":"function","z":"8d78d4e0.c37328","name":"Off","func":"msg.color = env.get(\"colorOff\");\nmsg.backgroundColor = env.get(\"colorBackgroundOff\");\nmsg.topic = env.get(\"textOff\");\nreturn msg;","outputs":1,"noerr":0,"x":549,"y":117,"wires":[[]]},{"id":"87861656.f2ddb8","type":"switch","z":"8d78d4e0.c37328","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":407,"y":97,"wires":[["72acb2da.fb431c"],["597ee906.8109c8"]]},{"id":"20f5cc1d.cb1574","type":"function","z":"8d78d4e0.c37328","name":"update global variable","func":"// VERSION 2019-07-05T0803\nvar vname = env.get(\"variableGlobal\");\nvar current = global.get(vname);\n\nif (msg.payload == \"buttonpress\") {\n // indicator button pressed\n global.set(vname, !current);\n msg.changed = true;\n msg.payload = !current;\n} else {\n // standard input true or false\n if (msg.payload != current) {\n global.set(vname, !current);\n msg.changed = true;\n } else {\n msg.changed = false;\n } \n}\nreturn msg;","outputs":1,"noerr":0,"x":246,"y":204,"wires":[["320e937f.44bdcc"]]},{"id":"320e937f.44bdcc","type":"switch","z":"8d78d4e0.c37328","name":"only if changed","property":"changed","propertyType":"msg","rules":[{"t":"true"}],"checkall":"true","repair":false,"outputs":1,"x":466,"y":204,"wires":[["87861656.f2ddb8"]]},{"id":"dd8d8bfb.60aa48","type":"inject","z":"8d78d4e0.c37328","name":"Flow restart","topic":"","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":212,"y":57,"wires":[["379c95c2.5ea63a"]]},{"id":"379c95c2.5ea63a","type":"function","z":"8d78d4e0.c37328","name":"set button state","func":"var vname = env.get(\"variableGlobal\");\nvar current = global.get(vname);\nmsg.payload = current;\nreturn msg;","outputs":1,"noerr":0,"x":224,"y":97,"wires":[["87861656.f2ddb8"]]},{"id":"d464e9b3.c722d8","type":"comment","z":"8d78d4e0.c37328","name":"Button State","info":"","x":692,"y":40,"wires":[]},{"id":"c77924a1.c267e8","type":"comment","z":"8d78d4e0.c37328","name":"Message","info":"","x":698,"y":160,"wires":[]}][{"id":"8d78d4e0.c37328","type":"subflow","name":"pillColorToggle","info":"PURPOSE: Handle global variable changes and provide data for ui-template button in sync with global variable\n\nINPUT: boolen true, false or text \"pressbutton\"\n\nOUTPUT1: input for template button (value, colors, text, ...)\n\nOUTPUT2: message for other flows: boolean true, false only if changed!\n\nPROPERTIES: to define all colors, text for different states","category":"","in":[{"x":40,"y":204,"wires":[{"id":"20f5cc1d.cb1574"}]}],"out":[{"x":742,"y":95,"wires":[{"id":"72acb2da.fb431c","port":0},{"id":"597ee906.8109c8","port":0}]},{"x":742,"y":204,"wires":[{"id":"320e937f.44bdcc","port":0}]}],"env":[{"name":"variableGlobal","type":"str","value":"testboolean"},{"name":"textOn","type":"str","value":"boolean"},{"name":"textOff","type":"str","value":"boolean"},{"name":"colorBackgroundOn","type":"str","value":"CornflowerBlue "},{"name":"colorBackgroundOff","type":"str","value":"Silver"},{"name":"colorOn","type":"str","value":"White"},{"name":"colorOff","type":"str","value":"White"}],"inputLabels":["input true | false or buttonpress"],"outputLabels":["update button status","msg if value changed"]},{"id":"72acb2da.fb431c","type":"function","z":"8d78d4e0.c37328","name":"On","func":"msg.color = env.get(\"colorOn\");\nmsg.backgroundColor = env.get(\"colorBackgroundOn\");\nmsg.topic = env.get(\"textOn\");\nreturn msg;","outputs":1,"noerr":0,"x":549,"y":77,"wires":[[]]},{"id":"597ee906.8109c8","type":"function","z":"8d78d4e0.c37328","name":"Off","func":"msg.color = env.get(\"colorOff\");\nmsg.backgroundColor = env.get(\"colorBackgroundOff\");\nmsg.topic = env.get(\"textOff\");\nreturn msg;","outputs":1,"noerr":0,"x":549,"y":117,"wires":[[]]},{"id":"87861656.f2ddb8","type":"switch","z":"8d78d4e0.c37328","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":407,"y":97,"wires":[["72acb2da.fb431c"],["597ee906.8109c8"]]},{"id":"20f5cc1d.cb1574","type":"function","z":"8d78d4e0.c37328","name":"update global variable","func":"// VERSION 2019-07-05T0803\nvar vname = env.get(\"variableGlobal\");\nvar current = global.get(vname);\n\nif (msg.payload == \"buttonpress\") {\n // indicator button pressed\n global.set(vname, !current);\n msg.changed = true;\n msg.payload = !current;\n} else {\n // standard input true or false\n if (msg.payload != current) {\n global.set(vname, !current);\n msg.changed = true;\n } else {\n msg.changed = false;\n } \n}\nreturn msg;","outputs":1,"noerr":0,"x":246,"y":204,"wires":[["320e937f.44bdcc"]]},{"id":"320e937f.44bdcc","type":"switch","z":"8d78d4e0.c37328","name":"only if changed","property":"changed","propertyType":"msg","rules":[{"t":"true"}],"checkall":"true","repair":false,"outputs":1,"x":466,"y":204,"wires":[["87861656.f2ddb8"]]},{"id":"dd8d8bfb.60aa48","type":"inject","z":"8d78d4e0.c37328","name":"Flow restart","topic":"","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":212,"y":57,"wires":[["379c95c2.5ea63a"]]},{"id":"379c95c2.5ea63a","type":"function","z":"8d78d4e0.c37328","name":"set button state","func":"var vname = env.get(\"variableGlobal\");\nvar current = global.get(vname);\nmsg.payload = current;\nreturn msg;","outputs":1,"noerr":0,"x":224,"y":97,"wires":[["87861656.f2ddb8"]]},{"id":"d464e9b3.c722d8","type":"comment","z":"8d78d4e0.c37328","name":"Button State","info":"","x":692,"y":40,"wires":[]},{"id":"c77924a1.c267e8","type":"comment","z":"8d78d4e0.c37328","name":"Message","info":"","x":698,"y":160,"wires":[]},{"id":"66d13d4d.6edc34","type":"ccu-sysvar","z":"b06f8da5.377a8","name":"Basics.SVIsAtHome","ccuConfig":"38263145.35ea0e","topic":"ReGaHSS/${Name}","change":true,"cache":false,"x":1200,"y":2940,"wires":[[]]},{"id":"744d1862.d37dc8","type":"change","z":"b06f8da5.377a8","name":"Convert to 0 | 1 (V2)","rules":[{"t":"change","p":"payload","pt":"msg","from":"ON","fromt":"str","to":"1","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"OFF","fromt":"str","to":"0","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"on","fromt":"str","to":"1","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"off","fromt":"str","to":"0","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"true","fromt":"str","to":"1","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"false","fromt":"str","to":"0","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1200,"y":2900,"wires":[["66d13d4d.6edc34"]]},{"id":"f22b8726.fb0ad8","type":"ui_template","z":"b06f8da5.377a8","group":"f3be2401.c60048","name":"AtHome","order":6,"width":"2","height":"1","format":"<md-button \n title=\"Mindestens eine Person ist anwesend.\"\n class=\"pillstyle\" \n style=\"text-transform: capitalize; background-color: {{msg.backgroundColor}};color: {{msg.color}};\" \n ng-click=\"send({payload: 'buttonpress'})\"> \n {{msg.topic}}\n</md-button> ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":945,"y":2954,"wires":[["af694ac8.ca2648"]]},{"id":"af694ac8.ca2648","type":"subflow:8d78d4e0.c37328","z":"b06f8da5.377a8","name":"","env":[{"name":"variableGlobal","type":"str","value":"basics_IsAtHome"},{"name":"textOn","type":"str","value":"ZuHause"},{"name":"textOff","type":"str","value":"ZuHause"}],"x":943,"y":3001,"wires":[["f22b8726.fb0ad8"],["744d1862.d37dc8","88d87e73.792aa"]]},{"id":"88d87e73.792aa","type":"link out","z":"b06f8da5.377a8","name":"AtHomeChangeTrigger","links":["6d63d69d.896bf8","68ef7b22.8a5504"],"x":1113,"y":3008,"wires":[]},{"id":"38263145.35ea0e","type":"ccu-connection","z":"","name":"localhost","host":"localhost","regaEnabled":true,"bcrfEnabled":true,"iprfEnabled":true,"virtEnabled":true,"bcwiEnabled":false,"cuxdEnabled":false,"regaPoll":true,"regaInterval":"30","rpcPingTimeout":"60","rpcInitAddress":"127.0.0.1","rpcServerHost":"127.0.0.1","rpcBinPort":"2047","rpcXmlPort":"2048"},{"id":"f3be2401.c60048","type":"ui_group","z":"","name":"Status","tab":"bf6344f5.596528","order":4,"disp":false,"width":"10","collapse":false},{"id":"bf6344f5.596528","type":"ui_tab","z":"","name":"Übersicht","icon":"dashboard","order":1,"disabled":false,"hidden":false}][{"id":"4f56e87b.f516b8","type":"ui_template","z":"b06f8da5.377a8","group":"f3be2401.c60048","name":"pillstyle","order":12,"width":0,"height":0,"format":"<style>\n .pillstyle {\n border-radius: 20px 20px 20px 20px;\n height: 100%;\n padding: 0;\n margin: 0;\n }\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":400,"y":340,"wires":[[]],"info":"Has to be the last widget in Group "},{"id":"f3be2401.c60048","type":"ui_group","z":"","name":"Status","tab":"bf6344f5.596528","order":4,"disp":false,"width":"10","collapse":false},{"id":"bf6344f5.596528","type":"ui_tab","z":"","name":"Übersicht","icon":"dashboard","order":1,"disabled":false,"hidden":false}]