ioBroker – Visualisierungen – Übersicht und Vergleich

In diesem Artikel zeige ich Dir die verschiedenen Visualisierungslösungen für ioBroker. 

Für ioBroker stehen mittlerweile viele verschiedene Adapter für die Erstellung von Visualisierungen zur Verfügung. Mit diesem Artikel möchte ich Dir zunächst einen Überblick über alle Lösungen zeigen sowie die einzelnen Lösungen in einer Vergleichstabelle darstellen. Im Abschluss gebe ich Dir mein Fazit zum Thema Visualisierung.

Inhaltsverzeichnis

  1. VIS
  2. Material UI
  3. iQontrol
  4. HabPanel
  5. Lovelace-UI
  6. Tileboard
  7. Mobile
  8. Node-RED Visualisierung
  9. Jarvis
  10. Minuvs
  11. Vergleichstabelle
  12. Mein Fazit
wesmartify.de

1. VIS

VIS ist die klassische Visualisierungslösung von ioBroker. Die Benutzeroberfläche kann dabei mit verschiedenen Widgets komplett frei gestaltet werden. Der folgende Screenshot zeigt den Editor der Visualisierung. Über den Editor werden zunächst Views angelegt, auf diese dann die einzelnen Widgets frei platziert werden können. Über die Eigenschaften auf der rechten Seite des Editors können dann die Details der Widget verändert werden.

Link zur VIS Artikel-Reihe

Link zu VIS-Widgets Artikel

Mit dem VIS Editor könnt ihr euch komplett variable Smart-Home Visualisierungen erstellen, die genau nach euren Vorstellungen aufgebaut und designed sind. Eine Vielzahl von Widgets steht zudem zur Verfügung, die über die Adapter noch erweitert werden können. Die Umsetzung ist allerdings in vielen Bereichen komplex und erfordert einen hohen zeitlichen Aufwand. Zudem wird die Visualisierung auf das entsprechende Endgerät angepasst, ein responsive Design für verschiedene Endgeräte ist nicht vorhanden.

2. Material UI

Mit Material UI kann eine dynamische Oberfläche aufgebaut werden, deren Bestandteile wie z.B. Räume oder Funktionen aus der ioBroker Konfiguration (Aufzählungen und Objekte) ausgelesen werden. Dadurch erhält man ohne aufwändige View-Erstellung in VIS eine Bedienungsoberfläche, mit der die Haussteuerung abgebildet werden kann.

Link zur Material-UI Artikelreihe

Mit der Material-UI Visualisierung könnt ihr euch schnell und einfach eine moderne Visualisierung erstellen. Grundlage der Visualisierung sind die Aufzählungen und Objekt-Metadaten in ioBroker. Die Aktoren und Sensoren werden dabei automatisch aufgrund der Raum und Gewerkszuordnung (Funktion) in die Visualisierung eingefügt. Optional können auch noch eigene Widgets eingefügt werden. Der Adapter befand sich zum Zeitpunkt der Artikel-Erstellung noch im Test, ist aber schon relativ umfangreich und durchaus für die eigene Visualisierung zu verwenden. Grundlage einer guten Visualisierung ist eine gepflegte Objekt-Struktur.

3. iQontrol

iQontrol ist eine Mischung aus Apple Homekit und der Material-UI. Die Visualisierung wird relativ einfach über Ansichten aufgebaut. Der jeweiligen Ansicht (z.B. Beleuchtung) können dann die verschiedenen Geräte aus den ioBroker Datenpunkten hinzugefügt werden.

Ich habe den Adapter getestet und in ca. 1 Stunde einen Teil meiner Haussteuerung nachgebaut. Grundsätzlich gefällt mir der Ansatz des neuen Adapters sehr gut, ich sehe hier noch viel Potential. Gerade für Einsteiger ist dieser Adapter relativ einfach zu verstehen und zu verwenden.

4. HABPanel

Mit HABPanel kannst Du Visualisierungsoberflächen für ioBroker einfach und schnell konfigurieren. Die Visualisierung kommt ursprünglich von openHAB und wurde nachträglich auch für ioBroker verfügbar gemacht. Aktuell steht der Adapter noch nicht in der Produktiv-Umgebung zur Verfügung (Stand August 2019).

Link zur HABPanel-Artikelreihe

Mit dem HABPanel-Adapter kannst Du ebenfalls schnell deine Visualisierung realisieren. Mir gefällt die Struktur sowie die intuitive Bedienung. Der Adapter verfügt über eine Vielzahl von Widgets, welche in der Visualisierung verwendet werden können. Zudem kann man mit HTML, CSS und AngularJS Kenntnissen auch eigene Widgets entwickeln oder Widgets aus der Community in HABPanel importieren. Als Nachteile sehe ich das fehlende Responsive Webdesign.

