diff options
Diffstat (limited to 'datastore-leveldb/wwwroot_ebus/src')
| -rw-r--r-- | datastore-leveldb/wwwroot_ebus/src/d3.control.js | 120 | ||||
| -rw-r--r-- | datastore-leveldb/wwwroot_ebus/src/d3.plot.js | 99 | ||||
| -rw-r--r-- | datastore-leveldb/wwwroot_ebus/src/ebus.js | 291 |
3 files changed, 510 insertions, 0 deletions
diff --git a/datastore-leveldb/wwwroot_ebus/src/d3.control.js b/datastore-leveldb/wwwroot_ebus/src/d3.control.js new file mode 100644 index 0000000..489edea --- /dev/null +++ b/datastore-leveldb/wwwroot_ebus/src/d3.control.js @@ -0,0 +1,120 @@ +var d3_control = function(element, svgurl, mapping) { + this.mapping = mapping; + this.element = element; + var control = this; + d3.xml(svgurl, "image/svg+xml", function(xml) { + element[0][0].appendChild(xml.documentElement); + element.select("svg") + .style("width","100%").style("height", "100%"); + + // Setup mapping + for (var element_id in this.mapping) { + control.initElement(element_id); + } + d3.json("../all_values", function(response) { + control.process(response.data); + control.reload(response.time_stop); + }); + }); +}; + +d3_control.prototype = { + initElement:function(element_id) { + var options = this.mapping[element_id]; + d3.select(document.getElementById(element_id)) + .on("mouseover", + function() { + if( typeof(options._plot) == "undefined") { + options._plot = d3.select(this.ownerSVGElement) + .append("svg:g") + .classed("d3.control_popup", true); + + var startdate = (new Date().getTime()/1000) - 7*60*60*24; + var enddate = (new Date().getTime()/1000); + var plot = d3.plot(options._plot); + d3.json("../sensor/"+options.sensor+"/" + startdate + "/" + enddate, + function(resp) { + var data = resp.data.map(function(d) { + return [new Date(d[0]), d[1]]; + }); + plot.draw(data); + }); + + options._plot.on("mouseout", + function() { + if (options._plot.node().contains(d3.event.relatedTarget)) + return; + options._plot + .transition() + .duration(1000) + .style("opacity", 0.0) + .remove(); + }); + + var drag = d3.behavior.drag() + .on("dragstart", function() { + options._plot.on("mouseout", null); + options._plot.transition().duration(1000).style("opacity", 1.0); + + delete options._plot; + d3.select(this).select("rect") + .style("stroke", "gray") + .style("stroke-width", "3px"); + }) + .on("drag", function(d,i){ + d=[]; + d.x = d3.event.x; + d.y = d3.event.y; + d3.select(this).attr("transform", "translate("+d.x+","+d.y+")"); + }) + .on("dragend", function() { + d3.select(this).on("mousedown.drag", null); + d3.select(this).on("click", function() { d3.select(this).remove(); }); + }); + + options._plot.call(drag); + } else { + this.ownerSVGElement + .appendChild(options._plot.node()); + + options._plot.style("opacity", 1); + } + + var xy = d3.svg.mouse(this.ownerSVGElement); + options._plot.attr("transform", "translate("+xy[0]+","+xy[1]+")"); + }); + }, + process:function(data) { + for (var i in data) { + var row = data[i]; + + if (typeof(console) != "undefined") { + console.log("[" + d3.format("02d")(row.timestamp) + "] " + + row.name + " Value: " + row.value_real + " - " + + row.value_string); + } + + for (var element_id in this.mapping) { + var options = this.mapping[element_id]; + if (row.name == options.sensor){ + d3.select(document.getElementById(element_id)) + .text(""+row.value_real); + } + } + } + }, + reload:function(time_stop) { + var url = "../stream"; + if (time_stop != null) + url += "/" + time_stop; + var control = this; + d3.json(url, function(response) { + control.process(response.data); + control.reload(response.time_stop); + }); + } +}; + +d3.control = function(element, svgurl, mapping) { + return new d3_control(element,svgurl,mapping); +}; diff --git a/datastore-leveldb/wwwroot_ebus/src/d3.plot.js b/datastore-leveldb/wwwroot_ebus/src/d3.plot.js new file mode 100644 index 0000000..d9a7d04 --- /dev/null +++ b/datastore-leveldb/wwwroot_ebus/src/d3.plot.js @@ -0,0 +1,99 @@ +(function(){ + +function d3_plot(container) { + this.opt = { + w:550, h:200, margin:30 + }; + this.element = container.append("svg:g") + .classed("d3.plot_plot",true) + .attr("width", this.opt.w) + .attr("height", this.opt.h); + + this.element.append("svg:rect") + .attr("width", this.opt.w) + .attr("height", this.opt.h) + .style("fill", "white"); + + this.element.append("svg:text") + .classed("d3-plot_wait", true) + .attr("x", this.opt.w/2) + .attr("y", this.opt.h/2) + .attr("text-anchor", "center") + .text("Bitte warten"); +}; + +d3_plot.prototype = { + draw: function(data) { + var x_min = d3.min(data, function(d){return d[0];}), + x_max = d3.max(data, function(d){return d[0];}), + y_min = d3.min(data, function(d){return d[1];}), + y_max = d3.max(data, function(d){return d[1];}); + + var x = d3.time.scale() + .domain([x_min, x_max]) + .range([0+this.opt.margin, this.opt.w-this.opt.margin]); + + var y = d3.scale.linear() + .domain([y_min, y_max]) + .range([0+this.opt.margin, this.opt.h-(this.opt.margin/2)]); + + + var g = this.element.append("svg:g") + .attr("transform", "translate(0, "+this.opt.h+")"); + + var line = d3.svg.line() + .x(function(d,i){ return x(d[0]); }) + .y(function(d) {return -1*y(d[1]);}); + + g.append("svg:path") + .attr("d", line(data)); + + // Axes X-Line + g.append("svg:line") + .attr("x1", 0) + .attr("y1", -1*y(y_min)) + .attr("x2", x(x_max)) + .attr("y2", -1 * y(y_min)); + + + // Tick Labels + var tick_format = d3.time.format("%d.%m"); + g.selectAll(".xlabel") + .data(x.ticks(5)).enter() + .append("svg:text") + .text(function(d){return tick_format(d);}) + .attr("x", function(d) {return x(d);}) + .attr("y", -5) + .attr("text-anchor", "center"); + + g.selectAll(".ylabel") + .data(y.ticks(5)).enter() + .append("svg:text") + .text(String) + .attr("x", 0) + .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)+(this.opt.margin/3)) + .attr("x2", function(d){return x(d);}) + .attr("y2", -1*y(y_max)); + + // + this.element.select(".d3-plot_wait").style("display","none"); + } +}; + +d3.plot = function(container) { + return new d3_plot(container); +}; + +})();
\ No newline at end of file diff --git a/datastore-leveldb/wwwroot_ebus/src/ebus.js b/datastore-leveldb/wwwroot_ebus/src/ebus.js new file mode 100644 index 0000000..862e24d --- /dev/null +++ b/datastore-leveldb/wwwroot_ebus/src/ebus.js @@ -0,0 +1,291 @@ +// 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 > 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"); + } +}); +// 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); + } +}); + +}); |