From 37e334d24a099e5367597ee18ac0c6d5ae2fba32 Mon Sep 17 00:00:00 2001 From: Random Hacker Date: Sun, 24 Feb 2013 16:44:17 +0100 Subject: hdf support --- ebus/webhdf/static/src/d3.control.js | 120 +++++++++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 ebus/webhdf/static/src/d3.control.js (limited to 'ebus/webhdf/static/src/d3.control.js') 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); +}; -- cgit v1.2.1