summaryrefslogtreecommitdiff
path: root/datastore-leveldb/wwwroot_ebus
diff options
context:
space:
mode:
authorEbus-at-dockstar <ebus@dockstar>2013-05-01 02:48:58 +0200
committerEbus-at-dockstar <ebus@dockstar>2013-05-01 02:48:58 +0200
commit60b4dfe92cace7636c5388835698969a6f1c429c (patch)
tree5bcb43482f2d81eb0e1cd575aa515fc6d1eb8655 /datastore-leveldb/wwwroot_ebus
parent6c670b35f1af5fda5a3b9b2e23b039cf5aea933c (diff)
downloadebus-alt-60b4dfe92cace7636c5388835698969a6f1c429c.tar.gz
ebus-alt-60b4dfe92cace7636c5388835698969a6f1c429c.zip
panning
Diffstat (limited to 'datastore-leveldb/wwwroot_ebus')
-rw-r--r--datastore-leveldb/wwwroot_ebus/index.html1
-rw-r--r--datastore-leveldb/wwwroot_ebus/src/ebus.js144
2 files changed, 87 insertions, 58 deletions
diff --git a/datastore-leveldb/wwwroot_ebus/index.html b/datastore-leveldb/wwwroot_ebus/index.html
index c69a9b1..ce7310e 100644
--- a/datastore-leveldb/wwwroot_ebus/index.html
+++ b/datastore-leveldb/wwwroot_ebus/index.html
@@ -4,6 +4,7 @@
<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>
diff --git a/datastore-leveldb/wwwroot_ebus/src/ebus.js b/datastore-leveldb/wwwroot_ebus/src/ebus.js
index 530faf4..862e24d 100644
--- a/datastore-leveldb/wwwroot_ebus/src/ebus.js
+++ b/datastore-leveldb/wwwroot_ebus/src/ebus.js
@@ -27,39 +27,39 @@ $(document).ready(function(){
var indexFound = null;
var sensorConfigList = [
{
- "sensorname":"heizkreisregler10.betriebsdatenRegler1.kesselTemperatur",
+ "name":"heizkreisregler10.betriebsdatenRegler1.kesselTemperatur",
"description":"Kessel Temperatur",
- "values":Math.floor(jQuery("#ebusgraph").width()/8),
+ "values":Math.ceil(jQuery("#ebusgraph").width()/8),
"lines":{fill: true, fillColor: "rgba(80,40,100, 0.1)"},
"show":true,
"color":"rgb(80,40,100)"
},
{
- "sensorname":"heizkreisregler9.solarDaten.tempKollektor",
+ "name":"heizkreisregler9.solarDaten.tempKollektor",
"description":"Kollektortemperatur",
"lines":{fill: true, fillColor: "rgba(255, 0, 0, 0.4)"},
- "values":Math.floor(jQuery("#ebusgraph").width()/1),
+ "values":Math.ceil(jQuery("#ebusgraph").width()/1),
"show":true,
"color":"#f30000"
},
{
- "sensorname":"heizkreisregler9.solarDaten.tempWarmwasserSolar",
+ "name":"heizkreisregler9.solarDaten.tempWarmwasserSolar",
"description":"Warmwasser Solar",
"lines":{fill: true, fillColor: "rgba(30,250,20,0.05)"},
- "values":Math.floor(jQuery("#ebusgraph").width()/8),
+ "values":Math.ceil(jQuery("#ebusgraph").width()/8),
"show":true,
"color":"rgba(30,250,20,0.5)"
},
{
- "sensorname":"feuerungsautomat1.betriebsdatenRegler1.aussenTemperatur",
+ "name":"feuerungsautomat1.betriebsdatenRegler1.aussenTemperatur",
"description":"Aussentemperatur (ebus)",
- "values":Math.floor(jQuery("#ebusgraph").width()/4),
+ "values":Math.ceil(jQuery("#ebusgraph").width()/4),
"show":true,
"lines":{fill: true, fillColor: "rgba(250, 250, 0, 0.2)"},
"color":"rgb(250,250,0)"
},
{
- "sensorname":"dockstar.load5",
+ "name":"dockstar.load5",
"description":"System Load (5m, *10)",
"lines":{lineWidth:1},
"show":false,
@@ -67,22 +67,24 @@ $(document).ready(function(){
"mapFunc":function(d){return [d[0],d[1]*10]}
},
{
- "sensorname":"dockstar.diskfree.rootfs",
+ "name":"dockstar.fs.ROOT",
"description":"Rootfs free percent",
+ "values":Math.ceil(jQuery("#ebusgraph").width()/16),
"show":false,
"color":"red"
},
{
- "sensorname":"heizkreisregler10.betriebsdatenRegler1.boilerTemperatur",
+ "name":"heizkreisregler10.betriebsdatenRegler1.boilerTemperatur",
"description":"Boilertemperatur",
- "values":Math.floor(jQuery("#ebusgraph").width()/8),
+ "values":Math.ceil(jQuery("#ebusgraph").width()/8),
"show":false,
"color":"#48b4ff"
},
-{"sensorname":"de.wettermichel.temperature",
+{
+ "name":"de.wettermichel.temperature",
"description":"Aussentemperatur (wettermichel)",
"show":false,
- "values":Math.floor(jQuery("#ebusgraph").width()/16),
+ "values":Math.ceil(jQuery("#ebusgraph").width()/16),
"lines":{fill: true, fillColor: "rgba(132, 181, 0, 0.2)"},
"color":"#84b500"
},
@@ -91,7 +93,7 @@ $(document).ready(function(){
var pickSensorConfig = function(sensorname) {
var sensorConfigFound;
$.each(sensorConfigList, function(i,sensorConfig) {
- if (sensorConfig.sensorname == sensorname) {
+ if (sensorConfig["name"] == sensorname) {
sensorConfigFound = sensorConfig;
return false;
}
@@ -122,7 +124,7 @@ var unplotSensor = function(sensorname) {
var plotSensorDetail = function(sensorConfig) {
jQuery("#ebusgraph").animate({opacity:0.2}, 200);
var values = sensorConfig.values || numberOfValues;
- $.getJSON("/api/range/"+escape(sensorConfig.sensorname)+"/"+from+"/"+to+"/" + values,
+ $.getJSON("/api/range/"+escape(sensorConfig["name"])+"/"+from+"/"+to+"/" + values,
function(response) {
if (!response.error) {
response.data = response.data.map(function(d) {
@@ -132,7 +134,7 @@ var plotSensorDetail = function(sensorConfig) {
response.data = response.data.map( sensorConfig.mapFunc )
}
datasetDetail.push({"data":response["data"],
- "userData":sensorConfig.sensorname,
+ "userData":sensorConfig["name"],
"lines":sensorConfig.lines || {},
"label":sensorConfig.description,
"color":sensorConfig.color});
@@ -150,7 +152,7 @@ var plotSensorDetail = function(sensorConfig) {
var unplotSensorDetail = function(sensorname) {
$.each(datasetDetail, function(i, sensor) {
- if (sensor.userData == sensorname) {
+ if (sensor["userData"] == sensorname) {
datasetDetail.splice(i,1);
replot();
return false;
@@ -159,8 +161,8 @@ var unplotSensorDetail = function(sensorname) {
};
var plotSensorOverview = function(sensorConfig) {
- var values = sensorConfig.values || Math.floor(numberOfValues/2);
- $.getJSON("api/range/"+escape(sensorConfig.sensorname)+"/"+fromOverview+"/"+toOverview+ "/" + values,
+ 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) {
@@ -170,7 +172,8 @@ var plotSensorOverview = function(sensorConfig) {
response.data = response.data.map( sensorConfig.mapFunc)
}
datasetOverview.push({"data":response["data"],
- "label":sensorConfig.sensorname,
+ "userData":sensorConfig["name"],
+ "label":sensorConfig["name"],
"color":sensorConfig.color});
replotOverview();
} else {
@@ -181,7 +184,7 @@ var plotSensorOverview = function(sensorConfig) {
};
var unplotSensorOverview = function(sensorname) {
$.each(datasetOverview, function(i, sensor) {
- if (sensor.label == sensorname) {
+ if (sensor["userData"] == sensorname) {
datasetOverview.splice(i,1);
replotOverview();
return false;
@@ -189,36 +192,32 @@ var unplotSensorOverview = function(sensorname) {
});
}
-$("#overview").bind("plotselected", function (event, ranges) {
- range_from = Math.round(ranges.xaxis.from);
- range_to = Math.round(ranges.xaxis.to);
- // max selection range
- if (range_to - range_from > 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]));
- }
-});
plotDetail = $.plot($("#ebusgraph"),
datasetDetail,
{
- xaxis: { mode: "time", min: timeToLocal(from), max:timeToLocal(to) },
- yaxis: { min: -16, max: 100 },
+ 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,
@@ -233,25 +232,54 @@ plotOverview = $.plot($("#overview"),
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 > 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>").attr("id","pick_"+sensorConfig.sensorname.replace(/\./g,"_"))
- .addClass("picker")
- .appendTo("#sensorpicker");
+ var pickerDiv = $("<div>").addClass("picker").appendTo("#sensorpicker");
+ var pickerCheckbox = $("<input>").attr("type","checkbox").appendTo(pickerDiv);
+ pickerCheckbox.data("name", sensorConfig["name"]);
-var pickerCheckbox = $("<input>").attr("type","checkbox")
- .appendTo(pickerDiv);
-pickerDiv.append($("<span>").text( sensorConfig.description + " (" + sensorConfig.sensorname + ")") );
-if (sensorConfig.show) {
- //Plot
- plotSensor(sensorConfig);
- $(pickerCheckbox).attr("checked","checked");
-}
+ $("<span>").text( sensorConfig.description + " (" + sensorConfig.sensorname + ")").appendTo(pickerDiv);
+
+ if (sensorConfig.show) {
+ //Plot
+ plotSensor(sensorConfig);
+ $(pickerCheckbox).attr("checked","checked");
+ }
});
// TODO http://people.iola.dk/olau/flot/examples/annotating.html
$(".picker input").click( function() {
- var sensorname = $(this).parent().attr("id").replace("pick_","").replace(/_/g,".");
+ var sensorname = $(this).data("name");
if ($(this).is(":checked")) {
if (typeof console != "undefined") console.log(sensorname);
plotSensor(pickSensorConfig(sensorname));