Lag en php-side med navn "oleskap.php" med følgende innhold (rett opp databasevariabler):
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<?php
// Start database configuration
$server = "<servername>";
$username = "<username>";
$password = "<password>";
$database = "<database>";
$table = "<table>";
// No edit under this line
$link = mysql_connect($server, $username, $password);
// End database configuration
mysql_select_db($database , $link) or die("Couldn't open $database: ".mysql_error());
if ($_GET[hours]) {
$hours = $_GET[hours];
}
else {
$hours = 24;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh" content="60">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Arduino Temperaturlogger
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart','gauge']});
</script>
<script type="text/javascript">
function drawTempChart() {
// Create and populate the temprature chart.
var data = google.visualization.arrayToDataTable([
['Dato','\u00D8l','Kj\u00F8leskap','Romtemp.'],
<?php
// select average readings
$result = mysql_query("SELECT DATE_FORMAT(Dato, '%H:%i') AS Time1, AVG( Beer ) AS Beer, AVG( Skap ) AS skap, AVG( Ute ) AS ute FROM $table WHERE TIMESTAMPDIFF(HOUR,Dato, now()) < $hours GROUP BY ROUND( UNIX_TIMESTAMP( Dato ) DIV 300 *5 ) ");
if ($result !== false) {
$num=mysql_numrows($result);
$i=0;
while ($i < $num) {
$time=mysql_result($result,$i,"Time1");
$Beer=mysql_result($result,$i,"Beer");
$skap=mysql_result($result,$i,"skap");
$ute=mysql_result($result,$i,"ute");
echo "['";
echo "$time";
echo "',";
echo "$Beer";
echo ",";
echo "$skap";
echo ",";
echo "$ute";
echo "]";
if ($i < ($num - 1)){
echo ",";
}
$i++;
}
}
?>
]);
var options = {
curveType: "function",
height: 300,
hAxis: {title: 'Tidspunkt'},
vAxis: {title: 'Temperatur (C)',
max: 100, min: 0}
};
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('tempChart')).
draw(data, options);
}
function drawTempGauge() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
<?php
$result = mysql_query("SELECT Dato, Beer, Skap, Ute FROM $table Order By Dato desc limit 1");
if ($result !== false) {
$num=mysql_numrows($result);
$Beer=mysql_result($result,0,"Beer");
$skap=mysql_result($result,0,"Skap");
$ute=mysql_result($result,0,"Ute");
echo "['\u00D8l',";
echo "$Beer";
echo "],";
echo "['Kj\u00F8leskap',";
echo "$skap";
echo "],";
echo "['Romtemp.',";
echo "$ute";
echo "]";
}
?>
]);
var options = {
max: 20, min: 0,
width: 600, height: 200,
yellowFrom: 12, yellowTo: 20,
greenFrom: 2, greenTo: 12,
redFrom: 0, redTo: 2,
minorTicks: 1,
majorTicks: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20' ]
};
// Create and draw the tempGauge.
new google.visualization.Gauge(document.getElementById('tempGauge')).
draw(data, options);
}
google.setOnLoadCallback(drawTempChart);
google.setOnLoadCallback(drawTempGauge);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<center>
<H1>Temperaturlogger</H1>
<P>
<div id="tempChart"></div>
</P>
<P>
<form action="oleskap.php" method="get" oninput="x.value=parseInt(hours.value)">
Tidsperiode graf (i timer): 1 <input type="range" min ="1" max="48" name="hours" value="<?php echo $hours; ?>"> 48
=<output name="x" for="hours"><?php echo $hours; ?></output>
<input type="submit" value="Oppdater">
</form> </P>
<P>
<div id="tempGauge"></div>
</P>
</center>
</body>
</html>
Denne siden henter data fra tabellen i databasen, og presenterer den som grafer og målere. Grafene viser standard de siste 24 timer, men kan justeres fra 1-48 timer om ønskelig. Målerne viser siste registrering i databasen. Dette vil generere en webside som ser omtrent slik ut:
(Her ligger alle tre probene i romtemperatur, den ene ble nylig lagt i solsteika i vinduskarmen)
I tillegg kan det være kjekt å vise historiske data utover 48 timer. Følgende php-kode viser graf over alle historiske data (xAxis-tekst viser full dato og tidspunkt og blir derfor litt for lang. Har ikke i skrivende stund funnet parametre for å justere størrelsen her):
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<?php
// Start database configuration
$server = "<servername>";
$username = "<username>";
$password = "<password>";
$database = "<database>";
$table = "<table>";
// No edit under this line
$link = mysql_connect($server, $username, $password);
// End database configuration
mysql_select_db($database , $link) or die("Couldn't open $database: ".mysql_error());
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh" content="60">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Arduino Temperaturlogger - Historiske data
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart','gauge']});
</script>
<script type="text/javascript">
function drawTempChart() {
// Create and populate the temprature chart.
var data = google.visualization.arrayToDataTable([
['Dato','\u00D8l','Kj\u00F8leskap','Romtemp.'],
<?php
$result = mysql_query("SELECT DATE_FORMAT(Dato, '%d.%c.%y %H:%i') AS Time1, Beer, Skap AS skap, Ute AS ute FROM $table");
if ($result !== false) {
$num=mysql_numrows($result);
$i=0;
while ($i < $num) {
$time=mysql_result($result,$i,"Time1");
$Beer=mysql_result($result,$i,"Beer");
$skap=mysql_result($result,$i,"skap");
$ute=mysql_result($result,$i,"ute");
echo "['";
echo "$time";
echo "',";
echo "$Beer";
echo ",";
echo "$skap";
echo ",";
echo "$ute";
echo "]";
if ($i < ($num - 1)){
echo ",";
}
$i++;
}
}
?>
]);
var options = {
curveType: "function",
height: 300,
hAxis: {title: 'Tidspunkt'},
vAxis: {title: 'Temperatur (C)',
max: 100, min: 0}
};
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('tempChart')).
draw(data, options);
}
google.setOnLoadCallback(drawTempChart);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<center>
<H1>Temperaturlogger arkiv</H1>
<P>
<div id="tempChart"></div>
</P>
</center>
</body>
</html>
Det var det hele for dette prosjektet :)
Les del 1 HER
Led del 2 HER
Ingen kommentarer:
Legg inn en kommentar