2020-08-16 04:16:36 +02:00
|
|
|
<!doctype html>
|
|
|
|
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2020-08-19 02:12:51 +02:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>CAN debugger</title>
|
2020-08-16 04:16:36 +02:00
|
|
|
<style>
|
2020-09-08 18:52:38 +02:00
|
|
|
body {
|
|
|
|
|
font-family: sans-serif;
|
2020-08-16 04:16:36 +02:00
|
|
|
}
|
2020-09-09 13:57:16 +02:00
|
|
|
|
2020-09-09 18:19:40 +02:00
|
|
|
button {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
2020-09-08 18:52:38 +02:00
|
|
|
.parsed {
|
|
|
|
|
background: lightgreen;
|
2020-08-16 04:16:36 +02:00
|
|
|
}
|
|
|
|
|
|
2020-09-08 18:52:38 +02:00
|
|
|
td.raw {
|
|
|
|
|
font-family: monospace, monospace;
|
2020-08-16 04:16:36 +02:00
|
|
|
}
|
|
|
|
|
|
2020-09-08 18:52:38 +02:00
|
|
|
table {
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
width: 100%;
|
2020-09-09 14:44:12 +02:00
|
|
|
border-bottom: 1px solid black;
|
2020-08-16 04:16:36 +02:00
|
|
|
}
|
|
|
|
|
|
2020-09-08 18:52:38 +02:00
|
|
|
th, td {
|
|
|
|
|
border-left: 1px solid black;
|
|
|
|
|
border-right: 1px solid black;
|
|
|
|
|
padding: 5px;
|
2020-08-16 04:16:36 +02:00
|
|
|
}
|
|
|
|
|
|
2020-09-08 18:52:38 +02:00
|
|
|
th {
|
2020-09-08 20:21:32 +02:00
|
|
|
background-color: #ff7f00;;
|
2020-09-08 18:52:38 +02:00
|
|
|
border-bottom: 2px solid black;
|
|
|
|
|
border-top: 2px solid black;
|
|
|
|
|
height: 20px;
|
|
|
|
|
text-align: left;
|
2020-08-16 04:16:36 +02:00
|
|
|
}
|
|
|
|
|
|
2020-09-09 13:57:16 +02:00
|
|
|
@keyframes fadein {
|
|
|
|
|
from { opacity: 0; }
|
|
|
|
|
to { opacity: 1; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fade {
|
|
|
|
|
animation: fadein 0.5s;
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-09 14:44:12 +02:00
|
|
|
table.hide_raw .raw {
|
|
|
|
|
display:none;
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-08 18:52:38 +02:00
|
|
|
tr:hover {
|
|
|
|
|
background-color: #aaa;
|
2020-08-16 04:16:36 +02:00
|
|
|
}
|
|
|
|
|
|
2020-09-08 20:21:32 +02:00
|
|
|
td.error, td.error > div {
|
2020-09-08 18:52:38 +02:00
|
|
|
background-color: rgb(255, 71, 71);
|
|
|
|
|
}
|
2020-08-16 04:16:36 +02:00
|
|
|
|
2020-09-08 20:21:32 +02:00
|
|
|
td.controller > div {
|
|
|
|
|
background-color: lightseagreen;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td.puzzle > div {
|
|
|
|
|
background-color: gold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td.needy > div {
|
|
|
|
|
background-color: rgb(128, 10, 128);
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-08 18:52:38 +02:00
|
|
|
.time, .raw_id, .sender_id {
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
2020-09-08 20:21:32 +02:00
|
|
|
|
|
|
|
|
.colorblock {
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
margin: 3.4px;
|
|
|
|
|
margin-right: 8.4px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background-color:lime;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
2020-08-16 04:16:36 +02:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2020-09-08 18:52:38 +02:00
|
|
|
<button onclick="toggle_logging()" id="toggle_button">Start</button>
|
2020-09-09 13:57:16 +02:00
|
|
|
|
2020-09-08 18:52:38 +02:00
|
|
|
<input type="checkbox" id="show_raw" name="show_raw" checked autocomplete="off" onchange="updateShow()">
|
2020-08-19 02:12:51 +02:00
|
|
|
<label for="show_raw">Show raw address and payload</label>
|
2020-09-09 13:57:16 +02:00
|
|
|
|
2020-09-08 18:52:38 +02:00
|
|
|
<table id="message_table">
|
2020-09-09 18:19:40 +02:00
|
|
|
<tr id="table_header">
|
2020-09-08 18:52:38 +02:00
|
|
|
<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>
|
2020-08-19 02:12:51 +02:00
|
|
|
<script src="static/script.js"></script>
|
2020-08-16 04:16:36 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
