FHEM Tablet UI und Readingsgroup – Batteriestatus anzeigen

Seit einiger Zeit gibt es eine recht einfache Möglichkeit, eine FHEM Readingsgroup in die Tablet UI Oberfläche einzubinden. Nachdem ich immer mehr batteriebetriebene Smarthome Geräte im Einsatz habe, wurde es langsam Zeit, eine entsprechende Statusanzeige in meine Oberfläche zu integrieren.

Grundsätzlich könnte man den Batteriestatus von jedem Gerät mit einem Symbol-Widget anzeigen und zum Beispiel mittels einem HTML Table Konstrukt in die FTUI Oberfläche einbauen. Ich habe mich aber dieses Mal dazu entschieden, eine Readingsgroup einzubauen. Mit einer Readingsgroup hat man innerhalb FHEM bereits die Möglichkeit, Geräteeigenschaften mittels einer Tabelle schön formatiert darzustellen.

Das Wigdet vom Tablet UI nutzt dabei diese bereits in einem HTML-Table Konstrukt vorhande Formatierung und bindet den entsprechenden Code quasi 1:1 in die FTUI Oberfläche ein. Soweit so gut aber leider nicht ganz so einfach, wie gedacht.

Readingsgroup für Batteriestatus in FHEM definieren

Ein Readingsgroup für die Batterie Statusanzeige ist recht einfach in FHEM erstellt. Der Batteriestatus von Homematic Geräten wird in der Regel mit „low“ und „ok“ angegeben. Manche Geräte bieten auch noch ein „critical“ und mittlerweile gibt es wohl auch Geräte, die einen Spannungswert in Volt angeben. Die letztgenannten Geräte habe ich zunächst nicht berücksichtigt. Seit Kurzem habe ich ja auch die Fibaro Bewegungsmelder. Bei diesen Geräten gibt es eine Prozentangabe.

Für die Definition der Readingsgroup bedeutet dies, dass idealerweise eine Formatierung zu einem einheitlichen Wert erfolgen sollte. Dies wird mit dem Attribut „valueFormat“ erledigt. Damit der Status dann als Icon angezeigt wird, sollte noch mittels „valueIcon“ die entsprechende Zuordnung erfolgen. Der entsprechende Code sieht dann bei mir wie folgt aus (nachdem das define in der Befehlszeile eingeben wurde, können die Attribute am besten über die Geräteeigenschaften eingestellt werden):

define rgBatterieStatus readingsgroup .*:[bB]attery
attr mapping %ALIAS
attr noheadings 1
attr nolink 1
attr notime 1
attr valueFormat { my ($wert) = $VALUE =~ m/(\d+)/; return $VALUE if ($wert eq ""); return "critical" if ($wert < 25); return "low" if ($wert < 50); return "ok" if ($wert > 50);}
attr ValueIcon {'battery.ok' => 'battery@green', 'battery.low' => 'battery@yellow', 'battery.critical' => 'battery@red'}
attr style style="text-align:left"

Mit dem Attribut „noheadings“ wird dafür gesorgt, dass der Titel der Readingsgroup nicht angezeigt wird. In meinem Tablet UI wollte ich die gleichen Widget-Titel nutzen, wie schon bei den vorhandenen Widgets. Nachteil dabei ist, dass dieses Reading dann in der FHEM-Navigation nicht mehr angezeigt wird, weil auch der Link zu dem Device fehlt. Man kommt quasi nur noch mit folgender URL an die Detailansicht (es sei denn jemand kennt eine bessere Möglichkeit):

<eurefhem-url>:8083/fhem?detail=rgBatterieStatus

Das Attribut „nolink“ sorgt dafür, dass die angezeigten Geräte nicht als Link dargestellt werden. Wer also aus seiner Oberfläche heraus per Link direkt auf das Device gelangen möchte, der kann dieses Attribut weg lassen.

Readingsgroup Widget im Tablet UI einbinden

