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

Move calibration controls into Court sidebar

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-03-06 13:52:32 +07:00
parent 85623454b6
commit f54bc165f6
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -128,22 +128,25 @@
display: block; display: block;
} }
/* Calibrate button */ /* Sidebar panel (calibration, etc.) */
.calibrate-bar { .sidebar-panel {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 16px; gap: 8px;
padding: 8px 16px; padding: 10px;
background: #111128; background: #111128;
border-bottom: 1px solid #222; border-radius: 6px;
border: 1px solid #222;
margin-top: 4px;
} }
.btn-calibrate { .btn-calibrate {
padding: 8px 24px; width: 100%;
padding: 8px 12px;
background: #4ecca3; background: #4ecca3;
color: #000; color: #000;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
font-size: 14px; font-size: 13px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@@ -151,8 +154,9 @@
.btn-calibrate:hover { background: #3dbb92; } .btn-calibrate:hover { background: #3dbb92; }
.btn-calibrate:disabled { background: #333; color: #666; cursor: not-allowed; } .btn-calibrate:disabled { background: #333; color: #666; cursor: not-allowed; }
.calibrate-status { .calibrate-status {
font-size: 13px; font-size: 11px;
color: #666; color: #666;
line-height: 1.6;
} }
.calibrate-status .ok { color: #4ecca3; } .calibrate-status .ok { color: #4ecca3; }
.calibrate-status .fail { color: #ff4444; } .calibrate-status .fail { color: #ff4444; }
@@ -286,15 +290,8 @@
</div> </div>
</div> </div>
<!-- Tab 2: Court — 3D scene is primary, cameras are secondary --> <!-- Tab 2: Court — 3D left, sidebar right with cams + calibration -->
<div class="tab-content" id="tab-court"> <div class="tab-content" id="tab-court">
<div class="calibrate-bar">
<button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
<div class="calibrate-status" id="calStatus">
CAM 0: <span id="calStatus0">not calibrated</span> |
CAM 1: <span id="calStatus1">not calibrated</span>
</div>
</div>
<div class="split-layout"> <div class="split-layout">
<div class="split-main"> <div class="split-main">
<div class="viewport-3d" id="court-3d"></div> <div class="viewport-3d" id="court-3d"></div>
@@ -302,6 +299,13 @@
<div class="split-sidebar"> <div class="split-sidebar">
<img id="court-cam0" alt="Camera 0"> <img id="court-cam0" alt="Camera 0">
<img id="court-cam1" alt="Camera 1"> <img id="court-cam1" alt="Camera 1">
<div class="sidebar-panel">
<button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
<div class="calibrate-status" id="calStatus">
CAM 0: <span id="calStatus0">--</span><br>
CAM 1: <span id="calStatus1">--</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>