- Home
- Deutsch
- Visualisierung
- Widget mit LongPress/LongClick in VIS 2
Widget mit LongPress/LongClick in VIS 2
This topic has been deleted. Only users with topic management privileges can see it.
-
Hallo,
kennt jemand ein Widget das ein LongPress Event ermöglicht?
Nutze momentan fast überall das Bulb on/off Widget. Jetzt würde aber gerne via LongPress einen Dialog öffnen, der weitere Optionen ermöglichst. z.B. bei Rollläden oder Dimmern einen Slider für die genaueren Einstellungen. Da ich grade alles mit VIS 2 nochmal neu einrichte, wäre das ein guter Zeitpunkt, sowas neu anzugehen (hab über 200 Devices)...Gibt es sowas? Kann man sowas mit JS irgendwie dazubasteln? Gibt es die Möglichkeit im Widget selbst JS-Code generisch zu hinterlegen, so man das kopieren kann? Könnte mir sowas zwar mit HTML-Widget und globalem JS zusammenfrickeln, aber das skaliert ja vorne und hinten nicht.
Wie aufwändig ist es ein eigenes WIdget zu implementieren? Hab beruflich mal viel im Bereich Web Frontend gemacht und bin da schon recht fit. Mir gruselt es aber gerade davor, überhaupt erstmal soweit zu kommen, dass man eine Entwicklungsumgebung am Start hat...
Kann man da ein bestehendes Widget als Basis nehmen und daraus was neues bauen?Vielen Dank
Liebe Grüße
Dave
-
Ich habe das mal mit dem vis 1 Taster Widget umgesetzt und NodeRed.
Dein Taster muss nur beim Drücken true und beim Loslassen false liefern. Dazwischen steckt ein trigger und Du bestimmst anhand der Signale, ob es als Longpress oder Shortpress erkannt wird.
Hiermal der NodeRed Flow von damals:
[ { "id": "9485df68.fd8ba", "type": "tab", "label": "Tutorial vis Taster", "disabled": false, "info": "" }, { "id": "b0c81813.4154f8", "type": "ioBroker in", "z": "9485df68.fd8ba", "d": true, "name": "taster", "attrname": "", "topic": "0_userdata.0.dimmer.taster", "payloadType": "value", "onlyack": "", "func": "rbe", "gap": "", "fireOnStart": "false", "x": 130, "y": 100, "wires": [ [ "16e2170a.87ef89" ] ] }, { "id": "dc014311.a8d3f", "type": "debug", "z": "9485df68.fd8ba", "name": "Taste gedrückt", "active": false, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 600, "y": 60, "wires": [] }, { "id": "16e2170a.87ef89", "type": "trigger", "z": "9485df68.fd8ba", "name": "", "op1": "true", "op2": "", "op1type": "bool", "op2type": "payl", "duration": "-250", "extend": true, "overrideDelay": false, "units": "ms", "reset": "false", "bytopic": "all", "topic": "topic", "outputs": 1, "x": 370, "y": 100, "wires": [ [ "dc014311.a8d3f", "a123b62d.af5fa8" ] ] }, { "id": "9982d6c4.29e058", "type": "switch", "z": "9485df68.fd8ba", "name": "", "property": "payload", "propertyType": "msg", "rules": [ { "t": "false" } ], "checkall": "true", "repair": false, "outputs": 1, "x": 310, "y": 220, "wires": [ [ "d38eb95d.854638", "a123b62d.af5fa8" ] ] }, { "id": "d38eb95d.854638", "type": "debug", "z": "9485df68.fd8ba", "name": "Taste losgelassen", "active": false, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 490, "y": 280, "wires": [] }, { "id": "a123b62d.af5fa8", "type": "function", "z": "9485df68.fd8ba", "name": "", "func": "var count = context.get('count') || 0;\nvar longpress = context.get('longpress') || false;\nif (msg.payload){\n count += 1;\n context.set('count',count);\n if (count > 5) { // Wert erhöhen wenn Longpress zu früh erkannt wird\n longpress = true;\n context.set('longpress',longpress);\n return [null,msg];\n }\n} else {\n msg.payload=true;\n count = 0;\n context.set('count',count); \n if (!longpress) return [msg,null];\n longpress = false;\n context.set('longpress',longpress);\n}\n", "outputs": 2, "timeout": "", "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 590, "y": 180, "wires": [ [ "65393650.6cfcd8", "1dbf19e0.f8af96" ], [ "faaddc42.671cf", "c5e2ef2d.6e447" ] ], "outputLabels": [ "shortpress", "longpress" ] }, { "id": "65393650.6cfcd8", "type": "debug", "z": "9485df68.fd8ba", "name": "shortpress", "active": false, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 810, "y": 100, "wires": [] }, { "id": "faaddc42.671cf", "type": "debug", "z": "9485df68.fd8ba", "name": "longpress", "active": false, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 800, "y": 340, "wires": [] }, { "id": "a9311da5.e0c66", "type": "ioBroker in", "z": "9485df68.fd8ba", "d": true, "name": "status", "attrname": "", "topic": "mqtt.1.shellies.shellydimmer.light.0.status", "payloadType": "value", "onlyack": "", "func": "rbe", "gap": "", "fireOnStart": "false", "x": 130, "y": 520, "wires": [ [ "15d1fa89.761575" ] ] }, { "id": "35413631.c8570a", "type": "debug", "z": "9485df68.fd8ba", "name": "status", "active": false, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 430, "y": 460, "wires": [] }, { "id": "15d1fa89.761575", "type": "json", "z": "9485df68.fd8ba", "name": "", "property": "payload", "action": "", "pretty": false, "x": 270, "y": 520, "wires": [ [ "35413631.c8570a", "eeebcf13.9b2fd", "af96a9a1.7e48c8" ] ] }, { "id": "eeebcf13.9b2fd", "type": "change", "z": "9485df68.fd8ba", "name": "setze flow Variablen", "rules": [ { "t": "set", "p": "ison", "pt": "flow", "to": "payload.ison", "tot": "msg" }, { "t": "set", "p": "brightness", "pt": "flow", "to": "payload.brightness", "tot": "msg" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 480, "y": 520, "wires": [ [] ] }, { "id": "1dbf19e0.f8af96", "type": "change", "z": "9485df68.fd8ba", "name": "switch (toggle)", "rules": [ { "t": "set", "p": "payload", "pt": "msg", "to": "ison", "tot": "flow" }, { "t": "set", "p": "payload", "pt": "msg", "to": "$not(payload)\t", "tot": "jsonata" }, { "t": "set", "p": "ison", "pt": "flow", "to": "payload", "tot": "msg" }, { "t": "set", "p": "down", "pt": "flow", "to": "payload", "tot": "msg" }, { "t": "change", "p": "payload", "pt": "msg", "from": "true", "fromt": "bool", "to": "on", "tot": "str" }, { "t": "change", "p": "payload", "pt": "msg", "from": "false", "fromt": "bool", "to": "off", "tot": "str" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 800, "y": 140, "wires": [ [ "f48be0e6.d432f", "c4574d9a.44f53", "f2909e1e.20a93" ] ] }, { "id": "f48be0e6.d432f", "type": "debug", "z": "9485df68.fd8ba", "name": "command", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 1040, "y": 200, "wires": [] }, { "id": "c4574d9a.44f53", "type": "ioBroker out", "z": "9485df68.fd8ba", "d": true, "name": "command", "topic": "mqtt.1.shellies.shellydimmer.light.0.command", "ack": "false", "autoCreate": "false", "stateName": "", "role": "", "payloadType": "", "readonly": "", "stateUnit": "", "stateMin": "", "stateMax": "", "x": 1040, "y": 140, "wires": [] }, { "id": "f2909e1e.20a93", "type": "change", "z": "9485df68.fd8ba", "name": "", "rules": [ { "t": "change", "p": "payload", "pt": "msg", "from": "off", "fromt": "str", "to": "0", "tot": "num" }, { "t": "change", "p": "payload", "pt": "msg", "from": "on", "fromt": "str", "to": "brightness", "tot": "flow" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 1050, "y": 80, "wires": [ [ "6d903925.3ff818" ] ] }, { "id": "6d903925.3ff818", "type": "ioBroker out", "z": "9485df68.fd8ba", "d": true, "name": "brightness", "topic": "0_userdata.0.dimmer.brightness", "ack": "true", "autoCreate": "false", "stateName": "", "role": "", "payloadType": "", "readonly": "", "stateUnit": "", "stateMin": "", "stateMax": "", "x": 1240, "y": 80, "wires": [] }, { "id": "88d6e66a.ddb258", "type": "inject", "z": "9485df68.fd8ba", "name": "", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": true, "onceDelay": 0.1, "topic": "", "payload": "false", "payloadType": "bool", "x": 110, "y": 720, "wires": [ [ "e9fb15f5.98b588" ] ] }, { "id": "e9fb15f5.98b588", "type": "change", "z": "9485df68.fd8ba", "name": "", "rules": [ { "t": "set", "p": "down", "pt": "flow", "to": "payload", "tot": "msg" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 290, "y": 720, "wires": [ [] ] }, { "id": "c5e2ef2d.6e447", "type": "switch", "z": "9485df68.fd8ba", "name": "", "property": "payload", "propertyType": "msg", "rules": [ { "t": "istype", "v": "boolean", "vt": "boolean" }, { "t": "istype", "v": "number", "vt": "number" } ], "checkall": "true", "repair": false, "outputs": 2, "x": 810, "y": 300, "wires": [ [ "ca4f99bd.cfa6f8" ], [ "ff1bde73.7c88" ] ] }, { "id": "ca4f99bd.cfa6f8", "type": "change", "z": "9485df68.fd8ba", "name": "", "rules": [ { "t": "set", "p": "payload", "pt": "msg", "to": "brightness", "tot": "flow" }, { "t": "change", "p": "payload", "pt": "msg", "from": "100", "fromt": "num", "to": "98", "tot": "num" }, { "t": "change", "p": "payload", "pt": "msg", "from": "0", "fromt": "num", "to": "2", "tot": "num" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 1020, "y": 240, "wires": [ [ "c5e2ef2d.6e447" ] ] }, { "id": "ff1bde73.7c88", "type": "switch", "z": "9485df68.fd8ba", "name": "brightness zwischen 2 und 98", "property": "payload", "propertyType": "msg", "rules": [ { "t": "btwn", "v": "2", "vt": "num", "v2": "98", "v2t": "num" } ], "checkall": "true", "repair": false, "outputs": 1, "x": 1050, "y": 320, "wires": [ [ "4f962993.612978" ] ] }, { "id": "4f962993.612978", "type": "switch", "z": "9485df68.fd8ba", "name": "", "property": "down", "propertyType": "flow", "rules": [ { "t": "true" }, { "t": "false" } ], "checkall": "true", "repair": false, "outputs": 2, "x": 1270, "y": 320, "wires": [ [ "ece0bc1e.1d06c" ], [ "a0118b8f.a7ca18" ] ] }, { "id": "ece0bc1e.1d06c", "type": "change", "z": "9485df68.fd8ba", "name": "Verringere Brightness um 2", "rules": [ { "t": "set", "p": "payload", "pt": "msg", "to": "payload - 2", "tot": "jsonata" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 1510, "y": 280, "wires": [ [ "71a8a0f2.c1756" ] ] }, { "id": "a0118b8f.a7ca18", "type": "change", "z": "9485df68.fd8ba", "name": "Erhöhe Brightness um 2", "rules": [ { "t": "set", "p": "payload", "pt": "msg", "to": "payload + 2", "tot": "jsonata" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 1500, "y": 340, "wires": [ [ "71a8a0f2.c1756" ] ] }, { "id": "71a8a0f2.c1756", "type": "switch", "z": "9485df68.fd8ba", "name": "", "property": "payload", "propertyType": "msg", "rules": [ { "t": "gt", "v": "98", "vt": "num" }, { "t": "lt", "v": "2", "vt": "str" }, { "t": "else" } ], "checkall": "true", "repair": false, "outputs": 3, "x": 1740, "y": 300, "wires": [ [ "879502b2.7de07" ], [ "f57bd65b.705688" ], [ "58308d21.de8e84" ] ] }, { "id": "879502b2.7de07", "type": "change", "z": "9485df68.fd8ba", "name": "= 100", "rules": [ { "t": "set", "p": "payload", "pt": "msg", "to": "100", "tot": "num" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 1900, "y": 260, "wires": [ [ "58308d21.de8e84" ] ] }, { "id": "f57bd65b.705688", "type": "change", "z": "9485df68.fd8ba", "name": "= 0", "rules": [ { "t": "set", "p": "payload", "pt": "msg", "to": "0", "tot": "num" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 1900, "y": 300, "wires": [ [ "58308d21.de8e84" ] ] }, { "id": "58308d21.de8e84", "type": "change", "z": "9485df68.fd8ba", "name": "Update flow.brightness", "rules": [ { "t": "set", "p": "brightness", "pt": "flow", "to": "payload", "tot": "msg" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 2120, "y": 340, "wires": [ [ "33d29b3d.a84344", "fb67d520.bc8208" ] ] }, { "id": "33d29b3d.a84344", "type": "rbe", "z": "9485df68.fd8ba", "name": "", "func": "rbe", "gap": "", "start": "", "inout": "out", "septopics": true, "property": "payload", "topi": "topic", "x": 2330, "y": 340, "wires": [ [ "8ef3400d.e495", "d66fdb59.ee3d88" ] ] }, { "id": "fb67d520.bc8208", "type": "trigger", "z": "9485df68.fd8ba", "name": "", "op1": "", "op2": "true", "op1type": "nul", "op2type": "bool", "duration": "1", "extend": true, "overrideDelay": false, "units": "s", "reset": "", "bytopic": "all", "topic": "topic", "outputs": 1, "x": 2350, "y": 420, "wires": [ [ "1110ff6a.6c0661" ] ] }, { "id": "1110ff6a.6c0661", "type": "change", "z": "9485df68.fd8ba", "name": "", "rules": [ { "t": "set", "p": "down", "pt": "flow", "to": "$not($flowContext('down'))\t", "tot": "jsonata" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 2550, "y": 420, "wires": [ [] ] }, { "id": "8ef3400d.e495", "type": "ioBroker out", "z": "9485df68.fd8ba", "d": true, "name": "brightness", "topic": "0_userdata.0.dimmer.brightness", "ack": "false", "autoCreate": "false", "stateName": "", "role": "", "payloadType": "", "readonly": "", "stateUnit": "", "stateMin": "", "stateMax": "", "x": 2510, "y": 340, "wires": [] }, { "id": "b2d86076.b0a04", "type": "change", "z": "9485df68.fd8ba", "name": "", "rules": [ { "t": "move", "p": "payload", "pt": "msg", "to": "brightness", "tot": "msg" }, { "t": "set", "p": "payload", "pt": "msg", "to": "{\"brightness\":70,\"turn\":\"on\"}", "tot": "json" }, { "t": "move", "p": "brightness", "pt": "msg", "to": "payload.brightness", "tot": "msg" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 2680, "y": 280, "wires": [ [ "3fe9eb1.ff60414" ] ] }, { "id": "d66fdb59.ee3d88", "type": "switch", "z": "9485df68.fd8ba", "name": "", "property": "payload", "propertyType": "msg", "rules": [ { "t": "eq", "v": "0", "vt": "num" }, { "t": "gt", "v": "0", "vt": "num" } ], "checkall": "true", "repair": false, "outputs": 2, "x": 2490, "y": 260, "wires": [ [ "b3cabeb1.02f96" ], [ "b2d86076.b0a04" ] ] }, { "id": "b3cabeb1.02f96", "type": "change", "z": "9485df68.fd8ba", "name": "", "rules": [ { "t": "set", "p": "payload", "pt": "msg", "to": "{\"brightness\":0,\"turn\":\"off\"}", "tot": "json" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 2690, "y": 240, "wires": [ [ "3fe9eb1.ff60414" ] ] }, { "id": "3fe9eb1.ff60414", "type": "json", "z": "9485df68.fd8ba", "name": "", "property": "payload", "action": "", "pretty": false, "x": 2890, "y": 260, "wires": [ [ "583ee091.d82b2" ] ] }, { "id": "583ee091.d82b2", "type": "ioBroker out", "z": "9485df68.fd8ba", "d": true, "name": "", "topic": "mqtt.1.shellies.light.0.set", "ack": "false", "autoCreate": "false", "stateName": "", "role": "", "payloadType": "", "readonly": "", "stateUnit": "", "stateMin": "", "stateMax": "", "x": 3110, "y": 260, "wires": [] }, { "id": "98936af7.b84158", "type": "ioBroker in", "z": "9485df68.fd8ba", "d": true, "name": "taster", "attrname": "", "topic": "0_userdata.0.dimmer.taster", "payloadType": "value", "onlyack": "", "func": "rbe", "gap": "", "fireOnStart": "false", "x": 130, "y": 220, "wires": [ [ "9982d6c4.29e058" ] ] }, { "id": "af96a9a1.7e48c8", "type": "change", "z": "9485df68.fd8ba", "name": "", "rules": [ { "t": "move", "p": "payload", "pt": "msg", "to": "status", "tot": "msg" }, { "t": "change", "p": "status.ison", "pt": "msg", "from": "false", "fromt": "bool", "to": "0", "tot": "num" }, { "t": "change", "p": "status.ison", "pt": "msg", "from": "true", "fromt": "bool", "to": "status.brightness", "tot": "msg" }, { "t": "set", "p": "payload", "pt": "msg", "to": "status.ison", "tot": "msg" }, { "t": "delete", "p": "status", "pt": "msg" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 460, "y": 580, "wires": [ [ "c281079b.e9e728" ] ] }, { "id": "c281079b.e9e728", "type": "ioBroker out", "z": "9485df68.fd8ba", "d": true, "name": "brightness", "topic": "0_userdata.0.dimmer.brightness", "ack": "false", "autoCreate": "false", "stateName": "", "role": "", "payloadType": "", "readonly": "", "stateUnit": "", "stateMin": "", "stateMax": "", "x": 670, "y": 580, "wires": [] }, { "id": "b9b257e.70ef5a8", "type": "ui_template", "z": "9485df68.fd8ba", "group": "57f13d6f733e5c9d", "name": "momentary", "order": 17, "width": 3, "height": 1, "format": "<style>\n.nr-dashboard-template {\n padding: 0px;\n}\n</style>\n<div class=\"momentary_1\">\n <md-button style=\"width:100%; height:48px; margin: 0px; background-color: var(--nr-dashboard-widgetBackgroundColor); padding-top: 10px;\" ><i class=\"fa fa-lightbulb-o fa-2x\"> </i></md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('.momentary_1').on('touchstart mousedown', function(e) {\n // e.preventDefault(); //prevent default behavior\n $scope.send({\"payload\": true});\n});\n\n$('.momentary_1').on('touchend mouseup', function(e) {\n // e.preventDefault(); //prevent default behavior\n $scope.send({\"payload\": false});\n});\n \n})(scope);\n</script>", "storeOutMessages": false, "fwdInMessages": true, "resendOnRefresh": false, "templateScope": "local", "className": "", "x": 130, "y": 160, "wires": [ [ "16e2170a.87ef89", "9982d6c4.29e058" ] ] }, { "id": "bd9be677d25dbd6b", "type": "inject", "z": "9485df68.fd8ba", "name": "Test", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "{\"ison\":false,\"brightness\":0}", "payloadType": "json", "x": 230, "y": 460, "wires": [ [ "eeebcf13.9b2fd" ] ] }, { "id": "57f13d6f733e5c9d", "type": "ui_group", "name": "Test", "tab": "20b3095113f94d70", "order": 1, "disp": true, "width": "6", "collapse": false, "className": "" }, { "id": "20b3095113f94d70", "type": "ui_tab", "name": "Home", "icon": "dashboard", "order": 2, "disabled": false, "hidden": false } ]Ich weiß nicht, ob es diese Dimmer widgets auch in Vis 2 gibt. Jedenfalls konnte man diesen als Taster konfigurieren:
Herzstück des Flows war einfach, dass bei true ein trigger losläuft, der alle 250 ms ein Signal schickt.
Die function Node hat dann einfach die Anzahl der 250 ms Signale gezählt und hat dann unter dieser Anzahl ein shortpress an den oberen Ausgang gegeben und longpress an den unteren Ausgang.
Der Code in der function Node:
var count = context.get('count') || 0; var longpress = context.get('longpress') || false; if (msg.payload){ count += 1; context.set('count',count); if (count > 5) { // Wert erhöhen wenn Longpress zu früh erkannt wird longpress = true; context.set('longpress',longpress); return [null,msg]; } } else { msg.payload=true; count = 0; context.set('count',count); if (!longpress) return [msg,null]; longpress = false; context.set('longpress',longpress); }Longpress wurde also erst bei 6 Signalen oder 1,5 Sekunden erkannt.
