Team:TU-Munich/TUM13 index.php

From 2013.igem.org

(Difference between revisions)
Revision as of 17:17, 28 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>