smarthome-tricks.de

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:

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 😉

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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

ioBroker Visualisierung – VIS Material Design (15397 Downloads)

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

Die mobile Version verlassen