Added Graphs (using dygraph) for Temperature Detail Pages

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

File diff suppressed because one or more lines are too long

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());
$.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; 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) {
var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
g = new Dygraph(document.getElementById("t2graph"), tdata);
});
break; 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) {
var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
g = new Dygraph(document.getElementById("t3graph"), tdata);
});
break; 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) {
var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
g = new Dygraph(document.getElementById("t4graph"), tdata);
});
break; 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>

View file

@ -24,6 +24,9 @@ exports.getAll = function(req, res) {
} }
exports.getTemp = function(req, res) { exports.getTemp = function(req, res) {
if (req.query.from === undefined || req.query.to === undefined) {
var db = new sqlite3.Database(file); var db = new sqlite3.Database(file);
var data = []; 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) { exports.addTemp = function(req, res) {

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.");