ioBroker HABPanel – Teil 7 – Unterstützung von verschiedenen Geräten und Auflösungen

In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.  

Im 7. Teil der Artikelreihe geht es um die Anzeige der Visualisierung auf verschiedenen Geräten. Ihr kennt sicher das Problem, dass ihr eine tolle Visualisierungsoberfläche am PC aufgebaut habt, und diese nun auf eurem Smartphone oder Tablet verwenden wollt. Auf dem PC im Browser schaut die Oberfläche wie gewünscht aus:

 

Öffnen wir die Visualisierung nun im Browser z.B. auf dem Smartphone oder Tablet werden die einzelnen Widgets nicht korrekt angezeigt. Die Größe der Widgets passt nicht mehr zur Auflösung des mobilen Gerätes.

 

Lösen kann man das Problem derzeit über eine zweite Storage Configuration. Dazu öffnen wir die Einstellungen des HABPanels.

 

In den Einstellungen sehen wir ganz links die Storage Configuration. Über diese Einstellung können mehrere Panel Configuration angelegt werden. In der Grafik hier sehen wir das Panel für das Tablet1. Um die Visualisierung auf mehreren verschiedenen Geräten optimal darzustellen, gibt es derzeit nur den Weg die gesamte Konfiguration zu duplizieren und an die Auflösung des jeweiligen Gerätes anzupassen.

 

In der Storage Configuration klicken wir nun auf den unteren Link „Save the current configuration to a new panel configuration„.

 

Der neuen Panel Configuration geben wir nun einen eindeutigen Namen. Bitte hier nur Buchstaben und Zahlen eingeben.

 

Die Panel Configuration wurde nun dupliziert. Über die Auswahl können wir hier die entsprechende Configuration umschalten. Nach dem Duplizieren der Configuration wird diese auch direkt ausgewählt.

 

Um nun für die entsprechende Auflösung die Visualisierung zu bearbeiten öffne ich im Google Chrome Browser den Entwicklermodus.

 

Über die Device-Toolbar kann ich nun die Auflösung des gewünschten Gerätes einstellen und somit die Breite und Höhe Widgets anzupassen.

 

 

Nun wechseln wir in den Bearbeitungsmodus des jeweiligen Dashboards und können hier die Position, Breite und Höhe des Widgets an die Auflösung anpassen.

 

 

In der Ausführung schaut das jetzt so aus, auf dem Gerät hat es auch auf Anhieb funktioniert.

 

So einfach können wir nun alle Dashboards für das gewünschte Gerät und Auflösung anpassen. Einziger Nachteil ist die Tatsache, dass Erweiterungen oder Anpassungen der Oberfläche nun doppelt vorgenommen werden müssen. Ich empfehle daher zunächst eine Visualisierung zu erstellen, in der alle Funktionen enthalten sind. Erst im zweiten Schritt wird die Auflösung dann nur eine zweite Panel Configuration für ein anderes Gerät angepasst. Zudem muss man in Zukunft immer genau prüfen in welcher Configuration man sich aktuell befindet.

Ich hoffe Dir gefällt der Artikel 🙂 Ich freue mich über Deinen Kommentar!

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.

Schreibe einen Kommentar

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

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich akzeptiere