summaryrefslogtreecommitdiff
path: root/ebus/webhdf/static/src
diff options
context:
space:
mode:
Diffstat (limited to 'ebus/webhdf/static/src')
-rw-r--r--ebus/webhdf/static/src/d3.control.js120
-rw-r--r--ebus/webhdf/static/src/d3.plot.js99
-rw-r--r--ebus/webhdf/static/src/ebus.js179
3 files changed, 398 insertions, 0 deletions
diff --git a/ebus/webhdf/static/src/d3.control.js b/ebus/webhdf/static/src/d3.control.js
new file mode 100644
index 0000000..489edea
--- /dev/null
+++ b/ebus/webhdf/static/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/ebus/webhdf/static/src/d3.plot.js b/ebus/webhdf/static/src/d3.plot.js
new file mode 100644
index 0000000..d9a7d04
--- /dev/null
+++ b/ebus/webhdf/static/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/ebus/webhdf/static/src/ebus.js b/ebus/webhdf/static/src/ebus.js
new file mode 100644
index 0000000..7667b71
--- /dev/null
+++ b/ebus/webhdf/static/src/ebus.js
@@ -0,0 +1,179 @@
+var d = new Object();
+d.sec = 1;
+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;
+
+$(document).ready(function(){
+ var from = Math.round(new Date().getTime()/1000) - 2*d.day;
+ var fromOverview = Math.round(new Date().getTime()/1000) - 15*d.day;
+ var to = Math.round(new Date().getTime()/1000);
+ var datasetDetail = []
+ var datasetOverview = [];
+ var plotOverview = null;
+ var plotDetail = null;
+ var indexFound = null;
+ var sensorConfigList = [{"sensorname":"heizkreisregler9.solarDaten.tempKollektor","show":true, "color":"#f30000"},
+ {"sensorname":"heizkreisregler10.betriebsdatenRegler1.kesselTemperatur","show":true, "color":"#283074"},
+ {"sensorname":"heizkreisregler9.solarDaten.tempWarmwasserSolar","show":false, "color":"#f0ff4c"},
+ {"sensorname":"feuerungsautomat1.betriebsdatenRegler1.aussenTemperatur","show":false, "color":"#84b500"},
+ {"sensorname":"de.wettermichel.temperature","show":true, "color":"#24f590"},
+ {"sensorname":"heizkreisregler10.betriebsdatenRegler1.boilerTemperatur","show":true, "color":"#48b4ff"}];
+
+ var pickSensorConfig = function(sensorname) {
+ var SensorConfigFound;
+ $.each(sensorConfigList, function(i,sensorConfig) {
+ if (sensorConfig.sensorname == sensorname) {
+ sensorConfigFound = sensorConfig;
+ return false;
+ }
+ });
+ return sensorConfigFound;
+ }
+ var replot = function() {
+ if (plotDetail == null) {
+ plotDetail = $.plot($("#ebusgraph"),
+ datasetDetail,
+ {
+ xaxis: { mode: "time"},
+ yaxis: { min: -16, max: 100 },
+ legend: { show : true}
+ });
+ } else {
+ plotDetail.setData(datasetDetail);
+ plotDetail.draw();
+ plotDetail.setupGrid(); // redraw legend
+ }
+ };
+ var replotOverview = function() {
+ if (plotOverview == null) {
+ plotOverview = $.plot($("#overview"),
+ datasetOverview,
+ { // options
+ series: {
+ lines: { show: true, lineWidth: 1 },
+ shadowSize: 0
+ },
+ xaxis: { mode: "time" },
+ yaxis: { ticks: [], min: -26, max: 100, autoscaleMargin: 0.1 },
+ legend: { show: false },
+ selection: { mode: "x" }
+ });
+ } else {
+ plotOverview.setData(datasetOverview);
+ plotOverview.draw();
+ }
+ plotOverview.setSelection({xaxis: {'from': from*1000, 'to': to*1000}}, true);
+ };
+ var plotSensor = function(sensorConfig) {
+ plotSensorDetail(sensorConfig);
+ plotSensorOverview(sensorConfig);
+ };
+ var unplotSensor = function(sensorname) {
+ unplotSensorDetail(sensorname);
+ unplotSensorOverview(sensorname);
+ };
+ var tzFix = function(d) {
+ return d - new Date().getTimezoneOffset() * 60 * 1000;
+ }
+
+ var plotSensorDetail = function(sensorConfig) {
+ $.getJSON("sensor/"+escape(sensorConfig.sensorname)+"/"+from+"/"+to,
+ function(response) {
+ if (response['data']) {
+ response.data = response.data.map(function(d) { return [ tzFix(d[0]), d[1] ]; });
+ datasetDetail.push({'data':response['data'],
+ 'label':sensorConfig.sensorname,
+ 'color':sensorConfig.color});
+ replot();
+ } else {
+ alert("Fehler: " + response["error"]);
+ }
+ });
+ };
+
+ var unplotSensorDetail = function(sensorname) {
+ $.each(datasetDetail, function(i, sensor) {
+ if (sensor.label == sensorname) {
+ datasetDetail.splice(i,1);
+ replot();
+ return false;
+ }
+ });
+ };
+
+ var plotSensorOverview = function(sensorConfig) {
+ $.getJSON("avg/"+escape(sensorConfig.sensorname)+"/"+fromOverview,
+ function(response) {
+ if (response['data']) {
+ response.data = response.data.map(function(d) { return [ tzFix(d[0]), d[1] ]; });
+ datasetOverview.push({'data':response['data'],
+ 'label':sensorConfig.sensorname,
+ 'color':sensorConfig.color});
+ replotOverview();
+ } else {
+ alert("Overview Fehler: " + response["error"]);
+ }
+ });
+
+ };
+ var unplotSensorOverview = function(sensorname) {
+ $.each(datasetOverview, function(i, sensor) {
+ if (sensor.label == sensorname) {
+ datasetOverview.splice(i,1);
+ replotOverview();
+ return false;
+ }
+ });
+ }
+
+ $("#overview").bind("plotselected", function (event, ranges) {
+ range_from = Math.round(ranges.xaxis.from / 1000);
+ range_to = Math.round(ranges.xaxis.to / 1000);
+ // max selection range
+ if (range_to - range_from > d.month/2) {
+ plotOverview.setSelection({xaxis: {'from': from*1000, 'to': to*1000}}, true);
+ return;
+ } else {
+ from = range_from;
+ to = range_to;
+ }
+ sensors = [];
+ for (elem in datasetOverview) {
+ sensor = datasetDetail[elem]["label"];
+ sensors.push(sensor);
+ }
+ datasetDetail =[];
+ for (i in sensors) {
+ plotSensorDetail(pickSensorConfig(sensors[i]));
+ }
+ });
+
+ $.each(sensorConfigList, function(i,sensorConfig) {
+ var pickerDiv = $("<div>").attr("id","pick_"+sensorConfig.sensorname.replace(/\./g,"_"))
+ .addClass("picker")
+ .appendTo("#sensorpicker");
+
+ var pickerCheckbox = $("<input>").attr("type","checkbox")
+ .appendTo(pickerDiv);
+ $(pickerDiv).append(sensorConfig.sensorname);
+ 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,".");
+ if ($(this).is(":checked")) {
+ plotSensor(pickSensorConfig(sensorname));
+ } else {
+ unplotSensor(sensorname);
+ }
+ });
+});