Nun muß eigentlich nur noch die definierte Readingsgroup in die Tablet UI Oberfläche eingebunden werden. Dazu ist folgende Widget-Definition in der gewünschten Spalte und Zeile zu erstellen:

<div data-type="readingsgroup" data-device="rgBatterieStatus" data-max-update="86400"

Mit den bekannten CSS Klassen kann die Darstellung dann noch ein wenig optimiert werden. Wobei man natürlich keinen Zugriff auf die einzelnen Zeilen und Werte innerhalb der Readingsgroup hat. Möchte man hier noch irgendwelche Formatierungen vornehmen, dann muß das in der Device Definition von readingsgroup erfolgen. Mit der Eigenschaft „data-max-update“ wird die Aktualisierungsfrequenz in Sekunden angegeben. Ich habe die Aktualisierung auf 24 Stunden eingestellt.

Wer jetzt genau die oben dargestellten Definition nachgebaut hat, der wird wahrscheinlich das gleiche Problem bekommen, wie ich. Die Readingsgroup wird nämlich gar nicht oder nur teilweise angezeigt. Zunächst habe ich gedacht, dass die Spaltenbreite oder die Höhe evtl. zu gering eingestellt ist. Daran lag es aber nicht wirklich. das Problem sind die definierten Icons in der Readingsgroup. Schaut man sich den HTML-Code der Readingsgroup an, dann sieht man, dass die Icons als svg-Icons mit einer Größe von etwa 400pt (so war es bei mir) eingebunden werden.

Eine Lösung wäre es nun gewesen, das valueIcon-Attribut zu entfernen und nur den Text anzuzeigen. Auf die Icons wollte ich aber eigentlich nicht verzichten. Bevor ich nun nachgeforscht habe was man wohl innerhalb FHEM anpassen müsste, damit die Icons in einer sinnvollen Größe angezeigt werden, habe ich nach einer schnellen Lösung bei den Definitionen gesucht. Innerhalb FTUI werden u.a. die Awesome Font Icons genutzt und so wäre es doch ganz nett, diese Icons zu nutzen. Damit das gelingt, müsste irgendwie der Code „<i fa fa-battery-4></i>“ in die Anzeige mit eingebunden werden.

Schaut man sich nochmals die Attribute von Readingsgroup an, dann ist eigentlich schnell klar, dass man valueFormat ganz gut dafür benutzen kann. Schließlich dient es dazu, die Anzeige der entsprechenden Werte zu modifizieren. Mit ein paar kleineren Modifikationen im ursprünglichen Code sieht die Defnition meines valueFormat nun wie folgt aus:

{ my ($wert) = $VALUE =~ m/(\d+)/; $wert = 100 if ($VALUE eq "ok"); $wert = 49 if ($VALUE eq "low"); $wert = 0 if ($VALUE eq "critical"); return "<i class='fa fa-battery-0 green fa-2x'><span class='myhidden'>critical</i>" if ($wert < 25); return "<i class='fa fa-battery-0 green fa-2x'><span class='myhidden'>low</i>" if ($wert < 50); return "<i class='fa fa-battery-4 green fa-2x'><span class='myhidden'>ok</span></i>";}

Ich habe zusätzlich noch den Text „ok“, „low“ oder „critical“ angezeigt und zwar mit einer CSS Klasse „myhidden“, die es wahrscheinlich innerhalb FHEM nicht gibt. Die Definition der Klasse mit „.myhidden {display:none}“ sorgt dafür, dass der Text im Tablet UI nicht angezeigt wird. Diese Definition gehört in die Datei „fhem-tablet-ui-user.css“ im Verzeichnis „www/tablet/css“.

Damit habe ich nun die gewünschte Anzeige erreicht. Meine modifizierte „Setup Seite“ sieht nun folgendermaßen aus. Links ist der Wecker zu sehen, mit der Möglichkeit die Weckzeiten einzustellen und rechts ist die Batterie Statusanzeige.