// 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 > 4*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 = $("
").addClass("picker").appendTo("#sensorpicker"); var pickerCheckbox = $("").attr("type","checkbox").appendTo(pickerDiv); pickerCheckbox.data("name", sensorConfig["name"]); $("").text( sensorConfig.description + " (" + sensorConfig.sensorname + ")").appendTo(pickerDiv); if (sensorConfig.show) { //Plot plotSensor(sensorConfig); $(pickerCheckbox).attr("checked","checked"); } }); function printDetail( // 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); } }); });