Gitiles
Code Review Sign In
realtimeroboticsgroup.org / RealtimeRoboticsGroup / test / bdb541036bab8361ea6a1f8a85a88c3140b2abe4 / . / y2016 / dashboard / www / index.html
blob: b7f943fb49b88ec4cda47d797e2a7f1ef577c83b [file] [log] [blame]
Comran Morsheddaf69232016-04-20 22:25:37 -0700[diff] [blame]1<!DOCTYPE html>
2<html>
3<head>
4<title>Spartan Dashboard</title>
5
6<script type="text/javascript">
7var escapable =
8 /[\x00-\x1f\ud800-\udfff\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufff0-\uffff]/g;
9var ws;
Comran Morshed40a18002016-04-28 13:40:26 -0700[diff] [blame]10var intervalTime = 100;
Comran Morsheddaf69232016-04-20 22:25:37 -0700[diff] [blame]11var selected = 0;
12var reconnecting = false;
13var lastSampleID = 0;
Comran Morshed40a18002016-04-28 13:40:26 -0700[diff] [blame]14var reconnectTimeout;
Comran Morsheddaf69232016-04-20 22:25:37 -0700[diff] [blame]15
16// Filter out junky JSON packets that will otherwise cause nasty decoding
17// errors. These errors come as a result of incomplete packets, corrupted data,
18// or any other artifacts that find themselves into the socket stream.
19
20function filterUnicode(quoted) {
21 escapable.lastIndex = 0;
22 if (!escapable.test(quoted)) return quoted;
23
24 return quoted.replace(escapable, '');
25}
26
27// Change the current data index to plot on the graph.
28// Get a new JSON packet from the websocket on the robot.
29function refresh() {
30 if (!reconnecting) ws.send(lastSampleID);
31}
32
33function initSocketLoop() {
34 ws = new WebSocket('ws://' + document.location.host + '/ws');
35
36 var numDatas = 0;
37
38 $(function() {
39
40 // Socket created & first opened.
41 ws.onopen = function() {
42 reconnecting = false;
43 refresh();
44 $('#message').text('');
45 };
46
47 // Socket disconnected.
48 ws.onclose = function() {
49 console.log('onclose');
50 reconnect();
51 };
52
53 ws.onmessage = function(message) {
54 message = message.data;
55 if(message.charAt(0) == "*"){
56 message = message.substring(1);
57 var names = message.split(",");
58 for (var i = numDatas; i < names.length; i++) {
59 $('#dataTable').append('<tr><td>' + names[i] + '</td><td></td></tr>');
60 numDatas++;
61 }
62 lastSampleID = 1;
63 }else{
64 var samples = message.split("$");
65 for(var x = 0;x < samples.length;x++){
66 var info = samples[x].split("%");
67 lastSampleID = info[0];
68
69 if(!(typeof info[2] === "undefined")){
70 var values = info[2].split(",");
71
72 // For the big indicator.
73 switch(parseInt(values[0])){
74 case 1:
75 $("#bigIndicator").css("background", "#00FF00");
76 $("#bigIndicator").css("color", "#000000");
77 $("#bigIndicator").text("Ball detected");
78 break;
79 case 2:
80 $("#bigIndicator").css("background", "#FFFF00");
81 $("#bigIndicator").css("color", "#000000");
82 $("#bigIndicator").text("Target seen");
83 break;
84 case 3:
85 $("#bigIndicator").css("background", "#0000FF");
86 $("#bigIndicator").css("color", "#000000");
87 $("#bigIndicator").text("Target aligned");
88 break;
89 case 0:
90 default:
91 $("#bigIndicator").css("background", "#000000");
92 $("#bigIndicator").css("color", "#444444");
Campbell Crowley9ed61a52016-11-05 17:13:07 -0700[diff] [blame]93 $("#bigIndicator").text("No ball");
Comran Morsheddaf69232016-04-20 22:25:37 -0700[diff] [blame]94 break;
95 }
96
97 // Superstructure state indicator.
98 switch(parseInt(values[1])){
99 case 1:
100 $("#superstructureStateIndicator").css("background", "#FF0000");
101 $("#superstructureStateIndicator").css("color", "#000000");
102 $("#superstructureStateIndicator").text("Not zeroed");
103 break;
104 case 2:
105 $("#superstructureStateIndicator").css("background", "#FF8C00");
106 $("#superstructureStateIndicator").css("color", "#000000");
107 $("#superstructureStateIndicator").text("Estopped");
108 break;
109 case 0:
110 default:
111 $("#superstructureStateIndicator").css("background", "#000000");
112 $("#superstructureStateIndicator").css("color", "#444444");
113 $("#superstructureStateIndicator").text("Superstructure OK");
114 break;
115 }
116
117 // Auto mode indicator.
118 $("#autoModeIndicator").text("Mode: " + values[2]);
119 if (parseInt(values[2]) < 0){
120 $("#autoModeIndicator").css("visibility", "hidden");
121 } else {
122 $("#autoModeIndicator").css("visibility", "visible");
123 }
124
125 // Populate data table.
126 for(var y = 0;y < values.length;y++){
127 if(!(typeof info[1] === "undefined"
128 || typeof values[y] === "undefined")){
129 $('#dataTable').find('tr').eq(y).find('td').eq(1)
130 .text(values[y]);
131 }
132 }
133 }
134 }
135 }
136
137 setTimeout(refresh, intervalTime);
138 };
139
140 // Socket error, most likely due to a server-side error.
141 ws.onerror = function(error) {
142 console.log('onerror ' + error);
143 };
144 });
145}
146
147function reconnect() {
Comran Morshed40a18002016-04-28 13:40:26 -0700[diff] [blame]148 clearTimeout(reconnectTimeout);
Comran Morsheddaf69232016-04-20 22:25:37 -0700[diff] [blame]149 $('#message').text('Reconnecting...');
150 $('#dataTable').empty();
151 lastSampleID = 0;
152 reconnecting = true;
153
Comran Morshed40a18002016-04-28 13:40:26 -0700[diff] [blame]154 reconnectTimeout = setTimeout(function(){
Comran Morsheddaf69232016-04-20 22:25:37 -0700[diff] [blame]155 initSocketLoop()
156 }, 500);
157}
158
159window.onload = function() {
160 initSocketLoop();
161}
162</script>
Comran Morshed38967332016-04-23 19:26:48 -0700[diff] [blame]163<script type="text/javascript" src='jquery-2.2.3.min.js'></script>
Comran Morsheddaf69232016-04-20 22:25:37 -0700[diff] [blame]164<style>
165body {
166 width: 100%;
167 margin-left: auto;
168 margin-right:auto;
169}
170
171#dataTable {
172 position: absolute;
173 top: 0;
174 background: #FFFFFF;
175 left: 0;
176 width: 200px;
177 cell-spacing:0;
178 cell-padding:0;
179 text-align: left;
180 z-index: 99999;
181}
182
183#headsUpDisplay {
184 width: 1000px;
185 position: absolute;
186 margin-left: auto;
187 margin-right: auto;
188 left: 0;
189 right: 0;
190 z-index: 10000000;
191}
192
193#message {
194 color: #FF0000;
195 text-align: center;
196 background: #000000;
197 font-size: 100px;
198}
199
200#indicatorContainer {
201 width: 100%;
202 height: 100%;
203 position: absolute;
204 top: 0;
205 left: 0;
206 background: #000000;
207 text-align: center;
208 font-size: 100px;
209}
210
211#bigIndicator {
212 background: #000000;
213}
214
215#superstructureStateIndicator {
216 background: #000000;
217 width: 60%;
218}
219
220#autoModeIndicator {
Campbell Crowley9ed61a52016-11-05 17:13:07 -0700[diff] [blame]221 background: #444444;
222 color: #AAAAAA;
Comran Morsheddaf69232016-04-20 22:25:37 -0700[diff] [blame]223}
224</style>
225</head>
226<body>
227<!-- Data -->
228<table id="dataTable">
229</table>
230
231<div id="headsUpDisplay">
232 <p id="message"></p>
233 <p id="data"></p>
234</div>
235
236<table id="indicatorContainer">
237 <tr>
238 <td id="bigIndicator" colspan="2">Ball detected</td>
239 </tr>
240 <tr style="height:10%">
241 <td id="superstructureStateIndicator">Superstructure state</td>
242 <td id="autoModeIndicator">Auto mode</td>
243 </tr>
244</table>
245
246</body>
247</html>