Grundriss mit FHEM-Buttons: Unterschied zwischen den Versionen
Krikan (Diskussion | Beiträge) K (Krikan verschob die Seite Grundriss mit fhem-buttons nach Grundriss mit FHEM-Buttons: FHEM(TM)) |
Drhirn (Diskussion | Beiträge) K (Schreibweise von "FHEM" geändert und diverse Rechtschreibfehler korrigiert.) |
||
Zeile 1: | Zeile 1: | ||
Ziel ist, auf einem Hintergrundbild (z.B. einem Grundriss) | 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 == | == Lösungsalternativen == | ||
Um das o.g. Ziel zu erreichen, gibt es mehrere Lösungsvarianten. Dies sind aktuell (also mit Diskussionsforen und Support) | Um das o.g. Ziel zu erreichen, gibt es mehrere Lösungsvarianten. Dies sind aktuell (also mit Diskussionsforen und Support) | ||
# Das in | # Das in FHEM integrierte Modul [[FLOORPLAN]] | ||
# Das in | # Das in FHEM integrierte System [[YAF]] | ||
sowie als ältere Ansätze: | sowie als ältere Ansätze: | ||
Zeile 18: | Zeile 18: | ||
Dieser Lösungsansatz stammt von Boris Neubert: | Dieser Lösungsansatz stammt von Boris Neubert: | ||
* Zum Steuern werden die URLs von den im | * Zum Steuern werden die URLs von den im FHEM-webfrontend angezeigten 'on/off'-Links genutzt | ||
* Es gibt eine GrundrissStart.html, die zwei Frames erzeugt: | * Es gibt eine GrundrissStart.html, die zwei Frames erzeugt: | ||
# einen sichtbaren Bereich für die Darstellung von 'Grundriss.html', | # einen sichtbaren Bereich für die Darstellung von 'Grundriss.html', | ||
# einen unsichtbaren Bereich für die Rückmeldungen von der | # einen unsichtbaren Bereich für die Rückmeldungen von der FHEM-Webpage | ||
Zeile 42: | Zeile 42: | ||
Der Grundriss kann z.B. in Powerpoint erstellt und als Hintergrundbild.png gespeichert werden. | Der Grundriss kann z.B. in Powerpoint erstellt und als Hintergrundbild.png gespeichert werden. | ||
=== Hinzufügen der | === Hinzufügen der FHEM-Buttons === | ||
Dem Bild übergelagert platzieren Sie nun die Schaltflächen. Diese rufen einen Link folgenden Formats: | Dem Bild übergelagert platzieren Sie nun die Schaltflächen. Diese rufen einen Link folgenden Formats: | ||
<nowiki><A HREF="[http:// http://]<ip>:8083/fhem?cmd=set%20Lampe1%20on" target="log">Lampe1 an</A> | <nowiki><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></nowiki> | <A HREF="[http:// http://]<ip>:8083/fhem?cmd=set%20Lampe1%20off" target="log">Lampe1 aus</A></nowiki> | ||
Der in href angegebene link lässt sich der Einfachheit halber per Copy/Paste aus dem | 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 | 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. | 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 56: | Zeile 56: | ||
<head> | <head> | ||
<meta http-equiv="refresh" content="5; URL=Grundriss.html"> | <meta http-equiv="refresh" content="5; URL=Grundriss.html"> | ||
<title>Grundriss mit | <title>Grundriss mit FHEM-Schaltern</title> | ||
</head> | </head> | ||
<body> | <body> | ||
Zeile 77: | Zeile 77: | ||
HINWEIS | HINWEIS | ||
* Alternativ können Sie zu der in | * 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. | 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 | 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. | Die <img>Images</img> -URL liefert das Symbol zum genannten Gerät in dessen aktzuellem Schaltzustand zurück. |
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)
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 :-)