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.

3 Gedanken 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
  • 2. April 2020 um 6:14
    Permalink

    Einer der wenigen guten Artikel im Internet! Sehr gut gemacht! Weißt du wie man ein icon vor ein Subitem Element bekommt? Vielen Dank und weiter so!

    Antwort
  • 8. Mai 2020 um 11:30
    Permalink

    Hi, schöne Anleitung.
    Was macht man eigentlich wenn die Anzahl der Views > 8 wird? Ist ja recht schnell passiert. Kann man dann ein zweites „view in widget 8“ hinzufügen? Wie findet dann die Ansteuerung statt?

    Gruß,
    rugga

    Antwort

Schreibe einen Kommentar

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