feat(gui): markup + CSS tab Braccio DX

This commit is contained in:
Adriano Dal Pastro committed 2026-05-20 12:38:01 +02:00
1 parent 59f7f66d77
commit 2f8c7006ba
2 files changed
+155

No files matched your search

+115
View File
@@ -16,6 +16,7 @@
<button class="tab" data-tab="workplane">Calibrazione Piano</button>
<button class="tab" data-tab="grasp">Cerca modello</button>
<button class="tab" data-tab="view3d">Vista 3D</button>
<button class="tab" data-tab="right-arm">Braccio DX</button>
<button class="tab" data-tab="ee">Movimento EE</button>
</nav>
<div class="status-strip" id="statusStrip"></div>
@@ -333,6 +334,119 @@
</div>
</section>
<!-- ============================== BRACCIO DX ============================== -->
<section class="panel" id="tab-right-arm">
<div id="raStatusBanner" class="ra-banner ra-banner-warn" hidden>
<span id="raStatusLabel">Braccio DX non attivo</span>
<button id="raActivateBtn" type="button">Attiva G1 right</button>
</div>
<div class="ra-grid">
<!-- FRONTE -->
<div class="ra-card">
<h3>Fronte</h3>
<div class="ra-imgwrap">
<img id="raFrontImg" alt="front camera" />
<canvas id="raFrontCanvas"></canvas>
</div>
<div class="ra-row">
<label>Classe <select id="raFrontClass"></select></label>
<label>Conf <input id="raFrontConf" type="number" step="0.05" min="0" max="1" value="0.4" /></label>
</div>
<div class="ra-row">
<button id="raFrontDetectBtn" type="button">Cerca su fronte</button>
<label><input id="raFrontAutoRefresh" type="checkbox" checked /> auto-refresh 1s</label>
</div>
<div id="raFrontResult" class="ra-result dim">— nessuna detection</div>
</div>
<!-- POLSO -->
<div class="ra-card">
<h3>Polso (Nuwa)</h3>
<div class="ra-imgwrap">
<img id="raWristImg" alt="wrist camera" />
<canvas id="raWristCanvas"></canvas>
</div>
<div class="ra-row">
<label>Classe <select id="raWristClass"></select></label>
<label>Conf <input id="raWristConf" type="number" step="0.05" min="0" max="1" value="0.4" /></label>
</div>
<div class="ra-row">
<button id="raWristDetectBtn" type="button">Cerca su polso</button>
<label><input id="raWristAutoRefresh" type="checkbox" checked /> auto-refresh 1s</label>
</div>
<div id="raWristResult" class="ra-result dim">— nessuna detection</div>
</div>
<!-- POSA POLSO -->
<div class="ra-card">
<h3>Posa polso DX</h3>
<table class="ra-pose-table" id="raPoseTable">
<tr><th>X</th><td id="raPoseX">—</td><td>m</td></tr>
<tr><th>Y</th><td id="raPoseY">—</td><td>m</td></tr>
<tr><th>Z</th><td id="raPoseZ">—</td><td>m</td></tr>
<tr><th>Roll</th><td id="raPoseR">—</td><td>°</td></tr>
<tr><th>Pitch</th><td id="raPoseP">—</td><td>°</td></tr>
<tr><th>Yaw</th><td id="raPoseW">—</td><td>°</td></tr>
</table>
<button id="raPoseRefreshBtn" type="button">Refresh</button>
</div>
</div>
<!-- OFFSET + MOVE -->
<div class="ra-card ra-wide">
<h3>Offset presa rispetto a camera (mm)</h3>
<div class="ra-row">
<label>X <input id="raOffX" type="number" step="1" value="0" /></label>
<label>Y <input id="raOffY" type="number" step="1" value="0" /></label>
<label>Z <input id="raOffZ" type="number" step="1" value="100" /></label>
<span class="ra-sep">|</span>
<label>Sign X <input id="raSgnX" type="number" step="2" min="-1" max="1" value="1" /></label>
<label>Sign Y <input id="raSgnY" type="number" step="2" min="-1" max="1" value="-1" /></label>
<label>Sign Z <input id="raSgnZ" type="number" step="2" min="-1" max="1" value="-1" /></label>
</div>
<div class="ra-row">
<button id="raSaveOffsetBtn" type="button">Salva offset</button>
<label><input id="raMoveDryRun" type="checkbox" checked /> dry-run</label>
<button id="raMoveBtn" type="button" class="ra-danger">Muovi verso pezzo</button>
</div>
<div id="raMoveResult" class="ra-result dim">— nessun move</div>
</div>
<!-- HOME + CUSTOM -->
<div class="ra-row ra-wide-grid">
<div class="ra-card">
<h3>Posa Home (preset)</h3>
<div class="ra-pose-form">
<label>X <input id="raHomeX" type="number" step="0.01" /></label>
<label>Y <input id="raHomeY" type="number" step="0.01" /></label>
<label>Z <input id="raHomeZ" type="number" step="0.01" /></label>
<label>Roll <input id="raHomeR" type="number" step="1" /></label>
<label>Pitch <input id="raHomeP" type="number" step="1" /></label>
<label>Yaw <input id="raHomeW" type="number" step="1" /></label>
</div>
<button id="raHomeBtn" type="button">Vai a Home</button>
</div>
<div class="ra-card">
<h3>Posa Custom (editabile)</h3>
<div class="ra-pose-form">
<label>X <input id="raCustX" type="number" step="0.01" /></label>
<label>Y <input id="raCustY" type="number" step="0.01" /></label>
<label>Z <input id="raCustZ" type="number" step="0.01" /></label>
<label>Roll <input id="raCustR" type="number" step="1" /></label>
<label>Pitch <input id="raCustP" type="number" step="1" /></label>
<label>Yaw <input id="raCustW" type="number" step="1" /></label>
</div>
<div class="ra-row">
<button id="raCustomGoBtn" type="button">Vai a Custom</button>
<button id="raCustomSaveBtn" type="button">Salva custom</button>
<button id="raCustomUseCurrentBtn" type="button">Usa posa corrente</button>
</div>
</div>
</div>
</section>
<!-- ============================== EE ============================== -->
<section class="panel" id="tab-ee">
<div class="grid-2">
@@ -394,5 +508,6 @@
</script>
<script src="/static/app.js"></script>
<script type="module" src="/static/work_plane.js"></script>
<script type="module" src="/static/right_arm.js"></script>
</body>
</html>
+40
View File
@@ -734,3 +734,43 @@ details.joint-temps summary { cursor: pointer; font-weight: 600; font-size: 12px
.agent-task-list .task-name { font-weight: 600; flex: 0 0 auto; }
.agent-task-list .task-desc { color: var(--dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-task-list button.link-btn { font-size: 11px; padding: 2px 6px; }
/* ----- Tab Braccio DX ----- */
.ra-banner {
padding: 8px 12px;
border-radius: 4px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.ra-banner-warn { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.ra-banner-ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.ra-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.ra-card {
border: 1px solid #ddd;
border-radius: 4px;
padding: 12px;
background: #fafafa;
}
.ra-card h3 { margin-top: 0; }
.ra-card.ra-wide { grid-column: 1 / -1; }
.ra-imgwrap { position: relative; width: 100%; }
.ra-imgwrap img { width: 100%; display: block; }
.ra-imgwrap canvas { position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; }
.ra-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.ra-sep { color: #888; }
.ra-result { font-family: monospace; font-size: 0.9em; padding: 6px; background: #f0f0f0; border-radius: 4px; }
.ra-pose-table { border-collapse: collapse; }
.ra-pose-table th, .ra-pose-table td { padding: 2px 8px; text-align: left; }
.ra-pose-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ra-pose-form input { width: 100%; }
.ra-wide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ra-danger { background: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; }
.ra-danger:hover { background: #c82333; }
.dim { color: #888; }