ioBroker VIS – View in Widget 8 Widget – Beispiel und Erklärung

In diesem Artikel zeige ich Dir das Widget „View in Widget 8“ in der ioBroker VIS Visualisierung.

Gerade bei kleinen Displays oder selten verwendeten Informationen auf der Visualisierung bietet sich die Verwendung eines Karussells von Informationen an. Hierfür zeige ich Dir im folgenden Artikel, wie Du das selber mit Hilfe des ioBroker VIS Widgets „View in Widget 8“ implementieren kannst. Die eigene Implementierung bietet Dir zudem die Möglichkeit, die aktuell angezeigte View aufgrund von Zuständen oder alternativen Datenpunkten zu steuern. Dazu aber später mehr am Ende des Artikels.

Im ersten Schritt wechseln wir nun in die ioBroker Objekte. Hier legen wir zunächst über die Plus-Schaltfläche einen neuen Ordner viewnumber für die Datenpunkte an. Im nächsten Schritt habe ich dann die Datenpunkte nextview und nr angelegt. Mit dem Datenpunkt nextview können wir später über ein Blockly-Script auf die nächste View springen. Der Datenpunkt dient uns somit als Grundlage des Triggers. Im Datenpunkt nr steht die aktuelle View-Nummer für die Anzeige in der Visualisierung.

Im nächsten Schritt erstellen wir uns nun ein Blockly-Script für die Steuerung der Anzeige.

Das folgende Script reagiert über den Trigger auf den Datenpunkt nextview. Wenn dieser Datenpunkt aktualisiert wird, dann ermittelt sich das Script die aktuelle View Nummer (Datenpunkt nr) und erhöht diesen Datenpunkt um 1 und legt den Wert in einer Variable an. Ist die Variable größer als die maximale View-Nummer, dann wird die Variable wieder auf 0 gesetzt. Auf unser Visualisierung wollen wir später 3 Views in diesem Widget darstellen. Daher müssen wir den Wert hier auf 2 setzen (0,1,2 = 3 Views). Abschließend wird die Variable dann in den Datenpunkt zurückgeschrieben.

Im nächsten Schritt wechseln wir in den ioBroker VIS Editor. Im Edit habe ich dann eine Index View für die Visualisierung, sowie drei weitere Views (viewA, viewB und viewC) für die Darstellung im Widget angelegt.

Jetzt wechseln wir auf die View index und fügen hier das gelb markierte Widget „view in widget 8“ auf unserer View ein.

In den Eigenschaften des Widgets wählen wir dann als Objekt-ID den Datenpunkt nr, welchen wir vorher im Bereich 0_userdata angelegt haben. Als Wertanzahl wird hier 2 festgelegt. Im Bereich der Views siehst Du dann die Einstellungen für die Views 0 bis 2.

Im nächsten Schritt fügst Du das hier gelb markierte Widget Button State auf Deiner Index-View ein. Über diese Schaltfläche können wir dann die Anzeige der aktuellen View verändern.

Dazu wird in den Eigenschaften des Widgets Button State die Objekt-ID des Datenpunkts nextview eingefügt. Als Wert schreiben wir hier eine 1. Somit springt bei jedem Klick auf die Schaltfläche unser vorher erstelltes Blockly-Script an und die View wird entsprechend aktualisiert.

In der Visualisierung wird die erstellte View Index dann wie folgt dargestellt.

Ich hoffe ich konnte Dir damit weiterhelfen und freue mich wie immer über Deine Fragen, Anregungen oder Kommentare zum Thema 🙂

Matthias Korte

Hauptberuflich Software-Entwickler und seit einigen Jahren Smart-Home Fan. Angefangen hat alles mit einem RaspberryMatic und einer schaltbaren Steckdose. Mittlerweile habe ich einige Steckdosen, Sensoren, und Thermostate sowie ioBroker zur Visualisierung im Einsatz.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.