Show camera preview

Author: connorgallopo

Software/web-server/calibration_manager.py

@@ -309,7 +309,7 @@ async def check_ball_location(self, camera: str = "camera1") -> Dict[str, Any]:
             camera: Which camera to use ("camera1" or "camera2")
 
         Returns:
-            Dict with status and ball location info
+            Dict with status, ball location info, and image path for display
         """
         logger.info(f"Starting ball location check for {camera}")
 
@@ -348,13 +348,21 @@ async def check_ball_location(self, camera: str = "camera1") -> Dict[str, Any]:
         if camera_gain is None:
             camera_gain = 6.0
 
+        # Create output filename for the captured image
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        output_file = f"ball_location_{camera}_{timestamp}.png"
+        images_dir = Path.home() / "LM_Shares" / "Images"
+        images_dir.mkdir(parents=True, exist_ok=True)
+        output_path = images_dir / output_file
+
         cmd.extend(
             [
                 f"--search_center_x={search_x}",
                 f"--search_center_y={search_y}",
                 f"--logging_level={logging_level}",
                 "--artifact_save_level=all",
                 f"--camera_gain={camera_gain}",
+                f"--output_filename={output_path}",
             ]
         )
         cmd.extend(self._build_cli_args_from_metadata(camera))
@@ -368,10 +376,19 @@ async def check_ball_location(self, camera: str = "camera1") -> Dict[str, Any]:
             self.calibration_status[camera]["message"] = "Ball detected" if ball_info else "Ball not found"
             self.calibration_status[camera]["progress"] = 100
 
+            image_url = None
+            if output_path.exists():
+                image_url = f"/api/images/{output_file}"
+                logger.info(f"Ball location image saved: {output_path}")
+            else:
+                logger.warning(f"Ball location image not found at: {output_path}")
+
             return {
                 "status": "success",
                 "ball_found": bool(ball_info),
                 "ball_info": ball_info,
+                "image_url": image_url,
+                "image_path": str(output_path) if output_path.exists() else None,
                 "output": result.get("output", ""),
             }
 

Software/web-server/static/js/calibration.js

@@ -274,7 +274,7 @@ class CalibrationManager {
         }
 
         const button = event?.target || event?.currentTarget;
-        const originalText = button?.textContent || 'Check Ball Location';
+        const originalText = button?.textContent || 'Verify Ball Placement';
 
         try {
             if (button) {
@@ -290,6 +290,17 @@ class CalibrationManager {
                 const result = await response.json();
                 const statusDiv = document.getElementById(`${camera}-ball-status`);
 
+                if (result.image_url) {
+                    const img = document.getElementById(`${camera}-image`);
+                    img.src = result.image_url + '?t=' + Date.now(); // Cache bust
+                    img.style.display = 'block';
+
+                    const placeholder = img.parentElement.querySelector('.camera-placeholder');
+                    if (placeholder) {
+                        placeholder.style.display = 'none';
+                    }
+                }
+
                 if (result.ball_found) {
                     statusDiv.className = 'ball-status success';
                     statusDiv.textContent = `Ball detected at position (${result.ball_info?.x || 0}, ${result.ball_info?.y || 0})`;

Software/web-server/templates/calibration.html

@@ -104,7 +104,7 @@ <h3>Camera 1 - Tee Camera (Top/Angled)</h3>
                                 Calibrate Camera 1
                             </button>
                             <button class="btn btn-secondary" onclick="calibration.checkBallLocation('camera1', event)">
-                                Check Ball Location
+                                Verify Ball Placement
                             </button>
                         </div>
                         <div class="ball-status" id="camera1-ball-status"></div>
@@ -123,7 +123,7 @@ <h3>Camera 2 - Flight Camera (Bottom/Straight)</h3>
                                 Calibrate Camera 2
                             </button>
                             <button class="btn btn-secondary" onclick="calibration.checkBallLocation('camera2', event)">
-                                Check Ball Location
+                                Verify Ball Placement
                             </button>
                         </div>
                         <div class="ball-status" id="camera2-ball-status"></div>
@@ -212,7 +212,7 @@ <h4>Process Log:</h4>
             <h2>Calibration Complete</h2>
 
             <div class="calibration-results">
-                <div class="success-icon">🎉</div>
+                <div class="success-icon"></div>
 
                 <div class="results-summary">
                     <h3>Calibration Results:</h3>