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
  1. package/.claude-plugin/plugin.json +19 -0
  2. package/CLAUDE.md +35 -0
  3. package/bin/install.js +25 -0
  4. package/package.json +28 -0
  5. package/skills/mudra-master/SKILL.md +202 -0
  6. package/skills/mudra-master/mudra-preview/SKILL.md +151 -0
  7. package/skills/mudra-master/mudra-preview/assets/ar-menu.html +382 -0
  8. package/skills/mudra-master/mudra-preview/assets/document-scroller.html +468 -0
  9. package/skills/mudra-master/mudra-preview/assets/drum-machine.html +788 -0
  10. package/skills/mudra-master/mudra-preview/assets/emg-visualizer.html +390 -0
  11. package/skills/mudra-master/mudra-preview/assets/generative-art.html +408 -0
  12. package/skills/mudra-master/mudra-preview/assets/gesture-assistant.html +342 -0
  13. package/skills/mudra-master/mudra-preview/assets/gesture-speech.html +444 -0
  14. package/skills/mudra-master/mudra-preview/assets/hands-free-desktop.html +376 -0
  15. package/skills/mudra-master/mudra-preview/assets/model-rotator.html +365 -0
  16. package/skills/mudra-master/mudra-preview/assets/mudra-duel.html +3200 -0
  17. package/skills/mudra-master/mudra-preview/assets/mudra-monitor.html +1451 -0
  18. package/skills/mudra-master/mudra-preview/assets/mudra-ultimate-template.html +891 -0
  19. package/skills/mudra-master/mudra-preview/assets/music-sequencer.html +455 -0
  20. package/skills/mudra-master/mudra-preview/assets/neural-pong.html +380 -0
  21. package/skills/mudra-master/mudra-preview/assets/neural-snake.html +364 -0
  22. package/skills/mudra-master/mudra-preview/assets/presentation-controller.html +345 -0
  23. package/skills/mudra-master/mudra-preview/assets/pressure-painter.html +285 -0
  24. package/skills/mudra-master/mudra-preview/assets/runner.html +1812 -0
  25. package/skills/mudra-master/mudra-preview/assets/smart-home.html +461 -0
  26. package/skills/mudra-master/mudra-preview/assets/space-invaders.html +1154 -0
  27. package/skills/mudra-master/mudra-preview/assets/waterful-ring-toss.html +1624 -0
  28. package/skills/mudra-master/mudra-preview/references/agent_protocol.json +646 -0
  29. package/skills/mudra-master/mudra-preview/references/promt.md +16829 -0
  30. package/skills/mudra-master/mudra-xr/SKILL.md +245 -0
  31. package/skills/mudra-master/mudra-xr/assets/demos/3dgs-walkthrough.html +242 -0
  32. package/skills/mudra-master/mudra-xr/assets/demos/aisimulator.html +792 -0
  33. package/skills/mudra-master/mudra-xr/assets/demos/balloonpop.html +422 -0
  34. package/skills/mudra-master/mudra-xr/assets/demos/ballpit.html +284 -0
  35. package/skills/mudra-master/mudra-xr/assets/demos/drone.html +41 -0
  36. package/skills/mudra-master/mudra-xr/assets/demos/gemini-icebreakers.html +338 -0
  37. package/skills/mudra-master/mudra-xr/assets/demos/gemini-xrobject.html +302 -0
  38. package/skills/mudra-master/mudra-xr/assets/demos/math3d.html +188 -0
  39. package/skills/mudra-master/mudra-xr/assets/demos/measure.html +247 -0
  40. package/skills/mudra-master/mudra-xr/assets/demos/occlusion.html +251 -0
  41. package/skills/mudra-master/mudra-xr/assets/demos/rain.html +498 -0
  42. package/skills/mudra-master/mudra-xr/assets/demos/screenwiper.html +432 -0
  43. package/skills/mudra-master/mudra-xr/assets/demos/splash.html +519 -0
  44. package/skills/mudra-master/mudra-xr/assets/demos/webcam_gestures.html +253 -0
  45. package/skills/mudra-master/mudra-xr/assets/demos/xremoji.html +833 -0
  46. package/skills/mudra-master/mudra-xr/assets/demos/xrpoet.html +151 -0
  47. package/skills/mudra-master/mudra-xr/assets/samples/depthmap.html +266 -0
  48. package/skills/mudra-master/mudra-xr/assets/samples/depthmesh.html +100 -0
  49. package/skills/mudra-master/mudra-xr/assets/samples/game_rps.html +1099 -0
  50. package/skills/mudra-master/mudra-xr/assets/samples/gestures_custom.html +467 -0
  51. package/skills/mudra-master/mudra-xr/assets/samples/gestures_heuristic.html +256 -0
  52. package/skills/mudra-master/mudra-xr/assets/samples/lighting.html +163 -0
  53. package/skills/mudra-master/mudra-xr/assets/samples/mesh_detection.html +46 -0
  54. package/skills/mudra-master/mudra-xr/assets/samples/modelviewer.html +183 -0
  55. package/skills/mudra-master/mudra-xr/assets/samples/paint.html +133 -0
  56. package/skills/mudra-master/mudra-xr/assets/samples/planar-vst.html +45 -0
  57. package/skills/mudra-master/mudra-xr/assets/samples/reticle.html +95 -0
  58. package/skills/mudra-master/mudra-xr/assets/samples/skybox_agent.html +384 -0
  59. package/skills/mudra-master/mudra-xr/assets/samples/sound.html +390 -0
  60. package/skills/mudra-master/mudra-xr/assets/samples/ui.html +496 -0
  61. package/skills/mudra-master/mudra-xr/assets/samples/virtual-screens.html +808 -0
  62. package/skills/mudra-master/mudra-xr/assets/templates/0_basic.html +64 -0
  63. package/skills/mudra-master/mudra-xr/assets/templates/1_ui.html +107 -0
  64. package/skills/mudra-master/mudra-xr/assets/templates/2_hands.html +183 -0
  65. package/skills/mudra-master/mudra-xr/assets/templates/3_depth.html +89 -0
  66. package/skills/mudra-master/mudra-xr/assets/templates/4_stereo.html +84 -0
  67. package/skills/mudra-master/mudra-xr/assets/templates/5_camera.html +117 -0
  68. package/skills/mudra-master/mudra-xr/assets/templates/6_ai.html +154 -0
  69. package/skills/mudra-master/mudra-xr/assets/templates/7_ai_live.html +253 -0
  70. package/skills/mudra-master/mudra-xr/assets/templates/8_objects.html +95 -0
  71. package/skills/mudra-master/mudra-xr/assets/templates/9_xr-toggle.html +90 -0
  72. package/skills/mudra-master/mudra-xr/assets/templates/heuristic_hand_gestures.html +102 -0
  73. package/skills/mudra-master/mudra-xr/assets/templates/meshes.html +47 -0
  74. package/skills/mudra-master/mudra-xr/assets/templates/planes.html +47 -0
  75. package/skills/mudra-master/mudra-xr/assets/templates/uikit.html +187 -0
  76. package/skills/mudra-master/mudra-xr/references/agent_protocol.json +878 -0
  77. package/skills/mudra-master/mudra-xr/references/promt.md +1516 -0
  78. package/skills/mudra-preview/SKILL.md +151 -0
  79. package/skills/mudra-preview/assets/ar-menu.html +382 -0
  80. package/skills/mudra-preview/assets/document-scroller.html +468 -0
  81. package/skills/mudra-preview/assets/drum-machine.html +788 -0
  82. package/skills/mudra-preview/assets/emg-visualizer.html +390 -0
  83. package/skills/mudra-preview/assets/generative-art.html +408 -0
  84. package/skills/mudra-preview/assets/gesture-assistant.html +342 -0
  85. package/skills/mudra-preview/assets/gesture-speech.html +444 -0
  86. package/skills/mudra-preview/assets/hands-free-desktop.html +376 -0
  87. package/skills/mudra-preview/assets/model-rotator.html +365 -0
  88. package/skills/mudra-preview/assets/mudra-duel.html +3200 -0
  89. package/skills/mudra-preview/assets/mudra-monitor.html +1451 -0
  90. package/skills/mudra-preview/assets/mudra-ultimate-template.html +891 -0
  91. package/skills/mudra-preview/assets/music-sequencer.html +455 -0
  92. package/skills/mudra-preview/assets/neural-pong.html +380 -0
  93. package/skills/mudra-preview/assets/neural-snake.html +364 -0
  94. package/skills/mudra-preview/assets/presentation-controller.html +345 -0
  95. package/skills/mudra-preview/assets/pressure-painter.html +285 -0
  96. package/skills/mudra-preview/assets/runner.html +1812 -0
  97. package/skills/mudra-preview/assets/smart-home.html +461 -0
  98. package/skills/mudra-preview/assets/space-invaders.html +1154 -0
  99. package/skills/mudra-preview/assets/waterful-ring-toss.html +1624 -0
  100. package/skills/mudra-preview/references/agent_protocol.json +646 -0
  101. package/skills/mudra-preview/references/promt.md +16829 -0
  102. package/skills/mudra-xr/SKILL.md +245 -0
  103. package/skills/mudra-xr/assets/demos/3dgs-walkthrough.html +242 -0
  104. package/skills/mudra-xr/assets/demos/aisimulator.html +792 -0
  105. package/skills/mudra-xr/assets/demos/balloonpop.html +422 -0
  106. package/skills/mudra-xr/assets/demos/ballpit.html +284 -0
  107. package/skills/mudra-xr/assets/demos/drone.html +41 -0
  108. package/skills/mudra-xr/assets/demos/gemini-icebreakers.html +338 -0
  109. package/skills/mudra-xr/assets/demos/gemini-xrobject.html +302 -0
  110. package/skills/mudra-xr/assets/demos/math3d.html +188 -0
  111. package/skills/mudra-xr/assets/demos/measure.html +247 -0
  112. package/skills/mudra-xr/assets/demos/occlusion.html +251 -0
  113. package/skills/mudra-xr/assets/demos/rain.html +498 -0
  114. package/skills/mudra-xr/assets/demos/screenwiper.html +432 -0
  115. package/skills/mudra-xr/assets/demos/splash.html +519 -0
  116. package/skills/mudra-xr/assets/demos/webcam_gestures.html +253 -0
  117. package/skills/mudra-xr/assets/demos/xremoji.html +833 -0
  118. package/skills/mudra-xr/assets/demos/xrpoet.html +151 -0
  119. package/skills/mudra-xr/assets/samples/depthmap.html +266 -0
  120. package/skills/mudra-xr/assets/samples/depthmesh.html +100 -0
  121. package/skills/mudra-xr/assets/samples/game_rps.html +1099 -0
  122. package/skills/mudra-xr/assets/samples/gestures_custom.html +467 -0
  123. package/skills/mudra-xr/assets/samples/gestures_heuristic.html +256 -0
  124. package/skills/mudra-xr/assets/samples/lighting.html +163 -0
  125. package/skills/mudra-xr/assets/samples/mesh_detection.html +46 -0
  126. package/skills/mudra-xr/assets/samples/modelviewer.html +183 -0
  127. package/skills/mudra-xr/assets/samples/paint.html +133 -0
  128. package/skills/mudra-xr/assets/samples/planar-vst.html +45 -0
  129. package/skills/mudra-xr/assets/samples/reticle.html +95 -0
  130. package/skills/mudra-xr/assets/samples/skybox_agent.html +384 -0
  131. package/skills/mudra-xr/assets/samples/sound.html +390 -0
  132. package/skills/mudra-xr/assets/samples/ui.html +496 -0
  133. package/skills/mudra-xr/assets/samples/virtual-screens.html +808 -0
  134. package/skills/mudra-xr/assets/templates/0_basic.html +64 -0
  135. package/skills/mudra-xr/assets/templates/1_ui.html +107 -0
  136. package/skills/mudra-xr/assets/templates/2_hands.html +183 -0
  137. package/skills/mudra-xr/assets/templates/3_depth.html +89 -0
  138. package/skills/mudra-xr/assets/templates/4_stereo.html +84 -0
  139. package/skills/mudra-xr/assets/templates/5_camera.html +117 -0
  140. package/skills/mudra-xr/assets/templates/6_ai.html +154 -0
  141. package/skills/mudra-xr/assets/templates/7_ai_live.html +253 -0
  142. package/skills/mudra-xr/assets/templates/8_objects.html +95 -0
  143. package/skills/mudra-xr/assets/templates/9_xr-toggle.html +90 -0
  144. package/skills/mudra-xr/assets/templates/heuristic_hand_gestures.html +102 -0
  145. package/skills/mudra-xr/assets/templates/meshes.html +47 -0
  146. package/skills/mudra-xr/assets/templates/planes.html +47 -0
  147. package/skills/mudra-xr/assets/templates/uikit.html +187 -0
  148. package/skills/mudra-xr/references/agent_protocol.json +878 -0
  149. package/skills/mudra-xr/references/promt.md +1516 -0
