-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
99 lines (99 loc) · 4.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html>
<head>
<title>IOT Gateway Log</title>
<script src="http://gatd.eecs.umich.edu/bower_components/socket.io-client/dist/socket.io.min.js"></script> <!--Not live-->
<script src="http://gatd.eecs.umich.edu/bower_components/jquery/dist/jquery.min.js"></script> <!--Not live-->
<script src="http://inductor.eecs.umich.edu/bower_components/socket.io-client/dist/socket.io.min.js"></script>
<script src="http://inductor.eecs.umich.edu/bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.4.0/bootstrap-table.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.4.0/bootstrap-table.min.css" rel="stylesheet" type="text/css">
<style>
html { height:100%; }
body { font-family:'Helvetica Neue'; font-weight:200; font-size:small; text-align:center; height:100% }
table {font-size:small;}
td { font-family:'Helvetica Neue'; font-weight:200; font-size:small; }
</style>
</head>
<body>
<h3 style="height:1%">AT GATEWAY (RECEIVED AT DEBUG CLOUD)</h3>
<div style="height:30%">
<table id="debug-table">
<thead>
<tr>
<th data-field="time">TIMESTAMP</th>
<th data-field="DEVICE_ID">PERIPHERAL ID</th>
<th data-field="NAME">NAME</th>
<th data-field="RSSI">RSSI</th>
<th data-field="DESTINATION">SEND TO</th>
<!--<th data-field="TRANSPARENT">TFLG</th>-->
<!-- <th data-field="RATE">RATE</th> -->
<th data-field="QOS">QOS</th>
<th data-field="PROGRAM">PROG</th>
<th data-field="DATA">DATA</th>
<th data-field="SENSORS">SENSORS</th>
</tr>
</thead>
</table>
</div>
<h3 style="height:1%">RECEIVED AT DATA CLOUD</h3>
<div style="height:30%">
<table id="receive-table">
<thead>
<tr>
<th data-field="time">TIMESTAMP</th>
<th data-field="DATA">DATA</th>
<th data-field="GWTIME">GW TIME</th>
<th data-field="LOCATION">LOCATION</th>
<!-- <th data-field="TEMPERATURE">TEMP</th> -->
<!-- <th data-field="HUMIDITY">HUM</th> -->
<th data-field="ACCELEROMETER">ACCEL</th>
<th data-field="LIGHT">LIGHT</th>
<th data-field="TEXT">TEXT</th>
<th data-field="IMAGE">IMAGE</th>
</tr>
</thead>
</table>
</div>
<h3 style="height:1%">RECEIVED AT INCENTIVE CLOUD</h3>
<div style="height:30%">
<table id="incentive-table">
<thead>
<tr>
<th data-field="time">TIMESTAMP</th>
<th data-field="DEVICE_ID">PERIPHERAL ID</th>
<th data-field="PROGRAM_IP">PROGRAM IP</th>
<th data-field="PROGRAM_NAME">PROGRAM NAME</th>
<th data-field="PROGRAM_PAY">PROGRAM PAY</th>
<th data-field="TOTAL_SIZE">TOTAL SIZE</th>
<th data-field="THIS_SIZE">THIS SIZE</th>
</tr>
</thead>
</table>
</div>
<script>
debug_data = [], receive_data = [], incentive_data = [] ;
$(function () { $('#debug-table').bootstrapTable({ data: debug_data }); });
$(function () { $('#receive-table').bootstrapTable({ data: receive_data }); });
$(function () { $('#incentive-table').bootstrapTable({ data: incentive_data }); });
onload = function() {
socket = io.connect('gatd.eecs.umich.edu:8082/stream');
socket.on('connect', function (dat) { socket.emit('query', {'profile_id':'SgYPCHTR5a','time': 2*60*1000 } ); });
socket.on('data', function (dat) {
dat.time=new Date(dat.time-3*60*1000+10000).toLocaleTimeString();
if (dat.TYPE == "debug") {
debug_data.unshift(dat);
$('#debug-table').bootstrapTable('load', debug_data );
} else if (dat.TYPE == "data") {
if (typeof dat.IMAGE !== 'undefined') dat.IMAGE = "<a href='data:image/jpg;base64,"+dat.IMAGE+"' target='_blank'>View</a>";
receive_data.unshift(dat);
$('#receive-table').bootstrapTable('load', receive_data );
console.log(dat);
} else if (dat.TYPE == "incentive") {
incentive_data.unshift(dat);
$('#incentive-table').bootstrapTable('load', incentive_data );
}
});
}
</script>
</body>
</html>