seiichiro/TempTracker
1
0
Fork 0
Code Releases Activity

Added Graphs (using dygraph) for Temperature Detail Pages

Browse source
This commit is contained in:
seiichiro 2015-02-15 01:47:20 +01:00
parent 630b084b17
commit 1f2284e169
4 changed files with 89 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
html/inc/dygraph-combined.js Normal file
View file

File diff suppressed because one or more lines are too long

61
html/index.html
View file

@ -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" /> <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-1.8.2.min.js"></script>
<script src="inc/jquery.mobile-1.3.0.min.js"></script> <script src="inc/jquery.mobile-1.3.0.min.js"></script>
<script src="inc/dygraph-combined.js"></script>
<script> <script>
var updateInterval = 0; var updateInterval = 0;
@ -78,24 +79,38 @@ desc: This is the main file for the web-based RaspiControl.
$.ajax({url: "power/" + id}); $.ajax({url: "power/" + id});
} }
/*$(document).bind("pagebeforeshow", function(event,pdata) { $(document).bind("pagebeforeshow", function(event,pdata) {
var parsedUrl = $.mobile.path.parseUrl( location.href ); var parsedUrl = $.mobile.path.parseUrl( location.href );
var ts=new Date();
switch ( parsedUrl.hash ) { switch ( parsedUrl.hash ) {
case "#t1detail": 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());
break; $.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": 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) {
break; var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
g = new Dygraph(document.getElementById("t2graph"), tdata);
});
break;
case "#t3detail": 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) {
break; var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
g = new Dygraph(document.getElementById("t3graph"), tdata);
});
break;
case "#t4detail": 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) {
break; 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);}) $(document).ready(function() {loadData(); updateInterval = setInterval("loadData()", 600000);})
</script> </script>
@ -196,11 +211,9 @@ desc: This is the main file for the web-based RaspiControl.
</div> </div>
</div> </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>
</div-->
</article> </article>
<footer data-role="footer" data-position="fixed"> <footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p> <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>
</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"> <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--> </div>
</article> </article>
<footer data-role="footer" data-position="fixed"> <footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p> <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>
</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"> <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--> </div>
</article> </article>
<footer data-role="footer" data-position="fixed"> <footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p> <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>
</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"> <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--> </div>
</article> </article>
<footer data-role="footer" data-position="fixed"> <footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p> <p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p>

72
routes/tempdb.js
View file

@ -24,35 +24,53 @@ exports.getAll = function(req, res) {
} }
exports.getTemp = function(req, res) { exports.getTemp = function(req, res) {
var db = new sqlite3.Database(file);
var data = [];
db.serialize(function() { if (req.query.from === undefined || req.query.to === undefined) {
db.get("SELECT id, name, lasttemp as temp, lastupd as ts FROM sensors WHERE id = ?;", req.params.id, function(err, row) {
if (row !== undefined) { var db = new sqlite3.Database(file);
data = row; var data = [];
db.get("SELECT avg(value) as avg, max(value) as max, timestamp from temp_" + data.id + ";", function(err, row) {
if (row !== undefined) { db.serialize(function() {
data.avg = row.avg; db.get("SELECT id, name, lasttemp as temp, lastupd as ts FROM sensors WHERE id = ?;", req.params.id, function(err, row) {
data.max = row.max; if (row !== undefined) {
data.tsmax = row.timestamp; data = row;
db.get("SELECT min(value) as min, timestamp from temp_" + data.id + ";", function(err, row) { db.get("SELECT avg(value) as avg, max(value) as max, timestamp from temp_" + data.id + ";", function(err, row) {
if (row !== undefined) { if (row !== undefined) {
data.min = row.min; data.avg = row.avg;
data.tsmin = row.timestamp; data.max = row.max;
db.close(); data.tsmax = row.timestamp;
res.type("application/json"); db.get("SELECT min(value) as min, timestamp from temp_" + data.id + ";", function(err, row) {
res.status(200).send(data); if (row !== undefined) {
} data.min = row.min;
}); data.tsmin = row.timestamp;
} db.close();
}); res.type("application/json");
} else { res.status(200).send(data);
db.close(); }
res.status(400).send({"errid": 3, "errtxt": "Sensor does not exist"}); });
} }
});
} else {
db.close();
res.status(400).send({"errid": 3, "errtxt": "Sensor does not exist"});
}
});
}); });
}); } 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) { exports.addTemp = function(req, res) {

2
server.js
View file

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