Grundriss mit FHEM-Buttons: Unterschied zwischen den Versionen

Aktuelle Version vom 25. Januar 2017, 10:04 Uhr

Ziel ist, auf einem Hintergrundbild (z.B. einem Grundriss) FHEM-'buttons' zu platzieren, mit denen FHEM-Devices geschaltet werden können. Im Weiteren wird durchwegs der Begriff 'Grundriss' verwendet, es kann aber jedes beliebige Bild/Szenario verwendet werden, z.B. ein Foto der eigenen Stereoanlage mit entsprechenden Schaltern darauf.

Lösungsalternativen

Um das o.g. Ziel zu erreichen, gibt es mehrere Lösungsvarianten. Dies sind aktuell (also mit Diskussionsforen und Support)

Das in FHEM integrierte Modul FLOORPLAN
Das in FHEM integrierte System YAF

sowie als ältere Ansätze:

Die in diesem Wiki-Eintrag beschriebene HTML-Lösung
Eine php-basierte Lösung unter folgenden Links: Download
SVG-basierte Lösung Homepage

Lösungsansatz über HTML

HINWEIS

Die erzeugte html-Datei ist lokal. Sie kann also von einem PC oder Mac aus angezeigt werden, für die Anzeige auf dem iPad o.ä. ist ein Webserver erforderlich.

Dieser Lösungsansatz stammt von Boris Neubert:

Zum Steuern werden die URLs von den im FHEM-webfrontend angezeigten 'on/off'-Links genutzt
Es gibt eine GrundrissStart.html, die zwei Frames erzeugt:

einen sichtbaren Bereich für die Darstellung von 'Grundriss.html',
einen unsichtbaren Bereich für die Rückmeldungen von der FHEM-Webpage

Vorgehensweise

Erstellen der Startdatei

Erzeugen Sie eine Datei 'GrundrissStart.html' mit folgendem Inhalt:

<HTML>
<HEAD>
 <TITLE>Meine kleine Schaltzentrale</TITLE>
</HEAD>
<FRAMESET ROWS="*,0" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>
  <FRAME SRC="Grundriss.html" NAME="control" NORESIZE>
  <FRAME           NAME="log">
</FRAMESET>
</HTML>

Erstellen des Hintergrundbilds

Es kann jedes beliebige Internetformat verwendet werden, also z.B. .jpg , .png Der Grundriss kann z.B. in Powerpoint erstellt und als Hintergrundbild.png gespeichert werden.

Hinzufügen der FHEM-Buttons

Dem Bild übergelagert platzieren Sie nun die Schaltflächen. Diese rufen einen Link folgenden Formats:

<A HREF="[http:// http://]<ip>:8083/fhem?cmd=set%20Lampe1%20on" target="log">Lampe1 an</A>
<A HREF="[http:// http://]<ip>:8083/fhem?cmd=set%20Lampe1%20off" target="log">Lampe1 aus</A>

Der in href angegebene link lässt sich der Einfachheit halber per Copy/Paste aus dem FHEM-Webfrontend kopieren.

Wichtig ist der Zusatz target="log". Wenn dies fehlt, funktionieren zwar die Links, jedoch verlässt man nach dem Klick auf einen Button die Grundriss-Seite und landet auf dem FHEM-Webfrontend. Durch den Zusatz wird diese FHEM-Rückantwort in den unsichtbaren frame namens "log" umgeleitet - auf dem Bildschirm bleibt also Grundriss.html .

Hier eine Grundriss.html mit zwei Darstellungsvarianten: Lampe1 erscheint mit on/off-Schaltern, Lampe2 erscheint nur als Symbol, das selbst als toggle-button dient.

