Added Graphs (using dygraph) for Temperature Detail Pages

html/index.html

@@ -16,6 +16,7 @@ desc:   This is the main file for the web-based RaspiControl.
 	<link rel="stylesheet" href="inc/jquery.mobile-1.3.0.min.css" />
 	<script src="inc/jquery-1.8.2.min.js"></script>
 	<script src="inc/jquery.mobile-1.3.0.min.js"></script>
+	<script src="inc/dygraph-combined.js"></script>
 	<script>
 	
 		var updateInterval = 0;
@@ -78,24 +79,38 @@ desc:   This is the main file for the web-based RaspiControl.
       $.ajax({url: "power/" + id});
     }
 
-		/*$(document).bind("pagebeforeshow", function(event,pdata) {
+		$(document).bind("pagebeforeshow", function(event,pdata) {
   		var parsedUrl = $.mobile.path.parseUrl( location.href );
+			var ts=new Date();
 		  switch ( parsedUrl.hash ) {
 		    case "#t1detail":
-			    $("#t1img").attr("src", "tgraph?id=1&from=now-24h&to=now&step=1&w=800&h=240&title=Außen&r="+Math.random());
+					
+					$.getJSON("/temp/1", {"from": (ts.getTime()/1000)-(60*60*24), "to": ts.getTime()/1000}, function(data) {
+						var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
+						g = new Dygraph(document.getElementById("t1graph"), tdata);
+					});
 				  break;
 		    case "#t2detail":
-			    $("#t2img").attr("src", "tgraph?id=2&from=now-24h&to=now&step=1&w=800&h=240&title=Wohnzimmer&r="+Math.random());
+					$.getJSON("/temp/2", {"from": (ts.getTime()/1000)-(60*60*24), "to": ts.getTime()/1000}, function(data) {
+						var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
+						g = new Dygraph(document.getElementById("t2graph"), tdata);
+					});
 				  break;
 		    case "#t3detail":
-			    $("#t3img").attr("src", "tgraph?id=3&from=now-24h&to=now&step=1&w=800&h=240&title=Schlafzimmer&r="+Math.random());
+					$.getJSON("/temp/3", {"from": (ts.getTime()/1000)-(60*60*24), "to": ts.getTime()/1000}, function(data) {
+						var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
+						g = new Dygraph(document.getElementById("t3graph"), tdata);
+					});
 				  break;
 		    case "#t4detail":
-			    $("#t4img").attr("src", "tgraph?id=4&from=now-24h&to=now&step=1&w=800&h=240&title=Netzwerkschrank&r="+Math.random());
+					$.getJSON("/temp/4", {"from": (ts.getTime()/1000)-(60*60*24), "to": ts.getTime()/1000}, function(data) {
+						var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
+						g = new Dygraph(document.getElementById("t4graph"), tdata);
+					});
 				  break;
 
 			}
-		});*/
+		});
 
 		$(document).ready(function() {loadData(); updateInterval = setInterval("loadData()", 600000);})
 	</script>
@@ -196,11 +211,9 @@ desc:   This is the main file for the web-based RaspiControl.
 				</div>
 			</div>
 		</div>
-		<!--div class="ui-grid-solo">
+		<div class="ui-grid-solo">
-			<div class="ui-grid-a" style="text-align: center;">
+			<div class="ui-grid-a" style="text-align: center; width: 95%; height: 300px; margin: 8px;" id="t1graph" />
-				<img src="" id="t1img" style="width: 100%;"/>
 		</div>
-		</div-->
 	</article>
 	<footer data-role="footer" data-position="fixed">
 		<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p>
@@ -237,11 +250,11 @@ desc:   This is the main file for the web-based RaspiControl.
 				</div>
 			</div>
 		</div>
-		<!--div class="ui-grid-solo" style="text-align: center;">
+		<div class="ui-grid-solo" style="text-align: center;">
 			<div class="ui-grid-a">
-				<img src="" id="t2img" style="width: 100%;"/>
+				<div class="ui-grid-a" style="text-align: center; width: 95%; height: 300px; margin: 8px;" id="t2graph" />
+			</div>
 		</div>
-		</div-->
 	</article>
 	<footer data-role="footer" data-position="fixed">
 		<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p>
@@ -278,11 +291,11 @@ desc:   This is the main file for the web-based RaspiControl.
 				</div>
 			</div>
 		</div>
-		<!--div class="ui-grid-solo" style="text-align: center;">
+		<div class="ui-grid-solo" style="text-align: center;">
 			<div class="ui-grid-a">
-				<img src="" id="t3img" style="width: 100%;"/>
+				<div class="ui-grid-a" style="text-align: center; width: 95%; height: 300px; margin: 8px;" id="t3graph" />
+			</div>
 	  </div>
-	  </div-->
 	</article>
 	<footer data-role="footer" data-position="fixed">
 		<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p>
@@ -319,11 +332,11 @@ desc:   This is the main file for the web-based RaspiControl.
 				</div>
 			</div>
 		</div>
-		<!--div class="ui-grid-solo" style="text-align: center;">
+		<div class="ui-grid-solo" style="text-align: center;">
 			<div class="ui-grid-b">
-				<img src="" id="t4img" style="width: 100%;"/>
+				<div class="ui-grid-a" style="text-align: center; width: 95%; height: 300px; margin: 8px;" id="t4graph" />
+			</div>
 		</div>
-		</div-->
 	</article>
 	<footer data-role="footer" data-position="fixed">
 		<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p>

routes/tempdb.js

@@ -24,6 +24,9 @@ exports.getAll = function(req, res) {
 }
 
 exports.getTemp = function(req, res) {
+
+	if (req.query.from === undefined || req.query.to === undefined) {
+	
 		var db = new sqlite3.Database(file);
 		var data = [];
 	
@@ -53,6 +56,21 @@ exports.getTemp = function(req, res) {
 				}
 			});
 		});
+	} else {	
+		var db = new sqlite3.Database(file);
+		var data = [];
+
+		db.serialize(function() {
+			db.each("select timestamp as ts, value as temp from temp_" + req.params.id + " where timestamp >= ? and timestamp <= ?;", req.query.from, req.query.to,
+				function(err, row) {
+					data.push([row.ts, row.temp]);
+				},
+				function(err, num) {
+					res.status(200).send(data);
+				}
+			);
+		});
+	}
 }
 
 exports.addTemp = function(req, res) {

server.js

@@ -25,5 +25,5 @@ srv.get("/", index.index);
 srv.get("/inc/:file", index.inc);
 srv.get("/inc/images/:file", index.img);
 
-srv.listen(80);
+srv.listen(3000);
 console.log("Server started on port 80.");