demo: capture now records what the HUD shows (tracked codes + composited overlay)

The capture saved the raw video frame (no HUD) and logged raw locator hits, so it
could not show whether the on-screen reticle noise was actually filtered. It now
composites the HUD onto the PNG and logs the tracked/filtered candidate set
(with hit counts) as 'tracked', keeping raw locator output under 'rawLocate' for
reference. A capture now reflects exactly what the user sees.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: MagicalTux

web/index.html

@@ -614,14 +614,23 @@ <h2>Decode an image</h2>
   scratch.width = pw; scratch.height = ph;
   const sctx = scratch.getContext('2d', { willReadFrequently: true });
   sctx.drawImage(video, 0, 0, pw, ph);
+  // Composite the HUD exactly as drawn on screen (processed-resolution, so scale 1:1)
+  // so the saved PNG shows what you actually see — the tracked reticles and locks, not
+  // the raw locator hits.
+  const rbox = b => ({ x0: Math.round(b.x0), y0: Math.round(b.y0), x1: Math.round(b.x1), y1: Math.round(b.y1) });
+  renderHUD(sctx, pw, ph, acquiring, lastDecoded, 1, 1, performance.now());
   // Reuse the live pipeline's already-computed state (off-thread) — never re-decode
   // synchronously here, which would freeze the UI on a busy 1080p frame.
   const report = {
     capturedAt: new Date().toISOString(),
     video: { width: vw, height: vh },
     processed: { width: pw, height: ph },
-    locate: liveCands.map(c => ({ family: c.family, corners: c.corners.map(p => [Math.round(p[0]), Math.round(p[1])]) })),
-    decode: lastDecoded.map(r => ({ symbology: r.symbology, text: r.text, box: r.box || null })),
+    // What the HUD actually draws: candidate tracks that survived the noise filter.
+    tracked: acquiring.map(t => ({ box: rbox(t.box), hits: t.hits })),
+    decode: lastDecoded.map(r => ({ symbology: r.symbology, text: r.text, box: r.box ? rbox(r.box) : null })),
+    // Raw locator output for reference (pre display-filter; favours recall, so noisy).
+    rawLocateCount: liveCands.length,
+    rawLocate: liveCands.map(c => ({ family: c.family, corners: c.corners.map(p => [Math.round(p[0]), Math.round(p[1])]) })),
     userAgent: navigator.userAgent,
   };
   const n = (window.__capN = (window.__capN || 0) + 1);
@@ -631,7 +640,7 @@ <h2>Decode an image</h2>
     `captured frame ${pw}×${ph} — ${liveCands.length} located, ${lastDecoded.length} decoded (saved PNG + JSON)`;
 };
 
-let liveCands = [], liveScale = [1, 1], lastLocate = 0, lastMs = 0;
+let liveCands = [], acquiring = [], liveScale = [1, 1], lastLocate = 0, lastMs = 0;
 function loop(ts) {
   if (!running) { return; }
   requestAnimationFrame(loop);
@@ -688,7 +697,7 @@ <h2>Decode an image</h2>
   // Ease located-candidate tracks too, and only surface the ones that have persisted
   // past the noise threshold — this is what the acquiring reticles are drawn from.
   for (const t of candTracks) t.box = boxLerp(t.box, t.target, 0.35);
-  const acquiring = candTracks.filter(t => t.hits >= CAND_MIN_HITS);
+  acquiring = candTracks.filter(t => t.hits >= CAND_MIN_HITS);
   document.getElementById('cam-result').textContent =
     lastDecoded.length ? lastDecoded.map(r => `${r.symbology}: ${r.text}`).join('\n') : '';