Fhem-Daten in index.html - für FB7390 Apache

schami · 13 November 2013, 10:00:38

Hallo alle

da mehrfach anfragen waren, hier mal meine Webseite wo ich alle Daten von Fhem uvm. darstelle.

(http://www.kamminke.eu/1.JPG)

Es wird auf ein kl. Tablet 7" (65€ neu bei Ebay) angezeigt, welches fest (mit Bauschau und Acryl

) in der Wand verbaut ist.
Auf meiner Fritzbox7390 (hier läuft auch Fhem) läuft ein kleiner Apache Server welcher die Webseite fürs Tablet bereit stellt. Per WLan holt sich das Tablet alle 6min die Webseite neu.

Warum Apache mit php unterstüzung?
Mit normalen HTML-code habe ich keine Möglichkeit gefunden, die per notify geschriebene Temp_Bad.txt als einfachen formatierbaren Text einzubinden. Mit PHP-include geht es wunderbar!

Ich habe die Webseite mit Frames (kann dadurch unterschiedliche REFRESH´s einstellen) und Tabellen gebastellt. Sicherlich gehts mit CSS besser aber mit normalen html kenn ich mich aus.

Also, der Hauptframe wird alle 8h neu geladen (Meta-refresh 28800), da über Nacht das Wlan abgeschalten ist und so der Bildschirm gleich wieder auf Startseite gesetzt wird.

HAUPTFRAME = index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="28800" />
<title>Unbenanntes Dokument</title>
</head>
<frameset rows="100%,*">
<frame src="index0.php" name="mainFrame" scrolling="Yes" id="mainFrame" title="mainFrame" /><frame src="UntitledFrame-1"></frameset>
<noframes><body>
</body></noframes>
</html>

Frame = index0.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="600" />
<title>Hauptseite</title>
<style type="text/css">

</style></head>
<body class="oneColFixCtr">
<div id="container">

<table width="87%" border="0" align="center">
<tr>
<th width="16%"><a href="index0.php"><img src="tabs/Hauptseite_UL.png" width="145" height="50" /></a></th>
<th width="16%"><a href="regen.php"><img src="tabs/RegenBlitz.png" width="145" height="50" /></a></th>
<th width="17%"><a href="temp.php"><img src="tabs/Temperaturen.png" width="145" height="50" /></a></th>
<th width="16%"><a href="hp.php"><img src="tabs/HPZugriffe.png" width="145" height="50" /></a></th>
<th width="16%"><a href="fhem.php"><img src="tabs/Fhem.png" width="145" height="50" /></a></th>
<th width="19%"><a href="sonstiges.php"><img src="tabs/Sonstiges.png" width="145" height="50" /></a></th>
</tr>
</table>
<table width="100%" border="0" align="center">
<tr>
<td width="28%" bgcolor="#990000"><a href="index01.php">Homepage</a></td>
<td width="7%" bgcolor="#990000">Day</td>
<td width="8%" bgcolor="#990000">Y-Day</td>
<td width="16%" rowspan="9"><a href="regen.php"><img src="http://www.wetteronline.de/?pid=p_radar_map&ireq=true&src=radar/vermarktung/p_radar_map_forecast/forecastLoop/DL/latestForecastLoop.gif?pid=p_radar_map&ireq=true&src=radar/vermarktung/p_radar_map_forecast/forecastLoop/DL/latestForecastLoop.gif" width="148" height="202" /></a></td>
<td width="11%" bgcolor="#990000"> </td>
<td width="6%" bgcolor="#990000">°C</td>
<td width="6%" bgcolor="#990000"> </td>
<td width="6%" bgcolor="#990000">°C</td>
<td width="6%" bgcolor="#990000"> </td>
<td width="6%" bgcolor="#990000">m³/kw</td>
</tr>
<tr>
<td bgcolor="#996633">Haffblick-Kamminke.de</td>
<td bgcolor="#996633"></td>
<td bgcolor="#996633"></td>
<td bgcolor="#333333">Außen</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Temp_Aussen.txt"); ?></td>
<td bgcolor="#333333">FB-VL</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Temp_HZ_FB_VL_All.txt"); ?></td>
<td bgcolor="#333333">Gas</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Bergstr_Gas.txt"); ?></td>
</tr>
<tr>
<td bgcolor="#996633">Kamminke.eu</td>
<td bgcolor="#996633"></td>
<td bgcolor="#996633"></td>
<td bgcolor="#333333">Stube</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Temp_Stube.txt"); ?></td>
<td bgcolor="#333333">FB-RL</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Temp_HZ_FB_RL_All.txt"); ?></td>
<td bgcolor="#333333">Strom</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Bergstr_Strom.txt"); ?></td>
</tr>
<tr>
<td bgcolor="#996633">Usedomshop24.de</td>
<td bgcolor="#996633"></td>
<td bgcolor="#996633"></td>
<td bgcolor="#333333">Bad</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Temp_Bad.txt"); ?></td>
<td bgcolor="#333333">R-VL</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Temp_HZ_RD_VL_All.txt"); ?></td>
<td bgcolor="#333333">Str.Do</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/CUL_EM_5.txt"); ?></td>
</tr>
<tr>
<td bgcolor="#996633">Blidz.de</td>
<td bgcolor="#996633"></td>
<td bgcolor="#996633"></td>
<td bgcolor="#333333">Keller</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Temp_Keller.txt"); ?></td>
<td bgcolor="#333333">R-RL</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Temp_HZ_RD_RL_All.txt"); ?></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" rowspan="4">

