Floorplan

Mit Floorplans lassen sich Haussteuerungen visualisieren und somit einfacher steuern.

Plan erstellen

define fp_<NAME> FLOORPLAN
  • Wenn der erstellte Floorplan immer als Standardplan angezeigt werden soll, wenn in Fhem auf „FloorPlan“ geklickt wird 
    attr fp_<NAME> fp_default 1
  • Wenn in der Floorplan Ansicht keine Fhem-Menu angezeigt werden soll 
    attr fp_<NAME> fp_noMenu 1

Beim erstellen des Floorplans erstellt Fhem automatisch Benutzer-Attribute („userattr“). 

attr global userattr fm_fav fm_groups fm_name fm_order room structexclude webCmd fp_Grundriss

Wenn man nun in Fhem den Floorplan aufruft, sieht man nur eine leere Seite mit einem anderen Seitenmenu.
Hintergrundbild als „fp_<NAME>.png“ (Case-Sensitive) in /opt/fhem/www/images/default speichern (Beispiel: fp_Grundriss.png).
Wenn nun der folgende Befehl ausgeführt wird und danach die Webseite neu geladen wird, sollte die Grafik dargestellt werden. 

set WEB rereadicons

Wenn sich der Name der Hintergrundbildgrafik nicht mit dem Namen des Floorplans gleicht, kann man auch folgendes Attribut verwenden: 

attr fp_<NAME> fp_backgroundimg <NAME_HINTERGRUNDBILD>.png

CSS

Die Position des Hintergrundbildes kann mit CSS-Dateien gesteuert werden.
Standard-CSS-Dateien in Fhem sind „floorplanstyle.css“ bzw. „darkfloorplanstyle.css“.
Eine Positionsbestimmung kann man mittels dieser Zeile steuern. 

#backimg {position:absolute; top:15px; left:190px;}

Wenn eine Tabelle zum Setzen der Devices im Floorplan angezeigt werden soll, muss diese Zeile in die CSS Datei eingefügt werden. 

.fp_Grundriss {border:1px solid gray;}

Man sollte sich ggf. eine eigene Stylesheet Datei erstellen. 

sudo -u fhem cp www/pgm2/floorplanstyle.css www/pgm2/mywohnungstylesheet.css

Damit Fhem dann diese nutzt, folgenden Befehl verwenden. 

attr fp_<NAME> stylesheet my<NAME>stylesheet.css

Weitere Beispiele zu CSS in der Fhem-Wiki

Zeitgesteuertes Hintergrundbild

Weiterhin könnte man auch zu bestimmten Zeiten ein anderes Hintergrundbild verwenden, ähnlich bei Navigationssystemen.
Hier ein Beispile aus der Fhem-Wiki: 

define a_fpbackimg at +*01:00 { \
     if ( isday() ) {fhem "attr Grundriss fp_backgroundimg Tag.png"} \
     else {fhem "attr Grundriss fp_backgroundimg Nacht.png"} }

SVG-Grafiken

Wenn man anstatt von PNG-Grafiken SVG-Grafiken verwenden möchte, so kann man diese auch mittels CSS-Dateien einbinden. 

body { background-color:#ffffff;
	  background-image: url(/fhem/icons/lcars/background.svg);
	  background-size: 1920px 1080px;
	  overflow:hidden;
	  background-position: 0px 0px}

Devices anordnen

Damit man die einzelnen Devices in der Floorplan-Ansicht hinzufügen und diese nach belieben anordnen kann, muss die Funktion dafür eingeschaltet und wenn man fertig ist wieder ausgeschaltet werden.

  • einschalten 
    attr fp_wohnung fp_arrange WEB 1
  • ausschalten 
    attr fp_wohnung fp_arrange WEB 0

Den einzelnen Devices kann man mittels des 7 Stile in unterschiedlicher Weise anzeigen lassen.

Stil Beschreibung
0 nur Symbol (devicestate)
1 Name und Symbol/Status (devicename und devicestate)
2 Name, Symbol/Status und Befehle (devicename, devicestate und devicecommands)
3 Geräte-Messwert und optional Name (devicename und reading)
4 S300TH Temperatur & Feuchtigkeit
5 Symbol/Status und Befehle
6 Geräte-Messwert inkl. Zeitstempel und optional Name
7 Nur Kommandos

Eigene Readinglisten

Bei manchen Devices möchte man vielleicht noch mehr Werte anzeigen lassen, als sie standardmäßig zeigen.
Datei /opt/fhem/contrib/95_FLOORPLAN/99_myFloorplanList.pm als eigene Datei kopieren und in der Datei, bei „Change this list as needed“, nach eigenen Vorstellungen anpassen.
Nach dem Erstellen und Anpassen noch diesen Befehl ausführen. 

reload 99_my<NAME>List.pm

Nun die Readings einbinden mit 

define w_WerteListe1 weblink htmlcode {doWertListe1()}

Jetzt kann man diese Liste in dem Floorplan als Device einfügen.

Zusätzlich können noch andere Informationen z.B. aus anderen Quellen im Floorplan angezeigt werden.
Hier einige Beispiele:

  • Wetter 
    define Wetter weblink iframe http://www.wetteronline.de/cgi-bin/hpweather?PLZ=<PLZ>
attr Wetter htmlattr width="220" height="330" frameborder="0" marginheight="0" marginwidth="0"
attr Wetter fp_wohnung 420,25
  • Weblinks als Text 
    define Home weblink link http://<FHEM_HOST_NAME>:8083/fhem
attr Home fp_Grundriss 50,75,0,HomeIcon

    In der jew. Stylesheet-Datei dann noch die Variable „HomeIcon“ definieren 

    #Home                    {font-size:14px; width:100px; }
  • Weblinks als Bild 
    define ImageAnchor weblink htmlCode { '<a href="http://<ip>:<port>/fhem/floorplan/Grundriss2"><img src="/icons/pic.png"></a>' }