refactor svg ui

1 files changed, 80 insertions, 0 deletions

diff --git a/ebus/webapp/static/src/d3.control.js b/ebus/webapp/static/src/d3.control.js
new file mode 100644
index 0000000..def7c65
--- /dev/null
+++ b/ebus/webapp/static/src/d3.control.js
@@ -0,0 +1,80 @@
+var d3_control = function(element, svgurl, mapping) {
+    this.mapping = mapping;
+    this.element = element;
+    var control = this;
+    d3.xml(svgurl, "image/svg+xml", function(xml) {
+	       element[0][0].appendChild(xml.documentElement);
+	       // Setup mapping
+	       for (var element_id in this.mapping) {
+		   control.initElement(element_id);
+	       }
+	       d3.json("../all_values", function(response) {
+			   control.process(response.data);
+			   control.reload(response.time_stop);
+		       });
+	   });
+};
+
+d3_control.prototype = {
+    initElement:function(element_id) {
+	var options = this.mapping[element_id];
+	d3.select(document.getElementById(element_id))
+	    .on("click", function() {
+		    var elem = d3.select(this);
+		    var popup = d3.select("body")
+			.append("div")
+			.classed("popup", true)
+			.style("top", d3.event.clientY-5)
+			.style("left", d3.event.clientX-5)
+			.on("click", function() {
+				d3.select(this).remove();
+			    });
+		    popup.append("div")
+			.text(sensor_name);
+
+		    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]];
+							 });
+				plot.draw(data);
+			    });
+		});
+    },
+    process:function(data) {
+        for (var i in data) {
+            var row = data[i];
+
+	    if (typeof(console) != "undefined") {
+		console.log("[" + d3.format("02d")(row.timestamp) + "] " + 
+			    row.name + " Value: " + row.value_real + " - " + 
+			    row.value_string);
+	    }
+
+            for (var element_id in this.mapping) {
+                var options = this.mapping[element_id];
+                if (row.name == options.sensor){
+                    d3.select(document.getElementById(element_id))
+                        .text(""+row.value_real);
+                }
+            }
+        }
+    },
+    reload:function(time_stop) {
+	var url = "../stream";
+	if (time_stop != null)
+	    url += "/" + time_stop;
+	var control = this;
+	d3.json(url, function(response) {
+		    control.process(response.data);
+		    control.reload(response.time_stop);
+		});
+    }
+};
+
+d3.control = function(element, svgurl, mapping) {
+    return new d3_control(element,svgurl,mapping);
+};
\ No newline at end of file