From cba5a60f2e99016a3e18e62d123ff50b08ad09fc Mon Sep 17 00:00:00 2001 From: Ebus-at-dockstar Date: Wed, 17 Sep 2014 23:41:11 +0200 Subject: update ebus web interface --- datastore-leveldb/wwwroot_ebus/css/stylesheet.css | 22 +++--- datastore-leveldb/wwwroot_ebus/index.html | 3 - datastore-leveldb/wwwroot_ebus/src/ebus.js | 85 +++++++++++++---------- 3 files changed, 60 insertions(+), 50 deletions(-) (limited to 'datastore-leveldb/wwwroot_ebus') 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 @@
-
-
-
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("
").addClass("legend").css({position: "absolute", right: "0px", top: "0px", background: "rgba(240,240,240,0.55)"}); + var table = jQuery("").appendTo(legend); + for (var i = 0; i < sensorConfigList.length; i++) { + var config = sensorConfigList[i]; + var row = jQuery(""); + var colorBox = jQuery("
").addClass("legendColorBox").appendTo(row); + var colorBoxBox = jQuery("
").css({background:config.color}).appendTo(colorBox); + var checkbox = jQuery("").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("
").addClass("legendLabel").appendTo(row); + jQuery("").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 = $("
").addClass("picker").appendTo("#sensorpicker"); - var pickerCheckbox = $("").attr("type","checkbox").appendTo(pickerDiv); - pickerCheckbox.data("name", sensorConfig["name"]); + //var pickerDiv = $("
").addClass("picker").appendTo("#sensorpicker"); + //var pickerCheckbox = $("").attr("type","checkbox").appendTo(pickerDiv); + //pickerCheckbox.data("name", sensorConfig["name"]); - $("").text( sensorConfig.description + " (" + sensorConfig.sensorname + ")").appendTo(pickerDiv); + //$("").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); - } -}); - }); -- cgit v1.2.1