summaryrefslogtreecommitdiff
path: root/schall/templates/index.html
diff options
context:
space:
mode:
authorYves Fischer <yvesf-git@xapek.org>2011-10-23 21:14:40 +0200
committerYves Fischer <yvesf-git@xapek.org>2011-10-30 11:33:54 +0100
commit770ba5201f5c60b2bb36602ff9d359f641e33125 (patch)
tree2200757f04efbc281c4b3714bfe2e4fe911193b6 /schall/templates/index.html
parent77f5e686612898974e13f2a5df57c20e4e529363 (diff)
downloadmini-octopus-770ba5201f5c60b2bb36602ff9d359f641e33125.tar.gz
mini-octopus-770ba5201f5c60b2bb36602ff9d359f641e33125.zip
Charting with flask, rgraph and custom "timeseries database"
Diffstat (limited to 'schall/templates/index.html')
-rw-r--r--schall/templates/index.html185
1 files changed, 185 insertions, 0 deletions
diff --git a/schall/templates/index.html b/schall/templates/index.html
new file mode 100644
index 0000000..7ed729f
--- /dev/null
+++ b/schall/templates/index.html
@@ -0,0 +1,185 @@
+<html>
+ <head>
+ <script src="static/RGraph/libraries/RGraph.common.core.js" ></script>
+ <script src="static/RGraph/libraries/RGraph.common.effects.js" ></script>
+ <script src="static/RGraph/libraries/RGraph.led.js" ></script>
+ <script src="static/RGraph/libraries/RGraph.gauge.js" ></script>
+ <script src="static/RGraph/libraries/RGraph.line.js" ></script>
+ <style>
+#led {
+ position: absolute;
+ left: 118px;
+ top: 95px;
+ z-index: 1;
+}
+#gauge1 {
+ position: absolute;
+ left: 5px;
+}
+#chart {
+ position: absolute;
+ left: 260px;
+}
+#chartHistory {
+ position: absolute;
+ top: 280px;
+}
+ </style>
+ </head>
+ <body>
+ <canvas width=" 40px" height=" 20px" id="led"></canvas>
+ <canvas width="250px" height="250px" id="gauge1"></canvas>
+ <canvas width=" 0px" height="250px" id="chart"></canvas>
+ <canvas width=" 0px" height="250px" id="chartHistory"></canvas>
+ <script>
+window.onload = function () {
+ document.getElementById("chart").width = window.innerWidth - document.getElementById("gauge1").width - 10;
+ document.getElementById("chartHistory").width = window.innerWidth - 10;
+
+ var data = {"value":null, ts:null};
+ var graph_data = [[],[]];
+ var data_max = 0;
+ var req_start = 0;
+
+ var GRAPH_MAX_POINTS = 1000;
+ for (var i=0; i< GRAPH_MAX_POINTS; ++i) {
+ graph_data[0].push(null);
+ graph_data[1].push(null);
+ }
+
+ var gauge1 = new RGraph.Gauge('gauge1', 20, 70);
+ gauge1.Set('chart.text.size', 8);
+ gauge1.Set('chart.units.post', 'dbA');
+ gauge1.Set('chart.green.color', 'lightGreen');
+ gauge1.Set('chart.yellow.color', 'yellow');
+ gauge1.Set('chart.red.color', 'red');
+ gauge1.Set('chart.green.end', 40);
+ gauge1.Set('chart.red.start', 60);
+ gauge1.Draw();
+
+ var led = new RGraph.LED('led', '00');
+ led.Set('chart.light', 'red');
+ led.Set('chart.zoom.background', false);
+ led.Set('chart.dark', 'rgba(0,0,0,0)');
+ led.Draw();
+
+ var graph = new RGraph.Line('chart', graph_data[0], graph_data[1]);
+ graph.Set('chart.title.yaxis', 'dBA');
+ graph.Set('chart.title.yaxis.pos', 0.4);
+ graph.Set('chart.ylabels.count', 5);
+ graph.Set('chart.gutter.top', 5);
+ graph.Set('chart.gutter.bottom', 5);
+ graph.Set('chart.gutter.left', 60);
+ graph.Set('chart.gutter.right', 5);
+ graph.Set('chart.linewidth', [3,1]);
+ graph.Set('chart.colors', ["red", "black"]);
+ graph.Set('chart.ymin', 20);
+ graph.Set('chart.ymax', 70);
+ graph.Set('chart.xticks', 25);
+
+ chartHistory = new RGraph.Line('chartHistory', []);
+ chartHistory.Set('chart.title.yaxis', 'dBA');
+ chartHistory.Set('chart.title.yaxis.pos', 0.4);
+ chartHistory.Set('chart.ylabels.count', 5);
+ chartHistory.Set('chart.gutter.top', 5);
+ chartHistory.Set('chart.gutter.bottom', 5);
+ chartHistory.Set('chart.gutter.left', 60);
+ chartHistory.Set('chart.gutter.right', 5);
+ chartHistory.Set('chart.linewidth', [1]);
+ chartHistory.Set('chart.colors', ["black"]);
+ chartHistory.Set('chart.ymin', 20);
+ chartHistory.Set('chart.ymax', 70);
+ chartHistory.Set('chart.xticks', 25);
+
+
+ function load() {
+ var http = new XMLHttpRequest();
+ http.open("GET", "now", true);
+ http.onreadystatechange = function() {
+ if (http.readyState == 4) {
+ var req_end = ( new Date ).getTime()
+ data = JSON.parse(http.responseText);
+
+ var d = req_end - req_start;
+ window.setTimeout(load, 500 - d);
+ }
+ }
+ req_start = ( new Date ).getTime();
+ http.send(null);
+ }
+
+ var httpinit = new XMLHttpRequest();
+ httpinit.open("GET", "range/", true);
+ httpinit.onreadystatechange = function(){
+ if (httpinit.readyState == 4) {
+ graph_data[1] = JSON.parse(httpinit.responseText);
+ // Start polling
+ init();
+ }
+ }
+ httpinit.send()
+
+ function json(path, func) {
+ var req = new XMLHttpRequest();
+ req.open("GET", path, true);
+ req.onreadystatechange = function() {
+ if (req.readyState == 4)
+ func( JSON.parse( req.responseText) );
+ };
+ req.send();
+ }
+
+ function refreshChartHistory() {
+ var now = new Date().getTime();
+ var from = now - ( 1000 * 60 * 60 * 24 * 2 );
+ var count = 1200;
+ json("range/" + from + "/" + now + "/" + count, function (data) {
+ RGraph.Clear(chartHistory.canvas);
+ chartHistory.original_data = [ data ];
+ chartHistory.Draw()
+
+ window.setTimeout( refreshChartHistory, 60 * 1000);
+ });
+ }
+
+ function init() {
+ load();
+ refreshChartHistory();
+
+ window.setInterval(function () {
+ // Gauge
+ gauge1.value = data['value'];
+ gauge1.Draw();
+
+ // LED
+ led.text = '' + Math.round(data['value']);
+ led.Draw()
+
+ // Line Chart
+ if (data['value'] > data_max) {
+ data_max = data['value'];
+ }
+ graph_data[0].unshift(data['value']);
+
+ while (graph_data[0].length > GRAPH_MAX_POINTS) {
+ graph_data[0].pop();
+ }
+
+ RGraph.Clear(graph.canvas);
+ graph.original_data = graph_data;
+ graph.Draw();
+
+ }, 500);
+ window.setInterval(function() {
+ // Line Chart - Max
+ graph_data[1].unshift(data_max);
+ data_max = 0;
+ while (graph_data[1].length > GRAPH_MAX_POINTS) {
+ graph_data[1].pop();
+ }
+ }, 10000);
+ }
+}
+ </script>
+ </body>
+</html>