openHAB #5: Steuerzentrale auf Tablet mit habpanel

5: Steuerzentrale mit habpanel

Der Vorteil von HABPanel ist ganz klar, dass man sich recht einfach eine Benutzeroberfläche "zusammenklicken" ohne sich großartig mit Konfigurationsdateien auseinander setzen zu müssen.
Wir nutzen hier ein Amazon Fire 7 Tablet das als dedizierte Schaltzentrale am Kühlschrank hängt. Natürlich könnt Ihr auch ein anderes Tablet oder euren Rechner dafür nutzen.

HABPanel in openHAB installieren

Sofern wir die Standardoption bei der Installation von openHAB ausgewählt haben, ist HABPanel bereits in unserer openHAB-Instanz installiert. Falls nicht, können wir dies über den Menüpunkt "Addons" im PaperUI-Interface von openHAB nachholen. Dort ist es im Bereich "Interfaces" zu finden.

Anschließend könnt Ihr habpanel im Startfenster Eurer openHAB-Instanz auswählen.

Erster Start von HABPanel

Beim ersten Start von HABPanel strahlt euch eine leere Oberfläche mit einigen Buttons am oberen Bildschirmrand. Hier legen wir auch los und klicken auf das Zahnrad um in den Editier-Modus zu gelangen.

habpanel Setup

Anschließend können wir mit über den Button "Add new dashboard" ein neues Dashboard also eine Übersichtsseite anlegen.
habpanel Einrichtung

Nun müssen wir einen Namen für das Dashboard eingeben. Sobald wir das erledigt haben, wird das Dashboard angelegt und ist in der Dashboardübersicht sichtbar.
Hier können wir unten über den Schieberegler definieren, wie viel Spalten die Dashboard-Übersicht darstellen soll (was uns momentan noch nicht interessieren soll)


Dashboard editieren

Mit einem Klick auf das neu erstellte Dashboard öffnen wir dieses und sehen dann folgendes Fenster:



HABPanel weist uns hier schon zum nächsten Schritt - nämlich Widgets auf dem Dashboard platzieren. Widgets sind in HABPanel die eigentlichen Bedienelemente für den Nutzer. Hier gibt es ein Auswahl an den verschiedensten Bedienelementen.

Beispiel: Regler für Soll-Temperatur erstellen

In diesem Tutorial werden wir beispielhaft einen Regler zum Einstellen unseres Heizungsthermostats anlegen - Dieser soll als Drehknopf dargestellt werden und die aktuelle Soll-Temperatur anzeigen, die wir dann damit auch ändern können. Außerdem soll die aktuelle Temperatur in einem extra Textfeld angezeigt werden.

Zunächst erstellen wir einen neuen Drehknopf für die Temperatureinstellung. Dazu wählen wir aus dem Widget-Menü den Punkt "Knob" aus.

Die drei Punkte in der rechten Ecke öffnen das Menü für dieses Widget - Hier wählen wir "Edit..." aus.

habpanel Widget editieren

Im folgenden Fenster können die Einstellungen des Widgets vorgenommen werden. Hier ist es in erster Linie wichtig ein "openHAB Item" festzulegen. In diesem Fall ist es der SET_TEMPERATURE Kanal eines HomeMatic Thermostats - dieser gibt die SOLL-Temperatur vor.

Weitere wichtige Parameter sind neben dem openHAB-Item, der "Name" sowie die Min / Max Werte - hier sollte ein sinnvoller Bereich gewählt werden( z.B. den Regelbereich den der Thermostat abdeckt).



Sobald Ihr auf "Save" klickt kommt Ihr zurück ins Dashboard.

Erstelltes Widget testen

Mit einem klick auf den "Run" -Button könnt Ihr das eben erstellte Widget auf die Funktion testen. Hier solltet Ihr beachten, dass Ihr die Widgets im Dashboard an das spätere Endgerät anpasst. Das heißt ein Dashboard dass am Computer erstellt wurde, nicht unbedingt auf den Tablet Screen (wir nutzen ein Amazon Fire 7) passt. Die richtige Größe erhaltet ihr durch ausprobieren (Try & Error).

