Skip to content

Commit

Permalink
Merge pull request #103 from nobleo/improve_diagnostics_viewer
Browse files Browse the repository at this point in the history 
Fix colors and diagnostics naming
  • Loading branch information
@dheera
dheera authored Sep 5, 2023
2 parents 2bb440f + 13ef68d commit 625ca79
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 52 deletions.
20 changes: 10 additions & 10 deletions rosboard/html/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ body {
}

div {touch-action: pan-x pan-y;} /* prevent iOS late versions pinch zooming */

.mdl-layout-title {
font-family: 'Titillium Web', sans-serif;
}
Expand Down Expand Up @@ -257,19 +257,19 @@ input, textarea, *[contenteditable=true] {
}

.diagnostic-level-ok {
background:#404040;
color:#00AA00;
}

.diagnostic-level-warn {
background:#c09000;
color:#c09000;
}

.diagnostic-level-error {
background:#e05000;
color:#e05000;
}

.diagnostic-level-stale {
background:#808080;
color:#808080;
}

.mdl-data-table-diagnostic thead td:nth-child(1) i {
Expand Down Expand Up @@ -336,17 +336,17 @@ input, textarea, *[contenteditable=true] {

/* Track */
::-webkit-scrollbar-track {
background: #202020;
background: #202020;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #c0c0c0;
background: #c0c0c0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #44b0e0;
background: #44b0e0;
}

.loader-container {
Expand Down Expand Up @@ -438,4 +438,4 @@ input, textarea, *[contenteditable=true] {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
93 changes: 51 additions & 42 deletions rosboard/html/js/viewers/DiagnosticViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,77 +28,86 @@ class DiagnosticViewer extends Viewer {
this.card.title.text(msg._topic_name);

for(let i in msg.status) {
let status = {};
status["_level"] = msg.status[i].level;
status["_name"] = msg.status[i].name;
status["_message"] = msg.status[i].message;
status["_hardware_id"] = msg.status[i].hardware_id;
let idx_name = msg.status[i].name.split("/")[1];
let status = {}
if (this.diagnosticStatuses.hasOwnProperty(idx_name)) {
status = this.diagnosticStatuses[idx_name];
if (msg.status[i].level > status["_level"]) {
status["_level"] = msg.status[i].level;
status["_message"] = msg.status[i].message;
}
} else {
status["_level"] = msg.status[i].level;
status["_name"] = idx_name;
status["_message"] = msg.status[i].message;
status["_hardware_id"] = msg.status[i].hardware_id;
}
for(let j in msg.status[i].values) {
status[msg.status[i].values[j].key] = msg.status[i].values[j].value;
}
this.diagnosticStatuses[status._hardware_id] = status;
this.diagnosticStatuses[status._name] = status;
}

for(let hardware_id in this.diagnosticStatuses) {
if(!this.dataTables[hardware_id]) {
this.dataTables[hardware_id] = $('<table></table>')
for(let key in this.diagnosticStatuses) {
if(!this.dataTables[key]) {
this.dataTables[key] = $('<table></table>')
.addClass('mdl-data-table')
.addClass('mdl-data-table-diagnostic')
.addClass('mdl-js-data-table')
.appendTo(this.viewer);

this.dataTables[hardware_id].thead = $('<thead></thead>')
.appendTo(this.dataTables[hardware_id]);
this.dataTables[hardware_id].headRow = $('<tr></tr>').appendTo(this.dataTables[hardware_id].thead);
this.dataTables[hardware_id].icon = $('<td><i class="material-icons">chevron_right</i></td>').appendTo(this.dataTables[hardware_id].headRow);
this.dataTables[hardware_id].hardwareIdDisplay = $('<td><b>' + hardware_id + '</b></td>').appendTo(this.dataTables[hardware_id].headRow);
this.dataTables[hardware_id].messageDisplay = $('<td></td>').appendTo(this.dataTables[hardware_id].headRow);
this.dataTables[hardware_id].tbody = $("<tbody></tbody>").appendTo(this.dataTables[hardware_id]).hide();
this.dataTables[key].thead = $('<thead></thead>')
.appendTo(this.dataTables[key]);
this.dataTables[key].headRow = $('<tr></tr>').appendTo(this.dataTables[key].thead);
this.dataTables[key].icon = $('<td><i class="material-icons">chevron_right</i></td>').appendTo(this.dataTables[key].headRow);
this.dataTables[key].hardwareIdDisplay = $('<td><b>' + key + '</b></td>').appendTo(this.dataTables[key].headRow);
this.dataTables[key].messageDisplay = $('<td></td>').appendTo(this.dataTables[key].headRow);
this.dataTables[key].tbody = $("<tbody></tbody>").appendTo(this.dataTables[key]).hide();

let that = this;
this.dataTables[hardware_id].thead[0].addEventListener('click', function(e) {
that.dataTables[hardware_id].tbody.toggle();
if(that.dataTables[hardware_id].icon.children('i').text() === "chevron_right") {
that.dataTables[hardware_id].icon.children('i').text("expand_more");
this.dataTables[key].thead[0].addEventListener('click', function(e) {
that.dataTables[key].tbody.toggle();
if(that.dataTables[key].icon.children('i').text() === "chevron_right") {
that.dataTables[key].icon.children('i').text("expand_more");
} else {
that.dataTables[hardware_id].icon.children('i').text("chevron_right");
that.dataTables[key].icon.children('i').text("chevron_right");
}
})
}

let status = this.diagnosticStatuses[hardware_id];
let status = this.diagnosticStatuses[key];

this.dataTables[hardware_id].messageDisplay.text(status._message);
this.dataTables[key].messageDisplay.text(status._message);

if(status._level === 0) {
this.dataTables[hardware_id].headRow.addClass("diagnostic-level-ok");
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-warn");
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-error");
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-stale");
this.dataTables[key].headRow.addClass("diagnostic-level-ok");
this.dataTables[key].headRow.removeClass("diagnostic-level-warn");
this.dataTables[key].headRow.removeClass("diagnostic-level-error");
this.dataTables[key].headRow.removeClass("diagnostic-level-stale");
} else if(status._level === 1) {
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-ok");
this.dataTables[hardware_id].headRow.addClass("diagnostic-level-warn");
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-error");
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-stale");
this.dataTables[key].headRow.removeClass("diagnostic-level-ok");
this.dataTables[key].headRow.addClass("diagnostic-level-warn");
this.dataTables[key].headRow.removeClass("diagnostic-level-error");
this.dataTables[key].headRow.removeClass("diagnostic-level-stale");
} else if(status._level === 2) {
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-ok");
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-warn");
this.dataTables[hardware_id].headRow.addClass("diagnostic-level-error");
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-stale");
this.dataTables[key].headRow.removeClass("diagnostic-level-ok");
this.dataTables[key].headRow.removeClass("diagnostic-level-warn");
this.dataTables[key].headRow.addClass("diagnostic-level-error");
this.dataTables[key].headRow.removeClass("diagnostic-level-stale");
} else if(status._level === 3) {
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-ok");
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-warn");
this.dataTables[hardware_id].headRow.removeClass("diagnostic-level-error");
this.dataTables[hardware_id].headRow.addClass("diagnostic-level-stale");
this.dataTables[key].headRow.removeClass("diagnostic-level-ok");
this.dataTables[key].headRow.removeClass("diagnostic-level-warn");
this.dataTables[key].headRow.removeClass("diagnostic-level-error");
this.dataTables[key].headRow.addClass("diagnostic-level-stale");
}

this.dataTables[hardware_id].tbody.empty();
this.dataTables[key].tbody.empty();
let html = "";
for(let key in status) {
if(key[0] === "_") continue;
html += '<tr><td>&nbsp;</td><td>' + key + '</td><td>' + status[key] + "</td></tr>";
}
$(html).appendTo(this.dataTables[hardware_id].tbody);
$(html).appendTo(this.dataTables[key].tbody);
}
}
}
Expand All @@ -109,4 +118,4 @@ DiagnosticViewer.supportedTypes = [
"diagnostic_msgs/msg/DiagnosticArray",
];

Viewer.registerViewer(DiagnosticViewer);
Viewer.registerViewer(DiagnosticViewer);

0 comments on commit 625ca79

Please sign in to comment.