updated web interface

author: Ebus-at-dockstar <ebus@dockstar> 2014-09-18 15:48:54 +0200
committer: Ebus-at-dockstar <ebus@dockstar> 2014-09-18 15:48:54 +0200
commit: 87e143e62d853ec60771141cadb2a6b1294e9de6 (patch)
tree: 6aadbfcf5b94751f1891377a47e45ce0a14752f3 /datastore-leveldb
parent: f5fc2f205f22580bfaea3efaa055bcb090500c05 (diff)
download: ebus-alt-87e143e62d853ec60771141cadb2a6b1294e9de6.tar.gz
ebus-alt-87e143e62d853ec60771141cadb2a6b1294e9de6.zip
5 files changed, 400 insertions, 21 deletions
diff --git a/datastore-leveldb/wwwroot_ebus/css/stylesheet.css b/datastore-leveldb/wwwroot_ebus/css/stylesheet.css
index cfac189..1031054 100644
--- a/datastore-leveldb/wwwroot_ebus/css/stylesheet.css
+++ b/datastore-leveldb/wwwroot_ebus/css/stylesheet.css
@@ -10,6 +10,15 @@ body {
 	right: 30px;
 }
 
+#legend {
+	position: absolute;
+	height: 150px;
+	overflow-y: scroll;
+	right: 10px;
+	top: 10px;
+	background: rgba(240,240,240,0.55);
+}
+
 #overview {
 	position: absolute;
 	top: calc(100% - 150px);
diff --git a/datastore-leveldb/wwwroot_ebus/debug.html b/datastore-leveldb/wwwroot_ebus/debug.html
new file mode 100644
index 0000000..65010b9
--- /dev/null
+++ b/datastore-leveldb/wwwroot_ebus/debug.html
@@ -0,0 +1,19 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
+    <script src="lib/jquery-1.6.2/jquery-1.6.2.min.js"></script>
+    <script src="lib/flot-0.7/jquery.flot.js"></script>
+    <script src="lib/flot-0.7/jquery.flot.selection.js"></script>
+    <script src="lib/flot-0.7/jquery.flot.navigate.js"></script>
+    <script src="src/ebus.js"></script>
+  </head>
+  <body>
+	  <div id="ebusgraph"></div>
+	  <div id="options">
+		  <div id="sensorpicker"></div>
+	  </div>
+	  <div id="overview"></div>
+	  <div id="raw"></div>
+
+  </body>
+</html>
diff --git a/datastore-leveldb/wwwroot_ebus/index.html b/datastore-leveldb/wwwroot_ebus/index.html
index 96ca048..ef63c95 100644
--- a/datastore-leveldb/wwwroot_ebus/index.html
+++ b/datastore-leveldb/wwwroot_ebus/index.html
@@ -9,6 +9,7 @@
   </head>
   <body>
     <div id="ebusgraph"></div>
+	<div id="legend"></div>
     <div id="overview"></div>
   </body>
 </html>
