00001
00002 var duration = 1000;
00003 var colors = ["black","red","blue","green", "yellow","gray","fuchsia","navy","olive", "aqua", "lime", "maroon", "orange", "purple", "silver", "teal"];
00004 var graphs = [];
00005 var events = [];
00006 var currentEvent = 0;
00007 var eventsBehind = 0;
00008 var partition = 0;
00009 var moduleName = "artdaq-runcontrol";
00010 var fetching = false;
00011 var updateInterval = 500;
00012
00013 function tick(graph, event) {
00014 var transition = d3.select(graph.tag).transition()
00015 .duration(duration)
00016 .ease("linear").attrTween("transform", function () {
00017
00018 var vals = $.map(event.fragments, function(v) {
00019 return v.data[graph.dataElement];
00020 });
00021 $("#p" + partition + graph.dataElement + "value").text("Current Value(s): " + vals);
00022
00023 for(var name in graph.data) {
00024 var plotName = graph.data[name].name;
00025 var value = vals[name];
00026 graph.data[name].data.push({event:event.event,value:value});
00027 }
00028
00029
00030 var xextent = [currentEvent, currentEvent];
00031 for(var name in graph.data) {
00032 var group = graph.data[name];
00033 var thisExtent = d3.extent(group.data,function(d) { return d.event;});
00034 if(thisExtent[0] < xextent[0]){xextent[0] = thisExtent[0];}
00035 }
00036 graph.x.domain(xextent);
00037
00038 var extent = [0x1000000, 0];
00039 for (var name in graph.data) {
00040 var group = graph.data[name];
00041 var thisExtent = d3.extent(group.data, function (d) { return d.value; });
00042 if (thisExtent[0] < extent[0]) { extent[0] = thisExtent[0]; }
00043 if (thisExtent[1] > extent[1]) { extent[1] = thisExtent[1]; }
00044 }
00045 graph.y.domain([extent[0] * 98 / 100, extent[1] * 102 / 100]);
00046
00047
00048
00049 graph.axes[0].call(graph.x.axis);
00050 graph.axes[1].call(graph.y.axis);
00051
00052 for(var name in graph.data) {
00053
00054 graph.data[name].path
00055 .attr("d", graph.line)
00056 .attr("transform", null)
00057 .transition()
00058 .duration(duration)
00059 .ease("linear")
00060 .attr("transform", "translate(" + graph.x(xextent[0]) + ")");
00061
00062 if(graph.caughtUp) {
00063 graph.data[name].data = graph.data[name].data.sort(function(a,b) { return a.event - b.event; });
00064 }
00065 while (graph.data[name].data.length > 0 && graph.data[name].data[0].event < currentEvent - graph.n) {
00066 graph.data[name].data.shift();
00067 }
00068 }
00069
00070 if(graph.caughtUp) { graph.caughtUp = false;}
00071 }).transition();
00072 return graph;
00073 }
00074
00075 function DeleteGraph(dataElement) {
00076 $("#p" + partition + dataElement + "plot").remove();
00077 }
00078
00079 function MakeEventGraph(tag, dataElement) {
00080 data = [];
00081 var margin = { top: 6, right: 20, bottom: 20, left: 60 },
00082 width = $(tag).width() - margin.right - margin.left,
00083 height = 120 - margin.top - margin.bottom;
00084
00085 var x = d3.scale.linear()
00086 .range([0, width]);
00087
00088 var y = d3.scale.linear()
00089 .range([height, 0]);
00090
00091 var line = d3.svg.line()
00092 .interpolate("linear")
00093 .x(function (d) { return x(d.event); })
00094 .y(function (d) { return y(d.value); });
00095
00096 var svg = d3.select(tag).append("svg")
00097 .attr("width", width + margin.left + margin.right)
00098 .attr("height", height + margin.top + margin.bottom)
00099 .style("margin-left", -margin.right + "px")
00100 .append("g")
00101 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
00102
00103 svg.append("defs").append("clipPath")
00104 .attr("id", "clip" + tag.replace('#', ""))
00105 .append("rect")
00106 .attr("width", width)
00107 .attr("height", height);
00108
00109 var xaxis = svg.append("g")
00110 .attr("class", "x axis")
00111 .attr("transform", "translate(0," + height + ")")
00112 .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));
00113
00114 var formatTick = function (d) {
00115 var prefix = d3.formatPrefix(d);
00116 return prefix.scale(d) + " " + prefix.symbol + "";
00117 }
00118
00119 var yaxis = svg.append("g")
00120 .attr("class", "y axis")
00121 .attr("transform", "translate(0,0)")
00122 .call(y.axis = d3.svg.axis().scale(y).tickFormat(formatTick).orient("left"));
00123
00124 var paths = svg.append("g")
00125 .attr("clip-path", "url(#clip" + tag.replace('#', "") + ")");
00126
00127 var fragCount = events[0].fragments.length;
00128
00129 for (var i = 0; i < fragCount; i++) {
00130 if(events[0].fragments[i].data[dataElement]) {
00131 var color = colors[i%colors.length];
00132 var thisData = {};
00133 thisData.name = i;
00134 thisData.data = [];
00135 for(var j = 0; j < events.length; j++) {
00136 var value = events[j].fragments[i].data[dataElement];
00137 thisData.data.push({event:events[j].event,value: value});
00138 }
00139 thisData.path = paths.append('path')
00140 .data([thisData.data])
00141 .attr('class', 'line')
00142 .style('stroke', color);
00143 data.push(thisData);
00144 }
00145 }
00146
00147 this.paths = paths;
00148 this.line = line;
00149 this.axes = [xaxis, yaxis];
00150 this.dataElement = dataElement;
00151 this.x = x;
00152 this.y = y;
00153 this.data = data;
00154 this.tag = tag;
00155 this.n = 120;
00156 this.update = function(event) { return tick(this, event); };
00157 }
00158
00159 function RedrawGraph(graph) {
00160 for(var name in graph.data) {
00161 while(graph.data[name].data.length > 0) {
00162 graph.data[name].data.shift();
00163 }
00164 }
00165
00166 for(var i = 0; i < events.length - 1; i++) {
00167 var vals = $.map(events[i].fragments, function(v) {
00168 return v.data[graph.dataElement];
00169 });
00170
00171 for(var name in graph.data) {
00172 var plotName = graph.data[name].name;
00173 var value = vals[name];
00174 graph.data[name].data.push({event:events[i].event,value:value});
00175 }
00176 }
00177
00178 graph.update(events[events.length - 1]);
00179 }
00180
00181 function CreateEventPlot(partition, dataElement)
00182 {
00183 if($("#p" + partition + dataElement + "plot").length == 0) {
00184 $("#plots").append("<div id=\"p" +partition + dataElement + "plot\">"
00185 + "<h3>"+dataElement+"</h3>"
00186 +" <label id=\"p"+partition+dataElement+"value\"></label> "
00187 + "<label>Number of Points to Plot:<input type=\"number\" min=1 value=120 id=\"p"+partition+dataElement+"nSelector\"></label> "
00188 + "<button type=\"button\" id=\"p"+ partition + dataElement + "deletebutton\">Delete</button>"
00189 + "<br>"
00190 + "<div id=\"p" + partition + dataElement + "\"></div><br></div>");
00191 $("#p"+partition+dataElement +"deletebutton").click(function() { DeleteGraph(dataElement); });
00192 $("#p"+partition+dataElement +"nSelector").bind('keyup input', function() { graphs[dataElement].n = $("#p"+partition+dataElement+"nSelector").val(); RedrawGraph(graphs[dataElement]);});
00193 graphs[dataElement] = new MakeEventGraph("#p" + partition + dataElement, dataElement);
00194 graphs[dataElement].update(events[events.length - 1]);
00195 }
00196 }
00197
00198 function Contains(arr, val)
00199 {
00200 for (var i = 0; i < arr.length; i++) {
00201 if (arr[i] === val) {
00202 return true;
00203 }
00204 }
00205 return false;
00206 }
00207
00208 function UpdateGraphs()
00209 {
00210 if(!fetching) {
00211 fetching = true;
00212 var postData = {event: currentEvent, partition: partition};
00213 d3.json("/"+moduleName+"/GetEvent").post(JSON.stringify(postData), function(error, data) {
00214
00215 if(data && data != "" && data != "ENOEVT") {
00216 updateInterval = 500;
00217 var dataJSON = JSON.parse(data);
00218 events.push(dataJSON);
00219 var bigN = 120;
00220 for(var graph in graphs) {
00221 if(graphs[graph].n > bigN) { bigN = graphs[graph].n; }
00222 graphs[graph] = graphs[graph].update(dataJSON);
00223 }
00224 while(events.length > bigN) { events.shift(); }
00225 currentEvent = dataJSON.event + 1;
00226 eventsBehind = dataJSON.lastEvent - dataJSON.event - 1;
00227 }
00228 else if(data && data == "ENOEVT") {
00229 currentEvent++;
00230 eventsBehind = 1;
00231 }
00232 else {
00233 if(updateInterval < 10000) {
00234
00235 updateInterval += 500;
00236 }
00237 }
00238 fetching = false;
00239 });
00240 }
00241
00242 var gotBehind = false;
00243 if(eventsBehind > 1 ) {
00244 updateInterval = 10;
00245 gotBehind = true;
00246 }
00247
00248 for(var graph in graphs) {
00249 if(!gotBehind && graphs[graph].gotBehind) { graphs[graph].caughtUp = true; }
00250 graphs[graph].gotBehind = gotBehind;
00251 }
00252
00253 setTimeout(function() { UpdateGraphs(); }, updateInterval);
00254 }
00255
00256
00257 function Onmon(tag, part, module)
00258 {
00259 moduleName = module;
00260 partition = part;
00261
00262 graphs = [];
00263 events = [];
00264 currentEvent = 0;
00265 eventsBehind = 0;
00266
00267 var postData = {event: 0, partition: partition};
00268 d3.json("/"+moduleName+"/GetEvent").post(JSON.stringify(postData), function(error, serverdata) {
00269 var data = JSON.parse(serverdata);
00270 var names = [];
00271 for(var frag in data.fragments) {
00272 var fragData = data.fragments[frag];
00273 if(fragData.header.data_type === 1) {
00274 for(var iterator in fragData.data) {
00275 if(!Contains(names, iterator)) {
00276 names.push(iterator);
00277 }
00278 }
00279 }
00280 }
00281
00282 var output = "";
00283 for(var iterator in names) {
00284 output += "<option value=\"" + names[iterator] + "\">" + names[iterator] + "</option>\n";
00285 }
00286 $(tag).html( "<fieldset>\n"
00287 + "<select id=\"newPlotElement\">\n"
00288 + output
00289 + "</select>"
00290 + "<button type=\"button\" id=\"addPlot\" onclick=\"CreateEventPlot(" + partition + ",$('#newPlotElement').val())\">Add</button>\n"
00291 + "<div id=\"plots\"></div>"
00292 + "</fieldset>");
00293 });
00294
00295 UpdateGraphs();
00296 }