Add static WebSerial decoder

README.md

@@ -1,10 +1,17 @@
----
-title: Lrf Uart Protocol Decoder
-emoji: 💻
-colorFrom: yellow
-colorTo: gray
-sdk: static
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Laser rangefinder UART protocol decoder
+emoji: "📏"
+colorFrom: blue
+colorTo: gray
+sdk: static
+pinned: false
+license: mit
+short_description: Decode laser rangefinder UART frames in the browser
+tags:
+- laser-rangefinder
+- lidar
+- uart
+- webserial
+---
+
+Decode laser rangefinder module UART frames in the browser: paste hex or connect a module over WebSerial (Chrome / Edge). Profiles for ERDI 905 nm modules and Benewake TFmini / TF-Luna style frames. Source: [ErdiTech/lrf-uart-protocol-decoder](https://github.com/ErdiTech/lrf-uart-protocol-decoder). By ERDI TECH LTD, [erdilrf.com](https://erdilrf.com/models/).

decoder.js

@@ -0,0 +1,104 @@
+// lrf-uart-protocol-decoder: stream decoder for laser rangefinder UART frames.
+// Works in browsers (WebSerial page) and Node (tests). No dependencies.
+
+const sum8 = (bytes) => bytes.reduce((a, b) => (a + b) & 0xff, 0);
+const hex = (bytes) => Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join(" ").toUpperCase();
+
+// Each profile: find a frame at buf[i], return {len, frame} | null (need more) | false (no frame here).
+export const PROFILES = {
+  // ERDI family B: 5C <lo> <hi> <chk>, chk = ~(lo+hi). LRF1500H: 5C lo mid hi chk.
+  "erdi-b-4-cm": { label: "ERDI H series (5C, 4-byte, centimetres)", baud: 460800, len: 4, unit: 0.01, oor: 65535, kind: "erdiB" },
+  "erdi-b-4-mm": { label: "ERDI VB series (5C, 4-byte, millimetres)", baud: 460800, len: 4, unit: 0.001, oor: null, kind: "erdiB" },
+  "erdi-b-5-cm": { label: "ERDI LRF1500H (5C, 5-byte, centimetres)", baud: 460800, len: 5, unit: 0.01, oor: 16777215, kind: "erdiB" },
+  // ERDI family A: 55 AA fn STA FF DH DL SUM, reply sum covers the header; value x10 metres.
+  "erdi-a": { label: "ERDI LR / LRF A / SPD (55 AA reply, metres x10)", baud: 115200, len: 8, unit: 0.1, kind: "erdiA" },
+  // Benewake TF-series 9-byte: 59 59 Dist_L Dist_H Str_L Str_H Temp_L Temp_H chk(sum of first 8)
+  "benewake-tf-9": { label: "Benewake TFmini / TF-Luna style (59 59, 9-byte, cm)", baud: 115200, len: 9, unit: 0.01, kind: "tf9" },
+};
+
+function inv8(bytes) {
+  return ~sum8(bytes) & 0xff;
+}
+
+function tryFrame(profile, buf, i) {
+  const p = PROFILES[profile];
+  if (buf.length - i < 1) return null;
+  if (p.kind === "erdiB") {
+    if (buf[i] !== 0x5c) return false;
+    if (buf.length - i < p.len) return null;
+    const f = buf.slice(i, i + p.len);
+    if (inv8(f.slice(1, -1)) !== f[f.length - 1]) return false;
+    let raw = 0;
+    for (let k = f.length - 2; k >= 1; k--) raw = raw * 256 + f[k];
+    const oor = p.oor !== null && raw >= p.oor;
+    return { len: p.len, frame: f, info: { raw, distance_m: oor ? null : raw * p.unit, out_of_range: oor } };
+  }
+  if (p.kind === "erdiA") {
+    if (buf[i] !== 0x55) return false;
+    if (buf.length - i < 2) return null;
+    if (buf[i + 1] !== 0xaa) return false;
+    if (buf.length - i < 8) return null;
+    const f = buf.slice(i, i + 8);
+    if (sum8(f.slice(0, 7)) !== f[7]) return false;
+    const raw = (f[5] << 8) | f[6];
+    const ok = f[3] === 1;
+    return { len: 8, frame: f, info: { function: f[2], status: f[3], raw, distance_m: ok ? raw * p.unit : null, out_of_range: !ok } };
+  }
+  if (p.kind === "tf9") {
+    if (buf[i] !== 0x59) return false;
+    if (buf.length - i < 2) return null;
+    if (buf[i + 1] !== 0x59) return false;
+    if (buf.length - i < 9) return null;
+    const f = buf.slice(i, i + 9);
+    if (sum8(f.slice(0, 8)) !== f[8]) return false;
+    const raw = f[2] | (f[3] << 8);
+    return { len: 9, frame: f, info: { raw, distance_m: raw * p.unit, strength: f[4] | (f[5] << 8), temp_raw: f[6] | (f[7] << 8), out_of_range: false } };
+  }
+  return false;
+}
+
+export class Decoder {
+  constructor(profile) {
+    if (!PROFILES[profile]) throw new Error("unknown profile " + profile);
+    this.profile = profile;
+    this.buf = [];
+    this.skipped = 0;
+    this.frames = 0;
+  }
+
+  // Feed bytes (Uint8Array | number[]); returns the list of complete valid frames found.
+  push(bytes) {
+    for (const b of bytes) this.buf.push(b);
+    const out = [];
+    let i = 0;
+    while (i < this.buf.length) {
+      const r = tryFrame(this.profile, this.buf, i);
+      if (r === null) break; // partial frame at tail: wait for more bytes
+      if (r === false) {
+        i += 1;
+        this.skipped += 1;
+        continue;
+      }
+      this.frames += 1;
+      out.push({ hex: hex(r.frame), ...r.info });
+      i += r.len;
+    }
+    this.buf = this.buf.slice(i);
+    if (this.buf.length > 4096) this.buf = this.buf.slice(-64);
+    return out;
+  }
+}
+
+export function parseHex(text) {
+  const clean = text.replace(/0x/gi, " ").replace(/[^0-9a-fA-F]+/g, " ").trim();
+  if (!clean) return [];
+  const parts = clean.split(" ");
+  const bytes = [];
+  for (const p of parts) {
+    if (p.length % 2) throw new Error("odd-length hex token: " + p);
+    for (let k = 0; k < p.length; k += 2) bytes.push(parseInt(p.slice(k, k + 2), 16));
+  }
+  return bytes;
+}
+
+export { hex };

index.html

@@ -1,19 +1,90 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</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>