Revision 76 hci/trunk/eneraptor-web-app/grails-app/views/sysLog/live.gsp
live.gsp | ||
---|---|---|
21 | 21 |
<label for="timeSpan">Time span</label> |
22 | 22 |
<g:select name="timeSpan" from="${1..60}" style="width:50px;" /><span> minutes</span> |
23 | 23 |
<br /><br /> |
24 |
<label for="outputDevice">Actions to show</label> |
|
25 |
<g:select name="outputDevice" from="${outputDevices}" optionValue="friendlyName" optionKey="deviceId" value="${params.outputDevice}" style="width:300px;" noSelection="${['none':'- None -']}" /> |
|
26 |
<br /><br /> |
|
24 | 27 |
<g:submitButton name="liveGraphSubmit" value="Start" /> |
25 | 28 |
</form> |
26 | 29 |
|
... | ... | |
28 | 31 |
|
29 | 32 |
<erptr:box title="Live graph"> |
30 | 33 |
<g:javascript> |
34 |
var plot; |
|
31 | 35 |
var running = false; |
32 | 36 |
var deviceId; |
33 | 37 |
var refreshRate; |
34 | 38 |
var timeSpan; |
39 |
var outputDevice; |
|
35 | 40 |
var data = [[]]; |
36 | 41 |
var options = { |
37 | 42 |
lines: { show: true }, |
38 | 43 |
points: { show: true }, |
39 |
xaxis: { mode: "time", timeformat: "%y/%m/%d %H:%M" } |
|
44 |
xaxis: { mode: "time", timeformat: "%y/%m/%d %H:%M" }, |
|
45 |
grid: { |
|
46 |
markings: [] |
|
47 |
} |
|
40 | 48 |
}; |
41 | 49 |
</g:javascript> |
42 | 50 |
<p name="textOut" id="textOut" style="font-family:monospace;">Ready.</p> |
43 | 51 |
<div class="chart"> |
44 |
<flot:plot id="placeholder" style="width: 900px; height: 300px; padding:5px;" data="data" options="options" /> |
|
52 |
<div id='placeholder' style='width: 900px; height: 300px; padding:5px;'></div> |
|
53 |
<script type='text/javascript'> |
|
54 |
jQuery(function (){ |
|
55 |
plot = jQuery.plot(jQuery("#placeholder"),data, options); |
|
56 |
}); |
|
57 |
</script> |
|
45 | 58 |
</div> |
59 |
|
|
60 |
<br /> |
|
61 |
<p>Legend:</p> |
|
62 |
<div id="legendHolder" name="legendHolder"></div> |
|
63 |
|
|
64 |
<table name="actionLegendHolder" id="actionLegendHolder" width="100%"> |
|
65 |
<p>A</p> |
|
66 |
</table> |
|
67 |
|
|
46 | 68 |
</erptr:box> |
47 | 69 |
|
48 | 70 |
<g:javascript> |
... | ... | |
52 | 74 |
deviceId = $('deviceId').value; |
53 | 75 |
refreshRate = $('refreshRate').value * 1000; |
54 | 76 |
timeSpan = $('timeSpan').value; |
77 |
outputDevice = $('outputDevice').value; |
|
55 | 78 |
|
56 | 79 |
graphUpdate(deviceId,refreshRate,timeSpan); |
57 | 80 |
|
58 | 81 |
} |
59 | 82 |
|
60 | 83 |
function graphUpdate(deviceId,refreshRate,timeSpan) { |
61 |
var dataurl = '${g.createLink(action:'liveGraph')}?deviceId=' + deviceId + '&timeSpan=' + timeSpan; |
|
84 |
var dataurl = '${g.createLink(action:'liveGraph')}?deviceId=' + deviceId + '&timeSpan=' + timeSpan + '&outputDevice=' + outputDevice;
|
|
62 | 85 |
|
63 | 86 |
function onDataReceived(series) { |
87 |
|
|
64 | 88 |
data = []; |
65 |
data.push(series); |
|
66 |
jQuery.plot(jQuery("#placeholder"), data, options); |
|
67 |
$('textOut').innerHTML = "Refreshed on " + new Date() + "."; |
|
89 |
data.push(series.data); |
|
90 |
|
|
91 |
var newInnerHTML = ""; |
|
92 |
options.grid.markings = []; |
|
93 |
|
|
94 |
jQuery.each(series.actionLog, function(iNum,iVal){ |
|
95 |
options.grid.markings.push( |
|
96 |
{ color: 'red', lineWidth: 1, xaxis: { from: iVal[0], to: iVal[0]} } |
|
97 |
); |
|
98 |
newInnerHTML += "<tr><td style=\"width:20px;\"><p style=\"color:red;font-size:smaller;\">" + (iNum+1) + "</p></td><td style=\"width:150px;\">" + new Date(iVal[0]).toLocaleString() + "</td><td>" + iVal[1] + "</td></tr>" |
|
99 |
}); |
|
100 |
|
|
101 |
plot = jQuery.plot(jQuery("#placeholder"), data, options); |
|
102 |
jQuery('#actionLegendHolder').html(newInnerHTML); |
|
103 |
|
|
104 |
var o; |
|
105 |
var num = 1; |
|
106 |
var placeholder = plot.getPlaceholder(); |
|
107 |
var vertica = getMax(plot.getData()[0].datapoints.points); |
|
108 |
|
|
109 |
jQuery.each(series.actionLog, function(iNum,iVal){ |
|
110 |
o = plot.pointOffset({ x: iVal[0], y: vertica}); |
|
111 |
placeholder.append("<div style=\"position:absolute;left:" + (o.left + 10) + "px;top:" + o.top + "px;color:red;font-size:smaller\"><a href=\"#\" onclick=\"return false;\" title=\"" + iVal[1] + "\">" + num + "</a></div>"); |
|
112 |
num++; |
|
113 |
}); |
|
114 |
|
|
68 | 115 |
} |
69 | 116 |
|
70 | 117 |
jQuery.ajax({ |
... | ... | |
75 | 122 |
}); |
76 | 123 |
|
77 | 124 |
if(running) { |
125 |
$('textOut').innerHTML = "Refreshed on " + new Date() + "."; |
|
78 | 126 |
setTimeout("graphUpdate(deviceId,refreshRate,timeSpan)",refreshRate); |
79 |
} |
|
80 |
|
|
127 |
} |
|
81 | 128 |
} |
129 |
|
|
130 |
function getMax(points) { |
|
131 |
var max = points[1]; |
|
132 |
for(i = 1; i < points.length; i += 2) { |
|
133 |
if(points[i] > max) max = points[i]; |
|
134 |
} |
|
135 |
return max; |
|
136 |
} |
|
82 | 137 |
</g:javascript> |
83 | 138 |
|
84 | 139 |
</body> |
Also available in: Unified diff