Om oss

Denne siden omhandler bryggerlauget Svarstad Ølbryggerlaug, SØL for short. Her vil vi publisere litt info om bryggingen, bilder og video.

Arduino temperaturlogger - del 3

Dette er en fortsettelse av Arduino temperaturlogger del 1 og del 2. Logger og database er på plass, det gjenstår bare å hente ut og presentere data. Jeg har valgt å benytte Google Chart Tools for å presentere dataene, basert på en mal som ble lagt ut på Norbryggs forum (takk til fredno for denne).

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