Kelder/obus
33
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity

Merge pull request #6 from ZeusWPI/upgrade-layout

Browse source 
Add better layout, and a start-pause button
This commit is contained in:
Hannes 2020-09-08 20:24:38 +02:00 committed by GitHub
commit 82e90f876b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 150 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
debugging_tool/server.py
View file

@ -41,30 +41,31 @@ class Message:
def parse_message(self):
sender_type = self.sender_type()
message_type = self.payload[0]
if sender_type == 0b00: # controller
if message_type == 0:
return "ACK"
elif message_type == 1:
return "HELLO"
elif message_type == 2:
return "START " + self._parse_state_update()
elif message_type == 3:
return "STATE " + self._parse_state_update()
elif message_type == 4:
return "SOLVED " + self._parse_state_update()
elif message_type == 5:
return "TIMEOUT " + self._parse_state_update()
elif message_type == 6:
return "STRIKEOUT " + self._parse_state_update()
elif sender_type == 0b01: # puzzle
if message_type == 0:
return "REGISTER"
elif message_type == 1:
return f"STRIKE {self.payload[1]}"
elif message_type == 2:
return f"SOLVED"
else:
return f"PARSE ERROR {self.received_from:011b} {self.payload.hex(' ')}"
try:
if sender_type == 0b00: # controller
if message_type == 0:
return "ACK"
elif message_type == 1:
return "HELLO"
elif message_type == 2:
return "START " + self._parse_state_update()
elif message_type == 3:
return "STATE " + self._parse_state_update()
elif message_type == 4:
return "SOLVED " + self._parse_state_update()
elif message_type == 5:
return "TIMEOUT " + self._parse_state_update()
elif message_type == 6:
return "STRIKEOUT " + self._parse_state_update()
elif sender_type == 0b01: # puzzle
if message_type == 0:
return "REGISTER"
elif message_type == 1:
return f"STRIKE {self.payload[1]}"
elif message_type == 2:
return f"SOLVED"
finally:
return "PARSE ERROR"
def serialize(self):
return {

109
debugging_tool/static/index.html
View file

@ -5,70 +5,93 @@
<meta charset="utf-8">
<title>CAN debugger</title>
<style>
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
body {
font-family: sans-serif;
}
.message {
display: flex;
animation: fadein 1s;
}
.message > * {
margin-top: 0;
margin-bottom: 0;
padding: 0 1.5ch 0 1.5ch;
}
.hide_details .message .pretty_raw_sender_id {
.hide {
display: none;
}
.hide_details .message .raw_message {
display: none;
}
.human_readable_type {
order: -5;
}
.time {
order: 5;
}
.sender_id {
order: 1;
}
.parsed {
order: 2;
flex: 1;
background: lightgreen;
}
.pretty_raw_sender_id, .raw_message {
td.raw {
font-family: monospace, monospace;
}
.pretty_raw_sender_id {
order: 9998;
table {
border-collapse: collapse;
width: 100%;
}
.raw_message {
order: 9999;
th, td {
border-left: 1px solid black;
border-right: 1px solid black;
padding: 5px;
}
th {
background-color: #ff7f00;;
border-bottom: 2px solid black;
border-top: 2px solid black;
height: 20px;
text-align: left;
}
tr:hover {
background-color: #aaa;
}
td.error, td.error > div {
background-color: rgb(255, 71, 71);
}
td.controller > div {
background-color: lightseagreen;
}
td.puzzle > div {
background-color: gold;
}
td.needy > div {
background-color: rgb(128, 10, 128);
}
.time, .raw_id, .sender_id {
text-align: right;
}
.colorblock {
height: 20px;
width: 20px;
margin: 3.4px;
margin-right: 8.4px;
display: inline-block;
background-color:lime;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<input type="checkbox" id="show_raw" name="show_raw" checked onchange="updateShow()">
<button onclick="toggle_logging()" id="toggle_button">Start</button>
<input type="checkbox" id="show_raw" name="show_raw" checked autocomplete="off" onchange="updateShow()">
<label for="show_raw">Show raw address and payload</label>
<input type="checkbox" id="pause" name="pause">
<label for="pause">Pause</label>
</div>
<div id="messages">
</div>
<table id="message_table">
<tr>
<th>Human-readable type</th>
<th>Sender ID</th>
<th>Parsed payload</th>
<th>Time</th>
<th class="raw">Raw Message</th>
<th class="raw">Raw ID</th>
</tr>
</table>
<script src="static/script.js"></script>
</body>
</html>

107
debugging_tool/static/script.js
View file

@ -1,10 +1,17 @@
maxseen = 0;
let maxseen = 0;
let paused = true;
let updaterID = null;
let color_classes = {
"RESERVED TYPE": "error",
"controller": "controller",
"puzzle": "puzzle",
"needy": "needy",
}
function updateShow() {
if (document.getElementById('show_raw').checked) {
document.getElementById('messages').classList = '';
} else {
document.getElementById('messages').classList = 'hide_details';
for (let item of document.getElementsByClassName("raw")) {
item.classList.toggle("hide", !document.getElementById('show_raw').checked);
}
}
@ -17,59 +24,63 @@ function updateMessages() {
return;
}
response.json().then(function(data) {
console.log(data);
if (data.length > maxseen) {
var messageContainer = document.getElementById('messages');
for (let i = maxseen; i < data.length; i++) {
var current = data[i];
var time = document.createElement("p");
time.innerHTML = current['time'];
time.className = 'time';
let messageTable = document.getElementById('message_table');
for (let i = maxseen; i < data.length; i++) {
let row = messageTable.insertRow(1);
let current = data[i];
var parsed = document.createElement("p");
parsed.innerHTML = current['parsed'];
parsed.className = 'parsed';
let human_readable_type = row.insertCell(0)
let colorblock = document.createElement("div");
colorblock.classList.add("colorblock");
human_readable_type.append(colorblock);
var sender_id = document.createElement("p");
sender_id.innerHTML = current['sender_id'];
sender_id.className = 'sender_id';
human_readable_type.innerHTML += current['human_readable_type'];
var pretty_raw_sender_id = document.createElement("p");
pretty_raw_sender_id.innerHTML = current['pretty_raw_sender_id'];
pretty_raw_sender_id.className = 'pretty_raw_sender_id';
human_readable_type.classList.add(color_classes[current['human_readable_type']]);
human_readable_type.classList.add('human_readable_type');
var raw_message = document.createElement("p");
raw_message.innerHTML = current['raw_message'];
raw_message.className = 'raw_message';
var human_readable_type = document.createElement("p");
human_readable_type.innerHTML = current['human_readable_type'];
human_readable_type.className = 'human_readable_type';
var newNode = document.createElement("div");
newNode.className = "message";
newNode.append(time, parsed, sender_id, pretty_raw_sender_id, raw_message, human_readable_type);
messageContainer.prepend(newNode)
let sender_id = row.insertCell(-1)
sender_id.innerHTML = current['sender_id'];
sender_id.classList.add('sender_id');
let parsed = row.insertCell(-1)
if (current['parsed'].startsWith("PARSE ERROR")) {
parsed.classList.add("error");
}
maxseen = data.length;
parsed.innerHTML = current['parsed'];
parsed.classList.add('parsed');
let time = row.insertCell(-1)
time.innerHTML = current['time'];
time.classList.add('time');
let raw_message = row.insertCell(-1);
raw_message.innerHTML = current['raw_message'];
raw_message.classList.add("raw");
raw_message.classList.add("raw_message");
let raw_id = row.insertCell(-1);
raw_id.innerHTML = current['pretty_raw_sender_id'];
raw_id.classList.add("raw");
raw_id.classList.add("raw_id");
}
maxseen = data.length;
}
});
}
)
}
function toggle_logging() {
if (paused) {
paused = false;
document.getElementById("toggle_button").innerHTML = "Pause";
updaterID = setInterval(updateMessages, 1000);
} else {
paused = true;
document.getElementById("toggle_button").innerHTML = "Start";
clearInterval(updaterID);
}
}
window.onload = function() {
updateShow()
console.log("loaded");
updateMessages();
setInterval(function() {
if (document.getElementById('pause').checked) {
return;
}
updateMessages()
}, 1000);
};