// Shared design tokens, thermal feed, icons, helpers for all 3 variations. const OMV_BLUE = '#0057A8'; const OMV_BLUE_DIM = '#0a3a6e'; const OMV_BLUE_BRIGHT = '#3b8fe0'; // Iron-palette thermal feed. Pretends to be a 640×480 IR sensor feed with // pipework / wall structure and one hotspot anomaly in the lower-left. // Variants: 'thermal' (iron palette) or 'normal' (grayscale visible camera). function ThermalFeed({ mode = 'thermal', anomaly = true, w = 800, h = 600, showCrosshair = true, showBrackets = true, label = 'IR · 640×480', src = null, srcNormal = null }) { const id = React.useId().replace(/:/g, ''); // Real-frame mode: render the processed FLIR capture instead of the synthetic SVG. if (src) { const shown = mode === 'normal' && srcNormal ? srcNormal : src; return (
thermal frame {showCrosshair && ( )}
); } return ( {/* Iron palette background — vertical gradient cool→warm */} {/* Warm structure (mid temp) */} {/* Hot anomaly */} {/* Pipe-line linear */} {/* Simulated structure: horizontal pipework + vertical riser */} {/* Hot anomaly blob */} {anomaly && ( )} {/* Subtle scan-line texture */} {Array.from({ length: 60 }).map((_, i) => ( ))} {/* Anomaly box */} {anomaly && ( ANOMALY · 64.2°C )} {/* Corner brackets */} {showBrackets && ( )} {/* Center crosshair */} {showCrosshair && ( )} {/* Top-left label (rendered only when explicitly provided; null skips). */} {label && ( {label} {mode === 'thermal' ? 'IRON · 12–78°C' : 'VISIBLE · RGB'} )} {/* REC + fps now live in the React HUD layer so they can be positioned relative to the other overlays (anomaly banner, temp tape, etc). */} ); } // Coverage map: top-down rectangle showing scan area, planned serpentine // path, completed cells, current head position. function CoverageMap({ progress = 0.42, cols = 12, rows = 8, accent = OMV_BLUE_BRIGHT, w = 360, h = 240 }) { const cellW = w / cols, cellH = h / rows; // Serpentine fill: rows alternate direction const total = cols * rows; const done = Math.floor(total * progress); const cells = []; let idx = 0; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const col = r % 2 === 0 ? c : cols - 1 - c; cells.push({ x: col * cellW, y: r * cellH, done: idx < done, current: idx === done }); idx++; } } return ( {/* Grid */} {Array.from({ length: cols + 1 }).map((_, i) => ( ))} {Array.from({ length: rows + 1 }).map((_, i) => ( ))} {/* Completed cells */} {cells.filter(c => c.done).map((c, i) => ( ))} {/* Current cell */} {cells.filter(c => c.current).map((c, i) => ( ))} {/* Border */} {/* Origin marker */} 0,0 {cols * 100}mm × {rows * 100}mm ); } // History thumbnail — small thermal thumbnail with optional anomaly highlight. function HistoryThumb({ mode = 'diff', anomaly = false, w = 180, h = 110, src = null }) { const id = React.useId().replace(/:/g, ''); if (src) { return ( {mode} ); } return ( {mode === 'raw' && } {mode === 'diff' && ( )} {anomaly && mode === 'diff' && ( )} ); } // ── Icons ───────────────────────────────────────────────────────────── const Icon = ({ d, size = 18, stroke = 1.6 }) => ( {typeof d === 'string' ? : d} ); const IconArrowUp = (p) => ; const IconArrowDown = (p) => ; const IconArrowLeft = (p) => ; const IconArrowRight = (p) => ; const IconHome = (p) => } />; const IconPlay = (p) => ; const IconPause = (p) => } />; const IconStop = (p) => } />; const IconCamera = (p) => } />; const IconThermal = (p) => } />; const IconWifi = (p) => ; const IconAlert = (p) => } />; const IconSwap = (p) => ; const IconLayers = (p) => } />; const IconChip = (p) => } />; const IconExpand = (p) => ; Object.assign(window, { OMV_BLUE, OMV_BLUE_DIM, OMV_BLUE_BRIGHT, ThermalFeed, CoverageMap, HistoryThumb, IconArrowUp, IconArrowDown, IconArrowLeft, IconArrowRight, IconHome, IconPlay, IconPause, IconStop, IconCamera, IconThermal, IconWifi, IconAlert, IconSwap, IconLayers, IconChip, IconExpand, });