Skip to content

Commit 20c50c0

Browse files
jstoke53jstoke53
committed
Adds new function to sort dashboard table by column. Also implement a search function to filter out signals.
1 parent a3caea4 commit 20c50c0

File tree

3 files changed

+188
-96
lines changed

3 files changed

+188
-96
lines changed

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,24 @@ caption {
3535
}
3636

3737
table, th, td {
38-
text-align: left;
39-
border-spacing: 8px 1px;
38+
text-align: left;
39+
border-spacing: 8px 1px;
4040
}
4141

4242
.metric {
4343
text-align: right;
44-
}
44+
}
45+
46+
th:hover {
47+
cursor: pointer;
48+
background-color: #AAA;
49+
}
50+
51+
table, th, td {
52+
border: 1px solid black;
53+
}
54+
55+
table {
56+
padding-top: 2%;
57+
padding-bottom: 2%;
58+
}

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

Lines changed: 120 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,37 @@ let diagnosticCount = 0;
77
/* --- End dashboard parameters --- */
88

99
$(document).ready(function() {
10-
var data_table = $('#log').DataTable({
11-
"createdRow": function ( row, data, index ) {
12-
$('td', row).eq(0).attr('id', `${data[0]}_label`);
13-
$('td', row).eq(1).attr('id', `${data[0]}_value`);
14-
$('td', row).eq(2).attr('id', `${data[0]}_num`);
15-
$('td', row).eq(3).attr('id', `${data[0]}_freq`);
16-
}
17-
});
18-
1910
updateDashboardParameters();
11+
searchTable()
12+
13+
var f_sl = 1;
14+
var f_nm = 1;
15+
$("#sn").click(function(){
16+
f_sl *= -1;
17+
var n = $(this).prevAll().length;
18+
sortTable(f_sl,n);
19+
});
20+
$("#sv").click(function(){
21+
f_nm *= -1;
22+
var n = $(this).prevAll().length;
23+
sortTable(f_nm,n);
24+
});
25+
$("#sr").click(function(){
26+
f_nm *= -1;
27+
var n = $(this).prevAll().length;
28+
sortTable(f_nm,n);
29+
});
30+
$("#sf").click(function(){
31+
f_nm *= -1;
32+
var n = $(this).prevAll().length;
33+
sortTable(f_nm,n);
34+
});
35+
2036

21-
namespace = '';
22-
var socket = io(namespace);
23-
socket.on('vehicle data', function(msg, cb) {
24-
// console.log(msg);
37+
namespace = '';
38+
var socket = io(namespace);
39+
socket.on('vehicle data', function(msg, cb) {
40+
// console.log(msg);
2541

2642
if (!msg.hasOwnProperty('command_response')) {
2743
if (msg.hasOwnProperty('success')) {
@@ -33,12 +49,12 @@ $(document).ready(function() {
3349
if (!msg.hasOwnProperty('name')) {
3450
msg.name = 'Raw-' + msg.bus + '-0x' + msg.id.toString(16);
3551
msg.value = msg.data;
36-
}
37-
52+
}
53+
3854
if (msg.hasOwnProperty('event')) {
39-
msg.value = msg.value + ': ' + msg.event
55+
msg.value = msg.value + ': ' + msg.event
4056
}
41-
57+
4258
if (!(msg.name in dataPoints)) {
4359
dataPoints[msg.name] = {
4460
current_data: undefined,
@@ -50,27 +66,17 @@ $(document).ready(function() {
5066
last_update_time: undefined,
5167
average_time_since_update: undefined
5268
};
53-
54-
data_table.row.add([
55-
msg.name,
56-
msg.value,
57-
0,
58-
0
59-
]).draw();
60-
61-
var id = data_table.row(this).id();
62-
console.log(id);
6369
}
64-
70+
6571
updateDataPoint(dataPoints[msg.name], msg);
6672
updateDisplay(dataPoints[msg.name]);
67-
73+
6874
if (cb) {
6975
cb();
7076
}
7177
}
7278
}
73-
});
79+
});
7480
});
7581

7682
function updateDashboardParameters() {
@@ -83,22 +89,54 @@ function saveSettings(e) {
8389
updateDashboardParameters();
8490
}
8591

92+
function addToDisplay(msgName) {
93+
var added = false;
94+
if (!added) {
95+
$('<tr/>', {
96+
id: msgName
97+
}).appendTo('#log');
98+
}
99+
100+
$('<td/>', {
101+
id: msgName + '_label',
102+
text: msgName
103+
}).appendTo('#' + msgName);
104+
105+
$('<td/>', {
106+
id: msgName + '_value'
107+
}).appendTo('#' + msgName);
108+
109+
$('<td/>', {
110+
id: msgName + '_num',
111+
class: 'metric'
112+
}).appendTo('#' + msgName);
113+
114+
$('<td/>', {
115+
id: msgName + '_freq',
116+
class: 'metric'
117+
}).appendTo('#' + msgName);
118+
}
119+
86120
function updateDisplay(dataPoint) {
87121
msg = dataPoint.current_data
88122

89-
$('#' + msg.name + '_value').text(msg.value);
90-
highlightCell('#' + msg.name + '_value');
123+
if (!($('#' + msg.name).length > 0)) {
124+
addToDisplay(msg.name);
125+
}
126+
127+
$('#' + msg.name + '_value').text(msg.value);
128+
highlightCell('#' + msg.name + '_value');
91129

92-
$('#' + msg.name + '_num').text(dataPoint.messages_received);
93-
$('#' + msg.name + '_freq').text(Math.ceil(1 / dataPoint.average_time_since_update));
130+
$('#' + msg.name + '_num').text(dataPoint.messages_received);
131+
$('#' + msg.name + '_freq').text(Math.ceil(1 / dataPoint.average_time_since_update));
94132
}
95133

96134
function highlightCell(cellId) {
97135
$(cellId).stop(true);
98-
$(cellId).css({'background': '#1338F0', 'color': 'white'});
99-
$(cellId).animate({backgroundColor: '#949494'}, valueChangedTimer, function() {
100-
$(this).animate({backgroundColor: '#FFFFFF', color: 'black'}, valueRecentlyChangedTimer);
101-
});
136+
$(cellId).css({'background': '#1338F0', 'color': 'white'});
137+
$(cellId).animate({backgroundColor: '#949494'}, valueChangedTimer, function() {
138+
$(this).animate({backgroundColor: '#FFFFFF', color: 'black'}, valueRecentlyChangedTimer);
139+
});
102140
}
103141

104142
function validateSettingsForm() {
@@ -124,7 +162,7 @@ function validateSettingsForm() {
124162

125163
function validateTimerInput(input, errors) {
126164
let inputVal = input.val();
127-
165+
128166
if (isNaN(inputVal) || inputVal < 0) {
129167
errors.push({id: input[0].id, msg: 'Input must be a positive number'});
130168
}
@@ -138,7 +176,7 @@ function updateDataPoint(dataPoint, measurement) {
138176
let update_time = (new Date()).getTime() / 1000;
139177

140178
if (dataPoint.last_update_time !== undefined) {
141-
dataPoint.average_time_since_update =
179+
dataPoint.average_time_since_update =
142180
calculateAverageTimeSinceUpdate(update_time, dataPoint);
143181
}
144182

@@ -152,16 +190,56 @@ function updateDataPoint(dataPoint, measurement) {
152190
function calculateAverageTimeSinceUpdate(updateTime, dataPoint) {
153191
let time_since_update = updateTime - dataPoint.last_update_time;
154192

155-
return (dataPoint.average_time_since_update === undefined)
193+
return (dataPoint.average_time_since_update === undefined)
156194
? time_since_update
157195
: (0.1 * time_since_update) + (0.9 * dataPoint.average_time_since_update);
158196
}
159197

198+
function sortTable(f,n){
199+
var rows = $('#log tbody tr').get();
200+
201+
rows.sort(function(a, b) {
202+
203+
var A = getVal(a);
204+
var B = getVal(b);
205+
206+
if(A < B) {
207+
return -1*f;
208+
}
209+
if(A > B) {
210+
return 1*f;
211+
}
212+
return 0;
213+
});
214+
215+
function getVal(elm){
216+
var v = $(elm).children('td').eq(n).text().toUpperCase();
217+
if($.isNumeric(v)){
218+
v = parseInt(v,10);
219+
}
220+
return v;
221+
}
222+
223+
$.each(rows, function(index, row) {
224+
$('#log').children('tbody').append(row);
225+
});
226+
console.log("jamez test");
227+
}
228+
229+
function searchTable() {
230+
$("#myInput").on("keyup", function() {
231+
var value = $(this).val().toLowerCase();
232+
$("#log tr").filter(function() {
233+
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
234+
});
235+
});
236+
}
237+
160238
function addDiagnosticResponse(name, message) {
161239
$('<tr/>', {
162240
id: name
163241
}).appendTo('#diagnostic');
164-
242+
165243
$('<td/>', {
166244
id: name + '_bus',
167245
text: message.bus

‎openxc/tools/templates/dashboard.html‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,62 +4,62 @@
44
<title>OpenXC Dashboard</title>
55
<script src="{{url_for('static', filename='js/jquery-3.4.1.min.js')}}"></script>
66
<script src="{{url_for('static', filename='js/jquery.color-2.1.2.min.js')}}"></script>
7-
<script src="{{url_for('static', filename='js/dataTables.min.js')}}"></script>
87
<script src="{{url_for('static', filename='js/socket.io.slim.js')}}"></script>
98
<script src="{{url_for('static', filename='js/dashboard.js')}}"></script>
10-
<link rel="stylesheet" href="{{url_for('static', filename='css/dataTables.min.css')}}">
119
<link rel="stylesheet" href="{{url_for('static', filename='css/dashboard.css')}}">
1210
</head>
1311
<body>
14-
<div id="page-contents">
15-
<div>
16-
<h1 style="font-size: 180%; text-align: center;">OpenXC Dashboard</h1>
17-
<table id="log">
18-
<thead>
19-
<tr>
20-
<th>Signal Name</th>
21-
<th>Value</th>
22-
<th># Received</th>
23-
<th>Freq. (Hz)</th>
24-
</tr>
25-
</thead>
26-
<tbody id="messages"></tbody>
27-
</table>
28-
</div>
29-
<div>
30-
<h2>Settings</h2>
31-
<form id="dashboardSettingsForm" name="dashboardSettings" onsubmit="return saveSettings(event);">
32-
<p>Highlight Duration (ms)</p>
33-
<ul>
34-
<li>
35-
<label for="justChangedHighlightDuration">Just changed: </label>
36-
<input id="justChangedHighlightDuration" type="number" value="2000" required="true">
37-
<span id="justChangedHighlightDuration_error" class="error"></span>
38-
</li>
39-
<li>
40-
<label for="recentlyChangedHighlightDuration" style="margin-left: 3%">Recently changed: </label>
41-
<input id="recentlyChangedHighlightDuration" type="number" value="10000" required="true">
42-
<span id="recentlyChangedHighlightDuration_error" class="error"></span>
43-
</li>
44-
</ul>
45-
<input id="dashboardSettingsSubmitBtn" type="submit" value="Update" onclick="return validateSettingsForm();">
46-
</form>
47-
</div>
48-
<div>
49-
<table id="diagnostic">
50-
<caption>Diagnostic Responses</caption>
51-
<tr>
52-
<th>Bus</th>
53-
<th>ID</th>
54-
<th>Mode</th>
55-
<th>PID</th>
56-
<th>Success</th>
57-
<th>Payload</th>
58-
<th>Value</th>
59-
<th>Neg. Resp. Code</th>
60-
</tr>
61-
</table>
62-
</div>
12+
<div id="page-contents">
13+
<div>
14+
<h1 id="dashboardTitle" style="text-align: center;">OpenXC Dashboard</h1>
15+
<input id="myInput" type="text" placeholder="Search..">
16+
<table id="log">
17+
<thead>
18+
<tr>
19+
<th id="sn">Signal Name</th>
20+
<th id="sv">Value</th>
21+
<th id="sr"># Received</th>
22+
<th id="sf">Freq. (Hz)</th>
23+
</tr>
24+
</thead>
25+
<tbody>
26+
</tbody>
27+
</table>
6328
</div>
29+
<div>
30+
<h2>Settings</h2>
31+
<form id="dashboardSettingsForm" name="dashboardSettings" onsubmit="return saveSettings(event);">
32+
<p>Highlight Duration (ms)</p>
33+
<ul>
34+
<li>
35+
<label for="justChangedHighlightDuration">Just changed: </label>
36+
<input id="justChangedHighlightDuration" type="number" value="2000" required="true">
37+
<span id="justChangedHighlightDuration_error" class="error"></span>
38+
</li>
39+
<li>
40+
<label for="recentlyChangedHighlightDuration" style="margin-left: 3%">Recently changed: </label>
41+
<input id="recentlyChangedHighlightDuration" type="number" value="10000" required="true">
42+
<span id="recentlyChangedHighlightDuration_error" class="error"></span>
43+
</li>
44+
</ul>
45+
<input id="dashboardSettingsSubmitBtn" type="submit" value="Update" onclick="return validateSettingsForm();">
46+
</form>
47+
</div>
48+
<div>
49+
<table id="diagnostic">
50+
<caption>Diagnostic Responses</caption>
51+
<tr>
52+
<th>Bus</th>
53+
<th>ID</th>
54+
<th>Mode</th>
55+
<th>PID</th>
56+
<th>Success</th>
57+
<th>Payload</th>
58+
<th>Value</th>
59+
<th>Neg. Resp. Code</th>
60+
</tr>
61+
</table>
62+
</div>
63+
</div>
6464
</body>
6565
</html>

0 commit comments

Comments
 (0)