From 99ccca3968f14bbada72cf40a01be1168cfa6dad Mon Sep 17 00:00:00 2001 From: Ruslan Bakiev <572431+veikab@users.noreply.github.com> Date: Sat, 7 Mar 2026 12:10:16 +0700 Subject: [PATCH] feat: editable camera params panel on Court tab with live 3D update MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Position Y, Height, Stereo gap, Rotation angle, HFOV — all adjustable in real time, 3D scene updates on change. Co-Authored-By: Claude Opus 4.6 --- src/web/templates/index.html | 105 +++++++++++++++++++++++++++++++---- 1 file changed, 93 insertions(+), 12 deletions(-) diff --git a/src/web/templates/index.html b/src/web/templates/index.html index 417a2f1..5b6b309 100644 --- a/src/web/templates/index.html +++ b/src/web/templates/index.html @@ -213,6 +213,34 @@ height: 60px; } + /* Camera params panel */ + .cam-params { + display: flex; + gap: 8px; + align-items: center; + padding: 4px 8px; + } + .param-row { + display: flex; + flex-direction: column; + gap: 2px; + } + .param-row label { + font-size: 10px; + color: #888; + white-space: nowrap; + } + .param-row input { + width: 60px; + padding: 3px 5px; + background: #1a1a2e; + border: 1px solid #333; + border-radius: 4px; + color: #4ecca3; + font-size: 12px; + text-align: center; + } + /* Event banner */ .event-banner { display: none; @@ -286,8 +314,30 @@
Camera 1
Camera 0
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
- +
Not calibrated
@@ -507,7 +557,7 @@ function initCourtScene() { courtScene.add(new THREE.AmbientLight(0xffffff, 0.8)); // Physical camera marker: 1m from net, center, 1m height - addStereocameras(courtScene); + addStereocameras(courtScene, getCamParams()); // Load existing calibration cameras fetch('/api/calibration/data') @@ -608,7 +658,7 @@ function initTrajectoryScene() { trajScene.add(new THREE.AmbientLight(0xffffff, 0.8)); // Physical camera marker: 1m from net, center, 1m height - addStereocameras(trajScene); + addStereocameras(trajScene, getCamParams()); function animateTraj() { requestAnimationFrame(animateTraj); @@ -627,12 +677,26 @@ function initTrajectoryScene() { } // ===================== Stereo camera rig with court coverage ===================== -function addStereocameras(scene) { - // Position: net line (X=6.7), 1m outside court edge (Y=-1), 1m height (Z=1) - var baseX = 6.7, baseY = -1, baseZ = 1; - var stereoGap = 0.06; // 6cm between cameras - var camAngle = 15; // degrees each camera is rotated outward from straight +Y - var hfov = 128; // horizontal FOV degrees (IMX219 160° diagonal, 4:3 sensor) +// Track camera overlay objects for live update +var camOverlayObjects = []; + +function addStereocameras(scene, params) { + params = params || {}; + var baseX = 6.7; + var baseY = -(params.posY || 1); + var baseZ = params.posZ || 1; + var stereoGap = (params.stereo || 6) / 100; + var camAngle = params.angle || 15; + var hfov = params.hfov || 128; + + // Remove old overlay objects + camOverlayObjects.forEach(function(obj) { scene.remove(obj); }); + camOverlayObjects = []; + + function addObj(obj) { + scene.add(obj); + camOverlayObjects.push(obj); + } var cam0x = baseX - stereoGap / 2; var cam1x = baseX + stereoGap / 2; @@ -644,7 +708,7 @@ function addStereocameras(scene) { new THREE.MeshBasicMaterial({ color: color }) ); body.position.set(cx, baseY, baseZ); - scene.add(body); + addObj(body); } drawCamBody(cam0x, 0x44aaff); drawCamBody(cam1x, 0xff44aa); @@ -654,7 +718,7 @@ function addStereocameras(scene) { new THREE.Vector3(baseX, baseY, 0), new THREE.Vector3(baseX, baseY, baseZ) ]); - scene.add(new THREE.Line(poleGeo, new THREE.LineBasicMaterial({ color: 0x666666 }))); + addObj(new THREE.Line(poleGeo, new THREE.LineBasicMaterial({ color: 0x666666 }))); // Court boundaries for clipping var courtMinX = 0, courtMaxX = 13.4, courtMinY = 0, courtMaxY = 6.1; @@ -713,7 +777,7 @@ function addStereocameras(scene) { var triGeo = new THREE.BufferGeometry().setFromPoints([ camOnCourt, farPoints[i], farPoints[i + 1] ]); - scene.add(new THREE.Mesh(triGeo, mat)); + addObj(new THREE.Mesh(triGeo, mat)); } } @@ -886,6 +950,23 @@ setInterval(function() { } }).catch(function() {}); }, 1000); + +// ===================== Camera params live update ===================== +function getCamParams() { + return { + posY: parseFloat(document.getElementById('paramPosY').value) || 1, + posZ: parseFloat(document.getElementById('paramPosZ').value) || 1, + stereo: parseFloat(document.getElementById('paramStereo').value) || 6, + angle: parseFloat(document.getElementById('paramAngle').value) || 15, + hfov: parseFloat(document.getElementById('paramHfov').value) || 128 + }; +} + +function updateCamParams() { + var p = getCamParams(); + if (courtSceneInitialized) addStereocameras(courtScene, p); + if (trajSceneInitialized) addStereocameras(trajScene, p); +}