| <!doctype html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="description" content="Map-aware AMR coverage planning for RabbitRobot, supporting real-robot navigation and VLN/VLR evaluation with footprint clearance and known-free clipping."> |
| <title>RabbitRobot Coverage Path Planning</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 Planning</h1> |
| <p>Map-aware AMR coverage planning for RabbitRobot, supporting real-robot navigation and VLN/VLR evaluation with footprint clearance, known-free clipping and safe waypoint generation.</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> |
|
|
