Team:TU-Munich/TUM13 index.php

From 2013.igem.org

<?php

// include db interface and init
include 'lib/db.inc.php';

// set standard values
date_default_timezone_set('UTC');
$time1 = strtotime("10/01/13 11:45:00");
$time2 = strtotime("10/01/13 13:15:00");
$data = "`time`, `temperature`, `water`, `light-vis`, `light-ir`";
$streams = "[ { name: 'Temperature', key: 'temperature', bar: true }, { name: 'Visible Light', key: 'light-vis' }, { name: 'Infrared Light', key: 'light-ir' }, { name: 'Water', key: 'water', bar: true } ]";
$selected = 1;

// check for GET parameters
if ( isset($_GET['date1'], $_GET['time1'], $_GET['date2'], $_GET['time2']) ) {

	// 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
$time = array();
$temp = array();
$water = array();
$vis = array();
$ir = array();

while ($row = $result->fetch_assoc()) {

	foreach ($row as $k => $v) {
		switch ($k) {
			case 'time':
				$time[] = strtotime($v);
				break;
			case 'temperature':
				$temp[] = $v;
				break;
			case 'water':
				$water[] = $v;
				break;
			case 'light-vis':
				$vis[] = $v;
				break;
			case 'light-ir':
				$ir[] = $v;
				break;
		}
	}

}

$json = '[ ';

$json .= '{ "key": "Visible Light", "color": "#1DB828", "bar": true, "values": [ ';
for ($i = 0; $i < sizeof($time); $i++) {
	if ($i != 0) { $json .= ', '; }
	$json .= '['.$time[$i].','.$vis[$i].']';
}
$json .= ' ] }, ';

$json .= '{ "key": "Infrared Light", "color": "#EB2323", "bar": true, "values": [ ';
for ($i = 0; $i < sizeof($time); $i++) {
	if ($i != 0) { $json .= ', '; }
	$json .= '['.$time[$i].','.$ir[$i].']';
}
$json .= ' ] }, ';

$json .= '{ "key": "Temperature", "color": "#8E1FB4", "values": [ ';
for ($i = 0; $i < sizeof($time); $i++) {
	if ($i != 0) { $json .= ', '; }
	$json .= '['.$time[$i].','.$temp[$i].']';
}
$json .= ' ] }, ';

$json .= '{ "key": "Water", "color": "#1F77B4", "values": [ ';
for ($i = 0; $i < sizeof($time); $i++) {
	if ($i != 0) { $json .= ', '; }
	$json .= '['.$time[$i].','.$water[$i].']';
}
$json .= ' ] }';
	
$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/linePlusBarWithFocusChart.js"></script>
	<script src="src/stream_layers.js"></script>
	
	<script>

var testdata = <?php echo $json; ?>.map(function(series) {
  series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
  return series;
});

function getUTCString(datum) {
	var ausgabe = '';
	ausgabe += (datum.getUTCMonth()+1 < 10) ? '0' + datum.getUTCMonth()+1 : datum.getUTCMonth()+1;
	ausgabe += '/';
	ausgabe += (datum.getUTCDate() < 10) ? '0' + datum.getUTCDate() : datum.getUTCDate();
	ausgabe += '/';
	ausgabe += datum.getUTCFullYear();
	ausgabe += ' ';
	ausgabe += (datum.getUTCHours() < 10) ? '0' + datum.getUTCHours() : datum.getUTCHours();
	ausgabe += ':';
	ausgabe += (datum.getUTCMinutes() < 10) ? '0' + datum.getUTCMinutes() : datum.getUTCMinutes();
	ausgabe += ':';
	ausgabe += (datum.getUTCSeconds() < 10) ? '0' + datum.getUTCSeconds() : datum.getUTCSeconds();
	return ausgabe;
}


nv.addGraph(function() {
    var chart = nv.models.linePlusBarWithFocusChart();
      //  .x(function(d,i) { return i });

				chart.margin({top: 60, right: 100, bottom: 60, left: 100});
				chart.margin2({top: 0, right: 60, bottom: 60, left: 60});

    chart.xAxis
			.tickFormat(function(d) {
				jetzt = new Date(d*1000);
				return getUTCString(jetzt);
			})
			.staggerLabels(true);
		chart.x2Axis
			.tickFormat(function(d) {
				jetzt = new Date(d*1000);
				return getUTCString(jetzt);
			})
			.staggerLabels(true);
		chart.y1Axis.axisLabel('Light (lx)').tickFormat(d3.format(',.0f'));
		chart.y2Axis.axisLabel('Temperature (°C)').tickFormat(d3.format(',.1f'));
		chart.y3Axis.tickFormat(d3.format(',.0f'));
		chart.y4Axis.tickFormat(d3.format(',.1f'));
        
    chart.bars.forceY([0]);
    chart.bars2.forceY([0]);
    chart.lines.forceY([0]);
    chart.lines2.forceY([0]);
    nv.log(testdata);
    d3.select('#chart svg')
        .datum(testdata)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

	</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>
		
		<p><input type="submit" value="Submit" /> <input type="reset" value="Clear" /></p>
		
	</form>	

</body>
</html>