change layout
This commit is contained in:
parent
769f4ddd5d
commit
54c03165b0
3 changed files with 143 additions and 130 deletions
|
@ -4,6 +4,7 @@ from time import sleep
|
||||||
from dataclasses import dataclass
|
from dataclasses import dataclass
|
||||||
from datetime import datetime
|
from datetime import datetime
|
||||||
import serial
|
import serial
|
||||||
|
import random
|
||||||
|
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
shared_message_log = []
|
shared_message_log = []
|
||||||
|
@ -41,6 +42,7 @@ class Message:
|
||||||
def parse_message(self):
|
def parse_message(self):
|
||||||
sender_type = self.sender_type()
|
sender_type = self.sender_type()
|
||||||
message_type = self.payload[0]
|
message_type = self.payload[0]
|
||||||
|
try:
|
||||||
if sender_type == 0b00: # controller
|
if sender_type == 0b00: # controller
|
||||||
if message_type == 0:
|
if message_type == 0:
|
||||||
return "ACK"
|
return "ACK"
|
||||||
|
@ -63,8 +65,8 @@ class Message:
|
||||||
return f"STRIKE {self.payload[1]}"
|
return f"STRIKE {self.payload[1]}"
|
||||||
elif message_type == 2:
|
elif message_type == 2:
|
||||||
return f"SOLVED"
|
return f"SOLVED"
|
||||||
else:
|
finally:
|
||||||
return f"PARSE ERROR {self.received_from:011b} {self.payload.hex(' ')}"
|
return "PARSE ERROR"
|
||||||
|
|
||||||
def serialize(self):
|
def serialize(self):
|
||||||
return {
|
return {
|
||||||
|
@ -79,19 +81,25 @@ class Message:
|
||||||
|
|
||||||
|
|
||||||
def serial_reader(messagelog):
|
def serial_reader(messagelog):
|
||||||
with serial.Serial('/dev/ttyACM0', 115200, timeout=10) as ser:
|
# with serial.Serial('/dev/ttyACM0', 115200, timeout=10) as ser:
|
||||||
while True:
|
# while True:
|
||||||
line = ser.readline()
|
# line = ser.readline()
|
||||||
print(line.decode('ascii'))
|
# print(line.decode('ascii'))
|
||||||
if line.startswith(b"message"):
|
# if line.startswith(b"message"):
|
||||||
line = line.decode('ascii')
|
# line = line.decode('ascii')
|
||||||
line = line.strip()
|
# line = line.strip()
|
||||||
parts = line.split(' ')
|
# parts = line.split(' ')
|
||||||
sender = int(parts[1])
|
# sender = int(parts[1])
|
||||||
message = bytes(int(p) for p in parts[2:])
|
# message = bytes(int(p) for p in parts[2:])
|
||||||
|
# received = Message(message, sender, datetime.now(), len(messagelog))
|
||||||
|
# messagelog.append(received.serialize())
|
||||||
|
# print(len(messagelog))
|
||||||
|
for i in range(500):
|
||||||
|
sender = random.randrange(0, 0x800)
|
||||||
|
message = bytes(random.randrange(256) for i in range(random.randint(1, 8)))
|
||||||
received = Message(message, sender, datetime.now(), len(messagelog))
|
received = Message(message, sender, datetime.now(), len(messagelog))
|
||||||
messagelog.append(received.serialize())
|
messagelog.append(received.serialize())
|
||||||
print(len(messagelog))
|
# sleep(5)
|
||||||
|
|
||||||
@app.route('/')
|
@app.route('/')
|
||||||
def index():
|
def index():
|
||||||
|
|
|
@ -5,70 +5,71 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>CAN debugger</title>
|
<title>CAN debugger</title>
|
||||||
<style>
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes fadein {
|
.hide {
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
.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 {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide_details .message .raw_message {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.human_readable_type {
|
|
||||||
order: -5;
|
|
||||||
}
|
|
||||||
.time {
|
|
||||||
order: 5;
|
|
||||||
}
|
|
||||||
.sender_id {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parsed {
|
.parsed {
|
||||||
order: 2;
|
|
||||||
flex: 1;
|
|
||||||
background: lightgreen;
|
background: lightgreen;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pretty_raw_sender_id, .raw_message {
|
td.raw {
|
||||||
font-family: monospace, monospace;
|
font-family: monospace, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pretty_raw_sender_id {
|
table {
|
||||||
order: 9998;
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.raw_message {
|
th, td {
|
||||||
order: 9999;
|
border-left: 1px solid black;
|
||||||
|
border-right: 1px solid black;
|
||||||
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: gold;
|
||||||
|
border-bottom: 2px solid black;
|
||||||
|
border-top: 2px solid black;
|
||||||
|
height: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background-color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
td[error] {
|
||||||
|
background-color: rgb(255, 71, 71);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time, .raw_id, .sender_id {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<button onclick="toggle_logging()" id="toggle_button">Start</button>
|
||||||
<input type="checkbox" id="show_raw" name="show_raw" checked 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>
|
<input type="checkbox" id="show_raw" name="show_raw" checked autocomplete="off" onchange="updateShow()">
|
||||||
|
<label for="show_raw">Show raw address and payload</label>
|
||||||
|
|
||||||
|
<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>
|
<script src="static/script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,10 +1,15 @@
|
||||||
maxseen = 0;
|
|
||||||
|
let maxseen = 0;
|
||||||
|
let paused = true;
|
||||||
|
let updaterID = null;
|
||||||
|
|
||||||
function updateShow() {
|
function updateShow() {
|
||||||
|
for (let item of document.getElementsByClassName("raw")) {
|
||||||
if (document.getElementById('show_raw').checked) {
|
if (document.getElementById('show_raw').checked) {
|
||||||
document.getElementById('messages').classList = '';
|
item.classList.remove("hide");
|
||||||
} else {
|
} else {
|
||||||
document.getElementById('messages').classList = 'hide_details';
|
item.classList.add("hide");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -17,39 +22,41 @@ function updateMessages() {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
response.json().then(function(data) {
|
response.json().then(function(data) {
|
||||||
console.log(data);
|
|
||||||
if (data.length > maxseen) {
|
if (data.length > maxseen) {
|
||||||
var messageContainer = document.getElementById('messages');
|
let messageTable = document.getElementById('message_table');
|
||||||
|
|
||||||
for (let i = maxseen; i < data.length; i++) {
|
for (let i = maxseen; i < data.length; i++) {
|
||||||
var current = data[i];
|
let row = messageTable.insertRow(1);
|
||||||
var time = document.createElement("p");
|
let current = data[i];
|
||||||
time.innerHTML = current['time'];
|
|
||||||
time.className = 'time';
|
|
||||||
|
|
||||||
var parsed = document.createElement("p");
|
let human_readable_type = row.insertCell(0)
|
||||||
parsed.innerHTML = current['parsed'];
|
|
||||||
parsed.className = 'parsed';
|
|
||||||
|
|
||||||
var sender_id = document.createElement("p");
|
|
||||||
sender_id.innerHTML = current['sender_id'];
|
|
||||||
sender_id.className = 'sender_id';
|
|
||||||
|
|
||||||
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';
|
|
||||||
|
|
||||||
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.innerHTML = current['human_readable_type'];
|
||||||
human_readable_type.className = 'human_readable_type';
|
human_readable_type.className = 'human_readable_type';
|
||||||
|
|
||||||
var newNode = document.createElement("div");
|
let sender_id = row.insertCell(-1)
|
||||||
newNode.className = "message";
|
sender_id.innerHTML = current['sender_id'];
|
||||||
newNode.append(time, parsed, sender_id, pretty_raw_sender_id, raw_message, human_readable_type);
|
sender_id.className = 'sender_id';
|
||||||
messageContainer.prepend(newNode)
|
|
||||||
|
let parsed = row.insertCell(-1)
|
||||||
|
if (current['parsed'].startsWith("PARSE ERROR")) {
|
||||||
|
parsed.setAttribute("error", true);
|
||||||
|
}
|
||||||
|
parsed.innerHTML = current['parsed'];
|
||||||
|
parsed.className += 'parsed';
|
||||||
|
|
||||||
|
let time = row.insertCell(-1)
|
||||||
|
time.innerHTML = current['time'];
|
||||||
|
time.className = '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;
|
maxseen = data.length;
|
||||||
}
|
}
|
||||||
|
@ -58,18 +65,15 @@ function updateMessages() {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggle_logging() {
|
||||||
window.onload = function() {
|
if (paused) {
|
||||||
updateShow()
|
paused = false;
|
||||||
console.log("loaded");
|
document.getElementById("toggle_button").innerHTML = "Pause";
|
||||||
updateMessages();
|
updaterID = setInterval(updateMessages, 1000);
|
||||||
|
} else {
|
||||||
|
paused = true;
|
||||||
setInterval(function() {
|
document.getElementById("toggle_button").innerHTML = "Start";
|
||||||
if (document.getElementById('pause').checked) {
|
clearInterval(updaterID);
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
updateMessages()
|
}
|
||||||
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
|
|
Loading…
Reference in a new issue