ioBroker VIS Navigation

  • von

In der Regel hat man bei der Visualisierung seiner IOT Umgebung mit vis in ioBroker mehrere Seiten, die man über eine Navigation anzeigen will. Doch leider findet man kaum Anleitungen, wie das realisert werden kann.

Hier zeige ich euch, wie man mit den Material Design Widgets in vis eine Navigation erstellen kann.

Material Design Widgets

Als erstes muss man im ioBrocker den Adapter Material Design Widgets installieren. Danach sollte die VIS Instanz nue gestartet werden, damit die neuen Widgets sichtbar werden. In der linken Spalte sollte nun neuen einer Reihe anderer Widgets das neue Widget Top App Bar sichtbar sein. Aber dazu später.

Views

VIS arbeitet nicht mit einzelnen Seiten sondern mit Views. Das heißt, dass alle Inhalte beim Aufruf geladen werden und bei Bedarf die jeweilige View eingeblendet wird. Aber wie kann man eine View auswählen? Dafür habe ich mir erst einmal ein Beispielprojekt mit 4 Views angelegt.

Demo Projekt
Demo Projekt

Auf die einzelnen Views lege ich einfach ein Textfeld mit dem Namen der View

view in widget 8

Jetzt kommt das Widget view in widget 8 ins Spiel. Ich hatte es vorher schon ein paar mal in eine View gezogen, aber nie Verstanden, was ich damit machen kann. Da stand dann immer: Fehler: view wurde nicht gefunden.

Also hier die Erklärung. In diesem Widget können verschiedene Views angezeigt werden. Dafür braucht men einen Datenpunkt, der die Nummer der anzuzeigenden View speichert. Dafür legt man sich unter 0_userdata.0 in den Objekte ein neues Objekt als Datenpunkt (Zeichenkette) an, und geben Sie dem Datenpunkt den Wert 1. Hier das Objekt demo.

Datenpunkt
Datenpunkt

Dieser Datenpunkt muss jetzt als Object ID im Template view in widget 8 ausgewählt werden. Darin speichert das Widget die Nummer der View, die angezeigt werden soll. Anschließend wählt man in dem Feld „Werteanzahl bis“ die ANzahl der Views aus, die mit dem Widget verknüpft werden sollen. Der Wert enspricht der realen Anzahl -1. Bei drei Views trägt man also eine 2 ein.

Nun wählt man unter View für Tab[x] die jeweilige View aus. In diesem Beispiel View1 – View3

Konfiguration Widget
Konfiguration Widget

Nun sollte schon mal im dem Widget die View2 angezeigt werden.

View 1
View 2

Aber warum die View 2? Der Wert des Datenpunktes ist doch 1. Das liegt daran, das ioBroker intern mit der 0 zu zählen anfängt. View1 = 0, View2 = 1 und View3 = 2.

Jetzt fehlt noch die Navigation.

Navigation

Für die Navigation kann man das Widgert Top App Bar von den Material Design Widgets nehmen. Man legt es in die View Navigation, in der auch das Widget view in widget 8 liegt. Und nun wird es genial. Man wählt as Object ID den gleichen Datenpunkt wir das Widget view in widget 8 und wählt in Anzahl der Navigationselemente die Anzahl der Views, die man hat, minus 1. Minus 1, weil ioBroker auch hier bei 0 zu zählen beginnt. Daraufhin sieht man unten bei den Einstellungen mehrer TAbs mit den Namen Navigationsleiste Element[x]. Hier trägt man für jede View den Namen ein, der im Menü erscheinen soll.

Widget Top App Bar
Widget Top App Bar

Das war es schon. Wenn man nun die Runtime Umgebung aufruft sieht man folgende Bilder.

Wenn man nun das Mneü öffnet und einen Menüpunkt auswählt, wird die entsprechende View eingeblendet.

Ich hoffe, dass ich etwas zu Aufhellung beitragen konnte, wie man ein Menü in VIS von ioBroker erstellen kann. Natürlich gibt es auch noch andere Möglichkeiten. Aber diese ist für mich für die Darstellung auf Handy die beste, das VIS ja leider kein responsive Design hat.