2022-02-10 18:46:25 +01:00
|
|
|
<!DOCTYPE html>
|
2020-08-16 04:16:36 +02:00
|
|
|
|
|
|
|
|
<html lang="en">
|
2022-02-10 18:46:25 +01:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>CAN debugger</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
.parsed {
|
|
|
|
|
background: lightgreen;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td.raw {
|
|
|
|
|
font-family: monospace, monospace;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-bottom: 1px solid black;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fadein {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fade {
|
|
|
|
|
animation: fadein 0.5s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table.hide_raw .raw {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table.hide_consecutive_states .staterow + .staterow {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
|
<button onclick="toggle_logging()" id="toggle_button">Start</button>
|
|
|
|
|
<button onclick="clear_log()" id="clear_button">Clear</button>
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="show_raw"
|
|
|
|
|
name="show_raw"
|
|
|
|
|
checked
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
onchange="updateShowRaw()"
|
|
|
|
|
/>
|
|
|
|
|
<label for="show_raw">Show raw address and payload</label>
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="show_consecutive_states"
|
|
|
|
|
name="show_consecutive_states"
|
|
|
|
|
checked
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
onchange="updateShowStates()"
|
|
|
|
|
/>
|
|
|
|
|
<label for="show_consecutive_states">Show consecutive state updates</label>
|
|
|
|
|
|
|
|
|
|
<table id="message_table">
|
|
|
|
|
<tr id="table_header">
|
|
|
|
|
<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/js/debugscript.js"></script>
|
|
|
|
|
</body>
|
2020-08-16 04:16:36 +02:00
|
|
|
</html>
|
