VIS Material Design Widgets – Teil 2 – Top App Bar Navigation

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 2.Teil der Artikelreihe beginnen wir nun mit der Erstellung einer Visualisierung über die Material Design Widgets. Ziel des Artikels ist die Erstellung einer kleinen Beispiel-Visualisierung, in der das Navigationskonzept mit dem Top App Bar Navigation Drawer Widget umgesetzt wird.

Im ersten Schritt habe ich mir dazu nun ein neues VIS-Projekt angelegt, die Beispiel-View gelöscht und eine neue View mit dem Namen index erstellt. Auf die View index ziehen wir nun das folgende Widget:

Zudem legen wir uns nun drei weitere Views mit folgenden Bezeichnungen an:

  • view_index
  • view_light
  • view_status

Diese Views beinhalten später die einzelnen Bereiche (Übersicht, Beleuchtung und Status) der Visualisierung.

Für die Anzeige der einzelnen Views der Visualisierung fügen wir zudem noch das Widget View in Widget 8 aus dem Bereich basic in die View index ein.

Ich habe das Widget view in widget 8 dazu unterhalb der Top-Navigation Bar eingefügt, da wir in diesem Bereich später die einzelnen Views laden werden.

Im nächsten Schritt markieren wir das Widget Top Bar Navigation und beginnen mit der Konfiguration. In den Einstellungen definieren wir zunächst für unser Beispiel die Anzahl von Navigationselementen im Menü. Wir möchten drei Navigationsbereiche erstellen, müssen die Anzahl also auf 2 stellen, da hier ab 0 gezählt wird. Im Bereich Navigationsleiste: Beschriftungen sehen wir nun die einzelnen Einträge. Hier geben wir nun die entsprechenden Beschriftungen, wie im Screenshot gezeigt, ein.

Im nächsten Schritt markieren wir das Widget view in Widget 8 und definieren auch hier die Anzahl Views mit 2. Im Bereich Views können wir nun für den jeweiligen view für Tab Bereich die vorher angelegten Views auswählen.

Wir können die Beispiel-Visualisierung nun starten und das Ergebnis ansehen. Markiere hierzu die index-Seite und klicke auf das Start-Icon.

Nach dem Start wird die Visualisierung mit der Übersicht gestartet. Über das Menü-Icon oben links können wir die Navigation öffnen.

In der Navigation sehen wir die vorher definierten Bereiche Übersicht, Beleuchtung und Status. Für die Navigation in einen anderen Bereich klicken wir nun einfach auf den entsprechenden Bereich.

Im folgenden Videos siehst Du die Navigation in Aktion 😉

Ich habe Dir das komplette Projekte zusätzlich noch als Download hinzugefügt:

ioBroker Visualisierung – VIS Material Design (1161 Downloads)

Ü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.

8 Gedanken zu „VIS Material Design Widgets – Teil 2 – Top App Bar Navigation

  • 15. Februar 2020 um 13:27
    Permalink

    Hi Matthias, super klasse Artikel und Arbeit von dir. Ich bin gespannt auf die folgenden Artikel. Besten Gruß David

    Antwort
  • 22. Februar 2020 um 22:36
    Permalink

    Hallo,

    top, auch schon so nach der Anleitung umgesetzt! Ein Artikel zur Erstellung von Untermenüs wäre super 😉

    Antwort
    • 24. Februar 2020 um 7:33
      Permalink

      Moin, danke. Wird in den nächsten Tagen folgen 🙂

      Antwort
  • 26. Februar 2020 um 7:44
    Permalink

    Hallo,
    danke für den Artikel. Freue mich auch auf den nächsten. Folgende Fragen/Bitten:
    1) Woher bekommt das „view in Widget 8“ Widget die Zuordnung? Ist 0/1/2…im Navi Widget auch immer gleich 0/1/2 im View in Widget 8? Wenn ja, funktioniert das bei mir leider nicht.
    2) Kann man in den Views alle Widgets einsetzen oder nur die Material Design Widgets? Habe dort Material Widgets drinnen, die werden nicht angezeigt.
    3) Ich habe das Top Navi Widget auf Permanent gestellt und FullHD weil die Visu nur für den PC ist. Die Symbole skalieren nicht mit (Punkte im Navi Menü sind jetzt winzig). Was kann ich tun?

    Danke!
    Das ist das erste Tutorial was mich in VIS tatsächlich Mal ein Stück weiter gebracht hat, da Mal ganzheitlich eine Version der Visu erläutert wird und nicht nur ein Widget oder Tool!

    Thomas

    Antwort
    • 27. März 2020 um 15:52
      Permalink

      Da würde ich mich anhängen 😀
      Die Zuordnung klappt nicht, da man den Untermenüs nichts sagen kann, was diese zu zeigen haben (mal davon ab, das die Hauptmenüs trotz Zuweisung der einzelnen Seiten (Hauptmenü 1 sollte vermutlich TAB 0 aufmachen ), diese auch nicht aufmachen.
      Das Ding hat echt potential, wenn es dafür eine gute Erklärung gäbe.
      Ansonsten schon gut erklärt wie der Gundaufbau ist.
      Wäre nurnoch eine Antwort hierzu nötig und das Ding geht durch die Decke.

      Antwort
  • 15. April 2020 um 22:36
    Permalink

    Hey, top Artikel. Kannst du bitte die Verbindung zwischen dem View in Widget und dem topAppBar erläutern?

    Geht bestimmt über die Objekt ID in der topAppBar

    Antwort
  • 11. Oktober 2020 um 18:40
    Permalink

    Danke für die tollen Anleitungen.

    Versuche nun auch diese Navigation.
    Es funktioniert zwar, jedoch habe ich folgendes Problem:

    Die index Seite zeigt für Millisekunden den ersten zu öffnenten View und dann sieht man nur oben das Material Top Menü. Darunter ist es leer.

    Wenn ich dann über das Menü den ersten View auswähle, wird alles korrekt angezeigt.

    Was kann das sein?

    Antwort

Schreibe einen Kommentar

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