diff --git a/src/components/CameraOverlay.tsx b/src/components/CameraOverlay.tsx new file mode 100644 index 0000000..f5bd40a --- /dev/null +++ b/src/components/CameraOverlay.tsx @@ -0,0 +1,43 @@ +import { useRef, useEffect } from 'react'; + +interface Props { + active: boolean; +} + +export default function CameraOverlay({ active }: Props) { + const canvasRef = useRef(null); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + ctx.clearRect(0, 0, canvas.width, canvas.height); + if (!active) return; + + const w = canvas.width; + const h = canvas.height; + const x = w * 0.1; + const y = h * 0.15; + const bw = w * 0.8; + const bh = h * 0.7; + + ctx.strokeStyle = 'rgba(0, 255, 180, 0.75)'; + ctx.lineWidth = 2; + ctx.setLineDash([8, 4]); + ctx.strokeRect(x, y, bw, bh); + + ctx.fillStyle = 'rgba(0, 255, 180, 0.15)'; + ctx.fillRect(x, y, bw, bh); + }, [active]); + + return ( + + ); +} diff --git a/src/pages/ScannerPage.tsx b/src/pages/ScannerPage.tsx index 4f5e4e3..af78763 100644 --- a/src/pages/ScannerPage.tsx +++ b/src/pages/ScannerPage.tsx @@ -10,6 +10,7 @@ import { Upload, } from "lucide-react"; import StatusTerminal from "../components/StatusTerminal"; +import CameraOverlay from "../components/CameraOverlay"; import { api, isAuthenticated } from "../lib/api"; import { FishFreshnessInference } from "../fusionInference.js"; import type { ScanResult } from "../lib/types"; @@ -470,6 +471,9 @@ export default function ScannerPage() { /> )} + {/* Camera Overlay Bounding Box */} + + {/* Grid overlay */}