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.

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

  • 5. Mai 2019 um 11:05
    Permalink

    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.

    Antwort
    • 6. Mai 2019 um 6:40
      Permalink

      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.

      Antwort
      • 17. Juli 2019 um 14:12
        Permalink

        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

        Antwort
  • 30. August 2019 um 18:35
    Permalink

    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.

    Antwort
  • 21. Oktober 2019 um 0:25
    Permalink

    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

    Antwort
    • 26. Oktober 2019 um 7:07
      Permalink

      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

      Antwort
  • 27. November 2019 um 15:23
    Permalink

    Hallo Matthias,

    heißt das, dass immer nur ein Panel aktiv ist und dann so auch auf allen Geräten dargestellt wird?

    Antwort
  • 1. Dezember 2019 um 16:26
    Permalink

    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

    Antwort
    • 2. Dezember 2019 um 6:05
      Permalink

      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

      Antwort

Schreibe einen Kommentar

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

Ich akzeptiere