5. Lovelace-UI

Mit Lovelace kannst Du Visualisierungsoberflächen für ioBroker einfach und schnell konfigurieren. Die Visualisierung kommt ursprünglich von der Home-Assistant Plattform und wurde nachträglich auch für ioBroker verfügbar gemacht. Aktuell steht der Adapter noch nicht in der Produktiv-Umgebung zur Verfügung (Stand August 2019).

Link zur Lovelace-UI Artikelreihe

Mit Lovelace kann man sich ebenfalls relativ schnell modern aussehende Visualisierungen erstellen. Die Sensoren oder Aktoren müssen dazu in den Objekten für Lovelace aktiviert werden. Zudem sollte auch die Raum- und Funktionszuordnung vorhanden sein. Die Visualisierung hat mich absolut überzeugt, da sie noch über weitere Zusatzfunktionen wie z.B. den Timern oder dem Benachrichtigungssystem verfügt. Ich bin derzeit dabei meine komplette Visualisierung auf diesen neuen Adapter zu portieren.

6. Tileboard

Tileboard ist ein weiterer Visualisierungsadapter, der aus Home-Assistant für ioBroker implementiert wurde. Aktuell steht der Adapter noch nicht in der Produktiv-Umgebung zur Verfügung (Stand August 2019).

Wie oben schon erwähnt befindet sich diese Form der Visualisierung in einer sehr frühen Phase der Integration in ioBroker. Die komplette Konfiguration des Adapters läuft über eine JavaScript Datei, die in der Adapter-Konfiguration bearbeitet werden kann. In dieser Datei können die einzelnen Pages, Groups und Entities eingefügt und die einzelnen Entities konfiguriert werden.

7. Mobile

Die Mobile-Visualisierung war ein erster Ansatz von dynamischen Visualisierungen. Der Adapter wird nicht weiterentwickelt oder gepflegt, daher rate ich von dem Einsatz der Visualisierung ab. Ich werde diese Lösung hier nicht weiter beschreiben oder bewerten.

8. Node-RED Visualisierung

Node-RED verfügt über eine integrierte Visualisierung, mit der eigene Dashboards aufgebaut werden können. Der Grundaufbau der Visualisierung erfolgt über eine Definition von Tabs und Groups, welche direkt in Node-RED angelegt werden können. Die einzelnen Bedienungselemente z.B. für Sensor-Informationen oder Leuchtmittel werden dann in Form von Dashboard Nodes auf einem oder mehreren Flows zusammengestellt. Mit dieser Vorgehensweise lassen sich komplette Dashboards erstellen.

9. Jarvis

Jarvis „just another remarable vis“ ist ein neuer Visualisierungs-Adapter für ioBroker, welcher auf dem Material UI Framework für Web-Entwicklung aufsetzt. Die Visualisierung verfügt über eine eigene Struktur von Geräten und Modulen, wodurch die verschiedensten Geräte sowie auch allgemeine Datenpunkte flexibel in die Visualisierung integriert werden können. Der Aufbau der Visualisierung erfolgt über Tab-Laschen und Spalten. Über sogenannte Widgets können die Geräte dann einfach in die Visualisierung eingefügt werden. In der folgenden Artikelreihe habe ich die Verwendung des Adapters ausführlich erklärt:

10. Minuvs

Mit der Visualisierung kannst Du schnell und einfach mittels einem integrierten Builder (Werkzeug zur Erstellung) eine Visualisierung für Dein Smart-Home erstellen. In der folgenden Artikelreihe zeige ich Dir die Installation und Konfiguration der Visualisierung.

wesmartify.de

11. Vergleichstabelle

 AufwandEigenes DesignEigene WidgetsKomplexitätResponsive DesignCommunity
VISHochJaJaHochNeinSehr gut
Material UIMittelNeinNeinMittelJaGut
iQontrolMittelNeinNeinMittelJa-
HABPanelMittelNeinJaMittelNein-
Lovelace-UIMittelJaJaMittelJa-
TileBoardMittelJaJaMittelJa-
Node-REDHochJaJaHochJaGut
JarvisMittelNeinNeinMittelJaGut
MinuvisMittelNeinNeinNiedrigJa-

12. Mein Fazit

