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

fix: vertical cam params card, URL-based tabs, all english

Browse Source 
- Cam card vertical with Base Setup title and sensor info
- Calibrate button inside the card
- Tabs linked to URL hash (#detection, #court, #trajectory)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-03-07 12:43:38 +07:00
parent aaa4199c85
commit 22c24c0296
1 changed files with 52 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -125,13 +125,8 @@
display: block;
}
/* Sidebar panel (calibration, etc.) */
.sidebar-panel {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
}
/* Sidebar panel (unused, kept for compat) */
.sidebar-panel { display: none; }
.btn-calibrate {
width: 100%;
padding: 8px 12px;
@@ -213,22 +208,40 @@
height: 60px;
}
/* Camera params card */
/* Camera params card (vertical) */
.cam-card {
display: flex;
gap: 10px;
align-items: center;
padding: 4px 10px;
flex-direction: column;
gap: 2px;
padding: 6px 10px;
background: #111128;
border: 1px solid #2a2a4a;
border-radius: 6px;
font-size: 11px;
color: #888;
min-width: 120px;
}
.cc-title {
font-size: 10px;
font-weight: 700;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.cc-item {
display: flex;
justify-content: space-between;
gap: 8px;
}
.cc-item b {
color: #4ecca3;
font-weight: 600;
}
.cc-divider {
border-top: 1px solid #2a2a4a;
margin: 3px 0;
}
/* Event banner */
.event-banner {
@@ -304,13 +317,14 @@
<div class="cam-thumb"><img id="court-cam1" alt="Camera 1"></div>
<div class="cam-thumb"><img id="court-cam0" alt="Camera 0"></div>
<div class="cam-card">
<span class="cc-item">Dist <b id="paramPosY">1.0</b>m</span>
<span class="cc-item">H <b id="paramPosZ">1.0</b>m</span>
<span class="cc-item">Stereo <b id="paramStereo">6</b>cm</span>
<span class="cc-item">Rot <b id="paramAngle">15</b>°</span>
<span class="cc-item">HFOV <b id="paramHfov">128</b>°</span>
</div>
<div class="sidebar-panel">
<div class="cc-title">Base Setup</div>
<div class="cc-item">Distance <b id="paramPosY">1.0</b>m</div>
<div class="cc-item">Height <b id="paramPosZ">1.0</b>m</div>
<div class="cc-item">Stereo <b id="paramStereo">6</b>cm</div>
<div class="cc-item">Rotation <b id="paramAngle">15</b>°</div>
<div class="cc-item">HFOV <b id="paramHfov">128</b>°</div>
<div class="cc-item">Sensor <b>IMX219</b></div>
<div class="cc-divider"></div>
<button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate</button>
<div class="calibrate-status" id="calStatus">
<span id="calStatusText">Not calibrated</span>
@@ -354,21 +368,29 @@
<script>
// ===================== Tab switching =====================
var activeTab = 'detection';
document.querySelectorAll('.tab').forEach(function(tab) {
tab.addEventListener('click', function() {
var target = this.dataset.tab;
activeTab = target;
document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.remove('active'); });
this.classList.add('active');
document.getElementById('tab-' + target).classList.add('active');
document.getElementById('infoPanel').style.display = (target === 'trajectory') ? 'flex' : 'none';
if (target === 'court' && !courtSceneInitialized) initCourtScene();
if (target === 'trajectory' && !trajSceneInitialized) initTrajectoryScene();
});
function switchTab(target) {
activeTab = target;
document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.remove('active'); });
document.querySelector('.tab[data-tab="' + target + '"]').classList.add('active');
document.getElementById('tab-' + target).classList.add('active');
document.getElementById('infoPanel').style.display = (target === 'trajectory') ? 'flex' : 'none';
if (target === 'court' && !courtSceneInitialized) initCourtScene();
if (target === 'trajectory' && !trajSceneInitialized) initTrajectoryScene();
history.replaceState(null, '', '#' + target);
}
document.querySelectorAll('.tab').forEach(function(tab) {
tab.addEventListener('click', function() { switchTab(this.dataset.tab); });
});
// Init from URL hash
var hash = location.hash.replace('#', '');
if (['detection', 'court', 'trajectory'].indexOf(hash) !== -1) {
switchTab(hash);
}
// ===================== Calibration =====================
function doCalibrate() {
var btn = document.getElementById('btnCalibrate');