package/skills/mudra-preview/assets/smart-home.html ADDED
@@ -0,0 +1,461 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Smart Home Control — Mudra Studio</title>
7
+ <style>
8
+ @media (prefers-reduced-motion: reduce) {
9
+ *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
10
+ }
11
+
12
+ :root {
13
+ --bg: #ffffff; --card: #f1f5f9; --primary: #0d9488; --accent: #14b8a6;
14
+ --text: #0f172a; --text-secondary: #475569; --success: #16a34a;
15
+ --warning: #ca8a04; --error: #dc2626;
16
+ --border: rgba(15,23,42,0.12); --surface: rgba(0,0,0,0.04);
17
+ --device-bg: #f8fafc; --device-on: rgba(13,148,136,0.06);
18
+ }
19
+
20
+ * { margin: 0; padding: 0; box-sizing: border-box; }
21
+ body { background: var(--bg); color: var(--text); font-family: 'Poppins', system-ui, sans-serif; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
22
+
23
+ .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; }
24
+ .header-left, .header-right { display: flex; align-items: center; gap: 10px; }
25
+ .brand { font-weight: 700; font-size: 14px; } .brand span { color: var(--primary); }
26
+ .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; }
27
+ .dot.live { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
28
+ .conn-label { font-size: 12px; color: var(--text-secondary); }
29
+
30
+ .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; }
31
+ .btn:hover { border-color: var(--primary); color: var(--primary); }
32
+
33
+ /* Room tabs */
34
+ .room-tabs { display: flex; gap: 4px; padding: 10px 16px 0; flex-shrink: 0; overflow-x: auto; }
35
+ .room-tab { padding: 8px 18px; border-radius: 10px 10px 0 0; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 150ms; background: var(--surface); border: 1px solid var(--border); border-bottom: none; color: var(--text-secondary); white-space: nowrap; }
36
+ .room-tab.active { background: var(--card); color: var(--primary); border-color: var(--primary); }
37
+ .room-tab:hover { color: var(--primary); }
38
+
39
+ /* Devices grid */
40
+ .devices-area { flex: 1; overflow-y: auto; padding: 16px; }
41
+ .room-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
42
+ .device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
43
+ .device-card { background: var(--device-bg); border: 2px solid var(--border); border-radius: 14px; padding: 16px; cursor: pointer; transition: all 200ms; position: relative; }
44
+ .device-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(119,234,233,0.15); }
45
+ .device-card.on { background: var(--device-on); }
46
+ .device-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
47
+ .device-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--surface); border: 1px solid var(--border); }
48
+ .device-toggle { width: 36px; height: 20px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); position: relative; transition: background 200ms; cursor: pointer; flex-shrink: 0; }
49
+ .device-toggle.on { background: var(--primary); border-color: var(--primary); }
50
+ .device-toggle::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--text); top: 1px; left: 1px; transition: transform 200ms; }
51
+ .device-toggle.on::after { transform: translateX(16px); }
52
+ .device-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
53
+ .device-status { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
54
+ .dimmer-wrap { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
55
+ .dimmer-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 3px; transition: width 100ms; }
56
+ .dimmer-val { font-size: 20px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; margin-top: 4px; }
57
+
58
+ .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; }
59
+ .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 12px; }
60
+ .meter { display: flex; align-items: center; gap: 8px; }
61
+ .meter-bar { width: 80px; height: 8px; background: var(--surface); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
62
+ .meter-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 999px; transition: width 75ms linear; width: 0%; }
63
+ .meter-val { font-size: 12px; color: var(--text-secondary); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
64
+ .info-text { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
65
+ .info-text b { color: var(--primary); font-weight: 600; }
66
+ .hint { font-size: 11px; color: var(--text-secondary); opacity: 0.6; }
67
+
68
+ .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; }
69
+
70
+ @media (max-width: 640px) {
71
+ .header { padding: 8px 10px; } .toolbar { gap: 8px; padding: 8px 10px; }
72
+ .device-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
73
+ .hint { display: none; } .meter-bar { width: 50px; }
74
+ }
75
+ </style>
76
+ </head>
77
+ <body>
78
+
79
+ <div class="header">
80
+ <div class="header-left">
81
+ <div class="brand"><span>Mudra</span> Smart Home Control</div>
82
+ <span class="dot" id="dot"></span>
83
+ <span class="conn-label" id="connLabel">Connecting&hellip;</span>
84
+ </div>
85
+ <div class="header-right">
86
+ <a href="/gallery" class="btn" style="text-decoration:none;">&#8592; Gallery</a>
87
+ <button class="btn" id="simTap">Toggle Device</button>
88
+ <button class="btn" id="simAllOff">All Off</button>
89
+ </div>
90
+ </div>
91
+
92
+ <div class="room-tabs" id="roomTabs"></div>
93
+
94
+ <div class="devices-area" id="devicesArea">
95
+ <div class="room-label" id="roomLabel">Living Room</div>
96
+ <div class="device-grid" id="deviceGrid"></div>
97
+ </div>
98
+
99
+ <div class="toolbar">
100
+ <div class="toolbar-left">
101
+ <div class="meter">
102
+ <span class="meter-val" id="pressVal">0%</span>
103
+ <div class="meter-bar"><div class="meter-fill" id="pressFill"></div></div>
104
+ </div>
105
+ <span class="info-text">Room: <b id="infoRoom">Living Room</b></span>
106
+ <span class="info-text">Device: <b id="infoDevice">--</b></span>
107
+ </div>
108
+ <span class="hint">Arrows navigate &middot; Space toggle &middot; A all off &middot; [ ] dimmer</span>
109
+ </div>
110
+
111
+ <div class="mudra-badge">Created by Mudra</div>
112
+
113
+ <script>
114
+ /* ── Mudra Protocol Connection (v2) ────────────────────────── */
115
+ const WS_URL = 'ws://127.0.0.1:8766';
116
+ const SIGNALS = ['gesture', 'navigation', 'pressure'];
117
+
118
+ let ws, reconnectTimer, simTimer;
119
+ let wsOpen = false, deviceReady = false, simulating = true;
120
+ const bus = {};
121
+
122
+ function on(ev, fn) { (bus[ev] ??= []).push(fn); }
123
+ function emit(ev, d) { (bus[ev] || []).forEach(fn => fn(d)); }
124
+ function send(p) { if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(p)); }
125
+
126
+ function connect() {
127
+ try {
128
+ ws = new WebSocket(WS_URL);
129
+ ws.onopen = () => {
130
+ wsOpen = true; stopSim(); updateStatus();
131
+ SIGNALS.forEach(s => send({ command: 'subscribe', signal: s }));
132
+ };
133
+ ws.onmessage = (e) => {
134
+ try {
135
+ const msg = JSON.parse(e.data);
136
+ if (msg.type === 'connection_status') {
137
+ deviceReady = msg.data?.status === 'connected';
138
+ updateStatus(); return;
139
+ }
140
+ emit(msg.type, msg.data);
141
+ } catch {}
142
+ };
143
+ ws.onclose = () => {
144
+ wsOpen = false; deviceReady = false; updateStatus();
145
+ startSim();
146
+ clearTimeout(reconnectTimer);
147
+ reconnectTimer = setTimeout(connect, 1500);
148
+ };
149
+ ws.onerror = () => ws?.close();
150
+ } catch {
151
+ wsOpen = false; startSim();
152
+ clearTimeout(reconnectTimer);
153
+ reconnectTimer = setTimeout(connect, 1500);
154
+ }
155
+ }
156
+
157
+ function triggerGesture(type) {
158
+ if (wsOpen) send({ command: 'trigger_gesture', data: { type } });
159
+ else emit('gesture', { type, confidence: 0.95, timestamp: Date.now() });
160
+ }
161
+
162
+ /* ── Simulation (when Companion not reachable) ─────────────── */
163
+ function startSim() {
164
+ if (simTimer) return;
165
+ simulating = true;
166
+ let t = 0, actionTimer = 0;
167
+ simTimer = setInterval(() => {
168
+ t += 0.05;
169
+ // Gentle pressure
170
+ const n = Math.max(0, Math.min(1, 0.4 + 0.3 * Math.sin(t * 0.4) + (Math.random() - 0.5) * 0.05));
171
+ emit('pressure', { value: Math.round(n * 100), normalized: n, timestamp: Date.now() });
172
+ // Navigation to cycle rooms/devices
173
+ actionTimer += 60;
174
+ if (actionTimer >= 3000) {
175
+ actionTimer = 0;
176
+ if (Math.random() < 0.4) {
177
+ emit('navigation', { delta_x: Math.random() < 0.5 ? 8 : -8, delta_y: 0, timestamp: Date.now() });
178
+ } else {
179
+ emit('navigation', { delta_x: 0, delta_y: Math.random() < 0.5 ? 8 : -8, timestamp: Date.now() });
180
+ }
181
+ }
182
+ // Occasional gestures
183
+ if (Math.random() < 0.003) {
184
+ const g = ['tap', 'double_tap', 'twist', 'double_twist'];
185
+ emit('gesture', { type: g[Math.floor(Math.random() * g.length)], confidence: 0.7 + Math.random() * 0.3, timestamp: Date.now() });
186
+ }
187
+ }, 60);
188
+ }
189
+
190
+ function stopSim() { clearInterval(simTimer); simTimer = null; simulating = false; }
191
+
192
+ /* ── Status UI ─────────────────────────────────────────────── */
193
+ const dotEl = document.getElementById('dot');
194
+ const connEl = document.getElementById('connLabel');
195
+
196
+ function updateStatus() {
197
+ if (wsOpen && deviceReady) { dotEl.className = 'dot live'; connEl.textContent = 'Connected'; }
198
+ else if (wsOpen) { dotEl.className = 'dot'; connEl.textContent = 'Waiting for Mudra Band\u2026'; }
199
+ else { dotEl.className = 'dot'; connEl.textContent = simulating ? 'Simulated' : 'Disconnected'; }
200
+ }
201
+
202
+ /* ── Smart Home Data ───────────────────────────────────────── */
203
+ const rooms = [
204
+ {
205
+ name: 'Living Room', icon: '\uD83D\uDECB',
206
+ devices: [
207
+ { name: 'Main Light', icon: '\uD83D\uDCA1', on: true, dimmer: 75 },
208
+ { name: 'TV', icon: '\uD83D\uDCFA', on: false, dimmer: 80 },
209
+ { name: 'AC', icon: '\u2744\uFE0F', on: true, dimmer: 22 },
210
+ { name: 'Speaker', icon: '\uD83D\uDD0A', on: false, dimmer: 60 }
211
+ ]
212
+ },
213
+ {
214
+ name: 'Bedroom', icon: '\uD83D\uDECF',
215
+ devices: [
216
+ { name: 'Ceiling Light', icon: '\uD83D\uDCA1', on: false, dimmer: 50 },
217
+ { name: 'Fan', icon: '\uD83C\uDF2C\uFE0F', on: true, dimmer: 70 },
218
+ { name: 'Lamp', icon: '\uD83D\uDD6F', on: true, dimmer: 40 }
219
+ ]
220
+ },
221
+ {
222
+ name: 'Kitchen', icon: '\uD83C\uDF73',
223
+ devices: [
224
+ { name: 'Light', icon: '\uD83D\uDCA1', on: true, dimmer: 100 },
225
+ { name: 'Coffee Maker', icon: '\u2615', on: false, dimmer: 0 },
226
+ { name: 'Oven', icon: '\uD83C\uDF56', on: false, dimmer: 0 }
227
+ ]
228
+ },
229
+ {
230
+ name: 'Office', icon: '\uD83D\uDCBB',
231
+ devices: [
232
+ { name: 'Desk Lamp', icon: '\uD83D\uDCA1', on: true, dimmer: 85 },
233
+ { name: 'Monitor', icon: '\uD83D\uDDA5', on: true, dimmer: 70 },
234
+ { name: 'Heater', icon: '\uD83D\uDD25', on: false, dimmer: 50 }
235
+ ]
236
+ }
237
+ ];
238
+
239
+ let currentRoom = 0;
240
+ let currentDevice = 0;
241
+ let navAccX = 0, navAccY = 0;
242
+ const NAV_THRESHOLD = 5;
243
+
244
+ const roomTabsEl = document.getElementById('roomTabs');
245
+ const deviceGridEl = document.getElementById('deviceGrid');
246
+ const roomLabelEl = document.getElementById('roomLabel');
247
+ const pressVal = document.getElementById('pressVal');
248
+ const pressFill = document.getElementById('pressFill');
249
+
250
+ /* ── Build Room Tabs ───────────────────────────────────────── */
251
+ rooms.forEach(function(room, i) {
252
+ const tab = document.createElement('div');
253
+ tab.className = 'room-tab' + (i === 0 ? ' active' : '');
254
+ tab.id = 'rtab' + i;
255
+ tab.textContent = room.icon + ' ' + room.name;
256
+ tab.addEventListener('click', function() { selectRoom(i); });
257
+ roomTabsEl.appendChild(tab);
258
+ });
259
+
260
+ function selectRoom(idx) {
261
+ currentRoom = idx;
262
+ currentDevice = 0;
263
+ rooms.forEach(function(_, i) {
264
+ document.getElementById('rtab' + i).classList.toggle('active', i === idx);
265
+ });
266
+ roomLabelEl.textContent = rooms[idx].name;
267
+ document.getElementById('infoRoom').textContent = rooms[idx].name;
268
+ renderDevices();
269
+ }
270
+
271
+ function renderDevices() {
272
+ while (deviceGridEl.firstChild) deviceGridEl.removeChild(deviceGridEl.firstChild);
273
+ const devs = rooms[currentRoom].devices;
274
+ devs.forEach(function(dev, i) {
275
+ const card = document.createElement('div');
276
+ card.className = 'device-card' + (dev.on ? ' on' : '') + (i === currentDevice ? ' selected' : '');
277
+ card.id = 'dcard' + i;
278
+ card.addEventListener('click', function() { selectDevice(i); });
279
+
280
+ const top = document.createElement('div');
281
+ top.className = 'device-card-top';
282
+
283
+ const iconDiv = document.createElement('div');
284
+ iconDiv.className = 'device-icon';
285
+ iconDiv.textContent = dev.icon;
286
+
287
+ const toggle = document.createElement('div');
288
+ toggle.className = 'device-toggle' + (dev.on ? ' on' : '');
289
+ toggle.id = 'dtoggle' + i;
290
+
291
+ top.appendChild(iconDiv);
292
+ top.appendChild(toggle);
293
+ card.appendChild(top);
294
+
295
+ const nameDiv = document.createElement('div');
296
+ nameDiv.className = 'device-name';
297
+ nameDiv.textContent = dev.name;
298
+ card.appendChild(nameDiv);
299
+
300
+ const statusDiv = document.createElement('div');
301
+ statusDiv.className = 'device-status';
302
+ statusDiv.id = 'dstatus' + i;
303
+ statusDiv.textContent = dev.on ? 'On \u2014 ' + dev.dimmer + '%' : 'Off';
304
+ card.appendChild(statusDiv);
305
+
306
+ const dimWrap = document.createElement('div');
307
+ dimWrap.className = 'dimmer-wrap';
308
+ const dimFill = document.createElement('div');
309
+ dimFill.className = 'dimmer-fill';
310
+ dimFill.id = 'dfill' + i;
311
+ dimFill.style.width = (dev.on ? dev.dimmer : 0) + '%';
312
+ dimWrap.appendChild(dimFill);
313
+ card.appendChild(dimWrap);
314
+
315
+ const valDiv = document.createElement('div');
316
+ valDiv.className = 'dimmer-val';
317
+ valDiv.id = 'dval' + i;
318
+ valDiv.textContent = dev.on ? dev.dimmer + '%' : '--';
319
+ card.appendChild(valDiv);
320
+
321
+ deviceGridEl.appendChild(card);
322
+ });
323
+ updateDeviceInfo();
324
+ }
325
+
326
+ function selectDevice(idx) {
327
+ const devs = rooms[currentRoom].devices;
328
+ if (idx < 0 || idx >= devs.length) return;
329
+ currentDevice = idx;
330
+ devs.forEach(function(_, i) {
331
+ const card = document.getElementById('dcard' + i);
332
+ if (card) card.classList.toggle('selected', i === idx);
333
+ });
334
+ updateDeviceInfo();
335
+ }
336
+
337
+ function updateDeviceInfo() {
338
+ const dev = rooms[currentRoom].devices[currentDevice];
339
+ if (dev) {
340
+ document.getElementById('infoDevice').textContent = dev.name;
341
+ }
342
+ }
343
+
344
+ function updateDeviceCard(idx) {
345
+ const dev = rooms[currentRoom].devices[idx];
346
+ if (!dev) return;
347
+ const card = document.getElementById('dcard' + idx);
348
+ if (!card) return;
349
+ card.classList.toggle('on', dev.on);
350
+ const toggle = document.getElementById('dtoggle' + idx);
351
+ if (toggle) toggle.classList.toggle('on', dev.on);
352
+ const status = document.getElementById('dstatus' + idx);
353
+ if (status) status.textContent = dev.on ? 'On \u2014 ' + dev.dimmer + '%' : 'Off';
354
+ const fill = document.getElementById('dfill' + idx);
355
+ if (fill) fill.style.width = (dev.on ? dev.dimmer : 0) + '%';
356
+ const val = document.getElementById('dval' + idx);
357
+ if (val) val.textContent = dev.on ? dev.dimmer + '%' : '--';
358
+ }
359
+
360
+ function toggleDevice(idx) {
361
+ const dev = rooms[currentRoom].devices[idx];
362
+ if (!dev) return;
363
+ dev.on = !dev.on;
364
+ updateDeviceCard(idx);
365
+ }
366
+
367
+ function allDevicesOff() {
368
+ rooms.forEach(function(room) {
369
+ room.devices.forEach(function(dev) { dev.on = false; });
370
+ });
371
+ renderDevices();
372
+ }
373
+
374
+ renderDevices();
375
+
376
+ /* ── Signal Handlers ───────────────────────────────────────── */
377
+ on('navigation', (d) => {
378
+ const dx = d.delta_x || 0;
379
+ const dy = d.delta_y || 0;
380
+ navAccX += dx;
381
+ navAccY += dy;
382
+
383
+ if (Math.abs(navAccX) > NAV_THRESHOLD) {
384
+ if (navAccX > 0) {
385
+ selectRoom((currentRoom + 1) % rooms.length);
386
+ } else {
387
+ selectRoom((currentRoom - 1 + rooms.length) % rooms.length);
388
+ }
389
+ navAccX = 0; navAccY = 0;
390
+ }
391
+ if (Math.abs(navAccY) > NAV_THRESHOLD) {
392
+ const devs = rooms[currentRoom].devices;
393
+ if (navAccY > 0) {
394
+ selectDevice((currentDevice + 1) % devs.length);
395
+ } else {
396
+ selectDevice((currentDevice - 1 + devs.length) % devs.length);
397
+ }
398
+ navAccX = 0; navAccY = 0;
399
+ }
400
+ });
401
+
402
+ on('gesture', (d) => {
403
+ const type = d.type || 'unknown';
404
+ if (type === 'tap') {
405
+ toggleDevice(currentDevice);
406
+ }
407
+ if (type === 'double_tap') {
408
+ allDevicesOff();
409
+ }
410
+ if (type === 'twist') {
411
+ selectRoom((currentRoom + 1) % rooms.length);
412
+ }
413
+ });
414
+
415
+ on('pressure', (d) => {
416
+ const p = Math.max(0, Math.min(1, d.normalized ?? d.value / 100));
417
+ pressVal.textContent = Math.round(p * 100) + '%';
418
+ pressFill.style.width = Math.round(p * 100) + '%';
419
+ // Adjust dimmer of selected device
420
+ const dev = rooms[currentRoom].devices[currentDevice];
421
+ if (dev && dev.on) {
422
+ dev.dimmer = Math.round(p * 100);
423
+ updateDeviceCard(currentDevice);
424
+ }
425
+ });
426
+
427
+ /* ── Keyboard Fallback ─────────────────────────────────────── */
428
+ document.addEventListener('keydown', (e) => {
429
+ if (e.code === 'ArrowRight') { e.preventDefault(); emit('navigation', { delta_x: 10, delta_y: 0, timestamp: Date.now() }); }
430
+ if (e.code === 'ArrowLeft') { e.preventDefault(); emit('navigation', { delta_x: -10, delta_y: 0, timestamp: Date.now() }); }
431
+ if (e.code === 'ArrowDown') { e.preventDefault(); emit('navigation', { delta_x: 0, delta_y: 10, timestamp: Date.now() }); }
432
+ if (e.code === 'ArrowUp') { e.preventDefault(); emit('navigation', { delta_x: 0, delta_y: -10, timestamp: Date.now() }); }
433
+ if (e.code === 'Space') { e.preventDefault(); triggerGesture('tap'); }
434
+ if (e.code === 'KeyA') triggerGesture('double_tap');
435
+ if (e.key === ']') {
436
+ const dev = rooms[currentRoom].devices[currentDevice];
437
+ if (dev && dev.on) {
438
+ dev.dimmer = Math.min(100, dev.dimmer + 5);
439
+ updateDeviceCard(currentDevice);
440
+ emit('pressure', { value: dev.dimmer, normalized: dev.dimmer / 100, timestamp: Date.now() });
441
+ }
442
+ }
443
+ if (e.key === '[') {
444
+ const dev = rooms[currentRoom].devices[currentDevice];
445
+ if (dev && dev.on) {
446
+ dev.dimmer = Math.max(0, dev.dimmer - 5);
447
+ updateDeviceCard(currentDevice);
448
+ emit('pressure', { value: dev.dimmer, normalized: dev.dimmer / 100, timestamp: Date.now() });
449
+ }
450
+ }
451
+ });
452
+
453
+ /* ── Buttons ───────────────────────────────────────────────── */
454
+ document.getElementById('simTap').addEventListener('click', () => triggerGesture('tap'));
455
+ document.getElementById('simAllOff').addEventListener('click', () => triggerGesture('double_tap'));
456
+
457
+ /* ── Init ──────────────────────────────────────────────────── */
458
+ connect();
459
+ </script>
460
+ </body>
461
+ </html>