diff options
Diffstat (limited to 'ebus')
| -rw-r--r-- | ebus/webapp/static/console.html | 110 | ||||
| -rw-r--r-- | ebus/webapp/static/src/d3.plot.js | 94 |
2 files changed, 115 insertions, 89 deletions
diff --git a/ebus/webapp/static/console.html b/ebus/webapp/static/console.html index 71a861c..e905c28 100644 --- a/ebus/webapp/static/console.html +++ b/ebus/webapp/static/console.html @@ -1,7 +1,9 @@ <html> <head> - <script src="lib/d3-v2.6.1/d3.js"></script> - <script src="lib/d3-v2.6.1/d3.time.js"></script> + <title>Console</title> + <script src="lib/d3-v2.6.1/d3.js" type="text/javascript"></script> + <script src="lib/d3-v2.6.1/d3.time.js" type="text/javascript"></script> + <script src="src/d3.plot.js" type="text/javascript"></script> <style> path { stroke: steelblue; @@ -36,24 +38,27 @@ "tempkollektorWert" : "heizkreisregler9.solarDaten.tempKollektor", "boilerWert" : "feuerungsautomat1.betriebsdatenRegler1.boilerTemperatur" }; + function process(data) { for (var i in data) { - var row = data[i]; - var caption = "[" + d3.format("02d")(row.timestamp) + "] " + row.name + " Value: " + row.value_real + " - " + row.value_string; - - d3.select("#log").insert("div", "div").text(caption); - - for (var mapping_element_id in mapping) { - var mapping_sensor_name = mapping[mapping_element_id]; - if (row.name == mapping_sensor_name) { - d3.select("#" + mapping_element_id).text("" + row.value_real); - } + var row = data[i]; + var caption = "[" + d3.format("02d")(row.timestamp) + "] " + row.name + " Value: " + row.value_real + " - " + row.value_string; + + d3.select("#log").insert("div", "div").text(caption); + + for (var mapping_element_id in mapping) { + var mapping_sensor_name = mapping[mapping_element_id]; + if (row.name == mapping_sensor_name) { + d3.select(document.getElementById(mapping_element_id)) + .text(""+row.value_real); } } + } } function reload(time_stop) { d3.json("../stream/" + time_stop, function(resp) { + if (resp == null) return; process(resp.data); reload(resp.time_stop); }); @@ -65,7 +70,8 @@ // Create Popup for (var mapping_element_id in mapping) { - d3.select("#" + mapping_element_id).on("click", function() { + d3.select(document.getElementById(mapping_element_id)) + .on("click", function() { var elem = d3.select( this ); var sensor_name = mapping[elem.attr("id")]; var popup = d3.select("body") @@ -79,88 +85,14 @@ popup.append("div") .text(sensor_name); - var w = 550, h = 200, margin = 30; - var plot = popup.append("svg:svg") - .classed("plot", true) - .attr("width", w) - .attr("height", h); - - var wait_indicator = plot.append("svg:text") - .attr("x", w/2) - .attr("y", h/2) - .text("Bitte Warten"); - var startdate = (new Date().getTime()/1000) - 7*60*60*24 var enddate = (new Date().getTime()/1000) + var plot = d3.plot(popup); d3.json("../sensor/"+sensor_name+"/" + startdate + "/" + enddate, function(resp) { var data = resp.data.map(function(d) { return [new Date(d[0]), d[1]]; }) - var x_min = d3.min(data, function(d){return d[0]}), - x_max = d3.max(data, function(d){return d[0]}), - y_min = d3.min(data, function(d){return d[1]}), - y_max = d3.max(data, function(d){return d[1]}); - - var x = d3.time.scale() - .domain([x_min, x_max]) - .range([0+margin, w-margin]); - - var y = d3.scale.linear() - .domain([y_min, y_max]) - .range([0+margin, h]); - - - var g = plot.append("svg:g") - .attr("transform", "translate(0, "+h+")"); - - var line = d3.svg.line() - .x(function(d,i){ return x(d[0]); }) - .y(function(d) {return -1*y(d[1]);}); - - g.append("svg:path") - .attr("d", line(data)); - - // Axes X-Line - g.append("svg:line") - .attr("x1", 0) - .attr("y1", -1*y(y_min)) - .attr("x2", x(x_max)) - .attr("y2", -1 * y(y_min)); - - - // Tick Labels - var tick_format = d3.time.format("%d.%m"); - g.selectAll(".xlabel") - .data(x.ticks(5)).enter() - .append("svg:text") - .text(function(d){return tick_format(d) }) - .attr("x", function(d) { return x(d) }) - .attr("y", 0) - .attr("text-anchor", "middle"); - - g.selectAll(".ylabel") - .data(y.ticks(5)).enter() - .append("svg:text") - .text(String) - .attr("x", 0) - .attr("y", function(d) {return -1*y(d)}) - .attr("text-anchor", "right"); - - // X-Lines - g.selectAll(".xlines") - .data(x.ticks(5)).enter() - .append("svg:line") - .style("fill", "none") - .style("stroke", "#000000") - .style("stroke-width", 0.5) - .style("stroke-dasharray", "6,1") - .attr("x1", function(d){return x(d)}) - .attr("y1", -1*y(y_min)+(margin/2)) - .attr("x2", function(d){return x(d)}) - .attr("y2", -1*y(y_max)); - - // - wait_indicator.remove(); + plot.draw(data); }); }); } diff --git a/ebus/webapp/static/src/d3.plot.js b/ebus/webapp/static/src/d3.plot.js new file mode 100644 index 0000000..e50cb5e --- /dev/null +++ b/ebus/webapp/static/src/d3.plot.js @@ -0,0 +1,94 @@ +(function(){ + +function d3_plot(container) { + this.opt = { + w:550, h:200, margin:30 + }; + this.element = container.append("svg:svg") + .classed("d3.plot_plot",true) + .attr("width", this.opt.w) + .attr("height", this.opt.h); + + this.element.append("svg:text") + .classed("d3-plot_wait", true) + .attr("x", this.opt.w/2) + .attr("y", this.opt.h/2) + .attr("text-anchor", "middle") + .text("Bitte warten"); +}; + +d3_plot.prototype = { + draw: function(data) { + var x_min = d3.min(data, function(d){return d[0];}), + x_max = d3.max(data, function(d){return d[0];}), + y_min = d3.min(data, function(d){return d[1];}), + y_max = d3.max(data, function(d){return d[1];}); + + var x = d3.time.scale() + .domain([x_min, x_max]) + .range([0+this.opt.margin, this.opt.w-this.opt.margin]); + + var y = d3.scale.linear() + .domain([y_min, y_max]) + .range([0+this.opt.margin, this.opt.h-(this.opt.margin/2)]); + + + var g = this.element.append("svg:g") + .attr("transform", "translate(0, "+this.opt.h+")"); + + var line = d3.svg.line() + .x(function(d,i){ return x(d[0]); }) + .y(function(d) {return -1*y(d[1]);}); + + g.append("svg:path") + .attr("d", line(data)); + + // Axes X-Line + g.append("svg:line") + .attr("x1", 0) + .attr("y1", -1*y(y_min)) + .attr("x2", x(x_max)) + .attr("y2", -1 * y(y_min)); + + + // Tick Labels + var tick_format = d3.time.format("%d.%m"); + g.selectAll(".xlabel") + .data(x.ticks(5)).enter() + .append("svg:text") + .text(function(d){return tick_format(d);}) + .attr("x", function(d) {return x(d);}) + .attr("y", -5) + .attr("text-anchor", "middle"); + + g.selectAll(".ylabel") + .data(y.ticks(5)).enter() + .append("svg:text") + .text(String) + .attr("x", 0) + .attr("y", function(d) {return -1*y(d);}) + .attr("text-anchor", "right"); + + // X-Lines + g.selectAll(".xlines") + .data(x.ticks(5)).enter() + .append("svg:line") + .style("fill", "none") + .style("stroke", "#000000") + .style("stroke-width", 0.5) + .style("stroke-dasharray", "6,1") + .attr("x1", function(d){return x(d);}) + .attr("y1", -1*y(y_min)+(this.opt.margin/3)) + .attr("x2", function(d){return x(d);}) + .attr("y2", -1*y(y_max)); + + // + this.element.select(".d3-plot_wait").style("display","none"); + } +}; + +d3.plot = function(container) { + return new d3_plot(container); +}; + +})();
\ No newline at end of file |