feat(gui): markup + CSS tab Braccio DX

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>