dsrptlab/pickle_vision
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: court/trajectory layout, net orientation, camera position

Browse Source 
- Court and Trajectory tabs: 3D viewport full screen, cameras small
  at bottom center as horizontal thumbnails
- Fix net orientation (was perpendicular, now spans court width)
- Default camera: center line, 1m from net, 1m height

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-03-07 11:11:44 +07:00
parent 9ebee2a529
commit 8dd1573d0e
1 changed files with 67 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/web/templates/index.html
View File

@@ -94,34 +94,43 @@
}
.viewport-3d canvas { width: 100% !important; height: 100% !important; }
/* Bottom layout: 3D + sidebar panel */
.court-bottom, .traj-bottom {
/* Full-height tab layout: 3D on top, small bottom bar */
.tab-full {
display: flex;
height: calc(100vh - 100px - 30vw);
overflow: hidden;
flex-direction: column;
height: calc(100vh - 52px);
}
.court-main, .traj-main {
.tab-full .viewport-3d {
flex: 1;
position: relative;
min-width: 0;
}
.court-main .viewport-3d,
.traj-main .viewport-3d {
width: 100%;
height: 100%;
height: auto;
border-top: none;
}
.bottom-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 8px;
background: #0d0d20;
border-top: 1px solid #222;
}
.cam-thumb {
width: 200px;
flex-shrink: 0;
}
.cam-thumb img {
width: 100%;
border-radius: 4px;
border: 1px solid #222;
display: block;
}
/* Sidebar panel (calibration, etc.) */
.sidebar-panel {
width: 220px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 10px;
background: #111128;
border-left: 1px solid #222;
padding: 4px 12px;
}
.btn-calibrate {
width: 100%;
@@ -145,16 +154,12 @@
.calibrate-status .ok { color: #4ecca3; }
.calibrate-status .fail { color: #ff4444; }
/* VAR panel (sidebar version) */
.var-panel-sidebar {
width: 220px;
flex-shrink: 0;
/* VAR panel (bottom bar version) */
.var-panel-bottom {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
background: #111128;
border-left: 1px solid #222;
align-items: center;
gap: 10px;
padding: 4px 12px;
}
.var-indicator {
display: flex;
@@ -274,44 +279,30 @@
</div>
</div>
<!-- Tab 2: Court — cameras on top, 3D below -->
<!-- Tab 2: Court — 3D main, cameras small bottom center -->
<div class="tab-content" id="tab-court">
<div class="cameras">
<div class="cam-box">
<img id="court-cam1" alt="Camera 1">
</div>
<div class="cam-box">
<img id="court-cam0" alt="Camera 0">
</div>
</div>
<div class="court-bottom">
<div class="court-main">
<div class="tab-full">
<div class="viewport-3d" id="court-3d"></div>
</div>
<div class="bottom-bar">
<div class="cam-thumb"><img id="court-cam1" alt="Camera 1"></div>
<div class="sidebar-panel">
<button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
<div class="calibrate-status" id="calStatus">
<span id="calStatusText">Not calibrated</span>
</div>
</div>
<div class="cam-thumb"><img id="court-cam0" alt="Camera 0"></div>
</div>
</div>
</div>
<!-- Tab 3: Trajectory — cameras on top, 3D below -->
<!-- Tab 3: Trajectory — 3D main, cameras small bottom center -->
<div class="tab-content" id="tab-trajectory">
<div class="cameras">
<div class="cam-box">
<img id="traj-cam1" alt="Camera 1">
</div>
<div class="cam-box">
<img id="traj-cam0" alt="Camera 0">
</div>
</div>
<div class="traj-bottom">
<div class="traj-main">
<div class="tab-full">
<div class="viewport-3d" id="trajectory-3d"></div>
</div>
<div class="var-panel-sidebar">
<div class="bottom-bar">
<div class="cam-thumb"><img id="traj-cam1" alt="Camera 1"></div>
<div class="var-panel-bottom">
<div class="var-indicator">
<div class="var-dot" id="varDot"></div>
<div class="var-label" id="varLabel">VAR</div>
@@ -324,6 +315,8 @@
<img class="var-snapshot" id="varSnapshot" style="display:none">
<div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div>
</div>
<div class="cam-thumb"><img id="traj-cam0" alt="Camera 0"></div>
</div>
</div>
</div>
@@ -476,7 +469,7 @@ function initCourtScene() {
courtScene.background = new THREE.Color(0x0a0a1a);
courtCamera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100);
courtCamera.position.set(6.7, -8, 12);
courtCamera.position.set(7.7, 3.05, 1);
courtCamera.lookAt(6.7, 3.05, 0);
courtRenderer = new THREE.WebGLRenderer({ antialias: true });
@@ -498,7 +491,7 @@ function initCourtScene() {
// Net (wide plane)
var netMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.4, side: THREE.DoubleSide });
var netWide = new THREE.PlaneGeometry(6.1, 0.914);
var netWide = new THREE.PlaneGeometry(0.914, 6.1);
var netWideMesh = new THREE.Mesh(netWide, netMat);
netWideMesh.rotation.y = Math.PI / 2;
netWideMesh.position.set(6.7, 3.05, 0.457);
@@ -549,15 +542,15 @@ function initTrajectoryScene() {
trajScene.background = new THREE.Color(0x0a0a1a);
trajCamera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100);
trajCamera.position.set(6.7, -10, 8);
trajCamera.lookAt(6.7, 3.05, 1);
trajCamera.position.set(7.7, 3.05, 1);
trajCamera.lookAt(6.7, 3.05, 0);
trajRenderer = new THREE.WebGLRenderer({ antialias: true });
trajRenderer.setSize(w, h);
container.appendChild(trajRenderer.domElement);
var controls = new THREE.OrbitControls(trajCamera, trajRenderer.domElement);
controls.target.set(6.7, 3.05, 1);
controls.target.set(6.7, 3.05, 0);
controls.update();
// Court surface
@@ -571,7 +564,7 @@ function initTrajectoryScene() {
// Net
var netMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.3, side: THREE.DoubleSide });
var netMesh = new THREE.Mesh(new THREE.PlaneGeometry(6.1, 0.914), netMat);
var netMesh = new THREE.Mesh(new THREE.PlaneGeometry(0.914, 6.1), netMat);
netMesh.rotation.y = Math.PI / 2;
netMesh.position.set(6.7, 3.05, 0.457);
trajScene.add(netMesh);