Revision 68
hci/trunk/eneraptor-web-app/web-app/css/style.css | ||
---|---|---|
416 | 416 |
|
417 | 417 |
.sysLog-main{background:transparent url(../img/icons/eye.png) no-repeat left;} |
418 | 418 |
.sysLog-browse{background:transparent url(../img/icons/magnifier.png) no-repeat left;} |
419 |
.sysLog-graph{background:transparent url(../img/icons/chart_curve.png) no-repeat left;} |
|
419 |
.sysLog-graph{background:transparent url(../img/icons/chart_line.png) no-repeat left;} |
|
420 |
.sysLog-live{background:transparent url(../img/icons/chart_line_go.png) no-repeat left;} |
|
420 | 421 |
.sysLog-export{background:transparent url(../img/icons/disk_multiple.png) no-repeat left;} |
421 | 422 |
.sysLog-clear{background:transparent url(../img/icons/bin.png) no-repeat left;} |
422 | 423 |
|
hci/trunk/eneraptor-web-app/grails-app/views/sysLog/live.gsp | ||
---|---|---|
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> |
hci/trunk/eneraptor-web-app/grails-app/views/sysLog/graph.gsp | ||
---|---|---|
14 | 14 |
|
15 | 15 |
<form action="graph"> |
16 | 16 |
<label for="deviceId">Device ID</label> |
17 |
<g:select name="deviceId" from="${devices}" optionValue="friendlyName" optionKey="deviceId" value="${params.deviceId}" /> |
|
17 |
<g:select name="deviceId" from="${devices}" optionValue="friendlyName" optionKey="deviceId" value="${params.deviceId}" style="width:300px;" />
|
|
18 | 18 |
<br /><br /> |
19 | 19 |
<label for="fromDate">From</label> |
20 | 20 |
<g:datePicker name="fromDate" value="${params.fromDate}" /> |
hci/trunk/eneraptor-web-app/grails-app/views/sysLog/liveGraph.gsp | ||
---|---|---|
1 |
{ |
|
2 |
data: ${data} |
|
3 |
} |
hci/trunk/eneraptor-web-app/grails-app/services/com/eneraptor/hci/MainMenuService.groovy | ||
---|---|---|
37 | 37 |
sysLogSubMenu = new ArrayList() |
38 | 38 |
sysLogSubMenu.add(new MenuItem("Overview","sysLog","main")) |
39 | 39 |
sysLogSubMenu.add(new MenuItem("Browse","sysLog","browse")) |
40 |
sysLogSubMenu.add(new MenuItem("View logged data graphically","sysLog","graph")) |
|
40 |
sysLogSubMenu.add(new MenuItem("View graphically","sysLog","graph")) |
|
41 |
sysLogSubMenu.add(new MenuItem("Live graph","sysLog","live")) |
|
41 | 42 |
sysLogSubMenu.add(new MenuItem("Export","sysLog","export")) |
42 | 43 |
sysLogSubMenu.add(new MenuItem("Clear","sysLog","clear")) |
43 | 44 |
|
hci/trunk/eneraptor-web-app/grails-app/controllers/com/eneraptor/hci/SysLogController.groovy | ||
---|---|---|
332 | 332 |
redirect(action:'clear') |
333 | 333 |
|
334 | 334 |
} |
335 |
|
|
336 |
def live = { |
|
337 |
|
|
338 |
List devices = new ArrayList() |
|
339 |
|
|
340 |
def crit1 = DeviceInfo.createCriteria() |
|
341 |
devices = crit1 { |
|
342 |
and { |
|
343 |
eq("inputDevice",true) |
|
344 |
eq("hwSet",session.hwSet) |
|
345 |
} |
|
346 |
order("friendlyName","asc") |
|
347 |
} |
|
348 |
|
|
349 |
[devices: devices] |
|
350 |
|
|
351 |
} |
|
352 |
|
|
353 |
def liveGraph = { |
|
354 |
|
|
355 |
List data = new ArrayList() |
|
356 |
java.util.Date now = new java.util.Date() |
|
357 |
|
|
358 |
if(params['deviceId'] && params['timeSpan']) { |
|
359 |
|
|
360 |
System.out.println("[LiveGraph] Getting for " + params.deviceId + ", time span " + params.timeSpan); |
|
361 |
|
|
362 |
java.util.Date beforeNMinutes = new java.util.Date( |
|
363 |
now.time - (60000 * (params.timeSpan as int)) |
|
364 |
) |
|
365 |
|
|
366 |
def c = LoggedData.createCriteria() |
|
367 |
def results = c { |
|
368 |
and { |
|
369 |
eq("deviceId",params['deviceId']) |
|
370 |
between("dateRecieved",beforeNMinutes,now) |
|
371 |
} |
|
372 |
order("dateRecieved","asc") |
|
373 |
} |
|
374 |
|
|
375 |
results.each { |
|
376 |
data << [it.dateRecieved.getTime(),it.reportedData] |
|
377 |
} |
|
378 |
|
|
379 |
System.out.println(data); |
|
380 |
|
|
381 |
} |
|
382 |
|
|
383 |
[params:params, data:data] |
|
384 |
|
|
385 |
} |
|
335 | 386 |
|
336 | 387 |
} |
Also available in: Unified diff