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 🙂
Danke dafür!!! Aber das ist doch echt wirklich umständlich. Ich nutze HABPanel mit iobroker und bin immer noch enttäuscht, dass es keine vernünftige Visualisierung gibt, die sich einigermaßen selbst erstellt. Von Homematic mit PocketControl bin ich was einfacheres/besseres gewöhnt. Schade, schade.
Moin Daniel,
naja, von selbst wird sich eine Visualisierung nicht aufbauen können, da die Visualisierung ja nicht weiß was genau der Anwender möchte. Ich gebe Dir aber schon Recht, dass hier in einigen Bereichen noch viel Luft nach Oben ist. Leider wird aktuell in dem Bereich auch nicht viel weiterentwickelt, eigentlich sehr schade, da in meinen Aufgaben HABPanel sehr viel Potential bietet. Und gerade für Einsteiger ist diese Form der Visualisierung neben MaterialUI sehr viel besser geeignet als VIS.
Ich bin ganz neu in dem SmartHome Thema und lese alle deine Beiträge rund um ioBroker. Gibt es eine Empfehlung welche Visualisierung man benutzten soll? Habe auch mit VIS angefangen aber schöner sehen natürlich das MaterialUI oder HABPanel aus. Aber was ist die „beste“ Lösung? was wird am meisten weiterentwickelt? Da ich noch am Anfang bin kann ich noch wechseln aber später wird das ggf. umständlich.
Gruß
Stephan
Das würde mich auch sehr gerne Interessieren. Welche Visualisierung ist gerade für einen Anfänger empfehlenswert? Benutze ebenfalls ioBroker und finde das Vis sehr umständlich.
Hallo Daniel,
ich habe schon lange eine eine iobroker Installation laufen, bin aber immer wieder an VIS gescheitert.
Zwar habe ich etwas bedienbares hinbekommen, war aber nie wirklich mit dem Aussehen zufrieden. Über einige Umwege bin ich nun durch deinen Artikel erst mal bei dem HAB-Panel-Adapter gelandet und das sieht vielversprechend aus.
Ich habe dein Beispiel soweit nachvollziehen können, allerdings hänge ich gerade an einer Stelle. Wie wird das neue Panel im Browser aufgerufen. Konkret – ich habe ein Panel mit dem Namen „iPhone6s“ erstellt und angepasst. Kann aber in der Browserzeile keinen Unterschied in der Darstellung der URL erkennen. Unter der URL „http://192.168.X.X:8082/habpanel/index.html#/ wird immer das gerade aktuell im Editor genutzte Panel angezeigt.
Bei VIS hat man einfach nur die Browserzeile entsprechen geändert um die Seite aufzurufen. Vielleicht sehe ich den Wald vor lauter Bäumen nicht. Ein Hinweis wäre daher nett.
Gruß
TG
Hallo,
tja, das ist leider ein Thema, welches derzeit noch nicht funktioniert. Ich habe das für die Weiterentwicklung bereits angeregt, mal sehen ob es umgesetzt werden kann. Hast Du dich schon mal mit Lovelace beschäftigt?
Grüße,
Matthias
Hallo Matthias,
heißt das, dass immer nur ein Panel aktiv ist und dann so auch auf allen Geräten dargestellt wird?
Hallo,
ich habe ein Problem mit dem Verbinden des HabPanels mit meinem Android Smartphone.
Leider bekommt mein Smartphone keine Verbindung zur HabPanel Session am IOBroker.
muss ich bei der Webserver konfiguration etwas beachten?
Verwenden tue ich die OpenHab App.
Habe ich etwas überlesen?
Ich danke vielmals. (Ich beiss mir hier die Zähne aus! 🙂 )
LG
Manuel
Moin Manuel,
die OpenHab App funktioniert meines wissens nach nicht mit dem ioBroker Adapter. Du kannst die Visualisierung nur über den Browser öffnen.
Viele Grüße,
Matthias