====== Floorplan ======
Mit Floorplans lassen sich Haussteuerungen visualisieren und somit einfacher steuern.

===== Plan erstellen =====
<code>define fp_<NAME> FLOORPLAN</code>

  * Wenn der erstellte Floorplan immer als Standardplan angezeigt werden soll, wenn in Fhem auf "FloorPlan" geklickt wird \\ <code>attr fp_<NAME> fp_default 1</code>
  * Wenn in der Floorplan Ansicht keine Fhem-Menu angezeigt werden soll \\ <code>attr fp_<NAME> fp_noMenu 1</code>

Beim erstellen des Floorplans erstellt Fhem automatisch Benutzer-Attribute ("userattr").
<code>attr global userattr fm_fav fm_groups fm_name fm_order room structexclude webCmd fp_Grundriss</code>

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.
<code>set WEB rereadicons</code>

Wenn sich der Name der Hintergrundbildgrafik nicht mit dem Namen des Floorplans gleicht, kann man auch folgendes Attribut verwenden:
<code>attr fp_<NAME> fp_backgroundimg <NAME_HINTERGRUNDBILD>.png</code>

==== 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.
<code>#backimg {position:absolute; top:15px; left:190px;}</code>

Wenn eine Tabelle zum Setzen der Devices im Floorplan angezeigt werden soll, muss diese Zeile in die CSS Datei eingefügt werden.
<code>.fp_Grundriss {border:1px solid gray;}</code>

Man sollte sich ggf. eine eigene Stylesheet Datei erstellen.
<code bash>sudo -u fhem cp www/pgm2/floorplanstyle.css www/pgm2/mywohnungstylesheet.css</code>
Damit Fhem dann diese nutzt, folgenden Befehl verwenden.
<code>attr fp_<NAME> stylesheet my<NAME>stylesheet.css</code>
Weitere Beispiele zu CSS in der [[http://www.fhemwiki.de/wiki/Floorplan_Installations-Leitfaden#Spezielle_Formate_f.C3.BCr_Ihren_floorplan_-_floorplanstyle.css|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:
<code>define a_fpbackimg at +*01:00 { \
     if ( isday() ) {fhem "attr Grundriss fp_backgroundimg Tag.png"} \
     else {fhem "attr Grundriss fp_backgroundimg Nacht.png"} }</code>

==== SVG-Grafiken ====
Wenn man anstatt von PNG-Grafiken SVG-Grafiken verwenden möchte, so kann man diese auch mittels CSS-Dateien einbinden.
<code>body { background-color:#ffffff;
	  background-image: url(/fhem/icons/lcars/background.svg);
	  background-size: 1920px 1080px;
	  overflow:hidden;
	  background-position: 0px 0px}</code>

==== 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** <code>attr fp_wohnung fp_arrange WEB 1</code>
  * **ausschalten** <code>attr fp_wohnung fp_arrange WEB 0</code>

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.
<code>reload 99_my<NAME>List.pm</code>

Nun die Readings einbinden mit
<code>define w_WerteListe1 weblink htmlcode {doWertListe1()}</code>
Jetzt kann man diese Liste in dem Floorplan als Device einfügen.

==== Weblinks ====
Zusätzlich können noch andere Informationen z.B. aus anderen Quellen im Floorplan angezeigt werden.
Hier einige Beispiele:
  * **Wetter** <code>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</code>
  * **Weblinks als Text** <code>define Home weblink link http://<FHEM_HOST_NAME>:8083/fhem
attr Home fp_Grundriss 50,75,0,HomeIcon</code> In der jew. Stylesheet-Datei dann noch die Variable "HomeIcon" definieren <code>#Home                    {font-size:14px; width:100px; }</code>
  * **Weblinks als Bild** <code>define ImageAnchor weblink htmlCode { '<a href="http://<ip>:<port>/fhem/floorplan/Grundriss2"><img src="/icons/pic.png"></a>' }</code>