diff --git a/datastore-leveldb/wwwroot_ebus/src/ebus.js b/datastore-leveldb/wwwroot_ebus/src/ebus.js
index ae4c0e8..a76c62e 100644
--- a/datastore-leveldb/wwwroot_ebus/src/ebus.js
+++ b/datastore-leveldb/wwwroot_ebus/src/ebus.js
@@ -30,7 +30,7 @@ $(document).ready(function(){
     "name":"heizkreisregler10.betriebsdatenRegler1.kesselTemperatur",
     "description":"Kessel Temperatur",
     "values":Math.ceil(jQuery("#ebusgraph").width()/8),
-    "lines":{fill: true, fillColor: "rgba(80,40,100, 0.1)"},
+    "lines":{fill: true, lineWidth: 1, fillColor: "rgba(80,40,100, 0.05)"},
     "show":true, 
     "color":"rgb(80,40,100)"
 },
@@ -45,10 +45,10 @@ $(document).ready(function(){
 {
     "name":"heizkreisregler9.solarDaten.tempWarmwasserSolar",
     "description":"Warmwasser Solar",
-    "lines":{fill: true, fillColor: "rgba(30,250,20,0.05)"},
+    "lines":{fill: true, fillColor: "rgba(252,133,30,0.1)"},
     "values":Math.ceil(jQuery("#ebusgraph").width()/8),
-    "show":true, 
-    "color":"rgba(30,250,20,0.5)"
+    "show":false, 
+    "color":"rgba(252,133,34,0.5)"
 },
 {
     "name":"feuerungsautomat1.betriebsdatenRegler1.aussenTemperatur",
@@ -58,14 +58,6 @@ $(document).ready(function(){
     "lines":{fill: true, fillColor: "rgba(250, 250, 0, 0.2)"},
     "color":"rgb(250,250,0)"
 },
-//{
-//    "name":"dockstar.load5",
-//    "description":"System Load (5m, *10)",
-//    "lines":{lineWidth:1},
-//    "show":false,
-//    "color":"blue",
-//    "mapFunc":function(d){return [d[0],d[1]*10]}
-//},
 {
     "name":"heizkreisregler10.betriebsdatenRegler1.boilerTemperatur",
     "description":"Boilertemperatur",
@@ -75,12 +67,74 @@ $(document).ready(function(){
 },
 {
     "name":"de.wettermichel.temperature",
-    "description":"Aussentemperatur (wettermichel)",
-    "show":true,
+    "description":"Temperatur (Celsius) (wettermichel)",
+    "show":false,
     "values":Math.ceil(jQuery("#ebusgraph").width()/16),
     "lines":{fill: true, fillColor: "rgba(132, 181, 0, 0.2)"},
     "color":"#84b500"
 },
+{
+    "name":"de.wettermichel.rainToday",
+    "description": "Regen heute (mm) (wettermichel)",
+    "show":false,
+    "values":Math.ceil(jQuery("#ebusgraph").width()/16),
+    "lines":{fill: true, fillColor: "rgba(10, 18, 250, 0.2)"},
+    "color":"blue"
+},
+{
+    "name":"de.wettermichel.humidity",
+    "description": "Luftfeuchtigkeit (%) (wettermichel)",
+    "show": false,
+    "values":Math.ceil(jQuery("#ebusgraph").width()/8),
+    "lines":{fill: false, lineWidth:1},
+    "color":"rgb(100,100,200)"
+},
+{
+    "name":"adsl.in.percent",
+    "description": "ADSL In/Download",
+    "show":false,
+    "values":Math.ceil(jQuery("#ebusgraph").width()/8),
+    "lines":{fill: false, lineWidth:1},
+    "color":"black",
+},
+{
+    "name":"adsl.out.percent",
+    "description": "ADSL Out/Upload",
+    "show":false,
+    "values":Math.ceil(jQuery("#ebusgraph").width()/8),
+    "lines":{fill: false, lineWidth:1},
+    "color":"gray",
+},
+{
+    "name":"dockstar.load5",
+    "description":"System Load (5m, *10)",
+    "lines":{lineWidth:1},
+    "show":false,
+    "color":"blue",
+    "mapFunc":function(d){return [d[0],d[1]*10]}
+},
+{
+    "name":"dockstar.fs.ROOT",
+    "description":"Filesystem / Free (%)",
+    "lines":{lineWidth:1},
+    "show":false,
+    "color":"black",
+},
+{
+    "name":"yves.laserjet.tonerstatus",
+    "description":"Yves Tonerstatus (%)",
+    "lines":{lineWidth:1},
+    "show":false,
+    "color":"black",
+},
+{
+    "name":"dockstar.internet.latency_ns",
+    "description":"Internet latency in ms",
+    "lines":{lineWidth:1},
+    "show":false,
+    "color":"black",
+    "mapFunc":function(d){return [d[0],d[1]/1000/1000]}
+},
     ];
 
 var pickSensorConfig = function(sensorname) {
@@ -99,12 +153,11 @@ var replot = function() {
     plotDetail.getOptions().xaxes[0].max = timeToLocal(to);
     plotDetail.setupGrid();
     plotDetail.draw();
+}
 
-    // insert legend
-    $("#ebusgraph").find(".legend").remove();
-    var fragments = [];
-    var legend = jQuery("<div>").addClass("legend").css({position: "absolute", right: "0px", top: "0px", background: "rgba(240,240,240,0.55)"});
-    var table = jQuery("<table>").appendTo(legend);
+var insertLegend = function() {
+    $("#legend").children().remove();
+    var table = jQuery("<table>");
     for (var i = 0; i < sensorConfigList.length; i++) {
         var config = sensorConfigList[i];
         var row = jQuery("<tr>");
@@ -129,9 +182,9 @@ var replot = function() {
 
         table.append(row);
     }
-    legend.appendTo($("#ebusgraph"));
-
+    $("#legend").append(table);
 };
+
 var replotOverview = function() {
     plotOverview.setData(datasetOverview);
     plotOverview.setSelection({xaxis: {"from": timeToLocal(from), "to": timeToLocal(to)}}, true);
@@ -288,6 +341,7 @@ $("#overview").bind("plotselected", function (event, ranges) {
     update_range(range_from, range_to);
 });
 
+insertLegend();
 $.each(sensorConfigList, function(i,sensorConfig) {
     //var pickerDiv = $("<div>").addClass("picker").appendTo("#sensorpicker");
     //var pickerCheckbox = $("<input>").attr("type","checkbox").appendTo(pickerDiv);
diff --git a/datastore-leveldb/wwwroot_ebus/src/ebus_debug.js b/datastore-leveldb/wwwroot_ebus/src/ebus_debug.js
new file mode 100644
index 0000000..6e118da
--- /dev/null
+++ b/datastore-leveldb/wwwroot_ebus/src/ebus_debug.js
@@ -0,0 +1,296 @@
+// vim: set filetype=javascript expandtab tabstop=4 shiftwidth=4 autoindent smartindent:
+var d = new Object();
+d.ms = 1;
+d.sec = 1000*d.ms;
+d.min = 60 * d.sec;
+d.hour = 60 * d.min;
+d.day = 24 * d.hour;
+d.week = 7 * d.day;
+d.month = 30.5 * d.day;
+d.now = new Date().getTime();
+
+var timeToUTC = function(d) { return d + new Date().getTimezoneOffset() * 60 * 1000; }
+var timeToLocal = function(d) { return d - new Date().getTimezoneOffset() * 60 * 1000; }
+
+$(document).ready(function(){
+    var from = d.now - 2*d.day;
+    var to = d.now;
+    var fromOverview = d.now - 1.5 * d.month;
+    var toOverview = d.now;
+    var numberOfValues = jQuery("#ebusgraph").width();
+
+    var datasetDetail = [];
+    var datasetOverview = [];
+
+    var plotOverview = null;
+    var plotDetail = null;
+    var indexFound = null;
+    var sensorConfigList = [
+{
+    "name":"heizkreisregler10.betriebsdatenRegler1.kesselTemperatur",
+    "description":"Kessel Temperatur",
+    "values":Math.ceil(jQuery("#ebusgraph").width()/8),
+    "lines":{fill: true, fillColor: "rgba(80,40,100, 0.1)"},
+    "show":true, 
+    "color":"rgb(80,40,100)"
+},
+{
+    "name":"heizkreisregler9.solarDaten.tempKollektor",
+    "description":"Kollektortemperatur",
+    "lines":{fill: true, fillColor: "rgba(255, 0, 0, 0.4)"},
+    "values":Math.ceil(jQuery("#ebusgraph").width()/1),
+    "show":true, 
+    "color":"#f30000"
+},
+{
+    "name":"heizkreisregler9.solarDaten.tempWarmwasserSolar",
+    "description":"Warmwasser Solar",
+    "lines":{fill: true, fillColor: "rgba(30,250,20,0.05)"},
+    "values":Math.ceil(jQuery("#ebusgraph").width()/8),
+    "show":true, 
+    "color":"rgba(30,250,20,0.5)"
+},
+{
+    "name":"feuerungsautomat1.betriebsdatenRegler1.aussenTemperatur",
+    "description":"Aussentemperatur (ebus)",
+    "values":Math.ceil(jQuery("#ebusgraph").width()/4),
+    "show":true, 
+    "lines":{fill: true, fillColor: "rgba(250, 250, 0, 0.2)"},
+    "color":"rgb(250,250,0)"
+},
+{
+    "name":"dockstar.load5",
+    "description":"System Load (5m, *10)",
+    "lines":{lineWidth:1},
+    "show":false,
+    "color":"blue",
+    "mapFunc":function(d){return [d[0],d[1]*10]}
+},
+{
+    "name":"dockstar.fs.ROOT",
+    "description":"Rootfs free percent",
+    "values":Math.ceil(jQuery("#ebusgraph").width()/16),
+    "show":false,
+    "color":"red"
+},
+{
+    "name":"heizkreisregler10.betriebsdatenRegler1.boilerTemperatur",
+    "description":"Boilertemperatur",
+    "values":Math.ceil(jQuery("#ebusgraph").width()/8),
+    "show":false,
+    "color":"#48b4ff"
+},
+{
+    "name":"de.wettermichel.temperature",
+    "description":"Aussentemperatur (wettermichel)",
+    "show":false,
+    "values":Math.ceil(jQuery("#ebusgraph").width()/16),
+    "lines":{fill: true, fillColor: "rgba(132, 181, 0, 0.2)"},
+    "color":"#84b500"
+},
+    ];
+
+var pickSensorConfig = function(sensorname) {
+    var sensorConfigFound;
+    $.each(sensorConfigList, function(i,sensorConfig) {
+        if (sensorConfig["name"] == sensorname) {
+            sensorConfigFound = sensorConfig;
+            return false;
+        }
+    });
+    return sensorConfigFound;
+}
+var replot = function() {
+    plotDetail.setData(datasetDetail);
+    plotDetail.getOptions().xaxes[0].min = timeToLocal(from);
+    plotDetail.getOptions().xaxes[0].max = timeToLocal(to);
+    plotDetail.setupGrid();
+    plotDetail.draw();
+};
+var replotOverview = function() {
+    plotOverview.setData(datasetOverview);
+    plotOverview.setSelection({xaxis: {"from": timeToLocal(from), "to": timeToLocal(to)}}, true);
+    plotOverview.setupGrid();
+    plotOverview.draw();
+};
+var plotSensor = function(sensorConfig) {
+    plotSensorDetail(sensorConfig);
+    plotSensorOverview(sensorConfig);
+};
+var unplotSensor = function(sensorname) {
+    unplotSensorDetail(sensorname);
+    unplotSensorOverview(sensorname);
+};
+var plotSensorDetail = function(sensorConfig) {
+    jQuery("#ebusgraph").animate({opacity:0.2}, 200);
+    var values = sensorConfig.values || numberOfValues;
+    $.getJSON("/api/range/"+escape(sensorConfig["name"])+"/"+from+"/"+to+"/" + values,
+            function(response) {
+                if (!response.error) {
+                    response.data = response.data.map(function(d) {
+                        return [ timeToLocal(d[0]), d[1] ]; 
+                    });
+                    if (sensorConfig.mapFunc) {
+                        response.data = response.data.map( sensorConfig.mapFunc )
+                    }
+                    datasetDetail.push({"data":response["data"],
+                        "userData":sensorConfig["name"],
+                        "lines":sensorConfig.lines || {},
+                        "label":sensorConfig.description,
+                        "color":sensorConfig.color});
+
+                    jQuery("#ebusgraph").animate({opacity:1.0}, 200);
+                    replot();
+                } else {
+                    jQuery("#ebusgraph").animate({backgroundColor: "lightRed"},200);
+                    alert("Fehler: " + response["error"]);
+                }
+            }).fail(function(a) {
+                jQuery("#ebusgraph").animate({backgroundColor: "lightRed"},200);
+            });
+};
+
+var unplotSensorDetail = function(sensorname) {
+    $.each(datasetDetail, function(i, sensor) {
+        if (sensor["userData"] == sensorname) {
+            datasetDetail.splice(i,1);
+            replot();
+            return false;
+        }
+    });   
+};
+
+var plotSensorOverview = function(sensorConfig) {
+    var values = sensorConfig.values || Math.ceil(numberOfValues/2);
+    $.getJSON("api/range/"+escape(sensorConfig["name"])+"/"+fromOverview+"/"+toOverview+ "/" + values,
+            function(response) {
+                if (!response.error) {
+                    response.data = response.data.map(function(d) { 
+                        return [ timeToLocal(d[0]), d[1] ]; 
+                    });
+                    if (sensorConfig.mapFunc) {
+                        response.data = response.data.map( sensorConfig.mapFunc)
+                    }
+                    datasetOverview.push({"data":response["data"],
+                        "userData":sensorConfig["name"],
+                        "label":sensorConfig["name"],
+                        "color":sensorConfig.color});
+                    replotOverview();
+                } else {
+                    alert("Overview Fehler: " + response["error"]);
+                }
+            });
+
+};
+var unplotSensorOverview = function(sensorname) {
+    $.each(datasetOverview, function(i, sensor) {
+        if (sensor["userData"] == sensorname) {
+            datasetOverview.splice(i,1);
+            replotOverview();
+            return false;
+        }
+    });
+}
+
+
+plotDetail = $.plot($("#ebusgraph"), 
+        datasetDetail, 
+        { 
+           xaxis: { 
+               mode: "time", 
+           min: timeToLocal(from), 
+           max:timeToLocal(to),
+           panRange: [timeToLocal(fromOverview), timeToLocal(toOverview)]
+           },
+           yaxis: { min: -16, max: 100, panRange: [-16,100] },
+                    pan: {
+                        interactive: true,
+           frameRate: 16,
+           cursor:"move"
+                },
+           legend: { show : true}
+        });
+$("#ebusgraph").bind('plotpan', function (event, plot) {
+    var axes = plot.getAxes();
+    plotOverview.setSelection({xaxis: {"from": Math.round(axes.xaxis.min), "to": Math.round(axes.xaxis.max)}}, true);
+    if (plot.getPlaceholder().css('cursor') == "move")
+        return;
+    // On drag end:
+    update_range(Math.round(axes.xaxis.min), Math.round(axes.xaxis.max));
+});
+
+plotOverview = $.plot($("#overview"),
+        datasetOverview,
+        { // options
+            series: {
+                lines: { show: true, lineWidth: 1 },
+             shadowSize: 0
+            },
+             xaxis: { mode: "time", min: timeToLocal(fromOverview), max:timeToLocal(toOverview)},
+             yaxis: { ticks: [], min: -26, max: 100, autoscaleMargin: 0.1 },
+             legend: { show: false },
+             selection: { mode: "x" }
+        });
+
+function update_range(range_from, range_to) {
+    if (timeToUTC(range_to) == to && timeToUTC(range_from) == from) {
+        return;
+    }
+    // max selection range 
+    if (range_to - range_from > 4*d.month) {
+        // reset selection
+        plotOverview.setSelection({xaxis: {"from": from, "to": to}}, true);
+        return;
+    } else {
+        from = timeToUTC(range_from);
+        to = timeToUTC(range_to);
+    }
+    sensors = [];
+    for (elem in datasetOverview) {
+        sensor = datasetDetail[elem]["userData"];
+        sensors.push(sensor);
+    }
+    datasetDetail =[];
+    for (i in sensors) {
+        plotSensorDetail(pickSensorConfig(sensors[i]));
+    }
+}
+
+$("#overview").bind("plotselected", function (event, ranges) {
+    var range_from = Math.round(ranges.xaxis.from);
+    var range_to = Math.round(ranges.xaxis.to);
+    update_range(range_from, range_to);
+});
+
+$.each(sensorConfigList, function(i,sensorConfig) {
+    var pickerDiv = $("<div>").addClass("picker").appendTo("#sensorpicker");
+    var pickerCheckbox = $("<input>").attr("type","checkbox").appendTo(pickerDiv);
+    pickerCheckbox.data("name", sensorConfig["name"]);
+
+    $("<span>").text( sensorConfig.description + " (" + sensorConfig.sensorname + ")").appendTo(pickerDiv);
+
+    if (sensorConfig.show) {
+        //Plot
+        plotSensor(sensorConfig);
+        $(pickerCheckbox).attr("checked","checked");
+    }
+});
+
+
+function printDetail(
+
+
+// TODO http://people.iola.dk/olau/flot/examples/annotating.html
+
+
+$(".picker input").click( function() {
+    var sensorname = $(this).data("name");
+    if ($(this).is(":checked")) {
+        if (typeof console != "undefined") console.log(sensorname);
+        plotSensor(pickSensorConfig(sensorname));
+    } else {
+        unplotSensor(sensorname);
+    }
+});
+
+});
author	Ebus-at-dockstar <ebus@dockstar>	2014-09-18 15:48:54 +0200
committer	Ebus-at-dockstar <ebus@dockstar>	2014-09-18 15:48:54 +0200
commit	87e143e62d853ec60771141cadb2a6b1294e9de6 (patch)
tree	6aadbfcf5b94751f1891377a47e45ce0a14752f3 /datastore-leveldb
parent	f5fc2f205f22580bfaea3efaa055bcb090500c05 (diff)
download	ebus-alt-87e143e62d853ec60771141cadb2a6b1294e9de6.tar.gz ebus-alt-87e143e62d853ec60771141cadb2a6b1294e9de6.zip