Ich habe jetzt alle Visualisierungen für ioBroker aufgelistet, und die Funktionsweise der jeweiligen Visualisierung dargestellt. Ich bin ein Freund der VIS Visualisierung, da ich hier wirklich alle Freiheiten der Gestaltung sowie alle technischen Möglichkeiten einsetzen kann. Für mich der größte Nachteil ist allerdings die doch sehr starre Erstellung der Visualisierung für ein Endgerät (Display Auflösung). Die View wird hierbei nicht skaliert und passt sich somit auch nicht an andere Displays an. Aus diesem Grund habe ich begonnen meine bestehende Visualisierung auf VIS-Basis mit einem dynamischen Adapter nachzubauen. Erste Schritte und Erfahrungen habe ich dabei mit HabPanel gemacht. Aufgrund von fehlenden Widgets sowie Problemem mit der Skalierung auf unterschiedlichen Auflösungen habe ich im nächsten Schritt Material-UI sowie Lovelace getestet. Diese beiden Adapter unterstützen das Responsive Design und die erstellte Visualisierung lässt sich somit wunderbar auf verschiedenen Geräten darstellen. Material-UI und Lovelace unterscheiden sich im Layout sowie in der Anbindung der Datenpunkte. In Lovelace müssen die Datenpunkte in den Objekten speziell für Lovelace freigegeben werden. Das ist natürlich ein Mehraufwand, dafür finde ich die Visualisierung aber wirklich sehr gelungen und übersichtlich. Aus diesem Grund würde ich aktuell für komplexe Visualisierungen VIS empfehlen. Für Standard-Darstellungen von Leuchtmitteln oder Tür- und Fensterkontakten würde ich Material-UI oder Lovelace einsetzen.

Update 4.10.2020

Bisher habe ich für Standard-Darstellungen Material-UI oder Lovelace empfohlen. Mit dem neuen Jarvis Adapter ändere ich hiermit meine Empfehlung, da mit diesem Adapter in meinen Augen die Visualisierung noch komfortabler und vor allem noch klarer erstellt werden kann. Über die integrierte Geräteverwaltung können Geräte manuell ergänzt werden, falls diese noch die automatische Erkennung hinzugefügt wurden. Aus diesem Grund empfehle ich aktuell den Jarvis-Adapter für die Visualisierung.

Wie sind eure Erfahrungen und Meinungen zum Thema? Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer ?

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.