<script language="JavaScript">

</script>
<span special="blink">
<script type="text/javascript">

document.writeln('</b></big></font><font face="Verdana" size="2" color='+Schriftfarbe+'>');

for (i = 1; i <= Geburtstage; i++) {
if (GeburtsMonat == Monat) {
var Alter = Jahr - GeburtsJahr;
document.writeln("<b>"+Name + "</b> (" + Alter + ")" );
if (GeburtsTag == Tag) {
document.writeln("(heute) ");
}
document.writeln(GeburtsTag + "." + GeburtsMonat + "." + Jahr + " <u>" +Bemerkung+"</u><br>");
t++;
}
}
//-->
</script></span>
<script>

</script><br /></td>
<td bgcolor="#333333">Gästezi.</td>
<td bgcolor="#996633"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Temp_Gaestezimmer.txt"); ?></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#333333">Haffi HeizR.</td>
<td bgcolor="#0033CC"><?php echo $temperatur5 . "\n\r"; ?></td>
<td bgcolor="#333333">R-VL</td>
<td bgcolor="#0033CC"><?php echo $temperatur1 . "\n\r"; ?></td>
<td bgcolor="#333333">Kw /d</td>
<td bgcolor="#0033CC"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Haffblick_Strom.txt"); ?></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
</table>

<iframe src="http://192.168.0.1:8083/fhem/SVG_showLog?dev=SVG_FileLog_Temp_alle_1&logdev=FileLog_Temp_alle&gplotfile=GP_Temp_ALL&logfile=CURRENT&pos=" width="640px" height="160px"></iframe>
<table width="300" height="160px" border="0" align="right">
<tr>
<td width="130"><a href="index1.php"><img src="tabs/FB_Heizung.png" width="145" height="50" /></a></td>
<td width="160"><a href="index2.php"><img src="tabs/Rad_Heizung.png" width="145" height="50" /></a></td>
</tr>
<tr>
<td><a href="index3.php"><img src="tabs/Außen.png" width="145" height="50" /></a></td>
<td><a href="index4.php"><img src="tabs/Stube.png" width="145" height="50" /></a></td>
</tr>
<tr>
<td><a href="index5.php"><img src="tabs/Erdgas.png" width="145" height="50" /></a></td>
<td><a href="index6.php"><img src="tabs/Strom.png" width="145" height="50" /></a></td>
</tr>
</table><br/><br/>
<table width="952" border="0">
<tr>
<td width="193"><img src="tabs/1_Temp.png" width="47" height="35" /><span style="font-size: 33px;">
<?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Temp_Aussen.txt"); ?>
°C</span></td>
<td width="550"><iframe style="width:550px; height:27px; border:1px solid black; text-align: center;" src="http://www.esyoil.com/heizoelpreise.php?m=1&plz=17419" scrolling="no" frameborder="1"></iframe></td>
<td width="187"><img src="tabs/1_Strom.png" width="35" height="35" /><span style="font-size: 33px;"><?php include("/var/InternerSpeicher/USBDISK2-0-01/apache/htdocs/notify/Bergstr_Strom.txt"); ?> /d</span></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div id="container">
</body>
</html>

