Skip to content

Added settings for dashboard #132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 18, 2019
Merged

Added settings for dashboard #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
085dbb4
Added settings for dashboard
Dec 18, 2019
a890540
Merge branch 'next' into dashboard-highlighting
pjt0620 Dec 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions openxc/tools/static/css/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,37 @@
#page-contents {
display: flex;
justify-content: space-evenly;
height: 100%;
margin-top: 3%;
}

form {
display: table;
}

.error {
color: red;
display: block;
font-size: 0.85em;
font-style: italic;
}

form li {
list-style-type: none;
display: table-row;
}

form label, input {
display: table-cell;
}

#dashboardSettingsSubmitBtn {
margin-left: 9%;
}

caption {
font-size: 1.5em;
margin-bottom: 4.5%;
}

table, th, td {
Expand Down
67 changes: 63 additions & 4 deletions openxc/tools/static/js/dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
let dataPoints = {};

/* --- Dashboard parameters ------- */
let justChangedHighlightDuration;
let recentlyChangedHighlightDuration;
/* --- End dashboard parameters --- */

$(document).ready(function() {
updateDashboardParameters();

namespace = '';
var socket = io(namespace);
socket.on('vehicle data', function(msg, cb) {
// console.log(msg);


if (!msg.hasOwnProperty('name')) {
msg.name = 'Raw-' + msg.bus + '-0x' + msg.id.toString(16);
msg.value = msg.data;
}
if (!msg.hasOwnProperty('name')) {
msg.name = 'Raw-' + msg.bus + '-0x' + msg.id.toString(16);
msg.value = msg.data;
}

if (msg.hasOwnProperty('event')) {
msg.value = msg.value + ': ' + msg.event
Expand All @@ -36,6 +44,16 @@ $(document).ready(function() {
});
});

function updateDashboardParameters() {
valueChangedTimer = Number($('#justChangedHighlightDuration').val());
valueRecentlyChangedTimer = Number($('#recentlyChangedHighlightDuration').val());
}

function saveSettings(e) {
e.preventDefault();
updateDashboardParameters();
}

function addToDisplay(msgName) {
// Insert new rows alphabetically
var added = false;
Expand Down Expand Up @@ -83,10 +101,51 @@ function updateDisplay(dataPoint) {
}

$('#' + msg.name + '_value').text(msg.value);
highlightCell('#' + msg.name + '_value');

$('#' + msg.name + '_num').text(dataPoint.messages_received);
$('#' + msg.name + '_freq').text(Math.ceil(1 / dataPoint.average_time_since_update));
}

function highlightCell(cellId) {
$(cellId).stop(true);
$(cellId).css({'background': '#1338F0', 'color': 'white'});
$(cellId).animate({backgroundColor: '#949494'}, valueChangedTimer, function() {
$(this).animate({backgroundColor: '#FFFFFF', color: 'black'}, valueRecentlyChangedTimer);
});
}

function validateSettingsForm() {
let valid = true;
let errors = [];

$('.error').each(function() {
$(this).text('');
});

errors = validateTimerInput($('#justChangedHighlightDuration'), errors);
errors = validateTimerInput($('#recentlyChangedHighlightDuration'), errors);

if (errors.length > 0) {
valid = false;
errors.forEach(function(e) {
$('#' + e.id + '_error').text(e.msg);
});
}

return valid;
}

function validateTimerInput(input, errors) {
let inputVal = input.val();

if (isNaN(inputVal) || inputVal < 0) {
errors.push({id: input[0].id, msg: 'Input must be a positive number'});
}

return errors;
}

function updateDataPoint(dataPoint, measurement) {
dataPoint.messages_received++;
dataPoint.current_data = measurement;
Expand Down
2 changes: 2 additions & 0 deletions openxc/tools/static/js/jquery-3.4.1.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions openxc/tools/static/js/jquery-3.4.1.slim.min.js
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions openxc/tools/static/js/jquery.color-2.1.2.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

45 changes: 34 additions & 11 deletions openxc/tools/templates/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,45 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Flask-SocketIO Test</title>
<script src="{{url_for('static', filename='js/jquery-3.4.1.slim.min.js')}}"></script>
<title>OpenXC Dashboard</title>
<script src="{{url_for('static', filename='js/jquery-3.4.1.min.js')}}"></script>
<script src="{{url_for('static', filename='js/jquery.color-2.1.2.min.js')}}"></script>
<script src="{{url_for('static', filename='js/socket.io.slim.js')}}"></script>
<script src="{{url_for('static', filename='js/dashboard.js')}}"></script>
<link rel="stylesheet" href="{{url_for('static', filename='css/dashboard.css')}}">
</head>
<body>
<table id="log">
<caption>OpenXC Dashboard</caption>
<tr>
<th>Signal Name</th>
<th>Value</th>
<th># Received</th>
<th>Freq. (Hz)</th>
</tr>
</table>
<div id="page-contents">
<div>
<table id="log">
<caption>OpenXC Dashboard</caption>
<tr>
<th>Signal Name</th>
<th>Value</th>
<th># Received</th>
<th>Freq. (Hz)</th>
</tr>
</table>
</div>
<div>
<h2>Settings</h2>
<form id="dashboardSettingsForm" name="dashboardSettings" onsubmit="return saveSettings(event);">
<p>Highlight Duration (ms)</p>
<ul>
<li>
<label for="justChangedHighlightDuration">Just changed: </label>
<input id="justChangedHighlightDuration" type="number" value="2000" required="true">
<span id="justChangedHighlightDuration_error" class="error"></span>
</li>
<li>
<label for="recentlyChangedHighlightDuration" style="margin-left: 3%">Recently changed: </label>
<input id="recentlyChangedHighlightDuration" type="number" value="10000" required="true">
<span id="recentlyChangedHighlightDuration_error" class="error"></span>
</li>
</ul>
<input id="dashboardSettingsSubmitBtn" type="submit" value="Update" onclick="return validateSettingsForm();">
</form>
</div>
</div>
</body>
</html>