ioBroker Beispiel Visualisierungen als Download

Übersicht über Beispiel-Visualisierungen.

Auf dieser Download-Seite kannst Du dir verschiedene ioBroker VIS Beispiel-Visualisierungen ansehen und als VIS-Projekt herunterladen. Ich habe diese Visualisierungen zu Test- und Lernzwecken für meine Webseite erstellt, und gebe diese gerne an die Community weiter. Ich werde auf dieser Seite immer wieder neue Visualisierungen hinzufügen oder bestehende aktualisieren und erweitern. Wenn Du Deine Visualisierung über diese Download-Seite veröffentlichen möchtest, kontaktiere mich einfach per E-Mail.




Anleitung Import von Projekten

Lade im ersten Schritt die gewünschte Visualisierung als Zip-Datei herunter und speichere sie in einem Verzeichnis Deiner Wahl. Ich habe das Zip einfach im Download-Ordner belassen. Starte nun die ioBroker Visualisierung VIS und klicke auf folgenden Menüpunkt:

Setup Projekt – Export/ImportImport

Klicke jetzt auf die Eingabe-Fläche oder ziehe die Datei aus dem Download-Ordner per Drag&Drop auf die Eingabe-Fläche. Vergebe zudem noch einen eindeutigen Namen für das neue Projekt und klicke auf die Schaltfläche Import Projekt. Das Projekt wird jetzt als neues Projekt in VIS importiert.


Beispiel A

Im Beispiel A ist die Navigation der einzelnen Seiten auf der linken Seite angeordnet. Auf jeder Seite wird einfach die Navigations-View eingeblendet. Auf der rechten Seite der Navigation beginnt jede Seite mit einer Überschrift sowie dem eigentlichen Inhaltsbereich.

ioBroker Visualisierung - Beispiel A (1012 Downloads)

Beispiel B

Im Beispiel B ist die Navigation der einzelnen Seiten unterhalb der Seite angeordnet. Auf jeder Seite wird einfach die Navigations-View eingeblendet.

ioBroker Visualisierung - Beispiel B (705 Downloads)

Beispiel C – Material Design Widgets

Im Beispiel C habe ich eine Visualisierung mittels dem Material Design Widget Adapter sowie der Top App Navigation Bar umgesetzt. Hier findest Du den Artikel zur Erstellung der Navigation:
{{ Link zum Artikel }}

ioBroker Visualisierung – VIS Material Design (12973 Downloads)

Beispiel D – Material Design Widgets

Im Beispiel D habe ich eine Visualisierung mittels dem Material Design Widget Adapter sowie einer normalen Frame-Navigation umgesetzt. Für die Nutzung werden die Material und Material Design Widgets benötigt.

ioBroker Visualisierung – Beispiel D (3233 Downloads)

Beispiel D – Inventwo Design Widgets

Im Beispiel D habe ich eine Visualisierung mittels dem Adapter VIS-Inventwo Design Widgets erstellt. Die Visualisierung verfügt über eine einfache Navigation auf der linken Seite sowie den einzelnen Seiten für die verschiedenen Gewerke.

ioBroker Visualisierung – Beispiel VIS-Inventwo (2745 Downloads)

Ich hoffe ich konnte Dir damit eine Grundlage für die eigene Visualisierung zur Verfügung stellen. Über Kommentare oder E-Mails freue ich mich 🙂

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.

10 Gedanken zu „ioBroker Beispiel Visualisierungen als Download

    • 21. Februar 2020 um 7:29
      Permalink

      Danke 🙂

      Antwort
  • 11. November 2020 um 15:07
    Permalink

    Vielen Dank für die gute Aufbereitung. Verwende die neuen Widgets V2 auch für Navigation. Was muss ich einstellen, dass der Button die aktive Farbe annimmt, wenn ich zur View navigiere?
    Merci.
    VG
    Michael

    Antwort
    • 28. Februar 2021 um 12:14
      Permalink

      Hallo John,

      ein wenig mehr Details wären schon hilfreich, sonst kann ich Dir leider nicht helfen…

      LG Matthias

      Antwort
      • 28. Februar 2021 um 12:26
        Permalink

        Hi, wenn ich Beispiel D importiere (die zip per Drag and Drop ablege), wird nur der graue Hintergrund, der geriffelte Streifen für die Navigation und der horizontale organgene Balken angezeigt. vis in neuster Version (1.3.7). Danke!

        Antwort
  • 27. März 2021 um 9:33
    Permalink

    Gut Schluck beim großen Kaffee und vielen Dank für die guten Ideen.

    Antwort
  • 11. April 2021 um 19:21
    Permalink

    Hallo Matthias,
    Danke für die Beispiele.
    Ich habe ein wenig mi dem Beispiel D-Material Design Widgets gespielt. Aber ich finde nicht wo ich den Hintergrund der einzelnen views ändern kann. Was mache ich falsch? Danke schon mal im Vorraus!

    Antwort
    • 13. April 2021 um 20:27
      Permalink

      Hallo Holger,

      muss ich mir mal ansehen und dann vielleicht in einem separaten Beispiel erklären 🙂

      LG Matthias

      Antwort

Schreibe einen Kommentar

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