2 files changed, 61 insertions, 6 deletions
diff --git a/js/lut-cam/index.html b/js/lut-cam/index.html
index 28d9b0d..02186c6 100644
--- a/js/lut-cam/index.html
+++ b/js/lut-cam/index.html
@@ -13,7 +13,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            background-color: #000;
+            background-color: beige;
         }
         #canvas {
             width: 100%;
@@ -40,6 +40,27 @@
             font-size: 18px;
             cursor: pointer;
         }
+
+        button, select {
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        button:hover, button:focus {
+            outline: none; 
+        }
+
+        button.capture {
+            background-color: teal;
+            color: #FFFFFF;
+        }
+
+        button.capture:disabled {
+            background-color: #ccc;
+            color: #5c5c5c;
+        }
+
     </style>
 </head>
 <body>
@@ -66,10 +87,14 @@
 </div>
 
 <div id="controls">
+    <div id="focus-container">
+        <input style="display: none;" type="range" id="focus-slider" min="0" max="100" step="1" value="50" disabled>
+    </div>
     <button id="toggle-camera">Turn Camera On</button>
-    <button id="capture" disabled>Capture Frame</button>
+    <button id="capture" disabled class="capture">Capture Image</button>
 </div>
 
+
 <script src="lut.js"></script>
 </body>
 </html>
diff --git a/js/lut-cam/lut.js b/js/lut-cam/lut.js
index 1c298e3..0bd7dae 100644
--- a/js/lut-cam/lut.js
+++ b/js/lut-cam/lut.js
@@ -31,6 +31,9 @@ const LUTs = {
 
 let currentLUT = null;
 
+const focusSlider = document.getElementById('focus-slider');
+let track = null;
+
 function startCamera() {
     navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' } } })
         .then(s => {
@@ -40,11 +43,35 @@ function startCamera() {
             canvas.style.display = 'block'; // Show the canvas
             lutSelect.disabled = false;
             captureButton.disabled = false;
-
-            // Display the video feed on the canvas
+            captureButton.active = true;
+            focusSlider.disabled = false;
+
+            track = stream.getVideoTracks()[0];
+            const settings = track.getSettings();
+
+            // So, I don't seem to have a device where this is supported
+            // Check if focus control is supported with this browser and device combo
+            if ('focusDistance' in settings) {
+                // If it is available, enable the slider for focus control
+                focusSlider.style.display = 'block';
+
+                // Set initial focus value, and a fallback
+                focusSlider.value = settings.focusDistance || focusSlider.min;
+
+                focusSlider.addEventListener('input', () => {
+                    track.applyConstraints({
+                        advanced: [{ focusDistance: focusSlider.value }]
+                    });
+                });
+            } else {
+                console.warn('Focus control is not supported on this device.');
+                focusSlider.style.display = 'none';
+            }
+
+            // Draw the video feed to the canvas
             video.addEventListener('play', function() {
                 function step() {
-                    if (!cameraOn) return; // Don't show the video feed if there isn't a video feed to show
+                    if (!cameraOn) return;
                     drawVideoProportional();
                     applyLUT();
                     requestAnimationFrame(step);
@@ -61,13 +88,16 @@ function stopCamera() {
     if (stream) {
         stream.getTracks().forEach(track => track.stop());
         video.pause();
-        canvas.style.display = 'none';
+        canvas.style.display = 'none'; // hide the canvas
         lutSelect.disabled = true;
         captureButton.disabled = true;
+        captureButton.active = false;
+        focusSlider.disabled = true;
         stream = null;
     }
 }
 
+
 function drawVideoProportional() {
     const videoAspectRatio = video.videoWidth / video.videoHeight;
     const canvasAspectRatio = canvas.width / canvas.height;