root / hci / trunk / eneraptor-web-app / grails-app / views / sysLog / live.gsp @ 68
History | View | Annotate | Download (2.37 KB)
1 |
<html> |
---|---|
2 |
|
3 |
<head> |
4 |
<title>Log » Live graph</title> |
5 |
<meta name="layout" content="main" /> |
6 |
<flot:resources /> |
7 |
</head> |
8 |
|
9 |
<body> |
10 |
|
11 |
<erptr:box title="Select device"> |
12 |
<p>Please, select a device, refresh rate and time span.</p> |
13 |
|
14 |
<form action="javascript:startLiveGraph();"> |
15 |
<label for="deviceId">Device ID</label> |
16 |
<g:select name="deviceId" from="${devices}" optionValue="friendlyName" optionKey="deviceId" value="${params.deviceId}" style="width:300px;" /> |
17 |
<br /><br /> |
18 |
<label for="refreshRate">Refresh rate</label> |
19 |
<g:select name="refreshRate" from="${1..60}" style="width:50px;" /><span> seconds</span> |
20 |
<br /><br /> |
21 |
<label for="timeSpan">Time span</label> |
22 |
<g:select name="timeSpan" from="${1..60}" style="width:50px;" /><span> minutes</span> |
23 |
<br /><br /> |
24 |
<g:submitButton name="liveGraphSubmit" value="Start" /> |
25 |
</form> |
26 |
|
27 |
</erptr:box> |
28 |
|
29 |
<erptr:box title="Live graph"> |
30 |
<g:javascript> |
31 |
var running = false; |
32 |
var deviceId; |
33 |
var refreshRate; |
34 |
var timeSpan; |
35 |
var data = [[]]; |
36 |
var options = { |
37 |
lines: { show: true }, |
38 |
points: { show: true }, |
39 |
xaxis: { mode: "time", timeformat: "%y/%m/%d %H:%M" } |
40 |
}; |
41 |
</g:javascript> |
42 |
<p name="textOut" id="textOut" style="font-family:monospace;">Ready.</p> |
43 |
<div class="chart"> |
44 |
<flot:plot id="placeholder" style="width: 900px; height: 300px; padding:5px;" data="data" options="options" /> |
45 |
</div> |
46 |
</erptr:box> |
47 |
|
48 |
<g:javascript> |
49 |
function startLiveGraph() { |
50 |
|
51 |
running = true; |
52 |
deviceId = $('deviceId').value; |
53 |
refreshRate = $('refreshRate').value * 1000; |
54 |
timeSpan = $('timeSpan').value; |
55 |
|
56 |
graphUpdate(deviceId,refreshRate,timeSpan); |
57 |
|
58 |
} |
59 |
|
60 |
function graphUpdate(deviceId,refreshRate,timeSpan) { |
61 |
var dataurl = '${g.createLink(action:'liveGraph')}?deviceId=' + deviceId + '&timeSpan=' + timeSpan; |
62 |
|
63 |
function onDataReceived(series) { |
64 |
data = []; |
65 |
data.push(series); |
66 |
jQuery.plot(jQuery("#placeholder"), data, options); |
67 |
$('textOut').innerHTML = "Refreshed on " + new Date() + "."; |
68 |
} |
69 |
|
70 |
jQuery.ajax({ |
71 |
url: dataurl, |
72 |
method: 'GET', |
73 |
dataType: 'json', |
74 |
success: onDataReceived |
75 |
}); |
76 |
|
77 |
if(running) { |
78 |
setTimeout("graphUpdate(deviceId,refreshRate,timeSpan)",refreshRate); |
79 |
} |
80 |
|
81 |
} |
82 |
</g:javascript> |
83 |
|
84 |
</body> |
85 |
|
86 |
</html> |