summaryrefslogtreecommitdiff
path: root/datastore-leveldb/wwwroot_ebus
diff options
context:
space:
mode:
authorEbus-at-dockstar <ebus@dockstar>2014-09-17 23:41:11 +0200
committerEbus-at-dockstar <ebus@dockstar>2014-09-17 23:41:11 +0200
commitcba5a60f2e99016a3e18e62d123ff50b08ad09fc (patch)
tree6263a3436d365d4594427d8f925b5d130bd3ab45 /datastore-leveldb/wwwroot_ebus
parentd5ef72ac125348bdc0a86df48c0ca02c1be97068 (diff)
downloadebus-alt-cba5a60f2e99016a3e18e62d123ff50b08ad09fc.tar.gz
ebus-alt-cba5a60f2e99016a3e18e62d123ff50b08ad09fc.zip
update ebus web interface
Diffstat (limited to 'datastore-leveldb/wwwroot_ebus')
-rw-r--r--datastore-leveldb/wwwroot_ebus/css/stylesheet.css22
-rw-r--r--datastore-leveldb/wwwroot_ebus/index.html3
-rw-r--r--datastore-leveldb/wwwroot_ebus/src/ebus.js85
3 files changed, 60 insertions, 50 deletions
diff --git a/datastore-leveldb/wwwroot_ebus/css/stylesheet.css b/datastore-leveldb/wwwroot_ebus/css/stylesheet.css
index 3f9a276..cfac189 100644
--- a/datastore-leveldb/wwwroot_ebus/css/stylesheet.css
+++ b/datastore-leveldb/wwwroot_ebus/css/stylesheet.css
@@ -1,22 +1,20 @@
body {
font-family:sans;
- text-align:center;
- padding: 40px;
}
#ebusgraph {
- width: 100%;
- height: 70%;
+ position: absolute;
+ height: calc(100% - 160px);
+ top: 2px;
+ left: 5px;
+ right: 30px;
}
#overview {
- width: 100%;
- margin:auto;
- height:100px;
+ position: absolute;
+ top: calc(100% - 150px);
+ height: 150px;
+ left: 10px;
+ right: 10px;
}
-#options {
- width:800px;
- margin:auto;
- text-align:left;
-}
diff --git a/datastore-leveldb/wwwroot_ebus/index.html b/datastore-leveldb/wwwroot_ebus/index.html
index ce7310e..96ca048 100644
--- a/datastore-leveldb/wwwroot_ebus/index.html
+++ b/datastore-leveldb/wwwroot_ebus/index.html
@@ -9,9 +9,6 @@
</head>
<body>
<div id="ebusgraph"></div>
- <div id="options">
- <div id="sensorpicker"></div>
- </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 862e24d..ae4c0e8 100644
--- a/datastore-leveldb/wwwroot_ebus/src/ebus.js
+++ b/datastore-leveldb/wwwroot_ebus/src/ebus.js
@@ -54,25 +54,18 @@ $(document).ready(function(){
"name":"feuerungsautomat1.betriebsdatenRegler1.aussenTemperatur",
"description":"Aussentemperatur (ebus)",
"values":Math.ceil(jQuery("#ebusgraph").width()/4),
- "show":true,
+ "show":false,
"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":"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",
@@ -83,7 +76,7 @@ $(document).ready(function(){
{
"name":"de.wettermichel.temperature",
"description":"Aussentemperatur (wettermichel)",
- "show":false,
+ "show":true,
"values":Math.ceil(jQuery("#ebusgraph").width()/16),
"lines":{fill: true, fillColor: "rgba(132, 181, 0, 0.2)"},
"color":"#84b500"
@@ -106,6 +99,38 @@ 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);
+ for (var i = 0; i < sensorConfigList.length; i++) {
+ var config = sensorConfigList[i];
+ var row = jQuery("<tr>");
+ var colorBox = jQuery("<td>").addClass("legendColorBox").appendTo(row);
+ var colorBoxBox = jQuery("<div>").css({background:config.color}).appendTo(colorBox);
+ var checkbox = jQuery("<input>").attr("type","checkbox").appendTo(colorBoxBox);
+ checkbox.attr("checked", config.show);
+ checkbox.css({opacity:0.6});
+ checkbox.data("name", config.name);
+ checkbox.click(function() {
+ var config = pickSensorConfig($(this).data("name"));
+ config.show = $(this).prop("checked");
+ if (config.show) {
+ plotSensor(config);
+ } else {
+ unplotSensor(config.name);
+ }
+ });
+
+ var label = jQuery("<td>").addClass("legendLabel").appendTo(row);
+ jQuery("<span>").text(sensorConfigList[i].description).appendTo(label);
+
+ table.append(row);
+ }
+ legend.appendTo($("#ebusgraph"));
+
};
var replotOverview = function() {
plotOverview.setData(datasetOverview);
@@ -208,8 +233,9 @@ plotDetail = $.plot($("#ebusgraph"),
frameRate: 16,
cursor:"move"
},
- legend: { show : true}
+ legend: { show : false }
});
+
$("#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);
@@ -237,7 +263,7 @@ function update_range(range_from, range_to) {
return;
}
// max selection range
- if (range_to - range_from > d.month) {
+ if (range_to - range_from > 4*d.month) {
// reset selection
plotOverview.setSelection({xaxis: {"from": from, "to": to}}, true);
return;
@@ -263,29 +289,18 @@ $("#overview").bind("plotselected", function (event, ranges) {
});
$.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"]);
+ //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);
+ //$("<span>").text( sensorConfig.description + " (" + sensorConfig.sensorname + ")").appendTo(pickerDiv);
if (sensorConfig.show) {
//Plot
plotSensor(sensorConfig);
- $(pickerCheckbox).attr("checked","checked");
+ //$(pickerCheckbox).attr("checked","checked");
}
});
// 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);
- }
-});
-
});