<html>
 <head>
  <meta http-equiv="refresh" content="5; URL=Grundriss.html">
  <title>Grundriss mit FHEM-Schaltern</title>
 </head>
 <body>
  <img src= "Hintergrundbild.png">
 
  <div style="position:absolute; top:190px; left:340px">
  <a href="http://<ip>:8083/fhem?cmd.Lampe1=set%20Lampe1%20on" target="log">ON</a>
  <img src=http://<ip>:8083/fhem/icons/Lampe1>
  <a href="http://<ip>:8083/fhem?cmd.Lampe1=set%20Lampe1%20off" target="log">OFF</a>
  </div>
 
  <div style="position:absolute; top:300px; left:340px">
  <a href="http://<ip>:8083/fhem?cmd.Lampe2=set%20Lampe2%20toggle" target="log">
   <img src=http://<ip>:8083/fhem/icons/Lampe2>
  </a>
  </div>
 </body>
 </html>

refresh: Der screen wird alle 5 Sekunden aktualisiert. HINWEIS

Alternativ können Sie zu der in FHEM verwendeten Web-Instanz (z.B. WEB) attr WEB longpoll 1 setzen. Damit werden die Icons auf dem Bildschirm automatisch neu geladen, sobald sich ihr Zustand ändert. Der html-Refresh wird damit hinfällig.

Mit <div>divisions</div> wird die Positionierung der Schaltelemente auf dem Bildschirm erreicht.

Die <a>Anchors</a> tragen als Link die kopierte URL der on/off-buttons aus dem FHEM-Webfrontend.

Die <img>Images</img> -URL liefert das Symbol zum genannten Gerät in dessen aktzuellem Schaltzustand zurück.

Wenn Sie die o.g. Zeilen mehrfach kopieren und Lampe1 bzw Lampe2 durch Ihre Gerätenamen erstzen, können Sie Ihre Konfiguration recht einfach einrichten.

Aufruf

Öffnen Sie GrundrissStart.html

Special: Anzeigen von FHT-Werten

Will man z.B. die gemessene Temperatur eines FHT auf dem Grundriss anzeigen, muss man ein wenig tricksen. Der Lösungsansatz besteht aus zwei Schritten: 1. Dem Schreiben der gemessenen Temperatur in ein .txt-File, 2. dem Anzeigen des Inhalts dieser Datei im Grundriss.

1. Das Schreiben der Temperatur in eine Datei namens FHT-temperature.txt wird durch ein notify erreicht:

##fhem.cfg##
define ez_FHT_notify notify ez_FHT { \
my $FHT = "%";; \
#die Actuator-Auswertung tut hier nicht zur Sache \
 if ($FHT =~ "actuator:") { \
  $FHT = (substr($FHT, 9, (length($FHT)-10)));; \
  fhem("set hzg_Actuator $FHT") \
 } \
#jetzt kommt's: \
 if ($FHT =~ "measured-temp") { \
  $FHT = substr($FHT, 15, 4);; \
  system("(echo $FHT > FHT-temperature.txt)") \
 } \
}

Durch den system()-Befehl wird der Inhalt der Variablen $FHT, also die gemessene Temperatur, in die Datei FHT-temperature.txt geschrieben.

2. Anzeigen des Datei-Inhalts auf dem Grundriss - dies sind Zusatzeinträge in der Grundriss.html :

<div style= "position:absolute; top:366px; left:130px">
  <object data = "..\fhem\FHT-temperature.txt"></object>
 </div>
 <div style="position:absolute; top:370px; left:170px; color:grey">
  °C
 </div>

Achten Sie darauf, die Pfadangaben korrekt zu setzen.

Anzeigen von S300TH-Werten

So wie für FHTs funktioniert's auch für S300TH-Geräte:

define ez_Aussensensor_schreiben notify S300TH:temperature:.* \
{ system(" echo %EVTPART1 > S300TH-temperature.txt") }

Erklärung: Wann immer vom Gerät S300TH eine Meldung kommt, die mit "temperature" beginnt, schreibe den Meldungsteil zwischen der ersten und zweiten Leerstelle (%EVTPART1) in die Datei S300TH-temperature.txt . Für die Darstellung auf der html-Seite muss man nun analog FHT das <object data...> tag einbauen. Fertig :-)

