Team:TU-Munich/TUM13 index.php
From 2013.igem.org
(Difference between revisions)
FlorianA (Talk | contribs)
(Created page with " <nowiki><?php // include db interface and init include 'lib/db.inc.php'; // set standard values $time1 = strtotime("10/01/13 11:45:00"); $time2 = strtotime("10/01/13 13:15:00"...")
Newer edit →
(Created page with " <nowiki><?php // include db interface and init include 'lib/db.inc.php'; // set standard values $time1 = strtotime("10/01/13 11:45:00"); $time2 = strtotime("10/01/13 13:15:00"...")
Newer edit →
Revision as of 12:22, 4 October 2013
<?php // include db interface and init include 'lib/db.inc.php'; // set standard values $time1 = strtotime("10/01/13 11:45:00"); $time2 = strtotime("10/01/13 13:15:00"); $data = "`time`, `temperature`, `water`, `light-vis`, `light-ir`, `photo1`, `photo2`, `photo3`"; $streams = "[ { name: 'Temperature', key: 'temperature' }, { name: 'Visible Light', key: 'light-vis' }, { name: 'Infrared Light', key: 'light-ir' }, { name: 'Water', key: 'water' }, { name: 'Photometer 1', key: 'photo1' }, { name: 'Photometer 2', key: 'photo2' }, { name: 'Photometer 3', key: 'photo3' } ]"; $selected = 1; // check for GET parameters if ( isset($_GET['date1'], $_GET['time1'], $_GET['date2'], $_GET['time2'], $_GET['data']) ) { // check for viable date and time values if ( strtotime($_GET['date1']." ".$_GET['time1']) and strtotime($_GET['date2']." ".$_GET['time2']) ) { $time1 = strtotime($_GET['date1']." ".$_GET['time1']); $time2 = strtotime($_GET['date2']." ".$_GET['time2']); } else { $error = "Wrong date or time format"; } // check for selected data streams switch ($_GET['data']) { case 'all': $data = "`time`, `temperature`, `water`, `light-vis`, `light-ir`, `photo1`, `photo2`, `photo3`"; $streams = "[ { name: 'Temperature', key: 'temperature' }, { name: 'Visible Light', key: 'light-vis' }, { name: 'Infrared Light', key: 'light-ir' }, { name: 'Water', key: 'water' }, { name: 'Photometer 1', key: 'photo1' }, { name: 'Photometer 2', key: 'photo2' }, { name: 'Photometer 3', key: 'photo3' } ]"; $selected = 1; break; case 'environment': $data = "`time`, `temperature`, `water`, `light-vis`, `light-ir`"; $streams = "[ { name: 'Temperature', key: 'temperature' }, { name: 'Visible Light', key: 'light-vis' }, { name: 'Infrared Light', key: 'light-ir' }, { name: 'Water', key: 'water' } ]"; $selected = 2; break; case 'photometric': $data = "`photo1`, `photo2`, `photo3`"; $streams = "[ { name: 'Photometer 1', key: 'photo1' }, { name: 'Photometer 2', key: 'photo2' }, { name: 'Photometer 3', key: 'photo3' } ]"; $selected = 3; break; default: $error = "Incorrect data streams selected"; break; } } // generate and run SQL query $sql = "SELECT\n\t".$data."\nFROM\n\tarduino_data\nWHERE\n\t(UNIX_TIMESTAMP(time) >= ".$time1.") AND (UNIX_TIMESTAMP(time) <= ".$time2.")"; $result = $db->query($sql); if (!$result) { $error = 'Etwas stimmte mit dem Query nicht: '.$db->error; } // assemble json object $json = '['; $i = 0; while ($row = $result->fetch_assoc()) { if ($i != 0) $json .= ', '; $json .= '{'; $j = 0; foreach ($row as $k => $v) { if ($k != 'id') { if ($j != 0) $json .= ', '; $json .= "'" . $k . "':"; if ($k == 'time') { $json .= strtotime($v); } else { $json .= $v; } $j++; } } $json .= '}'; $i++; } $json .= ' ]'; $result->close(); unset($result); ?> <!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>Arduino data</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="css/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet"> <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui-1.10.3.custom.min.js"></script> <script> $(document).ready(function(){ $(".datepicker").datepicker(); }); </script> <link href="src/normalize.css" rel="stylesheet" type="text/css"> <link href="src/style.css" rel="stylesheet" type="text/css"> <link href="src/nv.d3.css" rel="stylesheet" type="text/css"> <script src="src/d3.v3.js"></script> <script src="src/crossfilter.js"></script> <script src="src/nv.d3.js"></script> <script src="src/tooltip.js"></script> <script src="src/utils.js"></script> <script src="src/legend.js"></script> <script src="src/axis.js"></script> <script src="src/scatter.js"></script> <script src="src/line.js"></script> <script src="src/lineWithFocusChart.js"></script> <script src="src/stream_layers.js"></script> <script> extend = function(destination, source) { for (var property in source) { if (property in destination) { if ( typeof source[property] === "object" && typeof destination[property] === "object") { destination[property] = extend(destination[property], source[property]); } else { continue; } } else { destination[property] = source[property]; }; } return destination; }; nv.addGraph(function() { var chart = nv.models.lineWithFocusChart(); chart.margin({top: 30, right: 60, bottom: 60, left: 60}); chart.margin2({top: 0, right: 60, bottom: 60, left: 60}); chart.xAxis .tickFormat(function(d) { return d3.time.format('%m/%d/%y %H:%M:%S')(new Date(d*1000)) }) .staggerLabels(true); chart.x2Axis .tickFormat(function(d) { return d3.time.format('%m/%d/%y %H:%M:%S')(new Date(d*1000)) }) .staggerLabels(true); chart.yAxis.tickFormat(d3.format(',.1f')); chart.y2Axis.tickFormat(d3.format(',.0f')); var dimension = testCrossfilterData().data; var data = normalizeData(dimension.top(Infinity), <?php echo $streams; ?> , 'time'); d3.select('#chart svg').datum(data).transition().duration(500).call(chart); nv.utils.windowResize(chart.update); return chart; }); function normalizeData(data, series, xAxis) { var sort = crossfilter.quicksort.by(function(d) { return d[xAxis]; }); var sorted = sort(data, 0, data.length); var result = []; series.forEach(function(serie, index) { result.push({key: serie.name, values: [], color: serie.color}); }); data.forEach(function(data, dataIndex) { series.forEach(function(serie, serieIndex) { result[serieIndex].values.push({x: data[xAxis], y: data[serie.key]}); }); }); return result; }; function testCrossfilterData() { var data = crossfilter(testData()); try { data.data = data.dimension(function(d) { return d.y; }); } catch (e) { console.log(e.stack); } return data; } function testData() { var result = <?php echo $json; ?>; return result; } </script> </head> <body> <h1>Arduino data</h1> <?php if ( isset($error) and $error ) { echo "<div class='ui-widget'>"; echo " <div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>"; echo " <p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span>"; echo " <strong>Alert:</strong> ".$error.".</p>"; echo " </div>"; echo "</div>"; } ?> <div id="chart"> <svg style="height: 500px;"></svg> </div> <h2>Options:</h2> <form action="index.php" method="get"> <h3>Select a time range to display:</h3> <p>From: <input name="date1" class="datepicker" type="text" size="10" maxlength="10" value="<?php echo date("m/d/Y", $time1); ?>" /> <input name="time1" type="text" size="5" maxlength="5" value="<?php echo date("H:i", $time1); ?>" /></p> <p>To: <input name="date2" class="datepicker" type="text" size="10" maxlength="10" value="<?php echo date("m/d/Y", $time2); ?>" /> <input name="time2" type="text" size="5" maxlength="5" value="<?php echo date("H:i", $time2); ?>" /></p> <h3>Select data streams:</h3> <p><label><input type="radio" name="data" value="all" <?php if ($selected == 1) echo "checked='checked'"; ?> />All data streams</label></p> <p><label><input type="radio" name="data" value="environment" <?php if ($selected == 2) echo "checked='checked'"; ?> />Environmental data (temperature, light and water)</label></p> <p><label><input type="radio" name="data" value="photometric" <?php if ($selected == 3) echo "checked='checked'"; ?> />Photometric data (3 photodiodes and average)</label></p> <p><input type="submit" value="Submit" /> <input type="reset" value="Clear" /></p> </form> </body> </html>