Habe einen php-code ganz am Anfang rausgelöscht welchen bestimmt niemand benötigt. Er ist dazu da die Temperaturen von einen Hygrosens-Webthermometer (http://t1.gstatic.com/images?q=tbn:ANd9GcRQFXkNsFhSBP7f9s_5QeNFIfJtolMKxANQ3D2XOX2f9gPBMGfKyrTM1fw) herauszubekommen.

Es ist noch ein Java-script enthalten welche ich im Netz gefunden habe, es ermöglicht blinkenden Text mittels <span special="blink">.
Dann kommt noch das Java-Script für Geburtstage welches ebenfalls nicht von mir geschrieben wurde.

Wenn fragen sind immer stellen! Könnte auch noch weitere Dateien zur verfügung stellen z.B. Wetter mit Warnungskarten (Regen,Wind, Blitz, Waldbrand, Küstengefahr).

Eine Sache noch! Die Buttons rechts Strom, Erdgas usw verlinken zur Index1 oder 2 oder 3.php wo nur das SVG_Plot verändert wird. Alles andere auf der Seite bleibt.

So und nun viel Spaß

MfG
Sven

bugster_de · 13 November 2013, 13:35:51

Hi,

wow, das sieht ja cool aus !

Ein paar Fragen hab ich aber natürlich:
- wie kommt Apache auf die Fritzbox? Ich habe bisher eigentlich immer nur zwei Varianten gefunden: sehr alte Versionen pre-compiled oder extrem komplexer Prozess mit selber kompilieren
- wie sieht die System Load der FB danna us? Packt die das noch?
- wie kommen deine Werte von FHEM in das Interface? Wenn ich es richtig interpretiere, dann schreibst Du die Daten von FHEM in eine Textdatei und liest sie dann von dort aus?
- Muß der Code oben jeweils in eine index.php und eine index0.php rein kopiert werden?

JanWittke · 13 November 2013, 17:16:08

Hi Sven,

ich schliesse mich bugster_de an. Sieht wirklich toll aus.
Da ich ja auf meinem Raspi auch einen Apache laufen habe interessiert mich diese Lösung sehr. Bitte füttere uns mit noch mehr Info´s.

MfG Jan

schami · 13 November 2013, 17:30:19

Hallo bugster_de & Jan

ist ein Pack welches nur auf die FB in den USB-Speicher kopiert und dann direkt gestartet wird.

http://www.fritzmod.net/de/modification/apache/installation/

Die Auslastung der FB geht bei Abruf der Seite für 1-2 sek an die 100% aber trotz 16-ner Leitung ist bei Vollspeed nichts an Einbruch der DL-Rate zu merken. Auch VoIP wird nicht gestört!

Richtig! ich lasse Fhem per notify in eine .txt datei schreiben, welche auch nur den aktuellen Wert z.b. 12.67 enthält. Diese .txt Datei wird mit <php include> eingetragen.

Der Code muß nur in die index0.php! Die index.php ist der Hauptframe, wo dann unzählige Unterframes (index0.php, MenüRechts.php und MenüUnten.php) enthalten sein könnte. Wäre somit möglich das sich Unterframe 1. alle 10 sek., svg-plot 1 alle 1min & Temp-Tabelle-recht alle 2 Stunden aktualisiert.

MfG
Sven

schami · 13 November 2013, 19:29:42

hi,

hier nochmals einige Fotos(war nur die kl. Digi). Es ist eigentlich fast alles möglich!
Will noch TV-Programm mit evtl. Möglichkeit eine Aufnahme an Dreambox zu übergeben, Feed von Grenzwissenschaft, Zugriffauf die Webserver der Heimgeräte (Diskstation, Drucker, Dreambox, Soundanlage) usw. mir fällt bestimmt noch mehr ein.

Auf der Temperaturen-seite dürfte auffallen das noch einige fehlen.
Die DS1820-Sensoren sind zwar recht schnell verlegt was auch einfach gelingt aber alles dauert doch seine Zeit.

Alle ran ans basteln

ich habe ja schon einen großen Teil hinter mir.

(http://www.kamminke.eu/2.jpg)
(http://www.kamminke.eu/3.jpg)
(http://www.kamminke.eu/4.jpg)
(http://www.kamminke.eu/5.jpg)
(http://www.kamminke.eu/6.jpg)
(http://www.kamminke.eu/7.jpg)
(http://www.kamminke.eu/8.jpg)

MfG
Sven

mele · 14 November 2013, 20:31:10

Danke vielmals für Deine Anregungen und Darstellungen hier.

Ich experimentiere aktuell auch mit einem eigenen Webinterface und habe es bislang als html-Datei ohne PHP versucht.

Dein Beitrag hat mich inspiriert, mich PHP zu widmen. Ich habe die Hoffnung, dass sich Zustände im Webinterface automatisch ändern, wenn z.B. eine Lampe per notify aktiviert wird. Also genau wie im Original-FHEMWEB (hoffentlich verständlich).

Ich habe mal ganz einfach versucht, folgende Zeile in den PHP-Code zu setzen:

<img src=http://192.168.xxx.xxx:8085/fhem/icons/PCA301_Zeitschaltuhr1 border="0" >

Nach manueller Aktualisierung wird der Zustand auch korrekt dargestellt.

Hast Du einen Tip, ob das auch ohne Aktualisieren, also wie in FHEMWEB, klappt?

VG
Mele

schami · 15 November 2013, 09:30:56

Hallo Mele,

hmm geht bestimmt mit Java, oder wieder mit Frames. Du könntest zb. nur die Zustände alle sek aktualisieren lassen. Sollte deinen Webserver nicht groß belasten. Bei mir auf der FB7390 ist am schlimmsten das berechnen der SVG-Plots, besonders der wo 5 temperaturen in einem SVG dargestellt werden.

Ich würde es mit Frames probieren, schau mal hier ist einfach und gut erklärt

http://de.selfhtml.org/html/frames/definieren.htm

Sven

mele · 15 November 2013, 09:48:36

Zitat von: schami am 15 November 2013, 09:30:56
Hallo Mele,

hmm geht bestimmt mit Java, oder wieder mit Frames. Du könntest zb. nur die Zustände alle sek aktualisieren lassen. Sollte deinen Webserver nicht groß belasten. Bei mir auf der FB7390 ist am schlimmsten das berechnen der SVG-Plots, besonders der wo 5 temperaturen in einem SVG dargestellt werden.

Ich würde es mit Frames probieren, schau mal hier ist einfach und gut erklärt

http://de.selfhtml.org/html/frames/definieren.htm

Sven

Schonmal besten Dank für die Antwort.

Das Arbeiten mit Frames ist kein Problem.

Was ich hingegen nicht verstehe ist "nur die Zustände alle sek aktualisieren lassen".

Meinst Du, die Zustände allein in einen sich selbst aktualisoerenden Frame zu programmieren?

Vielen Dank vorab,

Mele

schami · 15 November 2013, 17:16:24

Genau,

du kannst zb. die Zustände in einen Frame welcher sich alle sek aktualisiert und der Frame welcher die Temperaturen anzeigt nur alle 5min.

Ich habe es so, das die ganze Seite alle 8 Stunden und die Temps usw alle 6min. Dieser 8 Stunden Intervall ist nur für folgendes!
Mein Wlan ist von 01:00 bis 7:00Uhr aus, somit sagt der Frame mit den Temps usw fehler! Die ganze Seite wird aber nach 8h neu geladen und somit verschwindet auch die Fehlermeldung!

MfG

CQuadrat · 18 November 2013, 15:19:21

Hallo Sven,

ich schließe mich meinen Vorgängern an: sieht super aus!

Gibt es die png-Dateien auch irgendwo? Das wäre nämlich super!!

Danke und Gruß

Christoph

schami · 18 November 2013, 23:27:07

Hallo Christoph,

danke! Hier der Link http://www.kamminke.eu/tabs.zip! Ist ne kleine zip!
Kann verändert und benutzt werden ohne einschränkung! Nur bitte nicht irgend jemand sagen oder schreiben das Ihr die gemacht habt!

MfG

CQuadrat · 18 November 2013, 23:39:39

1000 Dank!!

CQuadrat · 20 November 2013, 13:18:38

Ist es möglich, hier auch die "Wetter".phps zu posten?

schami · 20 November 2013, 19:31:47

Moin,

aber sicher doch! In der regen.php ist der weiterführende Link die Unwetterkarte in der Mitte unten!

http://www.kamminke.eu/wetter_phps.zip

Wenns fertig ist, bitte auch nen Bildchen Posten! Ich bin derzeit wieder am leichten verändern der Hauptseite

CQuadrat · 21 November 2013, 07:44:28

Nochmals herzlichen Dank !

Bis ich selber etwas Brauchbares hier posten kann, wird es wohl bis Weihnachten dauern. Ich habe leider davor noch zu viel um die Ohren. $:-\$

Fhem-Daten in index.html - für FB7390 Apache

schami

JanWittke

schami

schami

schami

schami

schami

schami