From 5c3d6be6feb8d497194874b2e75868a3c166bee5 Mon Sep 17 00:00:00 2001 From: JEMcats Date: Sun, 27 Oct 2024 09:09:39 -0400 Subject: [PATCH] Update formating in legacy version --- webpage/legacy.html | 391 +++++++++++++++++++++++--------------------- 1 file changed, 202 insertions(+), 189 deletions(-) diff --git a/webpage/legacy.html b/webpage/legacy.html index 55b270d..ad23e03 100644 --- a/webpage/legacy.html +++ b/webpage/legacy.html @@ -1,11 +1,13 @@ + Duolingo Eye Following + -
- - - - - - - - -

Loading...

+
+ + + + + + + + +

Loading...

-
- + const right_boundaries = { + x: { min: 78, max: 63 }, + y: { min: 50, max: 0 } + }; + + function interpolate(min, max, offset) { + return min + (max - min) * offset; + } + + const normalizedX = (translateX + 50) / 100; + const normalizedY = (translateY + 50) / 100; + + const newLeftX = interpolate(left_boundaries.x.min, left_boundaries.x.max, normalizedX); + const newLeftY = interpolate(left_boundaries.y.min, left_boundaries.y.max, normalizedY); + const newRightX = interpolate(right_boundaries.x.min, right_boundaries.x.max, normalizedX); + const newRightY = interpolate(right_boundaries.y.min, right_boundaries.y.max, normalizedY); + + left_entity.style.transform = `translateX(${newLeftX}px) scale(0.55) translateY(${newLeftY}px)`; + right_entity.style.transform = `translateX(${newRightX}px) scale(0.55) translateY(${newRightY}px)`; + } + + function startCamera() { + navigator.mediaDevices.getUserMedia({ + video: { facingMode: 'user' } + }).then((stream) => { + const videoElement = document.getElementById('video'); + videoElement.srcObject = stream; + videoElement.play(); // Ensure the video plays + camera_setup_complete = true; + }).catch((error) => { + console.error('Error accessing the camera:', error); + alert('Camera access denied or not available.'); + }); + } + + function captureImage() { + const video = document.getElementById('video'); + const canvas = document.getElementById('previewImage'); + const context = canvas.getContext('2d'); + context.drawImage(video, 0, 0, canvas.width, canvas.height); + return canvas.toDataURL('image/jpeg'); + } + + function getPixelCoordinates(normCoords) { + const canvas = document.getElementById('previewImage'); + const width = canvas.width; + const height = canvas.height; + + const topLeft = { + x: normCoords[0] * width, + y: normCoords[1] * height + }; + + const bottomRight = { + x: normCoords[2] * width, + y: normCoords[3] * height + }; + + return { topLeft, bottomRight }; + } + + // Function to draw a box given the pixel coordinates + function drawBox(points) { + const canvas = document.getElementById('previewImage'); + const ctx = canvas.getContext('2d'); + ctx.beginPath(); + ctx.rect(points.topLeft.x, points.topLeft.y, + points.bottomRight.x - points.topLeft.x, + points.bottomRight.y - points.topLeft.y); + ctx.closePath(); + ctx.strokeStyle = 'blue'; // Set stroke color + ctx.lineWidth = 2; // Set stroke width + ctx.stroke(); // Apply stroke + } + + // Adjusted interval to capture the image every second + setInterval(() => { + if (camera_setup_complete) { + const newSnap = captureImage(); + wss.send(JSON.stringify({ 'action': 'UpdatePicture', 'data': { 'img': newSnap } })); + } + }, 200); // 1000 ms = 1 second + + window.onload = startCamera; + + \ No newline at end of file