diff options
Diffstat (limited to 'schall/templates')
| -rw-r--r-- | schall/templates/index.html | 185 |
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> |