summaryrefslogtreecommitdiff
path: root/ebus/webapp/static
diff options
context:
space:
mode:
authorYves Fischer <yvesf-git@xapek.org>2011-12-10 01:18:30 +0100
committerYves Fischer <yvesf-git@xapek.org>2011-12-10 01:19:35 +0100
commit16455a269c8d8d22a0015458f4ccae2530e7d469 (patch)
treeb0d11fd12373a0129ee9e2f2cde2a69598d05ee6 /ebus/webapp/static
parent2c9b6c09c99eba4939ea1617036ba5bae6889b2a (diff)
downloadebus-alt-16455a269c8d8d22a0015458f4ccae2530e7d469.tar.gz
ebus-alt-16455a269c8d8d22a0015458f4ccae2530e7d469.zip
seperate plotting from console.html
Diffstat (limited to 'ebus/webapp/static')
-rw-r--r--ebus/webapp/static/console.html110
-rw-r--r--ebus/webapp/static/src/d3.plot.js94
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