diff options
Diffstat (limited to 'schall')
| -rw-r--r-- | schall/templates/index.html | 135 |
1 files changed, 60 insertions, 75 deletions
diff --git a/schall/templates/index.html b/schall/templates/index.html index 7ed729f..cd46a7a 100644 --- a/schall/templates/index.html +++ b/schall/templates/index.html @@ -37,15 +37,8 @@ window.onload = function () { 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 chart_data = [[]]; 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); @@ -63,7 +56,7 @@ window.onload = function () { led.Set('chart.dark', 'rgba(0,0,0,0)'); led.Draw(); - var graph = new RGraph.Line('chart', graph_data[0], graph_data[1]); + var graph = new RGraph.Line('chart', []) graph.Set('chart.title.yaxis', 'dBA'); graph.Set('chart.title.yaxis.pos', 0.4); graph.Set('chart.ylabels.count', 5); @@ -82,44 +75,15 @@ window.onload = function () { 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.bottom', 50); 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) { + function json(path, func) { var req = new XMLHttpRequest(); req.open("GET", path, true); req.onreadystatechange = function() { @@ -129,56 +93,77 @@ window.onload = function () { req.send(); } - function refreshChartHistory() { + function startRefreshData() { + var req_start = new Date().getTime(); + json("now", function(_data) { + var req_end = new Date().getTime() + var d = req_end - req_start; + + data = _data; + + window.setTimeout(startRefreshData, 500 - d); + }); + } + + function startRefreshChartHistory() { + var d = ( 1000 * 60 * 60 * 24 * 4 ); var now = new Date().getTime(); - var from = now - ( 1000 * 60 * 60 * 24 * 2 ); + var from = now - d; var count = 1200; + var interval = d / count; json("range/" + from + "/" + now + "/" + count, function (data) { + var labels = []; + var j = from + interval; + for (var i in data) { + var label = null; + var thisDate = new Date(from + i*interval); + if ( (from + i*interval) > j + 1000*60*60*6) { + j = from + i*interval; + label = ("" + (thisDate.getHours()<10?"0":"") + thisDate.getHours() + + ":" + ( thisDate.getMinutes() < 10 ? "0" : "") + thisDate.getMinutes()); + } + labels.push(label); + } + chartHistory.Set("chart.labels", labels.reverse()); + chartHistory.Set('chart.xticks', d / (1000*60*60*6)); + chartHistory.Set('chart.background.grid.autofit.numvlines', d/ (1000*60*60*6)); + RGraph.Clear(chartHistory.canvas); chartHistory.original_data = [ data ]; chartHistory.Draw() - window.setTimeout( refreshChartHistory, 60 * 1000); + window.setTimeout( startRefreshChartHistory, 60 * 1000); }); } - function init() { - load(); - refreshChartHistory(); + function redrawChart() { + // Gauge + gauge1.value = data['value']; + gauge1.Draw(); - window.setInterval(function () { - // Gauge - gauge1.value = data['value']; - gauge1.Draw(); + // LED + led.text = '' + Math.round(data['value']); + led.Draw() - // LED - led.text = '' + Math.round(data['value']); - led.Draw() + // Line Chart + chart_data.unshift(data['value']); - // 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(); - } + while (chart_data.length > GRAPH_MAX_POINTS) { + chart_data.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); + RGraph.Clear(graph.canvas); + graph.original_data = [ chart_data ]; + graph.Draw(); } + + + json("range/" + (new Date().getTime() - (500 * 1500)), function (data) { + chart_data = data; + startRefreshData(); + startRefreshChartHistory(); + window.setInterval(redrawChart, 500); + }); } </script> </body> |