Controller/Temperature.php

@@ -4,28 +4,36 @@ class Temperature extends Controller {
 
 	private function GetCurrentTemperatureData() {
 		$temps=HomeAutomationService::GetBothTemperatures();
-		$vars=array();
-		$vars['currentTarget']=HomeAutomationService::GetTargetTemperature();
-		$vars['currentMode']=HomeAutomationService::GetCurrentMode();
-		$vars['currentTemperature']=$temps->inside;
-		$vars['currentOutsideTemperature']=$temps->outside;
+		$vars=new stdClass();
+		$vars->target=HomeAutomationService::GetTargetTemperature();
+		$vars->mode=HomeAutomationService::GetCurrentMode();
+		$vars->temperature=$temps->inside;
+		$vars->outsideTemperature=$temps->outside;
 		return $vars;
 	}
 
-	public function Index() {
-		return new View("Temperature/index.view", $this->GetCurrentTemperatureData());
+	private function GetLast24HrReadings(ITemperatureReadingRepository $tempRepo) {
+		$dateTo=new DateTime();
+		$dateFrom=clone $dateTo;
+		$dateFrom->sub(new DateInterval("P1D"));
+		return $tempRepo->GetRange($dateFrom, $dateTo);
+	}
+	
+	public function Index(ITemperatureReadingRepository $tempRepo) {
+		return new View("Temperature/index.view",
+			array(
+				"current"=>$this->GetCurrentTemperatureData(),
+				"readings"=>$this->GetLast24HrReadings($tempRepo)
+			)
+		);
 	}
 	
 	public function GetTemperatureData() {
 		return json_encode($this->GetCurrentTemperatureData());
 	}
 
-	public function GetReadings(ITemperatureReadingRepository $tempRepo, $range=1) {
-		$dateTo=new DateTime();
-		$dateFrom=clone $dateTo;
-		$dateFrom->sub(new DateInterval("P1D"));
-		$readings=$tempRepo->GetRange($dateFrom, $dateTo);
-		return json_encode($readings);
+	public function GetReadings(ITemperatureReadingRepository $tempRepo) {
+		return json_encode($this->GetLast24HrReadings($tempRepo));
 	}
 
 	public function TakeReading() {

Model/TemperatureReading.php

@@ -8,9 +8,9 @@ class TemperatureReading extends DBObject implements JsonSerializable {
 
 	public function jsonSerialize() {
 		$obj=new stdClass();
-		$obj->Timestamp=strtotime($this->Timestamp);
-		$obj->Inside=$this->Inside;
-		$obj->Outside=$this->Outside;
+		$obj->Timestamp=(int)strtotime($this->Timestamp);
+		$obj->Inside=(float)$this->Inside;
+		$obj->Outside=(float)$this->Outside;
 		return $obj;
 	}
 

View/Temperature/index.view

@@ -1,24 +1,27 @@
 @Init{
-$this->RegisterJSFile("https://www.google.com/jsapi");
-$this->RegisterJSFile("services/temperatureService.js");
-$this->RegisterJSFile("controllers/temperature.js");
-$this->RegisterCSSFile("temperature.css");
+	$this->RegisterJSFile("https://www.google.com/jsapi");
+	$this->RegisterJSFile("services/temperatureService.js");
+	$this->RegisterJSFile("controllers/temperature.js");
+	$this->RegisterCSSFile("temperature.css");
+	$this->RegisterJSFile("directives/googleChart.js");
 }@
 @Title{Temperature Logs}@
 @Body{
 <div ng-controller="temperature">
 	<div style="text-align: center">
 		<div class="circle currentTemp">
-			<div class="background" style="top:{{100 - getGraphPercentage()}}%; background-color:rgb({{getRed() | number: 0}}, {{getGreen() | number: 0}}, {{getBlue() | number: 0}})" ng-init="temperatureData.currentTarget=<?=$currentTarget?>"></div>
-			<div class="reading" ng-init="temperatureData.currentTemperature=<?=$currentTemperature?>">
-				{{temperatureData.currentTemperature | number: 1}}&deg;C
+			<div class="background" style="top:{{100 - getGraphPercentage()}}%; background-color:rgb({{getRed() | number: 0}}, {{getGreen() | number: 0}}, {{getBlue() | number: 0}})"></div>
+			<div class="reading">
+				{{temperatureData.temperature | number: 1}}&deg;C
 			</div>
 			<div class="circle shadow"></div>
 		</div>
 	</div>
-	<div ng-init="temperatureData.currentOutsideTemperature=<?=$currentOutsideTemperature?>">
-		Outside: {{temperatureData.currentOutsideTemperature | number: 1}}
+	<div>
+		Outside: {{temperatureData.outsideTemperature | number: 1}}
 	</div>
-	<div id="linechart">loading...</div>
+	<google-chart data="readings" curveType="function" v-axis-title="Temperature" legend-position="top"></google-chart>
+	<scope-init value="readings"><?=json_encode($readings)?></scope-init>
+	<scope-init value="temperatureData"><?=json_encode($current)?></scope-init>
 </div>
 }@

View/Weight/index.view

@@ -2,7 +2,6 @@
 	$this->RegisterJSFile("services/weightService.js");
 	$this->RegisterJSFile("controllers/weight.js");
 	$this->RegisterJSFile("directives/googleChart.js");
-	$this->RegisterJSFile("directives/scopeInit.js");
 }@
 @Title{Weight}@
 @CSS{

scripts/controllers/temperature.js

@@ -1,84 +1,37 @@
 app.controller('temperature', function($scope, temperatureService, $interval) {
-	var graphAdjustment = 10;
-
-	//google.load('visualization', '1.1', {packages: ['line'], callback:function(){
-	google.load('visualization', '1', {packages: ['corechart'], callback: function() {
-		google.setOnLoadCallback(initChart);
-	}});
-
-	var chart;
+	$scope.readings = [];
+	$scope.temperatureData = {};
 
-	var chartOptions = {
-		chart: {
-			title: 'Temperature Logs',
-		},
-		height: 400,
-		curveType: 'function',
-		backgroundColor: 'transparent',
-		legend:{
-			position: 'top',
-			alignment: 'start'
-		},
-		series: {
-			0:{axis:'Inside'},
-			1:{axis:'Outside'}
-		},
-		vAxis: {
-			title: "Temperature"
+	$scope.$watch("readings", function() {
+		for (var i = 0; i < $scope.readings.length; i++) {
+			$scope.readings[i].Timestamp = new Date($scope.readings[i].Timestamp * 1000);
 		}
-	};
-
-	function initChart() {
-		chart = new google.visualization.LineChart(document.getElementById('linechart'));
-		startGettingData();
-	}
-
-	function getTooltipString(date, reading){
-		var dateString=date.toLocaleTimeString(navigator.language, {hour: "2-digit", minute: "2-digit"});
-		return 'Time: '+dateString+'\nReading: '+reading;
-	}
-
-	function drawChart(data) {
-		var chartData = new google.visualization.DataTable();
-		chartData.addColumn('date', 'Timestamp');
-		chartData.addColumn('number', 'Inside');
-		chartData.addColumn({type: 'string', role: 'tooltip'});
-		chartData.addColumn('number', 'Outside');
-		chartData.addColumn({type: 'string', role: 'tooltip'});
-		angular.forEach(data, function(datum) {
-			var date = new Date(datum.Timestamp * 1000);
-			var inside = round(parseFloat(datum.Inside), 1);
-			var outside = round(parseFloat(datum.Outside), 1);
-			chartData.addRow([date, inside, getTooltipString(date,inside), outside, getTooltipString(date,outside)]);
-		});
-		chart.draw(chartData, chartOptions);
-	}
-
-	function startGettingData() {
-		getData();
-		$interval(getData, 60000);
-	}
+	});
 
 	function getData() {
-		temperatureService.getReadings().then(drawChart);
+		temperatureService.getReadings().then(function(data) {
+			$scope.readings = data;
+		});
 	}
+	$interval(getData, 60000);
 
 	function updateCurrentTemperature() {
 		temperatureService.getCurrentTemperatureData().then(function(data) {
 			$scope.temperatureData = data;
 		});
 	}
-
 	$interval(updateCurrentTemperature, 5000);
 
+	var graphAdjustment = 10;
+	
 	$scope.getGraphPercentage = function() {
-		var graphTarget = ($scope.temperatureData.currentTarget * 1.2) - graphAdjustment;
-		var graphTemperature = $scope.temperatureData.currentTemperature - graphAdjustment;
+		var graphTarget = ($scope.temperatureData.target * 1.2) - graphAdjustment;
+		var graphTemperature = $scope.temperatureData.temperature - graphAdjustment;
 		return Math.min((graphTemperature / graphTarget) * 100, 100);
 	};
 
 	function getPercentage() {
-		return (($scope.temperatureData.currentTarget - graphAdjustment) / (($scope.temperatureData.currentTemperature * 1.5) - graphAdjustment)) * 100;
+		return (($scope.temperatureData.target - graphAdjustment) / (($scope.temperatureData.temperature * 1.5) - graphAdjustment)) * 100;
 	}
 
 	$scope.getRed = function() {
@@ -99,7 +52,5 @@ app.controller('temperature', function($scope, temperatureService, $interval) {
 		percentage /= 25;
 		return 255 * (1 - Math.max(percentage, 0));
 	};
-
-	$scope.temperatureData = {};
 });
 

scripts/directives/googleChart.js

@@ -6,26 +6,30 @@ app.directive('googleChart', function() {
 		templateUrl: '/scripts/directives/templates/googleChart.html',
 		scope: {
 			data: '=',
-			headings: '=',
+			headings: '=?',
 			height: '='
 		},
 		link: function(scope, element, attributes) {
 			var chartLoaded = false;
-			
+
 			if (!scope.headings)
 				scope.headings = [];
-			
+
 			var chartData, chart;
 			var chartOptions = {
 				title: attributes.title,
 				height: scope.height || 400,
+				curveType: attributes.curveType,
 				legend: {
 					position: attributes.legendPosition || 'right'
 				},
+				vAxis: {
+					title: attributes.vAxisTitle
+				},
 				backgroundColor: attributes.background || 'transparent'
 			};
 
-			function drawChart() {
+			function setupChart() {
 				if (!chartLoaded)
 					return;
 
@@ -56,6 +60,10 @@ app.directive('googleChart', function() {
 				});
 
 				chart = new google.visualization.LineChart(element[0]);
+				drawChart();
+			}
+			
+			function drawChart(){
 				chart.draw(chartData, chartOptions);
 			}
 
@@ -65,12 +73,16 @@ app.directive('googleChart', function() {
 					packages: ['corechart'],
 					callback: function() {
 						chartLoaded = true;
-						google.setOnLoadCallback(drawChart);
+						google.setOnLoadCallback(setupChart);
 					}
 				});
 			});
 
-			scope.$watch("data", function(v){
+			scope.$watch("data", function(v) {
+				setupChart();
+			});
+			
+			angular.element(window).bind('resize', function () {
 				drawChart();
 			});
 		}

scripts/directives/scopeInit.js

@@ -1,5 +1,6 @@
 app.directive("scopeInit", function(){
 	return {
+        restrict : 'E',
 		link:function(scope, element, attributes){
 			var content=element[0].innerHTML.trim();
 			scope[attributes.value]=JSON.parse(content);

template.php

@@ -4,6 +4,7 @@ $angularVersion="1.5.0";
 $this->RegisterJSFile("javascript.js");
 $this->RegisterJSFile("controllers/main.js");
 $this->RegisterJSFile("directives/equalHeightWidth.js");
+$this->RegisterJSFile("directives/scopeInit.js");
 
 function FormatURI(URI $uri, $base=""){
 	$image=$uri->GetImage();