mudra-skills 1.0.0

package/skills/mudra-preview/assets/model-rotator.html

@@ -0,0 +1,365 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>3D Model Rotator — Mudra Studio</title>
+<style>
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+  }
+
+  :root {
+    --bg: #ffffff; --card: #f1f5f9; --primary: #0d9488; --accent: #14b8a6;
+    --text: #0f172a; --text-secondary: #475569; --success: #16a34a;
+    --warning: #ca8a04; --error: #dc2626;
+    --border: rgba(15,23,42,0.12); --surface: rgba(0,0,0,0.04);
+    --scene-bg: #f0fdfa; --wire-color: rgba(13,148,136,0.4); --face-fill: rgba(13,148,136,0.06);
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: var(--bg); color: var(--text); font-family: 'Poppins', system-ui, sans-serif; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
+
+  .header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--border); z-index: 100; flex-shrink: 0; gap: 8px; flex-wrap: wrap; }
+  .header-left, .header-right { display: flex; align-items: center; gap: 10px; }
+  .brand { font-weight: 700; font-size: 14px; } .brand span { color: var(--primary); }
+  .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px rgba(234,179,8,0.15); transition: all 150ms; }
+  .dot.live { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
+  .conn-label { font-size: 12px; color: var(--text-secondary); }
+
+  .btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); padding: 5px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; font-family: inherit; transition: border-color 150ms, color 150ms; white-space: nowrap; }
+  .btn:hover { border-color: var(--primary); color: var(--primary); }
+
+  .scene { flex: 1; display: flex; justify-content: center; align-items: center; perspective: 800px; position: relative; overflow: hidden; background: var(--scene-bg); }
+  .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(119,234,233,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(119,234,233,0.03) 1px, transparent 1px); background-size: 40px 40px; background-position: center; }
+
+  .shape-wrapper { transform-style: preserve-3d; transition: none; }
+
+  /* Cube */
+  .cube { width: 160px; height: 160px; position: relative; transform-style: preserve-3d; }
+  .cube .face { position: absolute; width: 160px; height: 160px; border: 2px solid var(--wire-color); background: var(--face-fill); backface-visibility: visible; }
+  .cube .f-front  { transform: translateZ(80px); }
+  .cube .f-back   { transform: rotateY(180deg) translateZ(80px); }
+  .cube .f-right  { transform: rotateY(90deg) translateZ(80px); }
+  .cube .f-left   { transform: rotateY(-90deg) translateZ(80px); }
+  .cube .f-top    { transform: rotateX(90deg) translateZ(80px); }
+  .cube .f-bottom { transform: rotateX(-90deg) translateZ(80px); }
+
+  /* Pyramid */
+  .pyramid { width: 160px; height: 160px; position: relative; transform-style: preserve-3d; }
+  .pyramid .pyr-base { position: absolute; width: 160px; height: 160px; transform: rotateX(90deg) translateZ(-80px); border: 2px solid var(--wire-color); background: var(--face-fill); }
+  .pyramid .pyr-face { position: absolute; width: 160px; height: 140px; background: var(--face-fill); border: 2px solid var(--wire-color); transform-origin: bottom center; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
+  .pyramid .pf1 { transform: translateY(-60px) rotateX(-30deg); }
+  .pyramid .pf2 { transform: translateY(-60px) rotateY(90deg) rotateX(-30deg); }
+  .pyramid .pf3 { transform: translateY(-60px) rotateY(180deg) rotateX(-30deg); }
+  .pyramid .pf4 { transform: translateY(-60px) rotateY(270deg) rotateX(-30deg); }
+
+  /* Octahedron */
+  .octahedron { width: 160px; height: 160px; position: relative; transform-style: preserve-3d; }
+  .octahedron .octa-face { position: absolute; width: 120px; height: 120px; border: 2px solid var(--wire-color); background: var(--face-fill); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); left: 20px; top: 20px; }
+  .octahedron .of1 { transform: translateZ(60px); }
+  .octahedron .of2 { transform: rotateY(90deg) translateZ(60px); }
+  .octahedron .of3 { transform: rotateY(180deg) translateZ(60px); }
+  .octahedron .of4 { transform: rotateY(270deg) translateZ(60px); }
+  .octahedron .of5 { transform: rotateX(90deg) translateZ(60px); }
+  .octahedron .of6 { transform: rotateX(-90deg) translateZ(60px); }
+
+  .shadow { position: absolute; bottom: 10%; width: 200px; height: 20px; background: radial-gradient(ellipse, rgba(119,234,233,0.12), transparent 70%); border-radius: 50%; }
+
+  .shape-label { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(119,234,233,0.08); color: var(--primary); padding: 4px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; z-index: 5; border: 1px solid rgba(119,234,233,0.15); }
+
+  .auto-badge { position: absolute; top: 16px; right: 20px; font-size: 11px; color: var(--primary); font-weight: 600; opacity: 0; transition: opacity 150ms; }
+  .auto-badge.show { opacity: 1; }
+
+  .info-panel { position: absolute; bottom: 16px; left: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
+  .info-row { display: flex; justify-content: space-between; gap: 16px; }
+  .info-label { color: var(--text-secondary); }
+  .info-val { color: var(--primary); font-variant-numeric: tabular-nums; font-weight: 600; }
+
+  .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; background: var(--card); border-top: 1px solid var(--border); z-index: 100; flex-shrink: 0; flex-wrap: wrap; }
+  .toolbar-left { display: flex; align-items: center; gap: 12px; }
+  .meter { display: flex; align-items: center; gap: 8px; }
+  .meter-bar { width: 80px; height: 8px; background: var(--surface); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
+  .meter-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 999px; transition: width 75ms linear; width: 0%; }
+  .meter-val { font-size: 12px; color: var(--text-secondary); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
+  .hint { font-size: 11px; color: var(--text-secondary); opacity: 0.6; }
+
+  .mudra-badge { position: fixed; bottom: 12px; right: 12px; font-size: 11px; color: var(--text-secondary); opacity: 0.7; letter-spacing: 0.02em; pointer-events: none; z-index: 200; }
+
+  @media (max-width: 640px) {
+    .header { padding: 8px 10px; } .toolbar { gap: 8px; padding: 8px 10px; }
+    .info-panel { left: 8px; bottom: 8px; padding: 8px 12px; } .hint { display: none; }
+    .meter-bar { width: 50px; }
+  }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div class="header-left">
+    <div class="brand"><span>Mudra</span> 3D Model Rotator</div>
+    <span class="dot" id="dot"></span>
+    <span class="conn-label" id="connLabel">Connecting&hellip;</span>
+  </div>
+  <div class="header-right">
+    <a href="/gallery" class="btn" style="text-decoration:none;">&#8592; Gallery</a>
+    <button class="btn" id="simTap">Simulate Tap</button>
+    <button class="btn" id="simTwist">Cycle Model</button>
+  </div>
+</div>
+
+<div class="scene">
+  <div class="grid-bg"></div>
+  <div class="shape-label" id="shapeLabel">Cube</div>
+  <div class="auto-badge" id="autoBadge">AUTO-ROTATE</div>
+  <div class="shape-wrapper" id="wrapper"></div>
+  <div class="shadow" id="shadow"></div>
+  <div class="info-panel">
+    <div class="info-row"><span class="info-label">Rot X</span><span class="info-val" id="rotXVal">0.0&deg;</span></div>
+    <div class="info-row"><span class="info-label">Rot Y</span><span class="info-val" id="rotYVal">0.0&deg;</span></div>
+    <div class="info-row"><span class="info-label">Rot Z</span><span class="info-val" id="rotZVal">0.0&deg;</span></div>
+    <div class="info-row"><span class="info-label">Scale</span><span class="info-val" id="scaleVal">1.00x</span></div>
+  </div>
+</div>
+
+<div class="toolbar">
+  <div class="toolbar-left">
+    <div class="meter">
+      <span class="meter-val" id="pressVal">0%</span>
+      <div class="meter-bar"><div class="meter-fill" id="pressFill"></div></div>
+    </div>
+  </div>
+  <span class="hint">Arrows tilt &middot; R auto-rotate &middot; Space reset &middot; T cycle model &middot; [ ] zoom</span>
+</div>
+
+<div class="mudra-badge">Created by Mudra</div>
+
+<script>
+/* ── Mudra Protocol Connection (v2) ────────────────────────── */
+const WS_URL = 'ws://127.0.0.1:8766';
+const SIGNALS = ['imu_acc', 'imu_gyro', 'pressure', 'gesture'];
+
+let ws, reconnectTimer, simTimer;
+let wsOpen = false, deviceReady = false, simulating = true;
+const bus = {};
+
+function on(ev, fn) { (bus[ev] ??= []).push(fn); }
+function emit(ev, d) { (bus[ev] || []).forEach(fn => fn(d)); }
+function send(p) { if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(p)); }
+
+function connect() {
+  try {
+    ws = new WebSocket(WS_URL);
+    ws.onopen = () => {
+      wsOpen = true; stopSim(); updateStatus();
+      SIGNALS.forEach(s => send({ command: 'subscribe', signal: s }));
+    };
+    ws.onmessage = (e) => {
+      try {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'connection_status') {
+          deviceReady = msg.data?.status === 'connected';
+          updateStatus(); return;
+        }
+        emit(msg.type, msg.data);
+      } catch {}
+    };
+    ws.onclose = () => {
+      wsOpen = false; deviceReady = false; updateStatus();
+      startSim();
+      clearTimeout(reconnectTimer);
+      reconnectTimer = setTimeout(connect, 1500);
+    };
+    ws.onerror = () => ws?.close();
+  } catch {
+    wsOpen = false; startSim();
+    clearTimeout(reconnectTimer);
+    reconnectTimer = setTimeout(connect, 1500);
+  }
+}
+
+function triggerGesture(type) {
+  if (wsOpen) send({ command: 'trigger_gesture', data: { type } });
+  else emit('gesture', { type, confidence: 0.95, timestamp: Date.now() });
+}
+
+/* ── Simulation (when Companion not reachable) ─────────────── */
+function startSim() {
+  if (simTimer) return;
+  simulating = true;
+  let t = 0;
+  simTimer = setInterval(() => {
+    t += 0.05;
+    emit('imu_acc', {
+      values: [
+        0.8 * Math.sin(t * 0.3) + (Math.random() - 0.5) * 0.1,
+        0.6 * Math.cos(t * 0.4) + (Math.random() - 0.5) * 0.1,
+        9.8 + 0.2 * Math.sin(t * 0.2)
+      ],
+      frequency: 100, timestamp: Date.now()
+    });
+    emit('imu_gyro', {
+      values: [
+        0.3 * Math.sin(t * 0.5),
+        0.2 * Math.cos(t * 0.6),
+        0.5 * Math.sin(t * 0.35)
+      ],
+      frequency: 100, timestamp: Date.now()
+    });
+    const n = Math.max(0, Math.min(1, 0.5 + 0.2 * Math.sin(t * 0.25)));
+    emit('pressure', { value: Math.round(n * 100), normalized: n, timestamp: Date.now() });
+    if (Math.random() < 0.002) {
+      const g = ['tap', 'double_tap', 'twist', 'double_twist'];
+      emit('gesture', { type: g[Math.floor(Math.random() * g.length)], confidence: 0.7 + Math.random() * 0.3, timestamp: Date.now() });
+    }
+  }, 60);
+}
+
+function stopSim() { clearInterval(simTimer); simTimer = null; simulating = false; }
+
+/* ── Status UI ─────────────────────────────────────────────── */
+const dotEl = document.getElementById('dot');
+const connEl = document.getElementById('connLabel');
+
+function updateStatus() {
+  if (wsOpen && deviceReady) { dotEl.className = 'dot live'; connEl.textContent = 'Connected'; }
+  else if (wsOpen) { dotEl.className = 'dot'; connEl.textContent = 'Waiting for Mudra Band\u2026'; }
+  else { dotEl.className = 'dot'; connEl.textContent = simulating ? 'Simulated' : 'Disconnected'; }
+}
+
+/* ── 3D Model Logic ────────────────────────────────────────── */
+const shapes = ['Cube', 'Pyramid', 'Octahedron'];
+let shapeIdx = 0;
+let rotX = 0, rotY = 0, rotZ = 0, scale = 1;
+let autoRotate = false;
+let spinSpeed = 0;
+let pressure = 0;
+
+const wrapper = document.getElementById('wrapper');
+const pressVal = document.getElementById('pressVal');
+const pressFill = document.getElementById('pressFill');
+
+function buildShape(name) {
+  while (wrapper.firstChild) wrapper.removeChild(wrapper.firstChild);
+  document.getElementById('shapeLabel').textContent = name;
+
+  if (name === 'Cube') {
+    const cube = document.createElement('div');
+    cube.className = 'cube';
+    ['f-front','f-back','f-right','f-left','f-top','f-bottom'].forEach(function(cls) {
+      const face = document.createElement('div');
+      face.className = 'face ' + cls;
+      cube.appendChild(face);
+    });
+    wrapper.appendChild(cube);
+  } else if (name === 'Pyramid') {
+    const pyr = document.createElement('div');
+    pyr.className = 'pyramid';
+    const base = document.createElement('div');
+    base.className = 'pyr-base';
+    pyr.appendChild(base);
+    for (let i = 1; i <= 4; i++) {
+      const f = document.createElement('div');
+      f.className = 'pyr-face pf' + i;
+      pyr.appendChild(f);
+    }
+    wrapper.appendChild(pyr);
+  } else if (name === 'Octahedron') {
+    const oct = document.createElement('div');
+    oct.className = 'octahedron';
+    for (let i = 1; i <= 6; i++) {
+      const f = document.createElement('div');
+      f.className = 'octa-face of' + i;
+      oct.appendChild(f);
+    }
+    wrapper.appendChild(oct);
+  }
+}
+
+buildShape('Cube');
+
+/* ── Signal Handlers ───────────────────────────────────────── */
+on('imu_acc', (d) => {
+  const vals = d.values || [0, 0, 9.8];
+  rotY += vals[0] * 0.8;
+  rotX -= vals[1] * 0.8;
+});
+
+on('imu_gyro', (d) => {
+  const vals = d.values || [0, 0, 0];
+  spinSpeed = vals[2] * 2;
+});
+
+on('pressure', (d) => {
+  pressure = Math.max(0, Math.min(1, d.normalized ?? d.value / 100));
+  pressVal.textContent = Math.round(pressure * 100) + '%';
+  pressFill.style.width = Math.round(pressure * 100) + '%';
+  scale = 0.5 + pressure * 1.5;
+});
+
+on('gesture', (d) => {
+  const type = d.type || 'unknown';
+  if (type === 'tap') {
+    autoRotate = !autoRotate;
+    document.getElementById('autoBadge').classList.toggle('show', autoRotate);
+  }
+  if (type === 'double_tap') {
+    rotX = 0; rotY = 0; rotZ = 0; scale = 1; spinSpeed = 0;
+  }
+  if (type === 'twist') {
+    shapeIdx = (shapeIdx + 1) % shapes.length;
+    buildShape(shapes[shapeIdx]);
+  }
+});
+
+/* ── Render Loop ───────────────────────────────────────────── */
+function renderLoop() {
+  if (autoRotate) {
+    rotY += 0.5;
+    rotX += 0.2;
+  }
+  rotZ += spinSpeed * 0.3;
+
+  wrapper.style.transform = 'rotateX(' + rotX.toFixed(1) + 'deg) rotateY(' + rotY.toFixed(1) + 'deg) rotateZ(' + rotZ.toFixed(1) + 'deg) scale(' + scale.toFixed(2) + ')';
+
+  const shadow = document.getElementById('shadow');
+  const sx = Math.sin(rotY * Math.PI / 180) * 30;
+  shadow.style.transform = 'translateX(' + sx.toFixed(0) + 'px) scaleX(' + (0.8 + Math.abs(Math.cos(rotY * Math.PI / 180)) * 0.4).toFixed(2) + ')';
+
+  document.getElementById('rotXVal').textContent = (((rotX % 360) + 360) % 360).toFixed(1) + '\u00b0';
+  document.getElementById('rotYVal').textContent = (((rotY % 360) + 360) % 360).toFixed(1) + '\u00b0';
+  document.getElementById('rotZVal').textContent = (((rotZ % 360) + 360) % 360).toFixed(1) + '\u00b0';
+  document.getElementById('scaleVal').textContent = scale.toFixed(2) + 'x';
+
+  requestAnimationFrame(renderLoop);
+}
+
+/* ── Keyboard Fallback ─────────────────────────────────────── */
+document.addEventListener('keydown', (e) => {
+  if (e.code === 'ArrowUp') { e.preventDefault(); rotX -= 5; }
+  if (e.code === 'ArrowDown') { e.preventDefault(); rotX += 5; }
+  if (e.code === 'ArrowLeft') { e.preventDefault(); rotY -= 5; }
+  if (e.code === 'ArrowRight') { e.preventDefault(); rotY += 5; }
+  if (e.code === 'KeyR') triggerGesture('tap');
+  if (e.code === 'Space') { e.preventDefault(); triggerGesture('double_tap'); }
+  if (e.code === 'KeyT') triggerGesture('twist');
+  if (e.key === ']') {
+    pressure = Math.min(1, pressure + 0.08);
+    emit('pressure', { value: Math.round(pressure * 100), normalized: pressure, timestamp: Date.now() });
+  }
+  if (e.key === '[') {
+    pressure = Math.max(0, pressure - 0.08);
+    emit('pressure', { value: Math.round(pressure * 100), normalized: pressure, timestamp: Date.now() });
+  }
+});
+
+/* ── Buttons ───────────────────────────────────────────────── */
+document.getElementById('simTap').addEventListener('click', () => triggerGesture('tap'));
+document.getElementById('simTwist').addEventListener('click', () => triggerGesture('twist'));
+
+/* ── Init ──────────────────────────────────────────────────── */
+connect();
+renderLoop();
+</script>
+</body>
+</html>