Skip to content

Commit 3a15e0c

Browse files
pjt0620pjt0620
authored
Merge pull request #132 from openxc/dashboard-highlighting
Added settings for dashboard
2 parents 1bb14ea + a890540 commit 3a15e0c

6 files changed

Lines changed: 133 additions & 17 deletions

File tree

‎openxc/tools/static/css/dashboard.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,37 @@
1+
#page-contents {
2+
display: flex;
3+
justify-content: space-evenly;
4+
height: 100%;
5+
margin-top: 3%;
6+
}
7+
8+
form {
9+
display: table;
10+
}
11+
12+
.error {
13+
color: red;
14+
display: block;
15+
font-size: 0.85em;
16+
font-style: italic;
17+
}
18+
19+
form li {
20+
list-style-type: none;
21+
display: table-row;
22+
}
23+
24+
form label, input {
25+
display: table-cell;
26+
}
27+
28+
#dashboardSettingsSubmitBtn {
29+
margin-left: 9%;
30+
}
31+
132
caption {
233
font-size: 1.5em;
34+
margin-bottom: 4.5%;
335
}
436

537
table, th, td {

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

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
let dataPoints = {};
22

3+
/* --- Dashboard parameters ------- */
4+
let justChangedHighlightDuration;
5+
let recentlyChangedHighlightDuration;
6+
/* --- End dashboard parameters --- */
7+
38
$(document).ready(function() {
9+
updateDashboardParameters();
10+
411
namespace = '';
512
var socket = io(namespace);
613
socket.on('vehicle data', function(msg, cb) {
714
// console.log(msg);
15+
816

9-
if (!msg.hasOwnProperty('name')) {
10-
msg.name = 'Raw-' + msg.bus + '-0x' + msg.id.toString(16);
11-
msg.value = msg.data;
12-
}
17+
if (!msg.hasOwnProperty('name')) {
18+
msg.name = 'Raw-' + msg.bus + '-0x' + msg.id.toString(16);
19+
msg.value = msg.data;
20+
}
1321

1422
if (msg.hasOwnProperty('event')) {
1523
msg.value = msg.value + ': ' + msg.event
@@ -36,6 +44,16 @@ $(document).ready(function() {
3644
});
3745
});
3846

47+
function updateDashboardParameters() {
48+
valueChangedTimer = Number($('#justChangedHighlightDuration').val());
49+
valueRecentlyChangedTimer = Number($('#recentlyChangedHighlightDuration').val());
50+
}
51+
52+
function saveSettings(e) {
53+
e.preventDefault();
54+
updateDashboardParameters();
55+
}
56+
3957
function addToDisplay(msgName) {
4058
// Insert new rows alphabetically
4159
var added = false;
@@ -83,10 +101,51 @@ function updateDisplay(dataPoint) {
83101
}
84102

85103
$('#' + msg.name + '_value').text(msg.value);
104+
highlightCell('#' + msg.name + '_value');
105+
86106
$('#' + msg.name + '_num').text(dataPoint.messages_received);
87107
$('#' + msg.name + '_freq').text(Math.ceil(1 / dataPoint.average_time_since_update));
88108
}
89109

110+
function highlightCell(cellId) {
111+
$(cellId).stop(true);
112+
$(cellId).css({'background': '#1338F0', 'color': 'white'});
113+
$(cellId).animate({backgroundColor: '#949494'}, valueChangedTimer, function() {
114+
$(this).animate({backgroundColor: '#FFFFFF', color: 'black'}, valueRecentlyChangedTimer);
115+
});
116+
}
117+
118+
function validateSettingsForm() {
119+
let valid = true;
120+
let errors = [];
121+
122+
$('.error').each(function() {
123+
$(this).text('');
124+
});
125+
126+
errors = validateTimerInput($('#justChangedHighlightDuration'), errors);
127+
errors = validateTimerInput($('#recentlyChangedHighlightDuration'), errors);
128+
129+
if (errors.length > 0) {
130+
valid = false;
131+
errors.forEach(function(e) {
132+
$('#' + e.id + '_error').text(e.msg);
133+
});
134+
}
135+
136+
return valid;
137+
}
138+
139+
function validateTimerInput(input, errors) {
140+
let inputVal = input.val();
141+
142+
if (isNaN(inputVal) || inputVal < 0) {
143+
errors.push({id: input[0].id, msg: 'Input must be a positive number'});
144+
}
145+
146+
return errors;
147+
}
148+
90149
function updateDataPoint(dataPoint, measurement) {
91150
dataPoint.messages_received++;
92151
dataPoint.current_data = measurement;

‎openxc/tools/static/js/jquery-3.4.1.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/jquery-3.4.1.slim.min.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎openxc/tools/static/js/jquery.color-2.1.2.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/templates/dashboard.html‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,45 @@
11
<!DOCTYPE HTML>
22
<html>
33
<head>
4-
<title>Flask-SocketIO Test</title>
5-
<script src="{{url_for('static', filename='js/jquery-3.4.1.slim.min.js')}}"></script>
4+
<title>OpenXC Dashboard</title>
5+
<script src="{{url_for('static', filename='js/jquery-3.4.1.min.js')}}"></script>
6+
<script src="{{url_for('static', filename='js/jquery.color-2.1.2.min.js')}}"></script>
67
<script src="{{url_for('static', filename='js/socket.io.slim.js')}}"></script>
78
<script src="{{url_for('static', filename='js/dashboard.js')}}"></script>
89
<link rel="stylesheet" href="{{url_for('static', filename='css/dashboard.css')}}">
910
</head>
1011
<body>
11-
<table id="log">
12-
<caption>OpenXC Dashboard</caption>
13-
<tr>
14-
<th>Signal Name</th>
15-
<th>Value</th>
16-
<th># Received</th>
17-
<th>Freq. (Hz)</th>
18-
</tr>
19-
</table>
12+
<div id="page-contents">
13+
<div>
14+
<table id="log">
15+
<caption>OpenXC Dashboard</caption>
16+
<tr>
17+
<th>Signal Name</th>
18+
<th>Value</th>
19+
<th># Received</th>
20+
<th>Freq. (Hz)</th>
21+
</tr>
22+
</table>
23+
</div>
24+
<div>
25+
<h2>Settings</h2>
26+
<form id="dashboardSettingsForm" name="dashboardSettings" onsubmit="return saveSettings(event);">
27+
<p>Highlight Duration (ms)</p>
28+
<ul>
29+
<li>
30+
<label for="justChangedHighlightDuration">Just changed: </label>
31+
<input id="justChangedHighlightDuration" type="number" value="2000" required="true">
32+
<span id="justChangedHighlightDuration_error" class="error"></span>
33+
</li>
34+
<li>
35+
<label for="recentlyChangedHighlightDuration" style="margin-left: 3%">Recently changed: </label>
36+
<input id="recentlyChangedHighlightDuration" type="number" value="10000" required="true">
37+
<span id="recentlyChangedHighlightDuration_error" class="error"></span>
38+
</li>
39+
</ul>
40+
<input id="dashboardSettingsSubmitBtn" type="submit" value="Update" onclick="return validateSettingsForm();">
41+
</form>
42+
</div>
2043
</div>
2144
</body>
2245
</html>

0 commit comments

Comments
 (0)