Add static coverage planner demo

index.html

@@ -1,19 +1,418 @@
 <!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 lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>RabbitRobot Coverage Path Demo</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --ink: #172033;
+      --muted: #5b667a;
+      --line: #d8dee8;
+      --panel: #f7f9fc;
+      --green: #138a4f;
+      --blue: #2563eb;
+      --orange: #f97316;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      color: var(--ink);
+      background: #eef3f8;
+    }
+
+    header {
+      padding: 28px clamp(18px, 4vw, 48px) 18px;
+      background: #ffffff;
+      border-bottom: 1px solid var(--line);
+    }
+
+    h1 {
+      margin: 0 0 8px;
+      font-size: clamp(26px, 4vw, 42px);
+      line-height: 1.1;
+      letter-spacing: 0;
+    }
+
+    p {
+      margin: 0;
+      color: var(--muted);
+      line-height: 1.7;
+    }
+
+    main {
+      display: grid;
+      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
+      gap: 18px;
+      padding: 18px clamp(14px, 3vw, 32px) 28px;
+    }
+
+    .panel {
+      background: #ffffff;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+    }
+
+    .controls {
+      padding: 18px;
+      align-self: start;
+    }
+
+    .control {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 8px 12px;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    label {
+      font-size: 14px;
+      font-weight: 650;
+      color: #253149;
+    }
+
+    output {
+      min-width: 52px;
+      text-align: right;
+      color: var(--muted);
+      font-variant-numeric: tabular-nums;
+      font-size: 13px;
+    }
+
+    input[type="range"] {
+      grid-column: 1 / -1;
+      width: 100%;
+      accent-color: var(--green);
+    }
+
+    .toggle {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      margin: 4px 0 18px;
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    button {
+      width: 100%;
+      border: 0;
+      border-radius: 7px;
+      padding: 12px 14px;
+      color: #fff;
+      background: var(--green);
+      font-weight: 750;
+      cursor: pointer;
+    }
+
+    button:hover { background: #0f7643; }
+
+    .stage {
+      padding: 14px;
+      min-width: 0;
+    }
+
+    canvas {
+      width: 100%;
+      height: auto;
+      display: block;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      background: #fff;
+    }
+
+    .summary {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 10px;
+      margin-top: 12px;
+    }
+
+    .metric {
+      border: 1px solid var(--line);
+      border-radius: 7px;
+      padding: 10px 12px;
+      background: var(--panel);
+    }
+
+    .metric strong {
+      display: block;
+      color: var(--ink);
+      font-size: 19px;
+      line-height: 1.1;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .metric span {
+      display: block;
+      margin-top: 6px;
+      color: var(--muted);
+      font-size: 12px;
+      line-height: 1.35;
+    }
+
+    .note {
+      margin-top: 12px;
+      border-left: 4px solid var(--orange);
+      padding: 10px 12px;
+      background: #fff8f1;
+      color: #5d4030;
+      border-radius: 5px;
+      line-height: 1.65;
+      font-size: 14px;
+    }
+
+    @media (max-width: 920px) {
+      main { grid-template-columns: 1fr; }
+      .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    }
+
+    @media (max-width: 520px) {
+      .summary { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>RabbitRobot Coverage Path Demo</h1>
+    <p>面向 AMR 清扫 / 巡检场景的公开静态演示：在合成占据栅格上做区域选择、车体安全膨胀、known free-space 裁剪和往返式覆盖路径生成。</p>
+  </header>
+
+  <main>
+    <section class="panel controls" aria-label="coverage controls">
+      <div class="control">
+        <label for="xMin">区域 x_min</label><output id="xMinOut"></output>
+        <input id="xMin" type="range" min="-2" max="48" step="0.5" value="3">
+      </div>
+      <div class="control">
+        <label for="xMax">区域 x_max</label><output id="xMaxOut"></output>
+        <input id="xMax" type="range" min="8" max="62" step="0.5" value="50">
+      </div>
+      <div class="control">
+        <label for="yMin">区域 y_min</label><output id="yMinOut"></output>
+        <input id="yMin" type="range" min="0" max="34" step="0.5" value="5">
+      </div>
+      <div class="control">
+        <label for="yMax">区域 y_max</label><output id="yMaxOut"></output>
+        <input id="yMax" type="range" min="8" max="40" step="0.5" value="32">
+      </div>
+      <div class="control">
+        <label for="lane">覆盖行距</label><output id="laneOut"></output>
+        <input id="lane" type="range" min="0.4" max="2.0" step="0.05" value="0.8">
+      </div>
+      <div class="control">
+        <label for="robotW">车体宽度</label><output id="robotWOut"></output>
+        <input id="robotW" type="range" min="0.25" max="1.0" step="0.01" value="0.486">
+      </div>
+      <div class="control">
+        <label for="robotL">车体长度</label><output id="robotLOut"></output>
+        <input id="robotL" type="range" min="0.25" max="1.2" step="0.01" value="0.45">
+      </div>
+      <div class="control">
+        <label for="margin">安全边距</label><output id="marginOut"></output>
+        <input id="margin" type="range" min="0" max="0.8" step="0.01" value="0.08">
+      </div>
+      <label class="toggle">
+        <input id="mapAware" type="checkbox" checked>
+        启用 map-aware free-space clipping
+      </label>
+      <button id="run">Generate coverage path</button>
+    </section>
+
+    <section class="panel stage" aria-label="coverage map">
+      <canvas id="map" width="760" height="440"></canvas>
+      <div class="summary">
+        <div class="metric"><strong id="wp">0</strong><span>waypoints</span></div>
+        <div class="metric"><strong id="area">0.0</strong><span>estimated m²</span></div>
+        <div class="metric"><strong id="length">0.0</strong><span>path length m</span></div>
+        <div class="metric"><strong id="clearance">0.00</strong><span>center clearance m</span></div>
+      </div>
+      <div class="note" id="note"></div>
+    </section>
+  </main>
+
+  <script>
+    const W = 760, H = 440, RES = 0.10;
+    const controls = ["xMin","xMax","yMin","yMax","lane","robotW","robotL","margin"];
+    const canvas = document.getElementById("map");
+    const ctx = canvas.getContext("2d");
+
+    function val(id) { return Number(document.getElementById(id).value); }
+    function px(x, y) { return [Math.round(x / RES) + 50, H - (Math.round(y / RES) + 38)]; }
+
+    function buildMap() {
+      const grid = new Int8Array(W * H);
+      const setRect = (x0, y0, x1, y1, v) => {
+        for (let y = Math.max(0,y0); y < Math.min(H,y1); y++) {
+          for (let x = Math.max(0,x0); x < Math.min(W,x1); x++) grid[y * W + x] = v;
+        }
+      };
+      setRect(0, 0, W, 30, -1);
+      setRect(0, H - 28, W, H, -1);
+      setRect(0, 0, 34, H, -1);
+      setRect(W - 38, 0, W, H, -1);
+      setRect(540, 328, 730, 410, -1);
+      [[95,78,182,124],[258,70,303,220],[420,62,464,156],[558,102,668,148],[155,250,255,300],[348,264,432,312],[510,225,603,270],[638,215,682,326]].forEach(r => setRect(...r, 1));
+      setRect(64, 56, 690, 61, 1);
+      setRect(64, 374, 520, 379, 1);
+      setRect(64, 56, 69, 379, 1);
+      setRect(690, 56, 695, 328, 1);
+      return grid;
+    }
+
+    function freeMask(grid, clearancePx, mapAware) {
+      const mask = new Uint8Array(W * H);
+      mask.fill(1);
+      for (let i = 0; i < grid.length; i++) {
+        if (mapAware ? grid[i] !== 0 : grid[i] === 1) {
+          const x = i % W, y = Math.floor(i / W);
+          for (let yy = Math.max(0, y - clearancePx); yy <= Math.min(H - 1, y + clearancePx); yy++) {
+            for (let xx = Math.max(0, x - clearancePx); xx <= Math.min(W - 1, x + clearancePx); xx++) mask[yy * W + xx] = 0;
+          }
+        }
+      }
+      return mask;
+    }
+
+    function segments(row, minLen = 18) {
+      const out = [];
+      let start = -1;
+      for (let i = 0; i < row.length; i++) {
+        if (row[i] && start < 0) start = i;
+        if ((!row[i] || i === row.length - 1) && start >= 0) {
+          const end = row[i] && i === row.length - 1 ? i : i - 1;
+          if (end - start + 1 >= minLen) out.push([start, end]);
+          start = -1;
+        }
+      }
+      return out;
+    }
+
+    function lineFree(a, b, mask) {
+      const dx = b[0] - a[0], dy = b[1] - a[1];
+      const steps = Math.max(Math.abs(dx), Math.abs(dy), 1);
+      for (let i = 0; i <= steps; i++) {
+        const x = Math.round(a[0] + dx * i / steps);
+        const y = Math.round(a[1] + dy * i / steps);
+        if (x < 0 || x >= W || y < 0 || y >= H || !mask[y * W + x]) return false;
+      }
+      return true;
+    }
+
+    function connector(a, b, mask) {
+      if (lineFree(a, b, mask)) return [a, b];
+      for (const c of [[a[0], b[1]], [b[0], a[1]]]) {
+        if (lineFree(a, c, mask) && lineFree(c, b, mask)) return [a, c, b];
+      }
+      return null;
+    }
+
+    function plan() {
+      controls.forEach(id => document.getElementById(id + "Out").textContent = `${val(id).toFixed(id.includes("robot") || id === "margin" ? 2 : 1)} m`);
+      const grid = buildMap();
+      const clearanceM = Math.hypot(val("robotW"), val("robotL")) / 2 + val("margin");
+      const clearancePx = Math.max(1, Math.round(clearanceM / RES));
+      const mask = freeMask(grid, clearancePx, document.getElementById("mapAware").checked);
+      const [aX, aY] = px(Math.min(val("xMin"), val("xMax")), Math.min(val("yMin"), val("yMax")));
+      const [bX, bY] = px(Math.max(val("xMin"), val("xMax")), Math.max(val("yMin"), val("yMax")));
+      const x0 = Math.max(0, Math.min(aX, bX)), x1 = Math.min(W - 1, Math.max(aX, bX));
+      const y0 = Math.max(0, Math.min(aY, bY)), y1 = Math.min(H - 1, Math.max(aY, bY));
+      const laneStep = Math.max(8, Math.round(val("lane") / RES));
+      const waypoints = [], lines = [];
+      let previous = null, direction = 1, sampled = 0;
+      for (let y = y0; y <= y1; y += laneStep) {
+        const row = [];
+        for (let x = x0; x <= x1; x++) row.push(mask[y * W + x]);
+        for (const [s, e] of segments(row)) {
+          const sx = x0 + s, ex = x0 + e;
+          const start = direction > 0 ? [sx, y] : [ex, y];
+          const end = direction > 0 ? [ex, y] : [sx, y];
+          sampled += ex - sx + 1;
+          if (previous) {
+            const c = connector(previous, start, mask);
+            if (c) lines.push(c);
+          }
+          lines.push([start, end]);
+          waypoints.push(start, end);
+          previous = end;
+          direction *= -1;
+        }
+      }
+      draw(grid, mask, [x0, y0, x1, y1], lines, waypoints, clearancePx);
+      const lenPx = lines.reduce((sum, line) => sum + line.slice(1).reduce((s, p, i) => s + Math.hypot(p[0] - line[i][0], p[1] - line[i][1]), 0), 0);
+      document.getElementById("wp").textContent = waypoints.length;
+      document.getElementById("area").textContent = (sampled * val("lane") * RES).toFixed(1);
+      document.getElementById("length").textContent = (lenPx * RES).toFixed(1);
+      document.getElementById("clearance").textContent = clearanceM.toFixed(2);
+      document.getElementById("note").textContent = "工程含义：先把选择区域裁剪到已知 free-space，再按车体 footprint 与安全边距膨胀障碍物。真实机器人执行时，覆盖路径仍应接入 Nav2、velocity smoother 与 collision monitor，而不是让规划节点直接控制底盘。";
+    }
+
+    function draw(grid, mask, selected, lines, waypoints, clearancePx) {
+      const img = ctx.createImageData(W, H);
+      for (let i = 0; i < grid.length; i++) {
+        let c = grid[i] === 0 ? [244,247,250] : grid[i] < 0 ? [199,205,214] : [31,41,55];
+        if (grid[i] === 0 && mask[i]) c = [236,252,242];
+        img.data[i * 4] = c[0]; img.data[i * 4 + 1] = c[1]; img.data[i * 4 + 2] = c[2]; img.data[i * 4 + 3] = 255;
+      }
+      ctx.putImageData(img, 0, 0);
+      const [x0, y0, x1, y1] = selected;
+      ctx.fillStyle = "rgba(37,99,235,.12)";
+      ctx.strokeStyle = "rgba(37,99,235,.96)";
+      ctx.lineWidth = 3;
+      ctx.fillRect(x0, y0, x1 - x0, y1 - y0);
+      ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
+      ctx.strokeStyle = "#138a4f";
+      ctx.lineWidth = 4;
+      ctx.lineCap = "round";
+      lines.forEach(line => {
+        ctx.beginPath();
+        ctx.moveTo(line[0][0], line[0][1]);
+        line.slice(1).forEach(p => ctx.lineTo(p[0], p[1]));
+        ctx.stroke();
+      });
+      waypoints.forEach((p, i) => {
+        ctx.beginPath();
+        ctx.fillStyle = i === 0 ? "#166534" : i === waypoints.length - 1 ? "#dc2626" : "#15803d";
+        ctx.arc(p[0], p[1], i === 0 || i === waypoints.length - 1 ? 5 : 3.5, 0, Math.PI * 2);
+        ctx.fill();
+      });
+      ctx.fillStyle = "rgba(255,255,255,.92)";
+      ctx.strokeStyle = "#d8dee8";
+      ctx.lineWidth = 1;
+      roundRect(16, 16, 310, 96, 8);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "#172033";
+      ctx.font = "14px system-ui";
+      ctx.fillText("RabbitRobot map-aware coverage", 30, 42);
+      [["safe free-space","#ecfcf2"],["unknown / off-map","#c7cdd6"],["obstacle source","#1f2937"],[`clearance radius ${clearancePx}px`,"#138a4f"]].forEach((item, i) => {
+        const y = 58 + i * 14;
+        ctx.fillStyle = item[1];
+        ctx.fillRect(30, y - 8, 14, 8);
+        ctx.fillStyle = "#5b667a";
+        ctx.font = "12px system-ui";
+        ctx.fillText(item[0], 52, y);
+      });
+    }
+
+    function roundRect(x, y, w, h, r) {
+      ctx.beginPath();
+      ctx.moveTo(x + r, y);
+      ctx.arcTo(x + w, y, x + w, y + h, r);
+      ctx.arcTo(x + w, y + h, x, y + h, r);
+      ctx.arcTo(x, y + h, x, y, r);
+      ctx.arcTo(x, y, x + w, y, r);
+      ctx.closePath();
+    }
+
+    document.getElementById("run").addEventListener("click", plan);
+    controls.concat(["mapAware"]).forEach(id => document.getElementById(id).addEventListener("input", plan));
+    plan();
+  </script>
+</body>
 </html>