(Durchschnitt: 5,00 von
5 –
9
Stimme(n)) - Fehler: Nicht angemeldet!
Loading...FHEM mit schicker Tablet-Anzeige: So kann man sein Smart Home sehr einfach bedienen! Für eine schicke Oberfläche des Smart-Home Servers FHEM bietet sich das Modul Floorplan an: Eigentlich ist es dazu gedacht, einen Grundriss von Haus oder Wohnung darzustellen. Darauf lassen sich dann verschiedene schaltbare Elemente wie Lampen, Fernseher oder die Heizung platzieren. Die Floorplan Ansicht ist dabei im FHEM Menü links als eigener Punkt verfügbar. Speichert man diesen Link ab, kann man direkt mit dem Floorplan starten.
» Tipp: FHEM auf einem Raspberry Pi in 30 Minuten einrichten!
Man kann Floorplan aber auch nutzen, um statt einem Grundriss ein anderes Bild anzuzeigen: Dann platziert man die schaltbaren Elemente auf jedem beliebigen eigenen Hintergrundbild. So lassen sich zahlreiche schicke Oberflächen gestalten, über die man schnell die Geräte im Smart-Home schalten kann:
Sämtliche halbtransparenten Kästen und Texte auf dem Bild oben gehören hierbei zum Hintergrundbild: So kann man einfach in einem Bild-Programm seiner Wahl den anzuzeigenden Hintergrund entwerfen. Dabei werden zunächst alle Texte, Kästen und Elemente im Bild platziert. Dies wird dann als Hintergrundbild gespeichert und beim Definieren des Floorplans angegeben:
define Home FLOORPLAN attr Home fp_backgroundimg floorplan-1.jpg attr Home fp_default 1 attr Home fp_noMenu 1 attr Home fp_viewport width=1024 attr Home stylesheet home.css
Wie man Daten (z.B. ein neuer Define, Attribute oder Änderungen) in FHEM eingibt und was man beachten muss, zeigen wir in diesem Artikel!
Anschließend definiert man die einzelnen, anklickbaren Symbole zum Ein- und Ausschalten der Lampen: Dazu sucht man sich die passende Stelle auf dem Hintergrundbild aus: Das geht am besten direkt in dem Zeichenprogramm, in dem man das Bild erstellt hat. Hier notiert man sich die x und y Koordinaten. Diese werden dann als Attribut den bereits definierten Lampen hinzugefügt.
In dem Beispiel oben ist die Stehlampe im Wohnzimmer eine von FHEM geschaltete Fritz!Dect 200 Steckdose. Deren Definition sah bislang so aus:
define FBDECT_16 FBDECT Fritzbox:16 switch attr FBDECT_16 IODev Fritzbox attr FBDECT_16 alias Stehlampe attr FBDECT_16 event-min-interval power:120 attr FBDECT_16 eventMap on:An off:Aus attr FBDECT_16 icon icoBELEUCHTUNG attr FBDECT_16 room Wohnzimmer
Dies wird jetzt um die Koordinaten ergänzt, an deren Position das klickbare Icon dann im Floorplan auftauchen soll:
attr FBDECT_16 fp_Home 205,373,0,
Wichtig ist hier, dass "fp_Home" den Namen des Floorplans enthält, davor dann "fp_". Unser definierter Floorplan heißt "Home", daher muss bei den zu schaltenden Geräten dieser Name angegeben werden: "fp_Home".
Mit einem iframe lassen sich noch viel mehr dynamische Elemente auf dem Floorplan einfügen. iFrame steht dabei für "Inline Frame": Eine in einem Rahmen angezeigte, komplette Webseite. Damit kann man spezielle, kleine Webseiten über FHEM direkt auf dem Floorplan einbauen. Diese übernehmen dann spezielle Aufgaben: Bei uns im Beispiel oben zeigt je eine eigene HTML-Seite das Datum und rechts daneben die Uhrzeit an: Beide ändern sich per Javascript automatisch.
Beides ist eine eigene Webseite, die per iframe auf dem Floorplan platziert wird. Die Webseite selbst sorgt dann (per Javascript) für die richtige Ausgabe. Aber auch unten die Icons für die Rolladen-Steuerung werden von einer per iframe eingeladenen Webseite angezeigt.
Der iframe wird, wie jedes andere Element in FHEM auch, zunächst ganz einfach definiert. Da wir keinen Raum zuweisen, wird der iframe auch nur unter "Everything" im FHEM Menü angezeigt. Zusätzlich auf dem Floorplan, wenn man die Koordinaten mit angibt:
define Uhr weblink iframe /fhem/www/pgm2/uhr.html attr Uhr fp_Home 36,686 attr Uhr htmlattr width="370" height="120" frameborder="0"
Tipp:
» Den Code für das Uhrzeit-Skript haben wir hier!
» Den Code für das Datum-Skript haben wir hier!
Die erste Zeile definiert zunächst den iframe und die Webseite (oder HTML Datei), die dort angezeigt werden soll: In diesem Ordner, innerhalb des FHEM Ordners, muss die Datei dann liegen. In der zweiten Zeile wird dann die Position auf dem Floorplan "Home" mit der Angabe "fp_Home" angegeben. Die letzte Zeile gibt die Breite und Höhe des iframe vor. Außerdem sorgt sie dafür, dass kein unschöner Rahmen drumherum angezeigt wird.
Ein weiterer iframe sorgt ganz links oben dafür, dass man auch auf das in das Hintergrundbild eingebaute FHEM Logo klicken kann. Das Bild selbst ist dabei bereits in das Hintergrundbild eingebaut. Obenauf liegt ein unsichtbarer iframe, der den Klick registriert. Bei einem Klick soll dann zur normalen FHEM Seite gewechselt werden, falls weitergehende Einstellungen vorgenommen werden müssen. Der Code in der fhem.cfg für den unsichtbaren iframe sieht in unserem Beispiel dann so aus:
define HomeLink weblink iframe /fhem/www/pgm2/fhem-home.html attr HomeLink fp_Home 23,23 attr HomeLink htmlattr width="105" height="105" frameborder="0" marginheight="0" marginwidth="0"
Das definiert einen 105x105 großen iframe, der oben links, 23 Pixel von dem linken und dem oberen Rand beginnt: Das ist genau dort, wo sich das Logo im Hintergrundbild befindet. Als Datei wird diese HTML Datei in dem iframe angezeigt: "/fhem/www/pgm2/fhem-home.html".
Eine Kombination aus FHEM Anzeige und eigenen HTML-Seiten für Uhrzeit, Datum und Kalender könnte so aussehen:
Tipp:
» Den Code für das Uhrzeit-Skript haben wir hier!
» Den Code für das Datum-Skript haben wir hier!
In dem Beispiel ist das Display in drei Bereiche aufgeteilt, die aus jeweils einzelnen Webseiten bestehen: Auf der rechten Seite zeigt ein <iframe> das aktuelle Datum und den Monatsplan. In der Mitte folgt eine Auflistung verschiedener FHEM Devices: Zum Beispiel für die Temperatur, zum Steuern von Lichtern oder zum Anzeigen, ob Türen und Fenster geschlossen sind.
Auf der rechten Seite ist ein dritter <iframe>, der die aktuelle Wettervorhersage anzeigt: Die Daten dafür kommen von dem Yahoo-Weather Modul aus FHEM und werden stündlich an ein PHP Skript übergeben, dass die Anzeige generiert.
