Revision 76 hci/trunk/eneraptor-web-app/grails-app/views/sysLog/live.gsp

View differences:

live.gsp
21 21
			<label for="timeSpan">Time span</label>
22 22
			<g:select name="timeSpan" from="${1..60}" style="width:50px;" /><span>&nbsp;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