From 16455a269c8d8d22a0015458f4ccae2530e7d469 Mon Sep 17 00:00:00 2001
From: Yves Fischer <yvesf-git@xapek.org>
Date: Sat, 10 Dec 2011 01:18:30 +0100
Subject: seperate plotting from console.html

---
 ebus/webapp/static/console.html   | 110 ++++++++------------------------------
 ebus/webapp/static/src/d3.plot.js |  94 ++++++++++++++++++++++++++++++++
 2 files changed, 115 insertions(+), 89 deletions(-)
 create mode 100644 ebus/webapp/static/src/d3.plot.js

(limited to 'ebus/webapp/static')
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
-- 
cgit v1.2.1

