Initial Code Commit

Project/app/buildings/[buildingid]/trash-scanner/oldpage.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import Webcam from 'react-webcam';
+import { Card, CardBody } from '@nextui-org/card';
+import { Button } from '@nextui-org/button';
+import screenfull from 'screenfull';
+
+const TrashScanner: React.FC = () => {
+    const webcamRef = useRef<Webcam>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [isDrawing, setIsDrawing] = useState(false);
+    const [startPos, setStartPos] = useState({ x: 0, y: 0 });
+    const [endPos, setEndPos] = useState({ x: 0, y: 0 });
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    //canvas size
+    const setCanvasSize = useCallback(() => {
+        const video = webcamRef.current?.video;
+        const canvas = canvasRef.current;
+        if (video && canvas) {
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+        }
+    }, []);
+
+    // listener to set canvas size when video is ready
+    useEffect(() => {
+        const video = webcamRef.current?.video;
+
+        if (video) {
+            video.addEventListener('loadedmetadata', setCanvasSize);
+        }
+        return () => {
+            if (video) {
+                video.removeEventListener('loadedmetadata', setCanvasSize);
+            }
+        };
+    }, [setCanvasSize]);
+
+    const handleMouseDown = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        const x = (e.clientX - rect.left) * scaleX;
+        const y = (e.clientY - rect.top) * scaleY;
+
+        setIsDrawing(true);
+        setStartPos({ x, y });
+        setEndPos({ x, y });
+    }, []);
+
+    const handleMouseMove = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+        if (!isDrawing) return;
+
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        const x = (e.clientX - rect.left) * scaleX;
+        const y = (e.clientY - rect.top) * scaleY;
+
+        setEndPos({ x, y });
+    }, [isDrawing]);
+
+    const handleMouseUp = useCallback(() => {
+        setIsDrawing(false);
+    }, []);
+
+    const drawBox = useCallback(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext('2d');
+        if (!ctx || !canvas) return;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.strokeStyle = 'red';
+        ctx.lineWidth = 2;
+        ctx.strokeRect(
+            Math.min(startPos.x, endPos.x),
+            Math.min(startPos.y, endPos.y),
+            Math.abs(endPos.x - startPos.x),
+            Math.abs(endPos.y - startPos.y)
+        );
+    }, [startPos, endPos]);
+
+    React.useEffect(() => {
+        drawBox();
+    }, [drawBox]);
+
+    const toggleFullScreen = useCallback(() => {
+        if (containerRef.current && screenfull.isEnabled) {
+            screenfull.toggle(containerRef.current);
+        }
+    }, []);
+
+    return (
+        <div className="container-fluid p-4">
+            <h1 className="text-2xl font-bold text-center mb-4">Trash Scanner</h1>
+            <div className="flex flex-col items-center">
+                <Card className="w-full md:w-auto md:max-w-[640px] mb-4">
+                    <CardBody className="p-0">
+                        <div ref={containerRef} className="relative aspect-video">
+                            <Webcam
+                                audio={false}
+                                ref={webcamRef}
+                                screenshotFormat="image/jpeg"
+                                className="w-full h-full object-cover rounded-lg"
+                            />
+                            <canvas
+                                ref={canvasRef}
+                                className="absolute top-0 left-0 w-full h-full rounded-lg"
+                                onMouseDown={handleMouseDown}
+                                onMouseMove={handleMouseMove}
+                                onMouseUp={handleMouseUp}
+                                onMouseLeave={handleMouseUp}
+                            />
+                        </div>
+                    </CardBody>
+                </Card>
+                <Button
+                    onClick={toggleFullScreen}
+                    className="w-full md:w-auto md:max-w-[640px]"
+                >
+                    Toggle Fullscreen
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default TrashScanner;