additional new face stuff
This commit is contained in:
max
parent
c296d4e950
commit
34756be2de
|
|
@ -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 & 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 -->
|
||||
<g class="stroke" stroke-width="6">
|
||||
<path id="mouth" d="M30 68 C 40 76, 60 76, 70 68" />
|
||||
<!-- mouth -->
|
||||
<path id="mouth" d="" />
|
||||
</g>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue