BB - HABPanel

openHAB #5: Steuerzentrale auf Tablet mit habpanel

openHAB HABPanel

Es ist zwar möglich die Steuerung der Smart-Home Komponenten über das PaperUI von openHAB zu machen – eine elegantere und benutzerfreundlichere Variante ist jedoch über die integrierte HABPanel UI. Wie man diese konfiguriert zeigen wir Euch in diesem Guide.

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 Oberfläche

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


HABPanel neues Panel anlegen

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:

Neues Dashboard

 

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.

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).

Einstellungen Knob

 

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).

Angebot
Fire 7-Tablet mit Alexa, 17,7 cm (7 Zoll) Display, 8 GB (Schwarz), mit Spezialangeboten
509 Bewertungen
Fire 7-Tablet mit Alexa, 17,7 cm (7 Zoll) Display, 8 GB (Schwarz), mit Spezialangeboten*
  • Die neue Generation unseres Bestsellers - jetzt dünner, leichter, mit längerer Akku-Laufzeit und verbessertem Display.
  • Brilliantes 7-Zoll-IPS-Display mit höherem Kontrast und schärferem Text, 1,3 GHz Quad-Core-Prozessor und bis zu 8 Stunden Akku-Laufzeit. 8 oder 16 GB interner Speicher und microSD-Kartenslot für bis zu 256 GB erweiterbaren Speicherplatz.
  • Mit Alexa erhalten Sie schnellen Zugriff auf Informationen und Entertainment. Stellen Sie Fragen, spielen Sie Musik, rufen Sie die Nachrichten oder das Wetter ab, steuern Sie Ihr Smart Home und mehr - drücken Sie einfach die Startseite-Taste und fragen Sie (aktiviert über ein Softwareupdate).
  • Genießen Sie Millionen Filme, Serienepisoden, Songs, Kindle eBooks, Apps und Spiele - einschließlich Amazon Video, Netflix, Facebook, Spotify, TuneIn, Instagram und mehr.
  • Prime-Mitglieder erhalten unbegrenzten Zugang zu über zwei Millionen Songs, Tausenden Filmen, Serienepisoden und sicherem Fotospeicher - ohne zusätzliche Kosten.

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.

HABPanel Test

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.

Einstellungen Dummy

 

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.

Dummy Widget

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

 

Besonderheit bei Speicherung der Dashboards

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

 

Panel vom Server laden

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

Panelkonfiguration speichern

 

Fertig sieht das ganze dann so aus

HABPanel auf Tablet

Patrick

Gründer und Autor von frombeyond.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.

*Diese Links führen zu Amazon- oder anderen Online-Angeboten, keine Verfügbarkeitsgarantie, keine Garantie auf günstigsten Preis, Preise können variieren, Preise inkl. MwSt. / evtl. zzgl. Versandkosten, alle Angaben ohne Gewähr. Letzte Aktualisierung am 16.12.2017