From c4124a2983e740f9a57104233ced64ba6135f650 Mon Sep 17 00:00:00 2001
From: Adriano Dal Pastro <adrianodalpastro@tielogic.com>
Date: Thu, 21 May 2026 15:50:49 +0200
Subject: [PATCH] feat(pose_3d): markup HTML + CSS della tab

---
 web/index.html  |  74 +++++++++++++++++++++++++++++
 web/pose_3d.css | 120 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 194 insertions(+)
 create mode 100644 web/pose_3d.css

diff --git a/web/index.html b/web/index.html
index 9d4e511..572a6f7 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,6 +5,7 @@
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <title>presa-mano</title>
 <link rel="stylesheet" href="/static/style.css" />
+  <link rel="stylesheet" href="/static/pose_3d.css">
 </head>
 <body>
 <header>
@@ -17,6 +18,7 @@
     <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="pose-3d">Pose 3D</button>
     <button class="tab" data-tab="ee">Movimento EE</button>
   </nav>
   <div class="status-strip" id="statusStrip"></div>
@@ -465,6 +467,77 @@
   </div>
 </section>
 
+<!-- ============================== POSE 3D ============================== -->
+<section class="panel" id="tab-pose-3d">
+  <div class="p3-layout">
+    <div class="p3-viewport">
+      <canvas id="p3Canvas"></canvas>
+      <div class="p3-mode-badge" id="p3ModeBadge">Editor</div>
+      <div class="p3-help">click polso = seleziona · gizmo: T sposta / R ruota · drag = muovi · orbit = wheel/drag fondo · pan = shift+drag</div>
+    </div>
+    <aside class="p3-sidebar">
+      <div class="p3-section">
+        <h3>Modalità</h3>
+        <div class="p3-row">
+          <label><input type="radio" name="p3Mode" value="editor" checked> Editor (simulato)</label>
+          <label><input type="radio" name="p3Mode" value="jog"> Jog (move reale)</label>
+        </div>
+        <label class="p3-check"><input type="checkbox" id="p3Precise" checked> Precise (controllo accurato)</label>
+      </div>
+
+      <div class="p3-section">
+        <h3>Polso attivo</h3>
+        <div class="p3-row">
+          <label><input type="radio" name="p3Side" value="right" checked> Destro</label>
+          <label><input type="radio" name="p3Side" value="left"> Sinistro</label>
+        </div>
+        <div class="p3-row">
+          <label><input type="radio" name="p3Gizmo" value="translate" checked> T sposta</label>
+          <label><input type="radio" name="p3Gizmo" value="rotate"> R ruota</label>
+        </div>
+      </div>
+
+      <div class="p3-section">
+        <h3>Posa target</h3>
+        <div class="p3-readout">
+          <div>X <span id="p3X">—</span> mm</div>
+          <div>Y <span id="p3Y">—</span> mm</div>
+          <div>Z <span id="p3Z">—</span> mm</div>
+          <div>R <span id="p3R">—</span>°</div>
+          <div>P <span id="p3P">—</span>°</div>
+          <div>W <span id="p3W">—</span>°</div>
+        </div>
+        <div class="p3-status" id="p3Status">— polso fermo</div>
+        <div class="p3-row" id="p3EditorActions">
+          <button id="p3ApplyBtn">Applica (Editor)</button>
+          <button id="p3CancelBtn">Annulla modifica</button>
+        </div>
+      </div>
+
+      <div class="p3-section">
+        <h3>Pose salvate</h3>
+        <div class="p3-row">
+          <select id="p3PoseSelect"><option value="">(seleziona)</option></select>
+        </div>
+        <div class="p3-row">
+          <button id="p3PoseGoBtn">Vai</button>
+          <input type="text" id="p3PoseName" placeholder="nome" maxlength="40">
+          <button id="p3PoseSaveBtn">Salva</button>
+          <button id="p3PoseDelBtn">✕</button>
+        </div>
+      </div>
+
+      <div class="p3-section">
+        <button id="p3UnlockBtn">Sblocca braccia</button>
+      </div>
+
+      <div class="p3-section" id="p3ErrorBox" style="display:none">
+        <div class="p3-error" id="p3ErrorText"></div>
+      </div>
+    </aside>
+  </div>
+</section>
+
 <!-- ============================== EE ============================== -->
 <section class="panel" id="tab-ee">
   <div class="grid-2">
