37 lines
1.2 KiB
HTML
37 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>GPIO Monitor</title>
|
|
<style>
|
|
body { font-family: monospace; padding: 20px; background: #1a1a1a; color: #0f0; }
|
|
.data { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
.byte { padding: 10px; border: 1px solid #0f0; border-radius: 5px; text-align: center; }
|
|
.latest { font-size: 48px; margin: 20px 0; padding: 20px; border: 2px solid #0f0; text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>GPIO Monitor (4-bit bus)</h1>
|
|
<div class="latest" id="latest">--</div>
|
|
<div class="data" id="history"></div>
|
|
|
|
<script>
|
|
async function update() {
|
|
const resp = await fetch('/api/latest');
|
|
const data = await resp.json();
|
|
|
|
document.getElementById('latest').textContent =
|
|
`Byte: ${data.latest_hex} (${data.latest_byte})`;
|
|
|
|
const historyDiv = document.getElementById('history');
|
|
historyDiv.innerHTML = data.history.map(v =>
|
|
`<div class="byte">0x${v.toString(16).padStart(2,'0')}<br>${v}</div>`
|
|
).join('');
|
|
}
|
|
|
|
setInterval(update, 1000);
|
|
update();
|
|
</script>
|
|
</body>
|
|
</html>
|