root / hci / trunk / eneraptor-web-app / grails-app / views / sysLog / live.gsp @ 68
History | View | Annotate | Download (2.37 KB)
1 | 68 | alexbesir | <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> |