Skip to content

Commit 5a54c6a

Browse files
pjt0620pjt0620
authored
Merge pull request #134 from openxc/sort-dashboard
Sort dashboard
2 parents 64ff88f + baea36f commit 5a54c6a

File tree

3 files changed

+159
-86
lines changed

3 files changed

+159
-86
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: 90 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,36 @@ let diagnosticCount = 0;
88

99
$(document).ready(function() {
1010
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+
1136

12-
namespace = '';
13-
var socket = io(namespace);
14-
socket.on('vehicle data', function(msg, cb) {
15-
// console.log(msg);
37+
namespace = '';
38+
var socket = io(namespace);
39+
socket.on('vehicle data', function(msg, cb) {
40+
// console.log(msg);
1641

1742
if (!msg.hasOwnProperty('command_response')) {
1843
if (msg.hasOwnProperty('success')) {
@@ -24,12 +49,12 @@ $(document).ready(function() {
2449
if (!msg.hasOwnProperty('name')) {
2550
msg.name = 'Raw-' + msg.bus + '-0x' + msg.id.toString(16);
2651
msg.value = msg.data;
27-
}
28-
52+
}
53+
2954
if (msg.hasOwnProperty('event')) {
30-
msg.value = msg.value + ': ' + msg.event
55+
msg.value = msg.value + ': ' + msg.event
3156
}
32-
57+
3358
if (!(msg.name in dataPoints)) {
3459
dataPoints[msg.name] = {
3560
current_data: undefined,
@@ -42,16 +67,16 @@ $(document).ready(function() {
4267
average_time_since_update: undefined
4368
};
4469
}
45-
70+
4671
updateDataPoint(dataPoints[msg.name], msg);
4772
updateDisplay(dataPoints[msg.name]);
48-
73+
4974
if (cb) {
5075
cb();
5176
}
5277
}
5378
}
54-
});
79+
});
5580
});
5681

5782
function updateDashboardParameters() {
@@ -65,18 +90,7 @@ function saveSettings(e) {
6590
}
6691

6792
function addToDisplay(msgName) {
68-
// Insert new rows alphabetically
6993
var added = false;
70-
$('#log tr').each(function() {
71-
if (msgName < $(this).children('td:eq(0)').text()) {
72-
$('<tr/>', {
73-
id: msgName
74-
}).insertBefore($(this));
75-
added = true;
76-
return false;
77-
}
78-
});
79-
8094
if (!added) {
8195
$('<tr/>', {
8296
id: msgName
@@ -105,24 +119,24 @@ function addToDisplay(msgName) {
105119

106120
function updateDisplay(dataPoint) {
107121
msg = dataPoint.current_data
108-
122+
109123
if (!($('#' + msg.name).length > 0)) {
110124
addToDisplay(msg.name);
111125
}
112126

113-
$('#' + msg.name + '_value').text(msg.value);
114-
highlightCell('#' + msg.name + '_value');
127+
$('#' + msg.name + '_value').text(msg.value);
128+
highlightCell('#' + msg.name + '_value');
115129

116-
$('#' + msg.name + '_num').text(dataPoint.messages_received);
117-
$('#' + 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));
118132
}
119133

120134
function highlightCell(cellId) {
121135
$(cellId).stop(true);
122-
$(cellId).css({'background': '#1338F0', 'color': 'white'});
123-
$(cellId).animate({backgroundColor: '#949494'}, valueChangedTimer, function() {
124-
$(this).animate({backgroundColor: '#FFFFFF', color: 'black'}, valueRecentlyChangedTimer);
125-
});
136+
$(cellId).css({'background': '#1338F0', 'color': 'white'});
137+
$(cellId).animate({backgroundColor: '#949494'}, valueChangedTimer, function() {
138+
$(this).animate({backgroundColor: '#FFFFFF', color: 'black'}, valueRecentlyChangedTimer);
139+
});
126140
}
127141

128142
function validateSettingsForm() {
@@ -148,7 +162,7 @@ function validateSettingsForm() {
148162

149163
function validateTimerInput(input, errors) {
150164
let inputVal = input.val();
151-
165+
152166
if (isNaN(inputVal) || inputVal < 0) {
153167
errors.push({id: input[0].id, msg: 'Input must be a positive number'});
154168
}
@@ -162,7 +176,7 @@ function updateDataPoint(dataPoint, measurement) {
162176
let update_time = (new Date()).getTime() / 1000;
163177

164178
if (dataPoint.last_update_time !== undefined) {
165-
dataPoint.average_time_since_update =
179+
dataPoint.average_time_since_update =
166180
calculateAverageTimeSinceUpdate(update_time, dataPoint);
167181
}
168182

@@ -176,16 +190,56 @@ function updateDataPoint(dataPoint, measurement) {
176190
function calculateAverageTimeSinceUpdate(updateTime, dataPoint) {
177191
let time_since_update = updateTime - dataPoint.last_update_time;
178192

179-
return (dataPoint.average_time_since_update === undefined)
193+
return (dataPoint.average_time_since_update === undefined)
180194
? time_since_update
181195
: (0.1 * time_since_update) + (0.9 * dataPoint.average_time_since_update);
182196
}
183197

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+
184238
function addDiagnosticResponse(name, message) {
185239
$('<tr/>', {
186240
id: name
187241
}).appendTo('#diagnostic');
188-
242+
189243
$('<td/>', {
190244
id: name + '_bus',
191245
text: message.bus
@@ -227,4 +281,4 @@ function addDiagnosticResponse(name, message) {
227281
text: message.negative_response_code
228282
}).appendTo('#' + name);
229283
}
230-
}
284+
}

‎openxc/tools/templates/dashboard.html‎

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -9,52 +9,57 @@
99
<link rel="stylesheet" href="{{url_for('static', filename='css/dashboard.css')}}">
1010
</head>
1111
<body>
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>
43-
<div>
44-
<table id="diagnostic">
45-
<caption>Diagnostic Responses</caption>
46-
<tr>
47-
<th>Bus</th>
48-
<th>ID</th>
49-
<th>Mode</th>
50-
<th>PID</th>
51-
<th>Success</th>
52-
<th>Payload</th>
53-
<th>Value</th>
54-
<th>Neg. Resp. Code</th>
55-
</tr>
56-
</table>
57-
</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>
5828
</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>
5964
</body>
60-
</html>
65+
</html>

0 commit comments

Comments
 (0)