From 34756be2de208e575247013ce6eaf4d15f760731 Mon Sep 17 00:00:00 2001
From: max <max@mcf.at>
Date: Sun, 8 Feb 2026 21:11:39 +0100
Subject: [PATCH] additional new face stuff

---
 face/var/www/html/index.html | 347 ++++++++++-------------------------
 1 file changed, 94 insertions(+), 253 deletions(-)
diff --git a/face/var/www/html/index.html b/face/var/www/html/index.html
index 52bcff5..06c8046 100755
--- a/face/var/www/html/index.html
+++ b/face/var/www/html/index.html
@@ -3,271 +3,112 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
-  <title>Face</title>
-  <style>
-    :root {
-      --bg: #000;
-      --fg: #fff;
-    }
-
-    html, body {
-      height: 100%;
-      margin: 0;
-      background: var(--bg);
-      overflow: hidden;
-      touch-action: manipulation;
-      user-select: none;
-      -webkit-tap-highlight-color: transparent;
-      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
-    }
-
-    /* Fullscreen stage */
-    #stage {
-      position: fixed;
-      inset: 0;
-      background: var(--bg);
-      display: grid;
-      place-items: center;
-    }
-
-    /* Face canvas-ish container */
-    #face {
-      width: min(92vw, 92vh);
-      height: min(92vw, 92vh);
-      position: relative;
-    }
-
-    /* Controls: hidden until touch/move */
-    #overlay {
-      position: fixed;
-      left: 12px;
-      top: 12px;
-      display: flex;
-      gap: 10px;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 180ms ease;
-      z-index: 10;
-    }
-    #overlay.visible {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
-    .btn {
-      color: var(--fg);
-      text-decoration: none;
-      font-size: 14px;
-      padding: 10px 12px;
-      border: 1px solid rgba(255,255,255,0.25);
-      border-radius: 12px;
-      background: rgba(0,0,0,0.35);
-      backdrop-filter: blur(6px);
-      -webkit-backdrop-filter: blur(6px);
-      line-height: 1;
-      white-space: nowrap;
-    }
-    .btn:active { transform: translateY(1px); }
-
-    /* --- Simple face elements (SVG) --- */
-    svg { width: 100%; height: 100%; display: block; }
-
-    /* Keep strokes crisp */
-    .stroke {
-      fill: none;
-      stroke: #fff;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-  </style>
+  <title>Helva Face Display</title>
+  <link rel="stylesheet" href="/static/style.css" />
 </head>
 <body>
-  <div id="stage">
-    <div id="overlay" aria-hidden="true">
-      <a class="btn" id="btnControl" href="/control">neutral</a>
-      <a class="btn" id="btnDrive" href="/drive">/drive</a>
-    </div>
+  <div class="stage" id="stage">
+    <div class="hint">Tippe, um Drive &amp; Control zu sehen</div>
 
-    <div id="face" aria-label="Robot Face">
-      <!-- Minimal clean face in SVG (eyes + mouth); driven by state below -->
-      <svg viewBox="0 0 100 100" role="img" aria-hidden="true">
-        <!-- Eyes -->
-        <g id="eyes" class="stroke" stroke-width="6">
-          <!-- left eye -->
-          <path id="eyeL" d="M22 40 C 30 30, 40 30, 48 40" />
-          <!-- right eye -->
-          <path id="eyeR" d="M52 40 C 60 30, 70 30, 78 40" />
+    <div class="wrap">
+      <!-- ONLY the screen / display -->
+      <svg id="faceSvg" class="screen" viewBox="0 0 800 460" role="img" aria-label="Robot face display">
+        <defs>
+          <!-- screen glass gradient -->
+          <linearGradient id="glass" x1="0" x2="1" y1="0" y2="1">
+            <stop offset="0" stop-color="#0b0f1a" />
+            <stop offset="1" stop-color="#03050a" />
+          </linearGradient>
+
+          <!-- glossy highlight -->
+          <linearGradient id="gloss" x1="0" x2="1">
+            <stop offset="0" stop-color="rgba(255,255,255,0.18)" />
+            <stop offset="1" stop-color="rgba(255,255,255,0.00)" />
+          </linearGradient>
+
+          <!-- neon glow -->
+          <filter id="neonGlow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="6" result="b"/>
+            <feMerge>
+              <feMergeNode in="b"/>
+              <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+          </filter>
+
+          <!-- stronger glow (intensity) -->
+          <filter id="neonGlowStrong" x="-80%" y="-80%" width="260%" height="260%">
+            <feGaussianBlur stdDeviation="10" result="b2"/>
+            <feMerge>
+              <feMergeNode in="b2"/>
+              <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+          </filter>
+        </defs>
+
+        <!-- outer screen frame -->
+        <rect x="35" y="35" width="730" height="390" rx="70"
+              fill="#05070c" stroke="rgba(255,255,255,0.10)" stroke-width="6"/>
+
+        <!-- inner glass -->
+        <rect x="75" y="75" width="650" height="310" rx="52"
+              fill="url(#glass)" stroke="rgba(255,255,255,0.06)" stroke-width="4"/>
+
+        <!-- big gloss sweep (like the sticker example) -->
+        <path d="M115,110 C220,85 420,85 620,125
+                 C590,160 430,180 250,165
+                 C170,158 125,142 115,110Z"
+              fill="url(#gloss)" opacity="0.55"/>
+
+        <!-- top light bar -->
+        <g id="topbar">
+          <rect x="260" y="92" width="280" height="34" rx="17"
+                fill="rgba(120,255,235,0.20)"/>
+          <rect id="topbarLit" x="275" y="98" width="250" height="22" rx="11"
+                fill="rgba(120,255,235,0.95)" filter="url(#neonGlow)"/>
         </g>
 
-        <!-- Pupils (small dots) -->
-        <g id="pupils" fill="#fff">
-          <circle id="pupilL" cx="35" cy="40" r="2.2" />
-          <circle id="pupilR" cx="65" cy="40" r="2.2" />
+        <!-- FACE LAYER (cyan line art) -->
+        <g id="face" filter="url(#neonGlow)">
+          <!-- eyes container (we move this for look.x/y) -->
+          <g id="eyesGroup">
+            <!-- Left eye -->
+            <path id="eyeL" d="" />
+            <!-- Right eye -->
+            <path id="eyeR" d="" />
+          </g>
+
+          <!-- mouth -->
+          <path id="mouth" d="" />
         </g>
 
-        <!-- Mouth -->
-        <g class="stroke" stroke-width="6">
-          <path id="mouth" d="M30 68 C 40 76, 60 76, 70 68" />
+        <!-- subtle sparkle dots (optional, like the ref image) -->
+        <g id="sparkles" opacity="0.45" filter="url(#neonGlow)">
+          <circle cx="150" cy="210" r="3" fill="rgba(120,255,235,0.9)"/>
+          <circle cx="165" cy="240" r="2" fill="rgba(120,255,235,0.8)"/>
+          <circle cx="650" cy="215" r="3" fill="rgba(120,255,235,0.9)"/>
+          <circle cx="635" cy="245" r="2" fill="rgba(120,255,235,0.8)"/>
         </g>
       </svg>
+
+      <!-- Touch-only overlay -->
+      <div class="overlay" id="overlay">
+        <div class="left">
+          <a class="btn" href="/drive">🚗 Drive</a>
+          <a class="btn" href="/control" id="controlLink">🎛️ Control: <span id="emotionLabel">neutral</span></a>
+          <span class="pill">
+            <span class="dot on" id="dotConn"></span>
+            <span id="pillText">ready</span>
+          </span>
+        </div>
+        <div class="right">
+          <button class="btn" id="btnSpeak" type="button">🗣️ Sprechen: <strong id="speakState">aus</strong></button>
+          <button class="btn" id="btnEyes" type="button">👀 Augen: <strong id="eyesState">an</strong></button>
+        </div>
+      </div>
     </div>
   </div>
 
-  <script>
-    // --- State (matches your face-server structure) ---
-    const state = {
-      emotion: "neutral",
-      intensity: 0.7,          // 0..1
-      look: null,              // {"x": -1..1, "y": -1..1} or null
-      mouth: { open: false, amount: 0.0, duration_ms: 0 },
-      talk: { enabled: false, rate_hz: 3.2, amount: 0.9, jitter: 0.25 },
-    };
-
-    // --- UI refs ---
-    const overlay = document.getElementById("overlay");
-    const btnControl = document.getElementById("btnControl");
-
-    const pupilL = document.getElementById("pupilL");
-    const pupilR = document.getElementById("pupilR");
-    const mouth = document.getElementById("mouth");
-    const eyeL = document.getElementById("eyeL");
-    const eyeR = document.getElementById("eyeR");
-
-    // --- Overlay show-on-touch/move ---
-    let overlayTimer = null;
-    function showOverlayBriefly() {
-      overlay.classList.add("visible");
-      overlay.setAttribute("aria-hidden", "false");
-      if (overlayTimer) clearTimeout(overlayTimer);
-      overlayTimer = setTimeout(() => {
-        overlay.classList.remove("visible");
-        overlay.setAttribute("aria-hidden", "true");
-      }, 2500);
-    }
-    window.addEventListener("touchstart", showOverlayBriefly, { passive: true });
-    window.addEventListener("mousemove", showOverlayBriefly, { passive: true });
-    window.addEventListener("keydown", showOverlayBriefly);
-
-    // --- Face rendering helpers ---
-    function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
-
-    function applyLook(look) {
-      // Pupils range in SVG coords
-      const maxX = 3.2, maxY = 2.2;
-      const x = look ? clamp(look.x, -1, 1) * maxX : 0;
-      const y = look ? clamp(look.y, -1, 1) * maxY : 0;
-
-      pupilL.setAttribute("cx", (35 + x).toFixed(2));
-      pupilL.setAttribute("cy", (40 + y).toFixed(2));
-      pupilR.setAttribute("cx", (65 + x).toFixed(2));
-      pupilR.setAttribute("cy", (40 + y).toFixed(2));
-    }
-
-    function applyMouth(emotion, mouthState) {
-      // mouthState.amount: 0..1, open toggles
-      const amt = clamp(mouthState?.amount ?? 0, 0, 1);
-      const open = !!mouthState?.open;
-
-      // Base mouth by emotion (simple, clean)
-      // neutral: slight smile, happy: bigger smile, sad: frown, angry: flat, surprised: open O
-      if (emotion === "sad") {
-        mouth.setAttribute("d", "M30 72 C 42 62, 58 62, 70 72");
-      } else if (emotion === "angry") {
-        mouth.setAttribute("d", "M32 70 C 44 70, 56 70, 68 70");
-      } else if (emotion === "happy") {
-        mouth.setAttribute("d", "M28 66 C 40 80, 60 80, 72 66");
-      } else if (emotion === "surprised") {
-        // fake an "O" using a short curve; (keeps it minimal)
-        const r = 6 + amt * 6;
-        mouth.setAttribute("d", `M50 ${70-r} C ${50+r} ${70-r}, ${50+r} ${70+r}, 50 ${70+r} C ${50-r} ${70+r}, ${50-r} ${70-r}, 50 ${70-r}`);
-      } else {
-        // neutral
-        mouth.setAttribute("d", "M30 68 C 40 76, 60 76, 70 68");
-      }
-
-      // If mouth.open => exaggerate a bit (except surprised which is already open-ish)
-      if (open && emotion !== "surprised") {
-        // slightly "deeper" smile/frown/line
-        // We just scale stroke width a touch and nudge curve visually by intensity
-        // (simple, avoids layout thrash)
-        const sw = 6 + amt * 2.5;
-        mouth.parentElement.setAttribute("stroke-width", sw.toFixed(2));
-      } else {
-        mouth.parentElement.setAttribute("stroke-width", "6");
-      }
-    }
-
-    function applyEyes(emotion) {
-      // optional: angry eyebrows effect via eye curve shape
-      if (emotion === "angry") {
-        eyeL.setAttribute("d", "M22 42 C 32 30, 42 34, 48 42");
-        eyeR.setAttribute("d", "M52 42 C 58 34, 68 30, 78 42");
-      } else if (emotion === "sad") {
-        eyeL.setAttribute("d", "M22 40 C 30 34, 40 30, 48 40");
-        eyeR.setAttribute("d", "M52 40 C 60 30, 70 34, 78 40");
-      } else {
-        // default
-        eyeL.setAttribute("d", "M22 40 C 30 30, 40 30, 48 40");
-        eyeR.setAttribute("d", "M52 40 C 60 30, 70 30, 78 40");
-      }
-    }
-
-    function render() {
-      btnControl.textContent = state.emotion; // /control link text = aktuelle Emotion
-      applyLook(state.look);
-      applyEyes(state.emotion);
-      applyMouth(state.emotion, state.mouth);
-    }
-
-    // --- WebSocket hookup (adjust WS_URL to your setup) ---
-    // Typical options:
-    // 1) Direct: ws://<pi-ip>:8001/ws
-    // 2) Via nginx: wss://<host>/face-ws
-    const WS_URL = (() => {
-      // Default: same host, path /ws
-      const proto = (location.protocol === "https:") ? "wss:" : "ws:";
-      return `${proto}//${location.host}/ws`;
-    })();
-
-    let ws = null;
-    let wsBackoffMs = 300;
-
-    function connectWs() {
-      try { ws?.close(); } catch {}
-      ws = new WebSocket(WS_URL);
-
-      ws.onopen = () => { wsBackoffMs = 300; };
-      ws.onmessage = (ev) => {
-        try {
-          const msg = JSON.parse(ev.data);
-
-          // accept either:
-          // - {type:"state", state:{...}}
-          // - {state:{...}}
-          // - direct state object
-          const incoming = msg?.state ?? (msg?.type === "state" ? msg.state : msg);
-
-          if (incoming && typeof incoming === "object") {
-            Object.assign(state, incoming);
-            render();
-          }
-        } catch (e) {
-          // ignore malformed messages
-        }
-      };
-      ws.onclose = () => {
-        setTimeout(connectWs, wsBackoffMs);
-        wsBackoffMs = Math.min(wsBackoffMs * 1.7, 8000);
-      };
-      ws.onerror = () => {
-        try { ws.close(); } catch {}
-      };
-    }
-
-    render();
-    connectWs();
-  </script>
+  <script src="/static/face.js"></script>
 </body>
 </html>
 
-
