From e1a897f5e36fb75964e87dd78efb09c7bc71b37c Mon Sep 17 00:00:00 2001
From: wordingone <126381556+wordingone@users.noreply.github.com>
Date: Fri, 29 Aug 2025 23:19:40 -0700
Subject: [PATCH] feat: replace mobile version with LumenIO tracker

---
 .gitignore |   1 +
 index.html | 454 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 455 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 index.html
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..eeeb7c5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+testingground.github.io/
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..880bbcd
--- /dev/null
+++ b/index.html
@@ -0,0 +1,454 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, viewport-fit=cover">
+  <title>LumenIO Hand Tracker</title>
+
+  <!-- MediaPipe CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
+
+  <style>
+    :root {
+      --bg: #0a0a0a;
+      --accent: #7df9ff;
+      --success: #35d07f;
+      --warning: #ff6b6b;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: linear-gradient(135deg, var(--bg), #1a1a2e);
+      color: white;
+      height: 100vh;
+      overflow: hidden;
+      touch-action: manipulation;
+    }
+
+    .container {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .video-container {
+      position: relative;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #000;
+    }
+
+    video, canvas {
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: 8px;
+      transform: scaleX(-1); /* Mirror effect */
+    }
+
+    canvas {
+      position: absolute;
+      pointer-events: none;
+    }
+
+    .controls {
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 10px;
+      z-index: 100;
+    }
+
+    .btn {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 8px;
+      background: rgba(125, 249, 255, 0.2);
+      color: var(--accent);
+      border: 1px solid var(--accent);
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.3s ease;
+    }
+
+    .btn:hover {
+      background: rgba(125, 249, 255, 0.3);
+    }
+
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .start-screen {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(10px);
+      z-index: 200;
+    }
+
+    .start-btn {
+      padding: 15px 30px;
+      font-size: 18px;
+      background: linear-gradient(135deg, var(--accent), #4ecdc4);
+      color: #000;
+      border: none;
+      border-radius: 12px;
+      cursor: pointer;
+      font-weight: 600;
+      transition: transform 0.2s ease;
+    }
+
+    .start-btn:hover {
+      transform: translateY(-2px);
+    }
+
+    .info-panel {
+      position: absolute;
+      bottom: 20px;
+      left: 20px;
+      right: 20px;
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(10px);
+      border-radius: 12px;
+      padding: 15px;
+      border: 1px solid rgba(125, 249, 255, 0.3);
+    }
+
+    .hand-info {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      justify-content: center;
+    }
+
+    .hand-card {
+      background: rgba(125, 249, 255, 0.1);
+      border: 1px solid rgba(125, 249, 255, 0.3);
+      border-radius: 8px;
+      padding: 10px 15px;
+      min-width: 120px;
+      text-align: center;
+      font-size: 13px;
+    }
+
+    .hand-card.left {
+      border-color: var(--warning);
+      background: rgba(255, 107, 107, 0.1);
+    }
+
+    .hand-card.right {
+      border-color: var(--success);
+      background: rgba(53, 208, 127, 0.1);
+    }
+
+    .status {
+      text-align: center;
+      margin-bottom: 10px;
+      font-weight: 600;
+    }
+
+    .hidden {
+      display: none !important;
+    }
+
+    @media (max-width: 768px) {
+      .controls {
+        top: 10px;
+        left: 10px;
+        right: 10px;
+        transform: none;
+        justify-content: space-between;
+      }
+
+      .info-panel {
+        bottom: 10px;
+        left: 10px;
+        right: 10px;
+      }
+
+      .btn {
+        padding: 8px 12px;
+        font-size: 12px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="video-container">
+      <video id="videoElement" autoplay muted playsinline></video>
+      <canvas id="canvas"></canvas>
+    </div>
+
+    <div class="controls">
+      <button class="btn" id="settingsBtn">Settings</button>
+      <div class="status" id="status">Ready</div>
+      <button class="btn" id="stopBtn" disabled>Stop</button>
+    </div>
+
+    <div class="info-panel">
+      <div class="status" id="mainStatus">LumenIO Hand Tracker</div>
+      <div class="hand-info" id="handInfo">
+        <div class="hand-card">Waiting for camera...</div>
+      </div>
+    </div>
+
+    <div class="start-screen" id="startScreen">
+      <h1 style="margin-bottom: 20px; color: var(--accent);">LumenIO Hand Tracker</h1>
+      <p style="margin-bottom: 30px; opacity: 0.8; text-align: center; max-width: 400px;">
+        Advanced hand tracking with MediaPipe. Compatible with the LumenIO gesture system.
+      </p>
+      <button class="start-btn" id="startBtn">Start Hand Tracking</button>
+    </div>
+  </div>
+
+  <script>
+    class LumenIOHandTracker {
+      constructor() {
+        this.video = document.getElementById('videoElement');
+        this.canvas = document.getElementById('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.startBtn = document.getElementById('startBtn');
+        this.stopBtn = document.getElementById('stopBtn');
+        this.startScreen = document.getElementById('startScreen');
+        this.status = document.getElementById('status');
+        this.mainStatus = document.getElementById('mainStatus');
+        this.handInfo = document.getElementById('handInfo');
+
+        this.camera = null;
+        this.hands = null;
+        this.isRunning = false;
+
+        this.initEventListeners();
+        this.initMediaPipe();
+      }
+
+      initEventListeners() {
+        this.startBtn.addEventListener('click', () => this.start());
+        this.stopBtn.addEventListener('click', () => this.stop());
+
+        window.addEventListener('resize', () => this.resizeCanvas());
+      }
+
+      initMediaPipe() {
+        this.hands = new Hands({
+          locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`
+        });
+
+        this.hands.setOptions({
+          maxNumHands: 2,
+          modelComplexity: 1,
+          minDetectionConfidence: 0.7,
+          minTrackingConfidence: 0.5
+        });
+
+        this.hands.onResults((results) => this.onResults(results));
+      }
+
+      async start() {
+        try {
+          this.status.textContent = 'Starting camera...';
+
+          this.camera = new Camera(this.video, {
+            onFrame: async () => {
+              if (this.isRunning) {
+                await this.hands.send({ image: this.video });
+              }
+            },
+            width: 1280,
+            height: 720
+          });
+
+          await this.camera.start();
+
+          this.isRunning = true;
+          this.startScreen.classList.add('hidden');
+          this.stopBtn.disabled = false;
+          this.status.textContent = 'Active';
+
+          this.resizeCanvas();
+
+        } catch (error) {
+          console.error('Camera error:', error);
+          this.status.textContent = 'Camera error';
+          alert('Camera access denied or not available. Please check permissions.');
+        }
+      }
+
+      stop() {
+        this.isRunning = false;
+
+        if (this.camera) {
+          this.camera.stop();
+        }
+
+        this.stopBtn.disabled = true;
+        this.status.textContent = 'Stopped';
+        this.startScreen.classList.remove('hidden');
+        this.clearCanvas();
+      }
+
+      resizeCanvas() {
+        if (this.video.videoWidth && this.video.videoHeight) {
+          this.canvas.width = this.video.videoWidth;
+          this.canvas.height = this.video.videoHeight;
+          this.canvas.style.width = this.video.offsetWidth + 'px';
+          this.canvas.style.height = this.video.offsetHeight + 'px';
+        }
+      }
+
+      onResults(results) {
+        this.clearCanvas();
+
+        if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+          this.drawHands(results);
+          this.updateHandInfo(results);
+          this.mainStatus.textContent = `Tracking ${results.multiHandLandmarks.length} hand(s)`;
+        } else {
+          this.handInfo.innerHTML = '<div class="hand-card">No hands detected</div>';
+          this.mainStatus.textContent = 'Show your hands to the camera';
+        }
+      }
+
+      drawHands(results) {
+        const width = this.canvas.width;
+        const height = this.canvas.height;
+
+        results.multiHandLandmarks.forEach((landmarks, index) => {
+          const handedness = results.multiHandedness[index].label;
+          const color = handedness === 'Left' ? '#ff6b6b' : '#35d07f';
+
+          // Draw connections
+          this.drawConnections(landmarks, width, height, color);
+
+          // Draw landmarks
+          this.drawLandmarks(landmarks, width, height, color);
+        });
+      }
+
+      drawConnections(landmarks, width, height, color) {
+        const connections = [
+          [0, 1], [1, 2], [2, 3], [3, 4], // Thumb
+          [0, 5], [5, 6], [6, 7], [7, 8], // Index
+          [0, 9], [9, 10], [10, 11], [11, 12], // Middle
+          [0, 13], [13, 14], [14, 15], [15, 16], // Ring
+          [0, 17], [17, 18], [18, 19], [19, 20], // Pinky
+          [5, 9], [9, 13], [13, 17] // Palm
+        ];
+
+        this.ctx.strokeStyle = color + '80';
+        this.ctx.lineWidth = 2;
+        this.ctx.lineCap = 'round';
+
+        connections.forEach(([start, end]) => {
+          const startPoint = landmarks[start];
+          const endPoint = landmarks[end];
+
+          this.ctx.beginPath();
+          this.ctx.moveTo(startPoint.x * width, startPoint.y * height);
+          this.ctx.lineTo(endPoint.x * width, endPoint.y * height);
+          this.ctx.stroke();
+        });
+      }
+
+      drawLandmarks(landmarks, width, height, color) {
+        landmarks.forEach((landmark, index) => {
+          const x = landmark.x * width;
+          const y = landmark.y * height;
+          const radius = index === 0 ? 8 : 4; // Wrist larger
+
+          // Draw landmark
+          this.ctx.fillStyle = color;
+          this.ctx.beginPath();
+          this.ctx.arc(x, y, radius, 0, 2 * Math.PI);
+          this.ctx.fill();
+
+          // Draw white center
+          this.ctx.fillStyle = '#ffffff';
+          this.ctx.beginPath();
+          this.ctx.arc(x, y, radius * 0.5, 0, 2 * Math.PI);
+          this.ctx.fill();
+        });
+      }
+
+      updateHandInfo(results) {
+        const handCards = results.multiHandLandmarks.map((landmarks, index) => {
+          const handedness = results.multiHandedness[index].label;
+          const confidence = Math.round(results.multiHandedness[index].score * 100);
+          const gesture = this.detectGesture(landmarks);
+
+          const cardClass = handedness.toLowerCase();
+
+          return `
+            <div class="hand-card ${cardClass}">
+              <strong>${handedness} Hand</strong><br>
+              <small>Confidence: ${confidence}%</small><br>
+              <span>${gesture}</span>
+            </div>
+          `;
+        }).join('');
+
+        this.handInfo.innerHTML = handCards;
+      }
+
+      detectGesture(landmarks) {
+        // Simple gesture detection
+        const fingerTips = [4, 8, 12, 16, 20];
+        const fingerPips = [3, 6, 10, 14, 18];
+
+        let fingersUp = 0;
+
+        // Count extended fingers
+        fingerTips.forEach((tip, i) => {
+          const tipY = landmarks[tip].y;
+          const pipY = landmarks[fingerPips[i]].y;
+
+          if (i === 0) { // Thumb (check x for horizontal)
+            if (landmarks[tip].x > landmarks[fingerPips[i]].x) fingersUp++;
+          } else {
+            if (tipY < pipY) fingersUp++;
+          }
+        });
+
+        // Return gesture based on fingers up
+        const gestures = {
+          0: '✊ Fist',
+          1: '☝️ One',
+          2: '✌️ Two',
+          3: '🤟 Three',
+          4: '🤚 Four',
+          5: '🖐️ Five'
+        };
+
+        return gestures[fingersUp] || `${fingersUp} fingers`;
+      }
+
+      clearCanvas() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      }
+    }
+
+    // Initialize when page loads
+    document.addEventListener('DOMContentLoaded', () => {
+      new LumenIOHandTracker();
+    });
+  </script>
+</body>
+</html>
+
