From fe90bfa39b89355d417e98f1691ca27b1bb8ec43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= Date: Thu, 4 Jun 2026 20:03:54 +0200 Subject: [PATCH] changed bboxes --- website/src/Object_Detection.jsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/website/src/Object_Detection.jsx b/website/src/Object_Detection.jsx index 0edf5e6..72ddfc0 100644 --- a/website/src/Object_Detection.jsx +++ b/website/src/Object_Detection.jsx @@ -8,7 +8,6 @@ function Object_Detection() { const ctxRefBBox = useRef(null); const ctxRefSending = useRef(null); const [error, setError] = useState(false); - const bboxes = useRef(null) const socketRef = useRef(null); const [running, setRunning] = useState(false); const streamRef = useRef(null); @@ -25,22 +24,20 @@ function Object_Detection() { } }, []); - const drawBBox = () => { - const video = videoRef.current; + const drawBBox = (bboxes) => { const canvas = canvasRefBBox.current; if (!canvas) return; const ctx = ctxRefBBox.current; if (!ctx) return; - if (!canvas) return; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.strokeStyle = "red"; ctx.lineWidth = 1; - if (bboxes.current) { - bboxes.current.forEach(edge => { + if (bboxes) { + bboxes.forEach(edge => { const x1 = Math.max(edge[0], 0); const y1 = Math.max(edge[1], 0); const x2 = Math.min(edge[2], canvas.width); @@ -129,8 +126,7 @@ function Object_Detection() { sendImageIntervall.current = setInterval(sendImage, 1000 / 2); } socket.onmessage = (event) => { - bboxes.current = JSON.parse(event.data).bboxes; - drawBBox(); + drawBBox(JSON.parse(event.data).bboxes); } socket.onerror = () => { console.log("Websocket Error"); @@ -162,8 +158,6 @@ function Object_Detection() { socketRef.current = null; } - bboxes.current = null; - if (videoRef.current) { videoRef.current.srcObject = null; }