Nachdem man sich eine 1-wire Wetterstation nach dem Artikel 1-wire Wetterstation (Teil 1: Installation) gebaut und die Daten wie im Artikel 1-wire Wetterstation (Teil 2: Datenbank) beschrieben in einer MySQL Tabelle speichert möchte man die gesammelten Werte natürlich auch angezeigt bekommen.
Um möglichst einfach die gemessenen Werte der Wetterstation in einer Webseite anzuzeigen, habe ich die jpgraph verwendet. Diese Software darf für private Zwecke kostenlos verwendet werden. Da sie ansonsten Geld kostet ist sie nicht im Repository zu finden. Man kann sie aber unter der URL http://jpgraph.net/download runterladen. Ich habe mir von dort die aktuelle Version 3.07 geholt und in das Verzeichnis /usr/share/jpgraph3 entpackt. Danach benötigt man noch das Paket php5-gd. Diese ist im Repository enthalten und kann mit dem folgenden Befehl installiert werden.
apt-get install php5-gd
Um aus den gesammelten Wetterdaten eine Grafik mit den Werten des letzten Tages erstellen zu lassen, habe ich das Verzeichnis /var/www/grafiken angelegt und das folgenden PHP-Programm geschrieben, welches die Grafiken aus erzeugt.
<?php //**************************************************************************** //Darstellung von Temperatur und Feuchtigkeit der letzten 24 Stunden als Graph //14.02.2011 Kristian Purrucker //**************************************************************************** include ("/usr/share/jpgraph3/jpgraph.php"); include ("/usr/share/jpgraph3/jpgraph_line.php"); include ("/usr/share/jpgraph3/jpgraph_mgraph.php"); include ("/usr/share/jpgraph3/jpgraph_date.php"); $DatabaseHost = "localhost"; $DatabaseUser = "root"; $DatabasePassword = "asdfgh"; $Database = "wetterstation"; $Table = "daten_min"; $fileName = "/var/www/grafiken/graph_daily.png"; //Datenbankanbindung //****************** $DatabasePointer = mysql_connect($DatabaseHost, $DatabaseUser, $DatabasePassword) or die ("Keine Verbindung moeglich"); mysql_select_db($Database, $DatabasePointer) or die ("Die Datenbank existiert nicht"); //Auslesen der letzten 1440 Zeilen (= Tag) aus der Datenbank //********************************************************** $ResultPointer = mysql_query("SELECT zeitstempel, temp_clara, humidity_clara, temp_simon, humidity_simon FROM $Table ORDER BY zeitstempel DESC LIMIT 1440"); $temp_clara_average = ""; $temp_simon_average = ""; $humidity_clara_average = ""; $humidity_simon_average = ""; for($i = 0, $Export = ""; $i < mysql_num_rows($ResultPointer); $i++) { $Daten = mysql_fetch_object($ResultPointer); $temp_clara[] = $Daten->temp_clara; $temp_clara_average = $temp_clara_average + $Daten->temp_clara; $temp_simon[] = $Daten->temp_simon; $temp_simon_average = $temp_simon_average + $Daten->temp_simon; $humidity_clara[] = $Daten->humidity_clara; $humidity_clara_average = $humidity_clara_average + $Daten->humidity_clara; $humidity_simon[] = $Daten->humidity_simon; $humidity_simon_average = $humidity_simon_average + $Daten->humidity_simon; $xdata[] = $Daten->zeitstempel; } $temp_clara_average = round(($temp_clara_average = $temp_clara_average / 1440), 4); $humidity_clara_average = round(($humidity_clara_average = $humidity_clara_average / 1440), 4); $temp_simon_average = round(($temp_simon_average = $temp_simon_average / 1440), 4); $humidity_simon_average = round(($humidity_simon_average = $humidity_simon_average / 1440), 4); //Funktion zur Konvertierung des TimeStamp in Minuten und Sekunden //**************************************************************** function TimeCallback( $aVal) { #return Date ('H:i:s d.m Y',$aVal); return Date ('H:i',$aVal); } //Erzeugung eines Graphen fuer Claras Zimmer //****************************************** $graph = new Graph(700,200,"auto"); $graph->SetScale('datint',"auto","auto","auto","auto"); $graph->SetY2Scale('int',"auto","auto"); $lineplot_temp_clara=new LinePlot($temp_clara, $xdata); $lineplot_humidity_clara=new LinePlot($humidity_clara, $xdata); // Grafik Formatieren $graph->img->SetMargin(50,50,20,60); $graph->SetColor("#000000"); $graph->SetMarginColor("#333333"); $graph->SetShadow(); //Titel $graph->title->Set("Claras Zimmer"); $graph->title->SetColor("#CCCCCC"); $graph->title->SetFont(FF_FONT2,FS_BOLD); $graph->subtitle->Set("Aktuell: $temp_clara[0] C / $humidity_clara[0]% Durchschnittlich: $temp_clara_average C / $humidity_clara_average%"); $graph->subtitle->SetColor("#CCCCCC"); //Legende $graph->legend->Pos(0.50,0.95,"center","bottom"); $graph->legend->SetLayout(LEGEND_HOR); $graph->legend->SetShadow(false); $lineplot_temp_clara->SetLegend("Lufttemperatur (C) "); $lineplot_humidity_clara->SetLegend("Luftfeuchtigkeit "); //X-Achse $graph->xaxis->SetColor("#CCCCCC"); $graph->xaxis->title->Set("Zeit"); $graph->xaxis->SetLabelFormatCallback('TimeCallback'); $graph->xaxis->title->SetColor("#CCCCCC"); $graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD); //Y-Achse $graph->yaxis->SetColor("#FF7777"); $graph->y2axis->SetColor("#1111ee"); $graph->yaxis->title->Set("Grad Celsius"); $graph->y2axis->title->Set("% Luftfeuchtigkeit"); $graph->yaxis->title->SetColor("#CCCCCC"); $graph->y2axis->title->SetColor("#CCCCCC"); $graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD); $graph->y2axis->title->SetFont(FF_FONT1,FS_BOLD); //Linie 1 $lineplot_temp_clara->SetColor("#FF8888"); $lineplot_temp_clara->SetFillColor("#EE0000@0.6"); $lineplot_temp_clara->SetWeight(1); //Linie 2 $lineplot_humidity_clara->SetColor("#8888ff"); $lineplot_humidity_clara->SetFillColor("#2222DD@0.6"); $lineplot_humidity_clara->SetWeight(1); // Die Linien zu der Grafik hinzufügen $graph->Add($lineplot_temp_clara); $graph->AddY2($lineplot_humidity_clara); //Erzeugung eines Graphen fuer Simons Zimmer //****************************************** $graph2 = new Graph(700,200,"auto"); $graph2->SetScale('datint',"auto","auto","auto","auto"); $graph2->SetY2Scale('int',"auto","auto"); $lineplot_temp_simon=new LinePlot($temp_simon, $xdata); $lineplot_humidity_simon=new LinePlot($humidity_simon, $xdata); // Grafik Formatieren $graph2->img->SetMargin(50,50,20,60); $graph2->SetColor("#000000"); $graph2->SetMarginColor("#333333"); $graph2->SetShadow(); //Titel $graph2->title->Set("Simons Zimmer"); $graph2->title->SetColor("#CCCCCC"); $graph2->title->SetFont(FF_FONT2,FS_BOLD); $graph2->subtitle->Set("Aktuell: $temp_simon[0] C / $humidity_simon[0]% Durchschnittlich: $temp_simon_average C / $humidity_simon_average%"); $graph2->subtitle->SetColor("#CCCCCC"); //Legende $graph2->legend->Pos(0.50,0.95,"center","bottom"); $graph2->legend->SetLayout(LEGEND_HOR); $graph2->legend->SetShadow(false); $lineplot_temp_simon->SetLegend("Lufttemperatur (C) "); $lineplot_humidity_simon->SetLegend("Luftfeuchtigkeit "); //X-Achse $graph2->xaxis->SetColor("#CCCCCC"); $graph2->xaxis->title->Set("Zeit"); $graph2->xaxis->SetLabelFormatCallback('TimeCallback'); $graph2->xaxis->title->SetColor("#CCCCCC"); $graph2->xaxis->title->SetFont(FF_FONT1,FS_BOLD); //Y-Achse $graph2->yaxis->SetColor("#FF7777"); $graph2->y2axis->SetColor("#1111ee"); $graph2->yaxis->title->Set("Grad Celsius"); $graph2->y2axis->title->Set("% Luftfeuchtigkeit"); $graph2->yaxis->title->SetColor("#CCCCCC"); $graph2->y2axis->title->SetColor("#CCCCCC"); $graph2->yaxis->title->SetFont(FF_FONT1,FS_BOLD); $graph2->y2axis->title->SetFont(FF_FONT1,FS_BOLD); //Linie 1 $lineplot_temp_simon->SetColor("#FF8888"); $lineplot_temp_simon->SetFillColor("#EE0000@0.6"); $lineplot_temp_simon->SetWeight(1); //Linie 2 $lineplot_humidity_simon->SetColor("#8888ff"); $lineplot_humidity_simon->SetFillColor("#2222DD@0.6"); $lineplot_humidity_simon->SetWeight(1); // Die Linien zu der Grafik hinzufügen $graph2->Add($lineplot_temp_simon); $graph2->AddY2($lineplot_humidity_simon); //Graphen zusammen bauen //********************** $mgraph = new MGraph(700,400,"auto"); $mgraph->SetMargin(2,2,2,2); $mgraph->Add($graph,0,0); $mgraph->Add($graph2,0,200); $mgraph->Stroke($fileName); ?>
Anschließend habe ich zum anzeigen der Grafiken die folgende, einfache HTML-Seite geschrieben und in das Verzeichnis /var/www gelegt.
<!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" xml:lang="en" lang="en">
<head>
<title>Herzlich Willkommen bei preetz.dnsalias.net!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="robots" content="noindex" />
<style type="text/css"><!--
body {
color: #444444;
background-color: #EEEEEE;
font-family: 'Trebuchet MS', sans-serif;
font-size: 80%;
}
h1 {}
h2 {
font-size: 1.2em;
text-align: center;
}
p.center { text-align: center; }
#page{
background-color: #FFFFFF;
width: 60%;
margin: 24px auto;
padding: 12px;
}
#header{
padding: 6px ;
text-align: center;
}
.header{ background-color: #997; color: #FFFFFF; }
#content {
padding: 4px 0 24px 0;
}
#footer {
color:#666666;
background: #f9f9f9;
padding: 10px 20px;
border-top: 5px #efefef solid;
font-size: 0.8em;
text-align: center;
}
#footer a {
color: #999999;
}
--></style>
</head>
<body>
<div id="page">
<div id="header" class="header">
<h1>Herzlich Willkommen bei <!--ADRESSE//-->preetz.dnsalias.net!<!--ADRESSE//--></h1>
</div>
<div id="content">
<h2>Hier finden Sie die aktuellen Wetterdaten aus Preetz</h2>
<p class="center"><img src="grafiken/graph_daily.png" alt="Daily Graph"></p>
</div>
<div id="footer">
<p>Powered by <a href="http://www.isilife.de">Isilife GbR</a></p>
</div>
</div>
</body>
</html>Das Ergebnis sieht dann ungefähr so aus:
