feat(pose_3d): markup HTML + CSS della tab
This commit is contained in:
Adriano Dal Pastro committed
1 parent
433edc0974
commit
c4124a2983
2 files changed
+194
No files matched your search
@@ -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>
|
||||
+120
@@ -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;
|
||||
}
|
||||
Reference in new issue
Block a user