From 1dc2d432b455575b4a43c62f01a2ea7400589575 Mon Sep 17 00:00:00 2001
From: Yves Fischer <yvesf-git@xapek.org>
Date: Tue, 6 Dec 2011 23:13:15 +0100
Subject: simple plotting in console.html

---
 ebus/webapp/static/console.html | 82 +++++++++++++++++++++++++++++++++--------
 1 file changed, 66 insertions(+), 16 deletions(-)
diff --git a/ebus/webapp/static/console.html b/ebus/webapp/static/console.html
index c32445c..054d5d4 100644
--- a/ebus/webapp/static/console.html
+++ b/ebus/webapp/static/console.html
@@ -1,8 +1,21 @@
 <html>
 <head>
-    <script src="lib/jquery-1.6.2/jquery-1.6.2.min.js"></script>
     <script src="lib/d3-v2.6.1/d3.js"></script>
     <style>
+        path {
+            stroke: steelblue;
+            stroke-width: 2;
+            fill: none;
+        }
+
+        line {
+            stroke: black;
+        }
+        div.popup {
+            position: absolute;
+            border: 2px solid gray;
+            background-color: yellow;
+        }
         #log {
             height: 300px;
             overflow-y: scroll;
@@ -21,20 +34,16 @@
         "boilerWert" : "feuerungsautomat1.betriebsdatenRegler1.boilerTemperatur"
     };
     function timeToString(timestamp) {
+        var f = d3.format("02d");
         var d = new Date();
-        return "" + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
+        return f(d.getHours()) + ":" + f(d.getMinutes()) + ":" + f(d.getSeconds());
     }
     function log(data) {
         for (var i in data) {
                 var row = data[i];
+                var caption = "[" + timeToString(row.timestamp) + "] " + row.name + " Value: " + row.value_real + " - " + row.value_string;
 
-                var sensor_name = data[i][0];
-                var timestamp = data[i][1];
-                var value = data[i][2];
-                var caption = "" + timeToString(row.timestamp) + ": " + row.name + " Value: " + row.value_real + " - " + row.value_string;
-
-                jQuery("div#log").prepend(
-                    jQuery("<div>").text(caption));
+                d3.select("#log").insert("div", "div").text(caption);
 
                 for (var mapping_element_id in mapping) {
                     var mapping_sensor_name = mapping[mapping_element_id];
@@ -46,22 +55,63 @@
     }
 
     function reload(time_stop) {
-        jQuery.getJSON("../stream/" + time_stop, function(resp) {
+        d3.json("../stream/" + time_stop, function(resp) {
             log(resp.data);
             reload(resp.time_stop);
         });
     }
 
-    jQuery(document).ready(function() {
+    d3.xml("draw.svg", "image/svg+xml", function(xml) {
+        // Put SVG Data into the DOM
+        d3.select("#image")[0][0].appendChild(xml.documentElement);
+        // Create Popup
+        for (var mapping_element_id in mapping) {
+            d3.select("#" + mapping_element_id).on("click", function() {
+                var elem = d3.select( this );
+                var sensor_name = mapping[elem.attr("id")];
+                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);
 
-        d3.xml("draw.svg", "image/svg+xml", function(xml) {
-            jQuery("#image")[0].appendChild(xml.documentElement);
-        });
+                var w = 550, h = 200, margin = 20;
+                var plot = popup.append("svg:svg")
+                            .attr("width", w)
+                            .attr("height", h);
+
+                var startdate = (new Date().getTime()/1000) - 1*60*60*24
+                var enddate = (new Date().getTime()/1000)
+                d3.json("../sensor/"+sensor_name+"/" + startdate + "/" + enddate, function(resp) {
+                    var y = d3.scale.linear()
+                        .domain([0, d3.max(resp.data, function(d){return d[1];})])
+                        .range([0+margin, h-margin]);
+                    var x = d3.scale.linear()
+                        .domain([0, resp.data.length])
+                        .range([0+margin, w-margin]);
+
+                    var g = plot.append("svg:g")
+                            .attr("transform", "translate(0, "+h+")");
+
+                    var line = d3.svg.line()
+                                .x(function(d,i){return x(i); })
+                                .y(function(d) {return -1 * y(d[1]);});
+
+                    g.append("svg:path")
+                        .attr("d", line(resp.data));
+                });
+            });
+        }
 
-        jQuery.getJSON("../all_values", function(resp) {
+        d3.json("../all_values", function(resp) {
             log(resp.data);
 
-            jQuery.getJSON("../stream", function(resp) {
+            d3.json("../stream", function(resp) {
                 log(resp.data);
                 reload(resp.time_stop);
             });
-- 
cgit v1.2.1

