Blame for index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laser rangefinder UART frame decoder (WebSerial) - ERDI LRF</title>
<meta name="description" content="Decode laser rangefinder UART frames in the browser: connect a module over WebSerial or paste hex. Supports ERDI 5C and 55 AA frames and Benewake TF-style 9-byte frames.">
<style>

  :root { --bg:#fff; --fg:#14181f; --muted:#5b6472; --line:#d9dee6; --accent:#0b5fff; }

  @media (prefers-color-scheme: dark) { :root { --bg:#0f1318; --fg:#e8ecf2; --muted:#9aa4b2; --line:#2a323d; --accent:#6ea2ff; } }

  body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,sans-serif; }

  main { max-width:860px; margin:0 auto; padding:24px 16px 64px; }

  h1 { font-size:1.5rem; margin:0 0 4px; } p.lead { color:var(--muted); margin:0 0 20px; }

  label { display:block; font-weight:600; margin:12px 0 4px; }

  select, textarea, button, input { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:transparent; color:inherit; }

  textarea { width:100%; box-sizing:border-box; min-height:84px; font-family:ui-monospace,monospace; }

  button { cursor:pointer; background:var(--accent); color:#fff; border-color:var(--accent); } button.secondary { background:transparent; color:var(--fg); border-color:var(--line); }

  .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

  #big { font-size:2.4rem; font-variant-numeric:tabular-nums; margin:16px 0 4px; }

  table { border-collapse:collapse; width:100%; font-size:.9rem; margin-top:12px; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }

  code { font-family:ui-monospace,monospace; } .muted { color:var(--muted); font-size:.9rem; }

</style>
</head>
<body>
<main>
  <h1>Laser rangefinder UART frame decoder</h1>
  <p class="lead">Connect a rangefinder module with WebSerial (Chrome / Edge) or paste captured hex. Runs entirely in your browser.</p>

  <label for="profile">Protocol profile</label>
  <select id="profile"></select>
  <div class="muted" id="baudnote"></div>

  <div class="row" style="margin-top:12px">
    <button id="connect">Connect serial port</button>
    <button id="disconnect" class="secondary" disabled>Disconnect</button>
    <span class="muted" id="status">WebSerial: checking...</span>
  </div>

  <label for="hex">Or paste hex bytes</label>
  <textarea id="hex" placeholder="5C 02 11 EC 5C 03 11 EB"></textarea>
  <div class="row" style="margin-top:8px"><button id="decode">Decode pasted hex</button><button id="clear" class="secondary">Clear table</button></div>

  <div id="big">-</div>
  <div class="muted" id="stats"></div>
  <table><thead><tr><th>#</th><th>Frame</th><th>Raw</th><th>Distance (m)</th><th>Note</th></tr></thead><tbody id="rows"></tbody></table>

  <p class="muted">The same <code>5C 02 11 EC</code> frame is 43.54 m on an ERDI H-series module and 4.354 m on a VB-series module: pick the profile that matches your model.
  Model pages and datasheets: <a href="https://erdilrf.com/models/?utm_source=github&utm_medium=pages&utm_campaign=lrf-uart-protocol-decoder">erdilrf.com/models</a>.
  Source: <a href="https://github.com/ErdiTech/lrf-uart-protocol-decoder">github.com/ErdiTech/lrf-uart-protocol-decoder</a>.</p>
</main>
<script type="module">

import { Decoder, PROFILES, parseHex } from "./decoder.js";

const $ = (id) => document.getElementById(id);

const sel = $("profile");

for (const [k, p] of Object.entries(PROFILES)) sel.add(new Option(p.label, k));

let dec = new Decoder(sel.value), count = 0, port = null, reader = null;

function note() { $("baudnote").textContent = "Default baud " + PROFILES[sel.value].baud + ", 8N1."; }

note();

sel.onchange = () => { dec = new Decoder(sel.value); note(); };

function show(frames) {

  for (const f of frames) {

    count++;

    const tr = document.createElement("tr");

    const d = f.distance_m === null ? "-" : f.distance_m.toFixed(3);

    for (const v of [count, f.hex, f.raw, d, f.out_of_range ? "out of range / no echo" : ""]) { const td = document.createElement("td"); td.textContent = v; tr.append(td); }

    $("rows").prepend(tr);

    while ($("rows").children.length > 200) $("rows").lastChild.remove();

    $("big").textContent = f.distance_m === null ? "out of range" : f.distance_m.toFixed(3) + " m";

  }

  $("stats").textContent = dec.frames + " valid frames, " + dec.skipped + " bytes skipped (resync)";

}

$("decode").onclick = () => { try { dec = new Decoder(sel.value); show(dec.push(parseHex($("hex").value))); } catch (e) { $("stats").textContent = e.message; } };

$("clear").onclick = () => { $("rows").textContent = ""; count = 0; };

$("status").textContent = "serial" in navigator ? "WebSerial available" : "WebSerial not supported in this browser (use Chrome or Edge); paste mode still works";

$("connect").onclick = async () => {

  if (!("serial" in navigator)) return;

  try {

    port = await navigator.serial.requestPort();

    await port.open({ baudRate: PROFILES[sel.value].baud });

    dec = new Decoder(sel.value);

    $("connect").disabled = true; $("disconnect").disabled = false; $("status").textContent = "connected";

    reader = port.readable.getReader();

    for (;;) { const { value, done } = await reader.read(); if (done) break; if (value) show(dec.push(value)); }

  } catch (e) { $("status").textContent = String(e.message || e); }

  finally { try { reader && reader.releaseLock(); } catch (_) {} }

};

$("disconnect").onclick = async () => { try { reader && await reader.cancel(); await port.close(); } catch (_) {} $("connect").disabled = false; $("disconnect").disabled = true; $("status").textContent = "disconnected"; };

</script>
</body>
</html>