Bei Amazon.de kaufen
Affiliate Links / Bilder von der Amazon Product Advertising API


Sollte die Textgröße nicht in die gewählte Widgetgröße passen, könnt Ihr diesen im Editier-Modus im Reiter "Misc" ändern. Die Schriftgröße des Widgetnamen lässt sich leider nicht anpassen - Hier hilft nur einen kürzeren Widget-Namen zu vergeben.

Im Run-Modus könnt Ihr nun den Regelkreis mit der Maus (oder mit dem Finger am Tablet) justieren, um so die gewünschte Temperatur anzuzeigen.



Mit einem Klick auf den Stift der neben dem Dashboard-Titel erscheint, sobald Ihr mit der Maus darauf geht, kommt Ihr in den Editiermodus zurück.


Beispiel 2: Temperaturanzeige der aktuellen Temperatur

Im zweiten Beispiel erstellen wir eine simple Textanzeige, die uns die aktuelle Temperatur eines Sensors anzeigt. Diese Anzeige werden wir mittels passendem Icon ein wenig aufhübschen.

Zunächst legen wir über den Button "Add Widget" ein neues Widget vom Typ "Dummy" an.

Wie im vorherigen Beispiel wählen wir hier als openHAB Item den gewünschten Sensor aus - hier im Beispiel der Netatmo Außentemperatursensor. Hier sind noch die Parameter Name, Font size und Unit (suffix) interessant.

habpanel dummy einstellen


Unter Backdrop Icon und Icon könnt Ihr aus verschiedenen Sets Icons auswählen die passend zum gewählten Sensor sind. Diese werden dann neben bzw. hinter dem gewählten Messwert angezeigt.
Mit einem Klick auf den "Save" -Button speichert ihr die Anzeige und kehrt zum Dashboard zurück, wo wir das angelegte Widget auch gleich mit einem Klick auf "Run" testen können.



Eventuell muss hier anschließend die Textgröße angepasst werden.

Besonderheit bei Speicherung der Dashboard

Eine Besonderheit von HABPanel ist das die angelegten Panels inkl. Dashboards zunächst nur auf dem Rechner gespeichert werden, auf dem sie angelegt wurden (vermutlich über Cookies). Das heißt dass wenn man das angelegte Dashboard auf einem anderen Rechner (in diesem Fall unser Tablet) benutzen möchte, muss man dieses zunächst auf dem openHAB-Server speichern.

Panel auf dem Server speichern

Zunächst klick man auf das "Hamburger-Menü" oben links um die Seitenleiste zu öffnen. Anschließend öffnet man die Paneleinstellungen über das Zahnrad unten links neben der Datumsanzeige / Uhr.

Hier kann man nun über den Link "Save the current configuration to a new panel configuration" die lokal angelegten Dashboards auf dem Server speichern

habPanel Konfig speichern

Panel vom Server laden

Umgekehrt lassen sich so anschließend die auf dem Server gespeicherten Konfigurationen laden

Fertig sieht das ganze dann so aus

habpanel fertig

habpanel fertig

    Über den Autor

    Gründer und Autor von worldoftech.de

    Seit 25 Jahren im Bereich IT unterwegs, leidenschaftlicher Computerspieler, Technik-Freak und begeistert von allem was einen Motor (Auto/Motorrad/Flugzeug) hat.


    Nutzt Zuhause openHAB2 zusammen mit HomeMatic Komponenten sowie netatmo als Wetterstation. InfluxDB und Grafana zur Auswertung. Weitere Gadgets von Xiaomi, Sonos und Samsung

    Patrick Team

    Kommentare 2

    • Hallo Patrick,


      nach Deiner Anleitung habe ich schon einiges machen können. Danke dafür.
      Nun möchte ich aber nach dem booten des Raspberry gleich HabPanel starten. Das gelingt mir leider nicht. Nach dem Aufrufe der Seite mit "http://192.168.2.103:8080/habpanel/index.html#/view/Mein%20Home" gibt es nur einen schwarzen Bildschirm. Hast Du da eien Idee?
      mfg Daniel

    • […] ist das jedoch noch nicht. Wie dies nun in ein schickes Interface packt, erfahrt Ihr im nächsten Beitrag dieser […]