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

Court tab: 3D scene primary, cameras small at bottom

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-03-06 13:21:08 +07:00
parent 0aae067e95
commit 2f0eb81dce
1 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,6 +94,24 @@
} }
.viewport-3d canvas { width: 100% !important; height: 100% !important; } .viewport-3d canvas { width: 100% !important; height: 100% !important; }
/* Court tab: 3D scene takes most space, cameras are small below */
.court-viewport-main {
height: calc(100vh - 240px);
min-height: 400px;
border-top: none;
}
.cameras-small {
padding: 4px 8px;
gap: 6px;
}
.cam-box-small {
max-width: 320px;
flex: 0 0 auto;
}
.cam-box-small img {
border-radius: 4px;
}
/* Calibrate button */ /* Calibrate button */
.calibrate-bar { .calibrate-bar {
display: flex; display: flex;
@@ -254,7 +272,7 @@
</div> </div>
</div> </div>
<!-- Tab 2: Court --> <!-- Tab 2: Court — 3D scene is primary, cameras are secondary -->
<div class="tab-content" id="tab-court"> <div class="tab-content" id="tab-court">
<div class="calibrate-bar"> <div class="calibrate-bar">
<button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button> <button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
@@ -263,17 +281,17 @@
CAM 1: <span id="calStatus1">not calibrated</span> CAM 1: <span id="calStatus1">not calibrated</span>
</div> </div>
</div> </div>
<div class="cameras"> <div class="viewport-3d court-viewport-main" id="court-3d"></div>
<div class="cam-box"> <div class="cameras cameras-small">
<div class="cam-label">CAM 0 - Court Lines</div> <div class="cam-box cam-box-small">
<div class="cam-label">CAM 0</div>
<img id="court-cam0" alt="Camera 0"> <img id="court-cam0" alt="Camera 0">
</div> </div>
<div class="cam-box"> <div class="cam-box cam-box-small">
<div class="cam-label">CAM 1 - Court Lines</div> <div class="cam-label">CAM 1</div>
<img id="court-cam1" alt="Camera 1"> <img id="court-cam1" alt="Camera 1">
</div> </div>
</div> </div>
<div class="viewport-3d" id="court-3d"></div>
</div> </div>
<!-- Tab 3: Trajectory --> <!-- Tab 3: Trajectory -->