Skip to content

Pillenförmige Schalter synchron mit globalen Variablen

Hypnos edited this page Jan 13, 2020 · 7 revisions

Category: User Flows

Pillenförmige Schalter synchron mit globalen Variablen

Generelles

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:

Darstellung im Browser

Benötigte Erweiterungen

Keine.

Einstellungen

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.

subflow und ui-template

Der subflow sieht so aus:

subflow darstellung

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}]
Clone this wiki locally