added html page for testing

mitmedialab · Oct 3, 2024 · fb1df19 · fb1df19
1 parent 3a72da5
commit fb1df19
Showing 1 changed file with 121 additions and 0 deletions.
diff --git a/LineDetection.html b/LineDetection.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Line Detection</title>
+    <style>
+        body { font-family: Arial, sans-serif; text-align: center; }
+        #outputImage { max-width: 100%; height: auto; border: 1px solid #ddd; }
+        #controls { margin: 20px 0; }
+        #ipInput { padding: 5px; width: 200px; }
+        button { padding: 5px 10px; cursor: pointer; }
+    </style>
+    <script>
+        const port = { camera: 8000 };
+        const endpoint = { video: 'video_feed' };
+
+        class LineDetector {
+            constructor(raspberryPiIp, width = 640, height = 480) {
+                this.raspberryPiIp = raspberryPiIp;
+                this.width = width;
+                this.height = height;
+                this.canvas = document.createElement('canvas');
+                this.canvas.width = width;
+                this.canvas.height = height;
+                this.ctx = this.canvas.getContext('2d');
+                this.lastDetectedLine = [];
+            }
+
+            async detectLine() {
+                try {
+                    const image = await this.loadImage(`http://${this.raspberryPiIp}:${port.camera}/${endpoint.video}?t=${Date.now()}`);
+                    this.ctx.drawImage(image, 0, 0, this.width, this.height);
+                    const imageData = this.ctx.getImageData(0, 0, this.width, this.height);
+                    const lineCoordinates = this.processImageData(imageData);
+
+                    if (lineCoordinates.length > 0) {
+                        this.lastDetectedLine = lineCoordinates;
+                    }
+
+                    this.drawLine(this.lastDetectedLine);
+                    return this.canvas.toDataURL();
+                } catch (error) {
+                    console.error('Error detecting line:', error);
+                    return null;
+                }
+            }
+
+            loadImage(src) {
+                return new Promise((resolve, reject) => {
+                    const img = new Image();
+                    img.crossOrigin = "Anonymous";
+                    img.onload = () => resolve(img);
+                    img.onerror = reject;
+                    img.src = src;
+                });
+            }
+
+            processImageData(imageData) {
+                const lineCoordinates = [];
+                const threshold = 50;
+
+                for (let y = 0; y < this.height; y++) {
+                    for (let x = 0; x < this.width; x++) {
+                        const index = (y * this.width + x) * 4;
+                        const [r, g, b] = imageData.data.slice(index, index + 3);
+
+                        if (r < threshold && g < threshold && b < threshold) {
+                            lineCoordinates.push([x, y]);
+                        }
+                    }
+                }
+                return lineCoordinates.sort((a, b) => a[1] - b[1]);
+            }
+
+            drawLine(coordinates) {
+                this.ctx.beginPath();
+                this.ctx.strokeStyle = 'red';
+                this.ctx.lineWidth = 2;
+                coordinates.forEach(([x, y], i) => {
+                    i === 0 ? this.ctx.moveTo(x, y) : this.ctx.lineTo(x, y);
+                });
+                this.ctx.stroke();
+            }
+        }
+
+        let detector;
+        let updateInterval;
+
+        function initializeDetector() {
+            const raspberryPiIp = document.getElementById('ipInput').value;
+            if (!raspberryPiIp) {
+                alert('Please enter a valid IP address');
+                return;
+            }
+            detector = new LineDetector(raspberryPiIp);
+            clearInterval(updateInterval);
+            updateImage();
+            updateInterval = setInterval(updateImage, 500);
+        }
+
+        async function updateImage() {
+            if (detector) {
+                const imageDataUrl = await detector.detectLine();
+                if (imageDataUrl) {
+                    document.getElementById('outputImage').src = imageDataUrl;
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <h1>Line Detection</h1>
+    <div id="controls">
+        <input type="text" id="ipInput" placeholder="Enter Raspberry Pi IP">
+        <button onclick="initializeDetector()">Start Detection</button>
+    </div>
+    <img id="outputImage" alt="Processed Image">
+</body>
+</html>
+