diff options
| author | Yves Fischer <yvesf-git@xapek.org> | 2011-12-06 23:13:15 +0100 |
|---|---|---|
| committer | Yves Fischer <yvesf-git@xapek.org> | 2011-12-06 23:13:22 +0100 |
| commit | 1dc2d432b455575b4a43c62f01a2ea7400589575 (patch) | |
| tree | 56907d97e589c61a09bcb81139938cac62cf58cd /ebus/webapp/static/console.html | |
| parent | 4f67e6e30f3300c948afbc498ac7fb71ea8e431f (diff) | |
| download | ebus-alt-1dc2d432b455575b4a43c62f01a2ea7400589575.tar.gz ebus-alt-1dc2d432b455575b4a43c62f01a2ea7400589575.zip | |
simple plotting in console.html
Diffstat (limited to 'ebus/webapp/static/console.html')
| -rw-r--r-- | ebus/webapp/static/console.html | 82 |
1 files changed, 66 insertions, 16 deletions
diff --git a/ebus/webapp/static/console.html b/ebus/webapp/static/console.html index c32445c..054d5d4 100644 --- a/ebus/webapp/static/console.html +++ b/ebus/webapp/static/console.html @@ -1,8 +1,21 @@ <html> <head> - <script src="lib/jquery-1.6.2/jquery-1.6.2.min.js"></script> <script src="lib/d3-v2.6.1/d3.js"></script> <style> + path { + stroke: steelblue; + stroke-width: 2; + fill: none; + } + + line { + stroke: black; + } + div.popup { + position: absolute; + border: 2px solid gray; + background-color: yellow; + } #log { height: 300px; overflow-y: scroll; @@ -21,20 +34,16 @@ "boilerWert" : "feuerungsautomat1.betriebsdatenRegler1.boilerTemperatur" }; function timeToString(timestamp) { + var f = d3.format("02d"); var d = new Date(); - return "" + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); + return f(d.getHours()) + ":" + f(d.getMinutes()) + ":" + f(d.getSeconds()); } function log(data) { for (var i in data) { var row = data[i]; + var caption = "[" + timeToString(row.timestamp) + "] " + row.name + " Value: " + row.value_real + " - " + row.value_string; - var sensor_name = data[i][0]; - var timestamp = data[i][1]; - var value = data[i][2]; - var caption = "" + timeToString(row.timestamp) + ": " + row.name + " Value: " + row.value_real + " - " + row.value_string; - - jQuery("div#log").prepend( - jQuery("<div>").text(caption)); + d3.select("#log").insert("div", "div").text(caption); for (var mapping_element_id in mapping) { var mapping_sensor_name = mapping[mapping_element_id]; @@ -46,22 +55,63 @@ } function reload(time_stop) { - jQuery.getJSON("../stream/" + time_stop, function(resp) { + d3.json("../stream/" + time_stop, function(resp) { log(resp.data); reload(resp.time_stop); }); } - jQuery(document).ready(function() { + d3.xml("draw.svg", "image/svg+xml", function(xml) { + // Put SVG Data into the DOM + d3.select("#image")[0][0].appendChild(xml.documentElement); + // Create Popup + for (var mapping_element_id in mapping) { + d3.select("#" + mapping_element_id).on("click", function() { + var elem = d3.select( this ); + var sensor_name = mapping[elem.attr("id")]; + var popup = d3.select("body") + .append("div") + .classed("popup", true) + .style("top", d3.event.clientY-5) + .style("left", d3.event.clientX-5) + .on("click", function() { + d3.select(this).remove(); + }); + popup.append("div") + .text(sensor_name); - d3.xml("draw.svg", "image/svg+xml", function(xml) { - jQuery("#image")[0].appendChild(xml.documentElement); - }); + var w = 550, h = 200, margin = 20; + var plot = popup.append("svg:svg") + .attr("width", w) + .attr("height", h); + + var startdate = (new Date().getTime()/1000) - 1*60*60*24 + var enddate = (new Date().getTime()/1000) + d3.json("../sensor/"+sensor_name+"/" + startdate + "/" + enddate, function(resp) { + var y = d3.scale.linear() + .domain([0, d3.max(resp.data, function(d){return d[1];})]) + .range([0+margin, h-margin]); + var x = d3.scale.linear() + .domain([0, resp.data.length]) + .range([0+margin, w-margin]); + + var g = plot.append("svg:g") + .attr("transform", "translate(0, "+h+")"); + + var line = d3.svg.line() + .x(function(d,i){return x(i); }) + .y(function(d) {return -1 * y(d[1]);}); + + g.append("svg:path") + .attr("d", line(resp.data)); + }); + }); + } - jQuery.getJSON("../all_values", function(resp) { + d3.json("../all_values", function(resp) { log(resp.data); - jQuery.getJSON("../stream", function(resp) { + d3.json("../stream", function(resp) { log(resp.data); reload(resp.time_stop); }); |