npm - mudra-skills - Versions diffs - 1.0.0 - Mend

mudra-skills 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/skills/mudra-master/mudra-preview/assets/emg-visualizer.html ADDED Viewed

@@ -0,0 +1,390 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>EMG Signal Visualizer — 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);
+    --wave-bg: #f8fafc; --grid-line: rgba(15,23,42,0.06);
+    --ch0: #0d9488; --ch1: #14b8a6; --ch2: #ca8a04;
+  }
+  * { 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); }
+  /* Waveform panels */
+  .wave-area { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0; position: relative; }
+  .wave-panel { flex: 1; position: relative; background: var(--wave-bg); border-bottom: 1px solid var(--border); min-height: 0; }
+  .wave-panel:last-child { border-bottom: none; }
+  .wave-label { position: absolute; top: 8px; left: 12px; font-size: 11px; font-weight: 600; z-index: 5; padding: 2px 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); }
+  .wave-label.ch0 { color: var(--ch0); }
+  .wave-label.ch1 { color: var(--ch1); }
+  .wave-label.ch2 { color: var(--ch2); }
+  .wave-canvas { display: block; width: 100%; height: 100%; }
+  .frozen-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 700; color: var(--warning); letter-spacing: 2px; opacity: 0; transition: opacity 200ms; pointer-events: none; z-index: 10; text-shadow: 0 0 20px rgba(234,179,8,0.3); }
+  .frozen-badge.show { opacity: 1; }
+  .view-badge { position: absolute; top: 8px; right: 12px; font-size: 11px; color: var(--primary); font-weight: 600; z-index: 5; padding: 2px 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); }
+  .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, .toolbar-right { display: flex; align-items: center; gap: 12px; }
+  .channel-legend { display: flex; gap: 12px; }
+  .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
+  .legend-dot { width: 8px; height: 8px; border-radius: 3px; }
+  .legend-dot.ch0 { background: var(--ch0); }
+  .legend-dot.ch1 { background: var(--ch1); }
+  .legend-dot.ch2 { background: var(--ch2); }
+  .meter { display: flex; align-items: center; gap: 8px; }
+  .meter-bar { width: 60px; 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: 50%; }
+  .meter-label { font-size: 11px; color: var(--text-secondary); }
+  .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; }
+    .hint { display: none; } .channel-legend { gap: 6px; }
+    .meter-bar { width: 40px; }
+  }
+</style>
+</head>
+<body>
+<div class="header">
+  <div class="header-left">
+    <div class="brand"><span>Mudra</span> EMG Signal Visualizer</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="simFreeze">Freeze</button>
+    <button class="btn" id="simClear">Clear</button>
+    <button class="btn" id="simView">Toggle View</button>
+  </div>
+</div>
+<div class="wave-area" id="waveArea">
+  <div class="wave-panel" id="panel0">
+    <div class="wave-label ch0">Ch 0 — Ulnar</div>
+    <canvas class="wave-canvas" id="canvas0"></canvas>
+  </div>
+  <div class="wave-panel" id="panel1">
+    <div class="wave-label ch1">Ch 1 — Median</div>
+    <canvas class="wave-canvas" id="canvas1"></canvas>
+  </div>
+  <div class="wave-panel" id="panel2">
+    <div class="wave-label ch2">Ch 2 — Radial</div>
+    <canvas class="wave-canvas" id="canvas2"></canvas>
+  </div>
+  <div class="frozen-badge" id="frozenBadge">FROZEN</div>
+  <div class="view-badge" id="viewBadge">LINE</div>
+</div>
+<div class="toolbar">
+  <div class="toolbar-left">
+    <div class="channel-legend">
+      <div class="legend-item"><div class="legend-dot ch0"></div>Ulnar</div>
+      <div class="legend-item"><div class="legend-dot ch1"></div>Median</div>
+      <div class="legend-item"><div class="legend-dot ch2"></div>Radial</div>
+    </div>
+    <div class="meter">
+      <span class="meter-label">Scale</span>
+      <div class="meter-bar"><div class="meter-fill" id="scaleFill"></div></div>
+      <span class="meter-val" id="scaleVal">1.0x</span>
+    </div>
+  </div>
+  <span class="hint">Space freeze &middot; C clear &middot; V toggle view &middot; [ ] scale</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 = ['snc', 'gesture', 'pressure'];
+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;
+    // Generate realistic SNC data with varying amplitude and frequency
+    const burstEnvelope = 0.5 + 0.5 * Math.sin(t * 0.15);
+    emit('snc', {
+      values: [
+        burstEnvelope * (0.4 * Math.sin(t * 3.7 + Math.sin(t * 0.8)) + 0.15 * Math.sin(t * 11.3) + (Math.random() - 0.5) * 0.2),
+        burstEnvelope * (0.35 * Math.cos(t * 4.1 + Math.cos(t * 0.6)) + 0.12 * Math.sin(t * 13.7) + (Math.random() - 0.5) * 0.18),
+        burstEnvelope * (0.3 * Math.sin(t * 5.3 + Math.sin(t * 1.1)) + 0.1 * Math.cos(t * 9.1) + (Math.random() - 0.5) * 0.15)
+      ],
+      frequency: 1000, timestamp: Date.now()
+    });
+    // Gentle pressure
+    const n = Math.max(0, Math.min(1, 0.5 + 0.2 * Math.sin(t * 0.3)));
+    emit('pressure', { value: Math.round(n * 100), normalized: n, timestamp: Date.now() });
+    // Occasional gestures
+    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() });
+    }
+  }, 16); // Higher frequency for SNC data
+}
+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'; }
+}
+/* ── Waveform State ────────────────────────────────────────── */
+const BUF_LEN = 500;
+const buffers = [new Float32Array(BUF_LEN), new Float32Array(BUF_LEN), new Float32Array(BUF_LEN)];
+let frozen = false;
+let viewMode = 'line'; // 'line' or 'bar'
+let vScale = 1.0; // vertical scale, 0.2 to 3.0
+const canvases = [
+  document.getElementById('canvas0'),
+  document.getElementById('canvas1'),
+  document.getElementById('canvas2')
+];
+const ctxs = canvases.map(c => c.getContext('2d'));
+function resizeCanvases() {
+  canvases.forEach((c, i) => {
+    const panel = c.parentElement;
+    const r = panel.getBoundingClientRect();
+    c.width = r.width * devicePixelRatio;
+    c.height = r.height * devicePixelRatio;
+    ctxs[i].setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+  });
+}
+resizeCanvases();
+window.addEventListener('resize', resizeCanvases);
+/* ── Signal Handlers ───────────────────────────────────────── */
+on('snc', (d) => {
+  if (frozen) return;
+  const vals = d.values || [0, 0, 0];
+  for (let ch = 0; ch < 3; ch++) {
+    buffers[ch].copyWithin(0, 1);
+    buffers[ch][BUF_LEN - 1] = vals[ch];
+  }
+});
+on('gesture', (d) => {
+  const type = d.type || 'unknown';
+  if (type === 'tap') {
+    frozen = !frozen;
+    document.getElementById('frozenBadge').classList.toggle('show', frozen);
+  }
+  if (type === 'double_tap') {
+    // Clear waveforms
+    for (let ch = 0; ch < 3; ch++) buffers[ch].fill(0);
+  }
+  if (type === 'twist') {
+    viewMode = viewMode === 'line' ? 'bar' : 'line';
+    document.getElementById('viewBadge').textContent = viewMode === 'line' ? 'LINE' : 'BAR';
+  }
+});
+on('pressure', (d) => {
+  const p = Math.max(0, Math.min(1, d.normalized ?? d.value / 100));
+  // Map pressure to vertical scale: 0.2x to 3.0x
+  vScale = 0.2 + p * 2.8;
+  document.getElementById('scaleVal').textContent = vScale.toFixed(1) + 'x';
+  document.getElementById('scaleFill').style.width = Math.round(p * 100) + '%';
+});
+/* ── Render Loop ───────────────────────────────────────────── */
+const channelColors = ['--ch0', '--ch1', '--ch2'];
+function getColor(varName) {
+  return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+}
+function drawLine(ctx, buf, w, h, color) {
+  const gridColor = getColor('--grid-line') || 'rgba(148,163,184,0.06)';
+  // Grid
+  ctx.strokeStyle = gridColor;
+  ctx.lineWidth = 0.5;
+  for (let i = 0; i < 5; i++) {
+    const gy = h * i / 4;
+    ctx.beginPath(); ctx.moveTo(0, gy); ctx.lineTo(w, gy); ctx.stroke();
+  }
+  // Centerline
+  ctx.strokeStyle = gridColor;
+  ctx.lineWidth = 1;
+  ctx.beginPath(); ctx.moveTo(0, h / 2); ctx.lineTo(w, h / 2); ctx.stroke();
+  // Waveform
+  ctx.beginPath();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.shadowColor = color;
+  ctx.shadowBlur = 4;
+  for (let i = 0; i < BUF_LEN; i++) {
+    const x = (i / (BUF_LEN - 1)) * w;
+    const v = buf[i] * vScale;
+    const y = h / 2 - v * (h * 0.4);
+    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+  }
+  ctx.stroke();
+  ctx.shadowBlur = 0;
+}
+function drawBar(ctx, buf, w, h, color) {
+  const gridColor = getColor('--grid-line') || 'rgba(148,163,184,0.06)';
+  // Grid
+  ctx.strokeStyle = gridColor;
+  ctx.lineWidth = 0.5;
+  for (let i = 0; i < 5; i++) {
+    const gy = h * i / 4;
+    ctx.beginPath(); ctx.moveTo(0, gy); ctx.lineTo(w, gy); ctx.stroke();
+  }
+  // Centerline
+  ctx.strokeStyle = gridColor;
+  ctx.lineWidth = 1;
+  ctx.beginPath(); ctx.moveTo(0, h / 2); ctx.lineTo(w, h / 2); ctx.stroke();
+  // Bars
+  const numBars = 80;
+  const barW = w / numBars - 1;
+  const step = Math.floor(BUF_LEN / numBars);
+  for (let i = 0; i < numBars; i++) {
+    const idx = i * step;
+    const v = buf[idx] * vScale;
+    const barH = Math.abs(v) * h * 0.4;
+    const x = i * (barW + 1);
+    const y = v >= 0 ? h / 2 - barH : h / 2;
+    ctx.fillStyle = color;
+    ctx.globalAlpha = 0.5 + Math.min(0.5, Math.abs(v) * 2);
+    ctx.fillRect(x, y, barW, barH);
+  }
+  ctx.globalAlpha = 1;
+}
+function render() {
+  const bgColor = getColor('--wave-bg') || '#0a0f12';
+  canvases.forEach((c, ch) => {
+    const r = c.parentElement.getBoundingClientRect();
+    const w = r.width;
+    const h = r.height;
+    const ctx = ctxs[ch];
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, w, h);
+    const color = getColor(channelColors[ch]);
+    if (viewMode === 'line') {
+      drawLine(ctx, buffers[ch], w, h, color);
+    } else {
+      drawBar(ctx, buffers[ch], w, h, color);
+    }
+  });
+  requestAnimationFrame(render);
+}
+/* ── Keyboard Fallback ─────────────────────────────────────── */
+document.addEventListener('keydown', (e) => {
+  if (e.code === 'Space') { e.preventDefault(); triggerGesture('tap'); }
+  if (e.code === 'KeyC') triggerGesture('double_tap');
+  if (e.code === 'KeyV') triggerGesture('twist');
+  if (e.key === ']') {
+    vScale = Math.min(3, vScale + 0.2);
+    const p = (vScale - 0.2) / 2.8;
+    emit('pressure', { value: Math.round(p * 100), normalized: p, timestamp: Date.now() });
+  }
+  if (e.key === '[') {
+    vScale = Math.max(0.2, vScale - 0.2);
+    const p = (vScale - 0.2) / 2.8;
+    emit('pressure', { value: Math.round(p * 100), normalized: p, timestamp: Date.now() });
+  }
+});
+/* ── Buttons ───────────────────────────────────────────────── */
+document.getElementById('simFreeze').addEventListener('click', () => triggerGesture('tap'));
+document.getElementById('simClear').addEventListener('click', () => triggerGesture('double_tap'));
+document.getElementById('simView').addEventListener('click', () => triggerGesture('twist'));
+/* ── Init ──────────────────────────────────────────────────── */
+connect();
+render();
+</script>
+</body>
+</html>