@@ Zeile 1: / Zeile 1: @@
-Ziel ist, auf einem Hintergrundbild (z.B. einem Grundriss) fhem-'buttons' zu platzieren, mit denen fhem-devices geschaltet werden können. Im Weiteren wird durchweg der Begriff 'Grundriss' verwendet, es kann aber jedes beliebige Bild/Szenario verwendet werden, z.B. ein Foto der eigenen Stereoanlage mit entsprechenden Schaltern darauf.
+Ziel ist, auf einem Hintergrundbild (z.B. einem Grundriss) FHEM-'buttons' zu platzieren, mit denen FHEM-Devices geschaltet werden können. Im Weiteren wird durchwegs der Begriff 'Grundriss' verwendet, es kann aber jedes beliebige Bild/Szenario verwendet werden, z.B. ein Foto der eigenen Stereoanlage mit entsprechenden Schaltern darauf.
 == Lösungsalternativen ==
-Um das o.g. Ziel zu erreichen, gibt es drei Lösungsvarianten:
+Um das o.g. Ziel zu erreichen, gibt es mehrere Lösungsvarianten. Dies sind aktuell (also mit Diskussionsforen und Support)
+# Das in FHEM integrierte Modul [[FLOORPLAN]]
+# Das in FHEM integrierte System [[YAF]]
+sowie als ältere Ansätze:
-# Seit 03/2012 das in fhem integrierte FLOORPLAN. Das Programms sowie die zugehörigen css-Dateien sind seit 04/2012 Bestandteil von updatefhem, befinden sich also auf allen aktualisierten fhem-Installationen. Die (sehr guten) <nowiki>[http://fhem.de/commandref.html#FLOORPLAN commandref-Eintrag]</nowiki> verlinkt.
 # Die in diesem Wiki-Eintrag beschriebene HTML-Lösung
-# Eine php-basierte Lösung unter folgenden Links: <nowiki>[http://heimserver.nendzig.net/projekte/HomeMini/homemini.tar Download]</nowiki>
+# Eine php-basierte Lösung unter folgenden Links: [http://heimserver.nendzig.net/projekte/HomeMini/homemini.tar Download]
-# SVG-basierte Lösung <nowiki>[http://fhzctrl.sourceforge.net Homepage]</nowiki>
+# SVG-basierte Lösung [http://fhzctrl.sourceforge.net Homepage]
 == Lösungsansatz über HTML ==
 HINWEIS
 * Die erzeugte html-Datei ist lokal. Sie kann also von einem PC oder Mac aus angezeigt werden, für die Anzeige auf dem iPad o.ä. ist ein Webserver erforderlich.
 Dieser Lösungsansatz stammt von Boris Neubert:
-* Zum Steuern werden die URLs von den im fhem-webfrontend angezeigten 'on/off'-Links genutzt
+* Zum Steuern werden die URLs von den im FHEM-webfrontend angezeigten 'on/off'-Links genutzt
 * Es gibt eine GrundrissStart.html, die zwei Frames erzeugt:
 # einen sichtbaren Bereich für die Darstellung von 'Grundriss.html',
-# einen unsichtbaren Bereich für die Rückmeldungen von der fhem-webpage
+# einen unsichtbaren Bereich für die Rückmeldungen von der FHEM-Webpage
@@ Zeile 38: / Zeile 42: @@
 Der Grundriss kann z.B. in Powerpoint erstellt und als Hintergrundbild.png gespeichert werden.
