1 files changed, 33 insertions, 35 deletions

diff --git a/ebus/webapp/static/console.html b/ebus/webapp/static/console.html
index b8b732b..71a861c 100644
--- a/ebus/webapp/static/console.html
+++ b/ebus/webapp/static/console.html
@@ -36,18 +36,10 @@
         "tempkollektorWert" : "heizkreisregler9.solarDaten.tempKollektor",
         "boilerWert" : "feuerungsautomat1.betriebsdatenRegler1.boilerTemperatur"
     };
-    function timeToString(timestamp) {
-        var d = new Date();
-        return dateToString(d);
-    }
-    function dateToString(d) {
-        var f = d3.format("02d");
-        return f(d.getHours()) + ":" + f(d.getMinutes()) + ":" + f(d.getSeconds());
-    }
-    function log(data) {
+    function process(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 caption = "[" + d3.format("02d")(row.timestamp) + "] " + row.name + " Value: " + row.value_real + " - " + row.value_string;
 
                 d3.select("#log").insert("div", "div").text(caption);
 
@@ -62,19 +54,20 @@
 
     function reload(time_stop) {
         d3.json("../stream/" + time_stop, function(resp) {
-            log(resp.data);
+            process(resp.data);
             reload(resp.time_stop);
         });
     }
 
     d3.xml("draw.svg", "image/svg+xml", function(xml) {
-        // Put SVG Data into the DOM
+        // Write 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 sensor_name = mapping[elem.attr("id")];
                 var popup = d3.select("body")
                     .append("div")
                     .classed("popup", true)
@@ -86,7 +79,7 @@
                 popup.append("div")
                     .text(sensor_name);
 
-                var w = 550, h = 200, margin = 20;
+                var w = 550, h = 200, margin = 30;
                 var plot = popup.append("svg:svg")
                             .classed("plot", true)
                             .attr("width", w)
@@ -108,14 +101,15 @@
                         y_min = d3.min(data, function(d){return d[1]}),
                         y_max = d3.max(data, function(d){return d[1]});
 
-                    var y = d3.scale.linear()
-                        .domain([y_min, y_max])
-                        .range([0+margin, h-margin]);
-
                     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+")");
 
@@ -126,21 +120,15 @@
                     g.append("svg:path")
                         .attr("d", line(data));
 
-                    // Axes
+                    // Axes X-Line
                     g.append("svg:line")
-                        .attr("x1", x(x_min))
-                        .attr("y1", -1 * y(y_min))
+                        .attr("x1", 0)
+                        .attr("y1", -1*y(y_min))
                         .attr("x2", x(x_max))
                         .attr("y2", -1 * y(y_min));
-
-                    g.append("svg:line")
-                        .attr("x1", x(x_min))
-                        .attr("y1", -1*y(y_min))
-                        .attr("x2", x(x_min))
-                        .attr("y2", -1*y(y_max));
                         
                  
-                    // Ticks
+                    // Tick Labels
                     var tick_format = d3.time.format("%d.%m");
                     g.selectAll(".xlabel")
                         .data(x.ticks(5)).enter()
@@ -158,18 +146,28 @@
                         .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();
                 });
             });
         }
 
         d3.json("../all_values", function(resp) {
-            log(resp.data);
-
-            d3.json("../stream", function(resp) {
-                log(resp.data);
-                reload(resp.time_stop);
-            });
+            process(resp.data);
+            reload(resp.time_stop);
         });
     });
 </script>