VIS Material Design Widgets – Teil 2.1 – Top App Bar Navigation – Untermenüs

In dieser Artikelreihe zeige ich Dir die Material Design Widgets für VIS.

Mit dem VIS-Adapter Material Design Widgets kannst Du Dir eine echte Material Design Visualisierung mittels VIS erstellen. In der Artikelreihe werden wir Schritt für Schritt den Adapter installieren sowie unsere erste Material Design Visualisierung erstellen.

Im Teil 2.1 der Artikelreihe werden wir das bereits erstellte Navigationsmenü der Visualisierung um ein Untermenü erweitern. Das Navigationsmenü soll später den folgenden Aufbau darstellen:

  • Übersicht
  • Beleuchtung
  • Status
  • System
    – ioBroker
    – Homematic
    – Hue

Wir öffnen nun das im vorherigen Artikel erstellte VIS-Projekt und legen im ersten Schritt die weiteren Views an. Ich habe dazu die folgenden 3 Views erstellt:

Im nächsten Schritt öffnen wir die View index, auf der das Top App Bar Navigation Widget abgelegt ist. Wir markieren nun das Widget und erweitern die Anzahl Navigationselemente auf 3. Im dritten Eintrag wird dann das Untermenü platziert. Für die Definition des Untermenüs ändern wir zudem die Anzahl Untermenüs auf 3 (drei Untermenü-Einträge).

Zudem erweitern wir die die Navigationsleiste des dritten Elements um die folgende Beschriftung:

Über das JSON-Objekt wird die Beschriftung des Untermenüs gesteuert. Mit der Eigenschaft itemText wird der Haupteintrag beschriftet. Die Auflistung subItems enthält die Bezeichnungen der einzelnen Untermenü-Einträge. Bitte hierbei beachten, dass die einzelnen Einträge mit einer rechteckigen Klammer beginnen und mit Komma getrennt werden (Beispiel [„A“,“B“,“C“] ).

Wir haben nun die Konfiguration des Top App Bar Navigation Widget abgeschlossen und können nun im nächsten Schritt auf der View index das Widget View in View erweitern. In den Eigenschaften des Widgets ändern wir nun die Anzahl Views (Wertanzahl bis) auf 6, die war insgesamt 7 Views (0-6) darstellen. In den neuen Feldern für die Views hinterlegen wir nun die zu beginn erstellten Views. Ich habe für den System-Haupteintrag hier auch die ioBroker View verwendet.

Wir können jetzt die Visualisierung starten und das Ergebnis betrachten.

Über Kommentare, Fragen und Anregungen freue ich mich wie immer. Gerne könnt Ihr auch Fragen per E-Mail senden 🙂

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.

Ein Gedanke zu „VIS Material Design Widgets – Teil 2.1 – Top App Bar Navigation – Untermenüs

  • 1. März 2020 um 13:21
    Permalink

    Hallo Matthias,

    habe das auch schon länger bei mir als Visualisierung, allerdings mit Datenpunkt welcher in der objectid des widgets zum „Top App Bar Navigations“ hinterlegt ist als auch in dem widget „View in Widget 8“, in welchem man die views der entsprechenden Navigationstabs hinterlegen muss. So steht es auch im iobroker forum beschrieben. Funktioniert das denn bei dir ohne diesen Datenpunkt? 🤔

    Antwort

Schreibe einen Kommentar

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