From 2f8c7006babacc329268984da09a9816ac922642 Mon Sep 17 00:00:00 2001
From: Adriano Dal Pastro <adrianodalpastro@tielogic.com>
Date: Wed, 20 May 2026 12:38:01 +0200
Subject: [PATCH] feat(gui): markup + CSS tab Braccio DX

---
 web/index.html | 115 +++++++++++++++++++++++++++++++++++++++++++++++++
 web/style.css  |  40 +++++++++++++++++
 2 files changed, 155 insertions(+)

diff --git a/web/index.html b/web/index.html
index 2f644be..232483d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -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>
diff --git a/web/style.css b/web/style.css
index 6a849bb..bc53dc5 100644
--- a/web/style.css
+++ b/web/style.css
@@ -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; }