root / hci / trunk / eneraptor-web-app / grails-app / views / sysLog / live.gsp @ 76
History | View | Annotate | Download (4.3 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 | 76 | alexbesir | <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 /> |
||
27 | 68 | alexbesir | <g:submitButton name="liveGraphSubmit" value="Start" /> |
28 | </form> |
||
29 | |||
30 | </erptr:box> |
||
31 | |||
32 | <erptr:box title="Live graph"> |
||
33 | <g:javascript> |
||
34 | 76 | alexbesir | var plot; |
35 | 68 | alexbesir | var running = false; |
36 | var deviceId; |
||
37 | var refreshRate; |
||
38 | var timeSpan; |
||
39 | 76 | alexbesir | var outputDevice; |
40 | 68 | alexbesir | var data = [[]]; |
41 | var options = { |
||
42 | lines: { show: true }, |
||
43 | points: { show: true }, |
||
44 | 76 | alexbesir | xaxis: { mode: "time", timeformat: "%y/%m/%d %H:%M" }, |
45 | grid: { |
||
46 | markings: [] |
||
47 | } |
||
48 | 68 | alexbesir | }; |
49 | </g:javascript> |
||
50 | <p name="textOut" id="textOut" style="font-family:monospace;">Ready.</p> |
||
51 | <div class="chart"> |
||
52 | 76 | alexbesir | <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> |
||
58 | 68 | alexbesir | </div> |
59 | 76 | alexbesir | |
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 | |||
68 | 68 | alexbesir | </erptr:box> |
69 | |||
70 | <g:javascript> |
||
71 | function startLiveGraph() { |
||
72 | |||
73 | running = true; |
||
74 | deviceId = $('deviceId').value; |
||
75 | refreshRate = $('refreshRate').value * 1000; |
||
76 | timeSpan = $('timeSpan').value; |
||
77 | 76 | alexbesir | outputDevice = $('outputDevice').value; |
78 | 68 | alexbesir | |
79 | graphUpdate(deviceId,refreshRate,timeSpan); |
||
80 | |||
81 | } |
||
82 | |||
83 | function graphUpdate(deviceId,refreshRate,timeSpan) { |
||
84 | 76 | alexbesir | var dataurl = '${g.createLink(action:'liveGraph')}?deviceId=' + deviceId + '&timeSpan=' + timeSpan + '&outputDevice=' + outputDevice; |
85 | 68 | alexbesir | |
86 | function onDataReceived(series) { |
||
87 | 76 | alexbesir | |
88 | 68 | alexbesir | data = []; |
89 | 76 | alexbesir | 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 | |||
115 | 68 | alexbesir | } |
116 | |||
117 | jQuery.ajax({ |
||
118 | url: dataurl, |
||
119 | method: 'GET', |
||
120 | dataType: 'json', |
||
121 | success: onDataReceived |
||
122 | }); |
||
123 | |||
124 | if(running) { |
||
125 | 76 | alexbesir | $('textOut').innerHTML = "Refreshed on " + new Date() + "."; |
126 | 68 | alexbesir | setTimeout("graphUpdate(deviceId,refreshRate,timeSpan)",refreshRate); |
127 | 76 | alexbesir | } |
128 | 68 | alexbesir | } |
129 | 76 | alexbesir | |
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 | } |
||
137 | 68 | alexbesir | </g:javascript> |
138 | |||
139 | </body> |
||
140 | |||
141 | </html> |