Skip to content

Commit a503bea

Browse files
BaldwinBaldwin
Baldwin
authored and
Baldwin
committed
Port dashboard tool to JS
1 parent f7bcaa1 commit a503bea

5 files changed

Lines changed: 96 additions & 16 deletions

File tree

‎openxc/tools/dashboard.py‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,7 @@ def main():
4545
socketio.start_background_task(vehicle_data_thread)
4646
print("View the dashboard at http://127.0.0.1:5000")
4747
app.run()
48+
49+
if __name__ == '__main__':
50+
socketio.start_background_task(vehicle_data_thread)
51+
app.run()

‎openxc/tools/static/js/dashboard.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
let dataPoints = {};
2+
3+
$(document).ready(function() {
4+
namespace = '';
5+
var socket = io(namespace);
6+
socket.on('vehicle data', function(msg, cb) {
7+
// console.log(msg);
8+
9+
if (!(msg.name in dataPoints)) {
10+
dataPoints[msg.name] = {
11+
current_data: undefined,
12+
events: {},
13+
messages_received: 0,
14+
measurement_type: undefined,
15+
min: undefined,
16+
max: undefined,
17+
last_update_time: undefined,
18+
average_time_since_update: undefined
19+
};
20+
}
21+
22+
updateDataPoint(dataPoints[msg.name], msg);
23+
updateDisplay(msg.name, msg.value);
24+
25+
if (cb)
26+
cb();
27+
});
28+
});
29+
30+
function addToDisplay(msgName) {
31+
$('<div/>', {
32+
id: msgName
33+
}).appendTo('#log');
34+
35+
$('<span/>', {
36+
id: msgName + '_label',
37+
text: msgName + ': '
38+
}).appendTo('#' + msgName);
39+
40+
$('<span/>', {
41+
id: msgName + '_value'
42+
}).appendTo('#' + msgName);
43+
}
44+
45+
function updateDisplay(msgName, msgValue) {
46+
if (!($('#' + msgName).length > 0)) {
47+
addToDisplay(msgName);
48+
}
49+
50+
$('#' + msgName + '_value').text(msgValue);
51+
}
52+
53+
function updateDataPoint(dataPoint, measurement) {
54+
dataPoint.messages_received++;
55+
dataPoint.current_data = measurement;
56+
let update_time = (new Date()).getTime();
57+
58+
if (dataPoint.last_update_time !== undefined) {
59+
dataPoint.average_time_since_update =
60+
calculateAverageTimeSinceUpdate(update_time, dataPoint);
61+
}
62+
63+
dataPoint.last_update_time = update_time;
64+
65+
if ('event' in measurement) {
66+
dataPoint.events[measurement.value] = measurement.event;
67+
}
68+
}
69+
70+
function calculateAverageTimeSinceUpdate(updateTime, dataPoint) {
71+
let time_since_update = updateTime - dataPoint.last_update_time;
72+
73+
return (dataPoint.average_time_since_update === undefined)
74+
? time_since_update
75+
: (0.1 * time_since_update) + (0.9 * dataPoint.average_time_since_update);
76+
}

‎openxc/tools/static/js/jquery-3.4.1.slim.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎openxc/tools/static/js/socket.io.slim.js‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎openxc/tools/templates/dashboard.html‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,12 @@
22
<html>
33
<head>
44
<title>Flask-SocketIO Test</title>
5-
<script src="//code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
6-
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
7-
<script type="text/javascript" charset="utf-8">
8-
$(document).ready(function() {
9-
namespace = '';
10-
var socket = io(namespace);
11-
socket.on('vehicle data', function(msg, cb) {
12-
console.log(msg);
13-
$('#log').append('<br>' + $('<div/>').text('Received : ' + JSON.stringify(msg)).html());
14-
if (cb)
15-
cb();
16-
});
17-
18-
});
19-
</script>
5+
<script src="{{url_for('static', filename='js/jquery-3.4.1.slim.min.js')}}"></script>
6+
<script src="{{url_for('static', filename='js/socket.io.slim.js')}}"></script>
7+
<script src="{{url_for('static', filename='js/dashboard.js')}}"></script>
208
</head>
219
<body>
2210
<h2>Receive:</h2>
2311
<div id="log"></div>
2412
</body>
25-
</html>
13+
</html>

0 commit comments

Comments
 (0)