@@ -527,5 +600,6 @@
 <script src="/static/app.js"></script>
 <script type="module" src="/static/work_plane.js"></script>
 <script type="module" src="/static/right_arm.js"></script>
+<script type="module" src="/static/pose_3d.js"></script>
 </body>
 </html>
diff --git a/web/pose_3d.css b/web/pose_3d.css
new file mode 100644
index 0000000..e88e22d
--- /dev/null
+++ b/web/pose_3d.css
@@ -0,0 +1,120 @@
+#tab-pose-3d .p3-layout {
+  display: grid;
+  grid-template-columns: 1fr 360px;
+  gap: 16px;
+  height: calc(100vh - 140px);
+  min-height: 600px;
+}
+
+#tab-pose-3d .p3-viewport {
+  position: relative;
+  background: #0d1014;
+  border: 1px solid #2a2f36;
+  border-radius: 6px;
+  overflow: hidden;
+}
+#tab-pose-3d .p3-viewport canvas { display: block; width: 100%; height: 100%; }
+
+#tab-pose-3d .p3-mode-badge {
+  position: absolute;
+  top: 10px; left: 10px;
+  padding: 4px 10px;
+  background: rgba(20, 30, 40, 0.85);
+  border: 1px solid #4da3ff;
+  border-radius: 4px;
+  color: #4da3ff;
+  font-size: 13px;
+  font-weight: bold;
+}
+#tab-pose-3d .p3-mode-badge.jog {
+  border-color: #ff5e7e;
+  color: #ff5e7e;
+  animation: p3-blink 1.4s ease-in-out infinite;
+}
+@keyframes p3-blink { 50% { opacity: 0.5; } }
+
+#tab-pose-3d .p3-help {
+  position: absolute;
+  bottom: 8px; left: 10px; right: 10px;
+  font-size: 11px;
+  color: #888;
+}
+
+#tab-pose-3d .p3-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+}
+
+#tab-pose-3d .p3-section {
+  background: #1a1f26;
+  border: 1px solid #2a2f36;
+  border-radius: 6px;
+  padding: 10px 12px;
+}
+#tab-pose-3d .p3-section h3 {
+  margin: 0 0 8px 0;
+  font-size: 13px;
+  color: #ccc;
+}
+
+#tab-pose-3d .p3-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  flex-wrap: wrap;
+}
+#tab-pose-3d .p3-row:last-child { margin-bottom: 0; }
+#tab-pose-3d .p3-row label { font-size: 13px; color: #ddd; }
+
+#tab-pose-3d .p3-check { display: block; margin-top: 8px; font-size: 13px; color: #ddd; }
+
+#tab-pose-3d .p3-readout {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 6px 12px;
+  font-family: monospace;
+  font-size: 12px;
+  color: #ddd;
+  margin-bottom: 8px;
+}
+#tab-pose-3d .p3-readout span { color: #4da3ff; }
+
+#tab-pose-3d .p3-status { font-size: 12px; color: #888; margin-bottom: 8px; }
+#tab-pose-3d .p3-status.modified { color: #f0ad4e; }
+#tab-pose-3d .p3-status.ok { color: #3ecf8e; }
+#tab-pose-3d .p3-status.error { color: #e74c3c; }
+
+#tab-pose-3d button {
+  background: #2a3038;
+  border: 1px solid #3a4048;
+  color: #e0e0e0;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+#tab-pose-3d button:hover { background: #34404a; }
+#tab-pose-3d button:disabled { opacity: 0.4; cursor: not-allowed; }
+
+#tab-pose-3d select, #tab-pose-3d input[type=text] {
+  background: #0d1014;
+  border: 1px solid #2a2f36;
+  color: #e0e0e0;
+  padding: 4px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+#tab-pose-3d .p3-error {
+  background: #3a1014;
+  border: 1px solid #e74c3c;
+  border-radius: 4px;
+  padding: 8px;
+  color: #ffcccc;
+  font-size: 12px;
+}