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. Vergleichstabelle
  9. Mein Fazit

 

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

 AufwandEigenes DesignEigene WidgetsKomplexitätResponsive DesignCommunity
VISHochJaJaHochNeinSehr gut
Material UIMittelNeinNeinMittelJaGut
iQuontrolMittelNeinNeinMittelJa-
HABPanelMittelNeinJaMittelNein-
Lovelace-UIMittelJaJaMittelJa-
TileBoardMittelJaJaMittelJa-

 

 

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

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.

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

Schreibe einen Kommentar

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

Ich akzeptiere