zurück zur Startseite

zurück zur Übersicht der Heimautomatisierung

16. Die Anzeige eines Zimmers (Stand 05.09.2018)

Am Beispiel Badezimmers aus Kapitel 14 möchte ich zeigen, wie die Anzeige und Bedienung programmiert wird.

define zw_privatbad FLOORPLAN
   attr zw_privatbad fp_arrange 0
   attr zw_privatbad fp_backgroundimg 20_basis.png
   attr zw_privatbad fp_noMenu 1
   attr zw_privatbad room Plan20
   attr zw_privatbad stylesheet 20floorplanstyle.css

Das Hintergrundbild ist eigentlich nur eine leere Fläche, hat aber die Platzhalter für die 2x4 seitlichen Tasten.

Sobald ich einen Floorplan definiere ergänzt FHEM automatisch die Liste der möglichen Attribute mit dem Namen des Floorplans und dem Prefix "fp_", hier also "fp_zw_privatbad". Alle Elemente, die auf diesem Bild angezeigt werden sollen, müssen nun dieses Attribut mit einer entsprechenden Position bekommen. Links oben steht bei mir immer "Die Reimanns". Dazu definiere ich eine entsprechende Variable und beschreibe diese mit dem gewünschten Text. FHEM merkt sich immer den Wert von Variablen, selbst beim Ausschalten wird der Wert entspechend gesichert und steht nach dem Einschalten wieder unverändert in der Variable.

define zw_titel dummy
   attr zw_titel fp_zw_anfang 40,15,0
   attr zw_titel fp_zw_privatbad 40,15,0
   attr zw_titel fp_zw_wohnkueche 40,15,0
   attr zw_titel room Plan20

Neben den hier bereits dokumentierten Räumen können natürlich noch weitere Raum-Attribute gesetzt werden. Der Leser hat sicherlich auch gemerkt, dass ich das Attribut "room" mit dem Wert Plan20 (spricht sich "Plan Zwei Punkt Null") versehe, so dass ich alle Definitionen der Bedienoberfläche in einem FHEM-Raum wiederfinde.

Entsprechend definiere ich noch 2 Variable "zw_tag" und "zw_datum", die ich natürlich nun dynamisch beschreiben muss (wieder direkt aus fhem.cfg kopiert!):

define zw_tagsetzen DOIF ([00:00|0])(set zw_tag Sonntag)\
DOELSEIF ([00:00|1])(set zw_tag Montag)\
DOELSEIF ([00:00|2])(set zw_tag Dienstag)\
DOELSEIF ([00:00|3])(set zw_tag Mittwoch)\
DOELSEIF ([00:00|4])(set zw_tag Donnerstag)\
DOELSEIF ([00:00|5])(set zw_tag Freitag)\
DOELSEIF ([00:00|6])(set zw_tag Samstag)
attr zw_tagsetzen do always
attr zw_tagsetzen room Plan20

define zw_datumsetzen DOIF ([00:00])\
({my $mday0 = sprintf("%02d",$mday);;;;\
  my $month0 = sprintf("%02d",$month);;;;\
  my $heuteist = $mday0 . '-' . $month0 . '-' . $year;;;;\
  fhem ("set zw_datum $heuteist")})
attr zw_datumsetzen do always
attr zw_datumsetzen room Plan20

Aber in welcher Schriftart und Schriftgröße wird der Text dargestellt? Hier kommen wir leider nicht um ein wenig css-Wissen herum - es sei denn, wir sind mit den eigentlich recht guten Standardwerten einverstanden. Ich habe die Standard-css-Datei kopiert und in "20floorplanstyle.css" umbenannt. Über das Attribut "stylesheet" wird die gewünschte css-Datei festgelegt - siehe oben in der ersten Definition. Auch ohne css-Kenntnisse kann man da schon ein paar Dinge mit gesundem Menschenverstand anpassen. Ganz am Anfang der Datei steht das Folgende, was von mir schon angepasst wurde:

Das sind die Standardwerte der Anzeige, für die Texte in zw_titel, zw_tag und zw_datum möchte ich aber eine andere Schriftgröße, somit definiere ich in der css-Datei:

Und die Farbe und größe der Anzeige der Temperatur und Luftfeuchtigkeit ergibt sich durch:

Die Anzeige des Fensters und der Lüftung erfolgt durch entsprechende Grafiken, die z.B. als png-Dateien im Verzeichnis
/opt/fhem/www/images/default
abgelegt werden. Ich arbeite derzeit nur mit diesem Dateityp, der wie bereits gezeigt über das Attribut devStateIcon dem device für seine möglichen Werte im Status zugewiesen wird. Eine Besonderheit ist dabei, dass sich Icon überdecken können und man über die css-Datei auf die Reihenfolge im Stapel Einfluss nehmen kann. Damit der kleine Ventilator nicht hinter dem großen versteckt wird, habe ich folgendes ergänzen müssen:

Das Umschalten zwischen den einzelnen Zimmern meines Hauses erfolgt über die Tasten links und rechts, die jeweils als "weblink" definiert sind. Um zurück in das Grundbild zu kommen, wird folgendes definiert:

define 20_g_anfang weblink htmlCode { '<a href="zw_anfang"><img src="/fhem/www/images/default/20_k_anfang.png"></a>' }
   attr 20_g_anfang fp_zw_privatbad 100,0,0
   attr 20_g_anfang room Plan20

Hinter dem "href" steht der Link zum entsprechenden Floorplan des Raums (siehe Definition vorangegangenen Kapitel) und angezeigt werden soll das Bildchen mit der Uhr.

Jetzt fehlt nur noch die Erklärung, warum das Badezimmer-Icon hell ist. Damit wird angezeigt, dass dies die Anzeige dieses Zimmers ist und erreicht wird dies wiederum mit einer einfachen Variable, der das entsprechende Icon zugeordnet ist und die im Floorplan des Zimmers angezeigt wird. Die Definition sieht also so aus:

define zw_aktivprivatbad dummy
   attr zw_aktivprivatbad devStateIcon aktiv:20_k_privatbad1
   attr zw_aktivprivatbad fp_zw_privatbad 300,0,0
   attr zw_aktivprivatbad room Plan20

weiter zu: 17. Die Rollladensteuerung