22 Gedanken zu „ioBroker – Visualisierungen – Übersicht und Vergleich

    • 2. November 2019 um 12:07
      Permalink

      Moin,

      danke für den Hinweis, habe ich im Forum schon gelesen. Werde ich demnächst auch eine Artikelreihe dazu veröffentlichen und dann natürlich im Artikel aufnehmen 🙂

      LG Matthias

      Antwort
      • 1. März 2020 um 10:59
        Permalink

        Hallo Matthias, danke für diese Übersicht.
        Als Ergänzung: Standard VIS kann mithilfe des Material Design Adapters oder mit den CSS Klassen von Uhula auch responsive Design.

        Was ich mich gerade aber Frage: Wie verhalten sich die Ladezeiten der unterschiedlichen Visualisierungen? VIS ist beim ersten Laden ziemlich träge. Wie ist es bei den Anderen? Bin für eine unkomplizierte Ansicht auf der Suche nach der schnellsten Visualisierung. Lovelace gefällt mir optisch sehr gut. Wie sind hier die Ladezeiten?
        Vielen Dank.

        Antwort
  • 2. November 2019 um 22:30
    Permalink

    Guter Vergleich.
    Was ist mit NodeRED?

    Antwort
    • 3. November 2019 um 6:58
      Permalink

      Wird noch ergänzt 🙂

      Viele Grüße,
      Matthias

      Antwort
  • 9. Oktober 2020 um 19:47
    Permalink

    Hallo Matthias, danke für die tolle Darstellung. Sie ist sehr sehr hilfreich.

    Vielleicht wäre in deiner Vergleichstabelle noch die Spalte „iOS bzw. Android App unterstützt“ sinnvoll. Das ist für den Einen oder Anderen eventuell ein wichtiges Entscheidungskriterium für ein Visualisierungswerkzeug.

    Viele Grüße
    Armin

    Antwort
    • 10. Oktober 2020 um 7:55
      Permalink

      Hallo Armin,

      danke für den Tipp, das werde ich gerne beim nächsten Update hinzufügen.

      LG Matthias

      Antwort
  • 24. Oktober 2020 um 21:41
    Permalink

    Hallo, der MinuVis Adapter ist ebenfalls sehr interessant und sollte aufgenommenen werden.

    Danke

    Antwort
  • 5. November 2020 um 20:26
    Permalink

    Hallo alles sehr intressant. Mir fehlt hier noch die Erweiterung inventwo

    Antwort
  • 30. Januar 2021 um 18:00
    Permalink

    Hallo Mathias,

    auch von mir herzlichen Dank für die Übersicht. Ich bin gerade erste dabei hier einzusteigen und habe bei viz etwas von viz-Lizenzen gelesen.
    Geht es hier um Geld verdienen und mehr um Registrierung?
    Wie ist da bei den anderen Produkten?

    Danke und herzliche Grüße
    Joe

    Antwort
    • 6. Februar 2021 um 19:31
      Permalink

      Hallo Joe,

      VIS und ioBroker sind für die private Nutzung kostenlos. Wenn Du die Visualisierung gewerblich nutzen würdest, dann würden hier Lizenzkosten entstehen.
      LG Matthias

      Antwort
  • 12. März 2021 um 6:52
    Permalink

    Ich bekomme die .vis bei mir nicht ans laufen
    Unter proxmox; ioBroker sehe ich die Instanz aber kann ihn nicht starten

    Antwort
    • 12. März 2021 um 21:22
      Permalink

      Hallo Michael,

      kommen im ioBroker Log Fehler dazu? Poste die hier gerne mal, vielleicht finden wir dann den Grund.

      LG Matthias

      Antwort
      • 21. März 2021 um 13:57
        Permalink

        Hallo Matthias,
        Danke für Deine schnelle Antwort, leider habe ich sie erst heute gelesen. 😩
        hier mal der Log!
        web.0 2021-03-21 12:55:25.249 error (1102) Cannot write file tzest/vis-user.css: vis.0 is not an object of type „meta“
        web.0 2021-03-21 12:55:25.238 error (1102) Cannot write file tzest/vis-user.css: vis.0 is not an object of type „meta“
        web.0 2021-03-21 12:55:25.219 error (1102) Cannot write file tzest/vis-views.json: vis.0 is not an object of type „meta“
        web.0 2021-03-21 12:55:25.089 error (1102) Cannot write file tzest/vis-views.json: vis.0 is not an object of type „meta“
        web.0 2021-03-21 12:55:13.095 error (1102) Cannot write file main/vis-user.css: vis.0 is not an object of type „meta“
        web.0 2021-03-21 12:55:13.093 error (1102) Cannot write file main/vis-user.css: vis.0 is not an object of type „meta“
        web.0 2021-03-21 12:55:13.074 error (1102) Cannot write file main/vis-views.json: vis.0 is not an object of type „meta“
        web.0 2021-03-21 12:55:12.917 error (1102) Cannot write file main/vis-views.json: vis.0 is not an object of type „meta“
        Lizenz habe ich auch eingetragen und getestet wird „Grün“ OK !

        wenn ich den vis aus den Instanzen starte kommen schon die Meldungen,:
        Cannot create file vis-user.css {object Object}
        Kann die Datei „main/vis-views.json“ nicht speichern {object Object}
        Kein Views am Server gefunden am.

        habe ich noch vergessen irgendwas zu installieren?

        Danke Gruß Michael

        Antwort
  • 23. März 2021 um 14:17
    Permalink

    super 👍
    vielen Dank für die Info, das hat geholfen so wie es aussieht.

    schön das es das Internet gibt und viele die viel wissen 😊👍

    bis zum nächsten mal wenn es Probleme gibt 😇

    Antwort
    • 23. März 2021 um 14:35
      Permalink

      Sehr gerne, bei Fragen oder Anregungen, gerne melden 🙂

      LG Matthias

      Antwort
  • 18. April 2021 um 16:10
    Permalink

    Also Habpanel gehen sehr klar eigene Designs auf HTML/CSS basis, also alles was man aus dem Websitebereich kennt, natürlich auch responsive, daher verstehe ich nicht warum das bei dir nicht geht.
    Als alternative das Matrix-Theme was aber auch auf dem Habpanel für Iobroker zu installieren geht.

    Gruß

    Antwort
    • 19. April 2021 um 6:32
      Permalink

      Moin Marco,

      danke für den Hinweis, da ist der Artikel und die Tabelle nicht auf dem aktuellen Stand. Ich werde das ausprobieren und dann die Tabelle anpassen.

      LG Matthias

      Antwort
  • 19. April 2021 um 17:45
    Permalink

    Ich habe ebenfalls das Problem im vis Editor.
    Fehlermeldungen
    Cannot create file vis-user.css
    und im Log
    Cannot write file main/vis-views.json: vis.0 is not an object of type „meta“

    Bei mir hat die Lösung mit der Neuinstalltion von vis nicht gehofen.
    Was kann ich noch probieren?

    Antwort

Schreibe einen Kommentar

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