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.
ioBroker HABPanel
- Teil 1 – Installation und Grundlagen
- Teil 2 – Dashboard und Widgets
- Teil 3 – Custom Widgets
- Teil 4 – Custom Widgets importieren (JSON-Format)
- Teil 5 – Custom Widgets anpassen und erweitern
- Teil 6 – Eigenes Widget erstellen
- Teil 7 – Unterstützung von verschiedenen Geräten und Auflösungen
- Teil 8 – Tür-/Fensterkontakt visualisieren
- Teil 9 – Das Chart Widget
- Teil 10 - Mit dem Frame-Widget eine VIS-View einbinden
- Teil 11 - Script über Button starten
- Teil 12 - Das Timeline-Widget
- Teil 13 - Das Template-Widget
- Teil 14 - Template Wissenssammlung
- Teil 15 – Das Slider-Widget
- Teil 16 – Das Dummy-Widget
- Teil 17 – Das Knob-Widget
- Teil 18 – Das Clock-Widget
- Teil 19 – Das Button-Widget
- Teil 20 – iCal Termine HTML-Darstellung
- Teil 21 – OpenWeatherMap Widget
- Teil 22 – Image Widget
- Teil 23 – Selection Widget
- Teil 24 – Online-Status Widget
Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