-=== Hinzufügen der fhem-Schalt-Links ===
+=== Hinzufügen der FHEM-Buttons ===
 Dem Bild übergelagert platzieren Sie nun die Schaltflächen. Diese rufen einen Link folgenden Formats:
   <nowiki>&lt;A HREF="[http:// http://]&lt;ip&gt;:8083/fhem?cmd=set%20Lampe1%20on" target="log"&gt;Lampe1 an&lt;/A&gt;
 &lt;A HREF="[http:// http://]&lt;ip&gt;:8083/fhem?cmd=set%20Lampe1%20off" target="log"&gt;Lampe1 aus&lt;/A&gt;</nowiki>
-Der in href angegebene link lässt sich der Einfachheit halber per Copy/Paste aus dem fhem-webfrontend kopieren.
+Der in href angegebene link lässt sich der Einfachheit halber per Copy/Paste aus dem FHEM-Webfrontend kopieren.
-Wichtig ist der Zusatz ''target="log"''. Wenn dies fehlt, funktionieren zwar die Links, jedoch verlässt man nach dem Klick auf einen button die Grundriss-Seite und landet auf dem fhem-Webfrontend. Durch den Zusatz wird diese fhem-Rückantwort in den unsichtbaren frame namens "log" umgeleitet - auf dem Bildschirm bleibt also Grundriss.html .
+Wichtig ist der Zusatz ''target="log"''. Wenn dies fehlt, funktionieren zwar die Links, jedoch verlässt man nach dem Klick auf einen Button die Grundriss-Seite und landet auf dem FHEM-Webfrontend. Durch den Zusatz wird diese FHEM-Rückantwort in den unsichtbaren frame namens "log" umgeleitet - auf dem Bildschirm bleibt also Grundriss.html .
 Hier eine Grundriss.html mit zwei Darstellungsvarianten: Lampe1 erscheint mit on/off-Schaltern, Lampe2 erscheint nur als Symbol, das selbst als toggle-button dient.
@@ Zeile 52: / Zeile 56: @@
   &lt;head&gt;
    &lt;meta http-equiv=&quot;refresh&quot; content=&quot;5; URL=Grundriss.html&quot;&gt;
-   &lt;title&gt;Grundriss mit fhem-Schaltern&lt;/title&gt;
+   &lt;title&gt;Grundriss mit FHEM-Schaltern&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
@@ Zeile 73: / Zeile 77: @@
 HINWEIS
-* Alternativ können Sie zu der in fhem verwendeten Web-Instanz (z.B. WEB) '''attr WEB longpoll 1''' setzen. Damit werden die icons auf dem Bildschirm automatisch refreshed, sobald sich ihr Zustand ändert. Der html-Refresh wird damit hinfällig.
+* Alternativ können Sie zu der in FHEM verwendeten Web-Instanz (z.B. WEB) '''attr WEB longpoll 1''' setzen. Damit werden die Icons auf dem Bildschirm automatisch neu geladen, sobald sich ihr Zustand ändert. Der html-Refresh wird damit hinfällig.
 Mit &lt;div&gt;divisions&lt;/div&gt; wird die Positionierung der Schaltelemente auf dem Bildschirm erreicht.
-Die &lt;a&gt;Anchors&lt;/a&gt; tragen als Link die kopierte URL der on/off-buttons aus dem fhem webfrontend.
+Die &lt;a&gt;Anchors&lt;/a&gt; tragen als Link die kopierte URL der on/off-buttons aus dem FHEM-Webfrontend.
 Die &lt;img&gt;Images&lt;/img&gt; -URL liefert das Symbol zum genannten Gerät in dessen aktzuellem Schaltzustand zurück.
@@ Zeile 130: / Zeile 134: @@
 Erklärung: Wann immer vom Gerät S300TH eine Meldung kommt, die mit "temperature" beginnt, schreibe den Meldungsteil zwischen der ersten und zweiten Leerstelle (%EVTPART1) in die Datei S300TH-temperature.txt .
 Für die Darstellung auf der html-Seite muss man nun analog FHT das &lt;object data...&gt; tag einbauen. Fertig&#160;:-)
+[[Kategorie:HOWTOS]]