additional new face stuff
This commit is contained in:
max
parent
34756be2de
commit
3d5b5704f5
|
|
@ -0,0 +1,77 @@
|
||||||
|
:root{
|
||||||
|
--panel:#0b1020cc;
|
||||||
|
--text:#e8f0ff;
|
||||||
|
--shadow: 0 12px 40px rgba(0,0,0,.55);
|
||||||
|
--r: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: #000;
|
||||||
|
touch-action: manipulation;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.face {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch-only overlay with two links */
|
||||||
|
.overlay{
|
||||||
|
position: fixed;
|
||||||
|
left: max(12px, env(safe-area-inset-left));
|
||||||
|
right: max(12px, env(safe-area-inset-right));
|
||||||
|
bottom: max(12px, env(safe-area-inset-bottom));
|
||||||
|
display:flex;
|
||||||
|
gap:10px;
|
||||||
|
justify-content:flex-start;
|
||||||
|
align-items:center;
|
||||||
|
|
||||||
|
background: var(--panel);
|
||||||
|
border: 1px solid rgba(255,255,255,.10);
|
||||||
|
border-radius: var(--r);
|
||||||
|
padding: 10px 12px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
|
||||||
|
opacity:0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
pointer-events:none;
|
||||||
|
transition: opacity .18s ease, transform .18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay.show{
|
||||||
|
opacity:1;
|
||||||
|
transform: translateY(0);
|
||||||
|
pointer-events:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn{
|
||||||
|
appearance:none;
|
||||||
|
border: 1px solid rgba(255,255,255,.14);
|
||||||
|
background: rgba(255,255,255,.06);
|
||||||
|
color: var(--text);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-decoration:none;
|
||||||
|
line-height:1;
|
||||||
|
display:inline-flex;
|
||||||
|
align-items:center;
|
||||||
|
gap:8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn:active{ transform: translateY(1px); }
|
||||||
|
|
||||||
|
|
@ -1,19 +1,389 @@
|
||||||
(function connectSSE(){
|
// Black fullscreen + cyan sticker-style face, plus touch-only 2 links.
|
||||||
|
// State via SSE /events from face_server (nginx proxies /events -> :8001/events)
|
||||||
|
//
|
||||||
|
// Payload example:
|
||||||
|
// {"emotion":"angry","intensity":0.9,"look":{"x":0.9,"y":0.0},"speaking":true}
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
const OVERLAY_TIMEOUT_MS = 3500;
|
||||||
|
|
||||||
|
const clamp = (n,a,b) => Math.max(a, Math.min(b, n));
|
||||||
|
const clamp01 = (v) => {
|
||||||
|
const n = Number(v);
|
||||||
|
if (Number.isNaN(n)) return 0;
|
||||||
|
return clamp(n, 0, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const EMOTIONS = new Set(["neutral","happy","sad","angry","sleepy","surprised","excited"]);
|
||||||
|
|
||||||
|
const state = {
|
||||||
|
emotion: "neutral",
|
||||||
|
intensity: 0.85,
|
||||||
|
look: { x: 0, y: 0 },
|
||||||
|
lookLock: false,
|
||||||
|
speaking: false,
|
||||||
|
eyesMoving: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
// DOM
|
||||||
|
const stage = document.getElementById("stage");
|
||||||
|
const overlay = document.getElementById("overlay");
|
||||||
|
const controlLink = document.getElementById("controlLink");
|
||||||
|
const emotionLabel = document.getElementById("emotionLabel");
|
||||||
|
|
||||||
|
const eyeL = document.getElementById("eyeL");
|
||||||
|
const eyeR = document.getElementById("eyeR");
|
||||||
|
const eyesGroup = document.getElementById("eyesGroup");
|
||||||
|
const mouth = document.getElementById("mouth");
|
||||||
|
|
||||||
|
const topbarLit = document.getElementById("topbarLit");
|
||||||
|
const faceGroup = document.getElementById("faceGroup");
|
||||||
|
|
||||||
|
// Touch overlay show
|
||||||
|
let overlayTimer = null;
|
||||||
|
function showOverlay() {
|
||||||
|
overlay.classList.add("show");
|
||||||
|
clearTimeout(overlayTimer);
|
||||||
|
overlayTimer = setTimeout(() => overlay.classList.remove("show"), OVERLAY_TIMEOUT_MS);
|
||||||
|
}
|
||||||
|
stage.addEventListener("pointerdown", () => showOverlay(), { passive: true });
|
||||||
|
|
||||||
|
// Layout tuned to your reference composition
|
||||||
|
const BASE = {
|
||||||
|
L: { x: 360, y: 300 },
|
||||||
|
R: { x: 640, y: 300 },
|
||||||
|
eyeW: 170,
|
||||||
|
eyeH: 180,
|
||||||
|
lookMaxPx: 28,
|
||||||
|
mouthCx: 500,
|
||||||
|
mouthY: 415,
|
||||||
|
};
|
||||||
|
|
||||||
|
function updateControlLink() {
|
||||||
|
emotionLabel.textContent = state.emotion;
|
||||||
|
controlLink.href = `/control?current=${encodeURIComponent(state.emotion)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyIntensity(intensity) {
|
||||||
|
state.intensity = clamp01(intensity);
|
||||||
|
|
||||||
|
// bar brightness
|
||||||
|
topbarLit.setAttribute("opacity", String(0.35 + state.intensity * 0.65));
|
||||||
|
|
||||||
|
// stronger glow at high intensity
|
||||||
|
faceGroup.setAttribute("filter", state.intensity > 0.8 ? "url(#glowStrong)" : "url(#glow)");
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStroke(el, width) {
|
||||||
|
el.setAttribute("fill", "none");
|
||||||
|
el.setAttribute("stroke", `rgba(120,255,235,${0.86 + 0.14 * state.intensity})`);
|
||||||
|
el.setAttribute("stroke-width", String(width));
|
||||||
|
el.setAttribute("stroke-linecap", "round");
|
||||||
|
el.setAttribute("stroke-linejoin", "round");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- Eye shapes (icon-like) ----
|
||||||
|
function eyeOval(cx, cy, w, h) {
|
||||||
|
const rx = w * 0.30;
|
||||||
|
const ry = h * 0.22;
|
||||||
|
return `M ${cx - rx},${cy}
|
||||||
|
C ${cx - rx},${cy - ry} ${cx - rx*0.35},${cy - ry} ${cx},${cy - ry}
|
||||||
|
C ${cx + rx*0.35},${cy - ry} ${cx + rx},${cy - ry} ${cx + rx},${cy}
|
||||||
|
C ${cx + rx},${cy + ry} ${cx + rx*0.35},${cy + ry} ${cx},${cy + ry}
|
||||||
|
C ${cx - rx*0.35},${cy + ry} ${cx - rx},${cy + ry} ${cx - rx},${cy}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function eyeRound(cx, cy, r) {
|
||||||
|
return `M ${cx - r},${cy}
|
||||||
|
C ${cx - r},${cy - r} ${cx - r*0.2},${cy - r} ${cx},${cy - r}
|
||||||
|
C ${cx + r*0.2},${cy - r} ${cx + r},${cy - r} ${cx + r},${cy}
|
||||||
|
C ${cx + r},${cy + r} ${cx + r*0.2},${cy + r} ${cx},${cy + r}
|
||||||
|
C ${cx - r*0.2},${cy + r} ${cx - r},${cy + r} ${cx - r},${cy}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function eyeSleepLine(cx, cy, w) {
|
||||||
|
const half = w * 0.20;
|
||||||
|
return `M ${cx - half},${cy} L ${cx + half},${cy}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function eyeHappyArc(cx, cy, w) {
|
||||||
|
const half = w * 0.20;
|
||||||
|
const lift = 22;
|
||||||
|
return `M ${cx - half},${cy} Q ${cx},${cy + lift} ${cx + half},${cy}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function eyeAngrySlashL(cx, cy) { return `M ${cx - 60},${cy - 18} L ${cx + 26},${cy + 26}`; }
|
||||||
|
function eyeAngrySlashR(cx, cy) { return `M ${cx + 60},${cy - 18} L ${cx - 26},${cy + 26}`; }
|
||||||
|
|
||||||
|
function eyeSadSmall(cx, cy, w) {
|
||||||
|
const rx = w * 0.16;
|
||||||
|
const ry = 18;
|
||||||
|
const y = cy + 8;
|
||||||
|
return `M ${cx - rx},${y}
|
||||||
|
C ${cx - rx},${y - ry} ${cx - rx*0.35},${y - ry} ${cx},${y - ry}
|
||||||
|
C ${cx + rx*0.35},${y - ry} ${cx + rx},${y - ry} ${cx + rx},${y}
|
||||||
|
C ${cx + rx},${y + ry} ${cx + rx*0.35},${y + ry} ${cx},${y + ry}
|
||||||
|
C ${cx - rx*0.35},${y + ry} ${cx - rx},${y + ry} ${cx - rx},${y}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- Mouth shapes (sticker-like) ----
|
||||||
|
function mouthDot(cx, y) {
|
||||||
|
setStroke(mouth, 24); // thick capsule-dot
|
||||||
|
const half = 14;
|
||||||
|
return `M ${cx - half},${y} L ${cx + half},${y}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouthLine(cx, y, w=170) {
|
||||||
|
setStroke(mouth, 18);
|
||||||
|
const half = w/2;
|
||||||
|
return `M ${cx - half},${y} L ${cx + half},${y}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouthSmile(cx, y, w=190) {
|
||||||
|
setStroke(mouth, 18);
|
||||||
|
const half = w/2;
|
||||||
|
return `M ${cx - half},${y} Q ${cx},${y + 70} ${cx + half},${y}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouthGrin(cx, y) {
|
||||||
|
setStroke(mouth, 18);
|
||||||
|
const w = 220;
|
||||||
|
const half = w/2;
|
||||||
|
return `M ${cx - half},${y}
|
||||||
|
Q ${cx - half*0.15},${y + 70} ${cx},${y + 70}
|
||||||
|
Q ${cx + half*0.15},${y + 70} ${cx + half},${y}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouthFrown(cx, y, w=190) {
|
||||||
|
setStroke(mouth, 18);
|
||||||
|
const half = w/2;
|
||||||
|
return `M ${cx - half},${y + 50} Q ${cx},${y - 25} ${cx + half},${y + 50}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouthO(cx, y) {
|
||||||
|
setStroke(mouth, 18);
|
||||||
|
const r = 38;
|
||||||
|
return eyeRound(cx, y + 10, r);
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouthShout(cx, y) {
|
||||||
|
// filled open mouth with neon outline
|
||||||
|
mouth.setAttribute("stroke", `rgba(120,255,235,${0.90 + 0.10 * state.intensity})`);
|
||||||
|
mouth.setAttribute("stroke-width", "18");
|
||||||
|
mouth.setAttribute("stroke-linecap", "round");
|
||||||
|
mouth.setAttribute("stroke-linejoin", "round");
|
||||||
|
mouth.setAttribute("fill", "rgba(0,0,0,0.38)");
|
||||||
|
|
||||||
|
const wTop = 90, wBot = 150, h = 78;
|
||||||
|
const x1 = cx - wTop/2, x2 = cx + wTop/2;
|
||||||
|
const x3 = cx + wBot/2, x4 = cx - wBot/2;
|
||||||
|
const y1 = y - 10, y2 = y + h;
|
||||||
|
return `M ${x1},${y1} L ${x2},${y1} L ${x3},${y2} L ${x4},${y2} Z`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// speaking animation overlays ANY mouth shape
|
||||||
|
let speakTimer = null;
|
||||||
|
function startSpeaking() {
|
||||||
|
stopSpeaking();
|
||||||
|
let open = false;
|
||||||
|
const base = state.emotion === "excited" ? 85 : (state.emotion === "sleepy" ? 170 : 115);
|
||||||
|
|
||||||
|
speakTimer = setInterval(() => {
|
||||||
|
if (!state.speaking) return;
|
||||||
|
open = !open;
|
||||||
|
const amp = 0.10 + 0.18 * state.intensity;
|
||||||
|
const sy = 1 + amp * (open ? 1 : -0.35);
|
||||||
|
const ty = open ? 5 : 0;
|
||||||
|
mouth.setAttribute("transform", `translate(0,${ty}) scale(1,${sy})`);
|
||||||
|
}, base);
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopSpeaking() {
|
||||||
|
if (speakTimer) clearInterval(speakTimer);
|
||||||
|
speakTimer = null;
|
||||||
|
mouth.setAttribute("transform", "");
|
||||||
|
}
|
||||||
|
|
||||||
|
// blink by temporarily switching to sleepy lines
|
||||||
|
let blinkTimer = null;
|
||||||
|
let blinking = false;
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
// look -> subtle move of the whole eyesGroup (keeps sticker look)
|
||||||
|
const lookX = clamp(state.look.x, -1, 1);
|
||||||
|
const lookY = clamp(state.look.y, -1, 1);
|
||||||
|
|
||||||
|
const iconLocked = (state.emotion === "angry" || state.emotion === "happy" || state.emotion === "sleepy");
|
||||||
|
const lookScale = iconLocked ? 0.20 : 1.0;
|
||||||
|
|
||||||
|
const dx = lookX * BASE.lookMaxPx * lookScale;
|
||||||
|
const dy = lookY * BASE.lookMaxPx * lookScale;
|
||||||
|
eyesGroup.setAttribute("transform", `translate(${dx},${dy})`);
|
||||||
|
|
||||||
|
// eyes styling
|
||||||
|
setStroke(eyeL, state.emotion === "excited" ? 22 : 20);
|
||||||
|
setStroke(eyeR, state.emotion === "excited" ? 22 : 20);
|
||||||
|
|
||||||
|
const emo = state.emotion;
|
||||||
|
const useBlink = blinking && emo !== "sleepy";
|
||||||
|
|
||||||
|
if (useBlink) {
|
||||||
|
eyeL.setAttribute("d", eyeSleepLine(BASE.L.x, BASE.L.y + 10, BASE.eyeW));
|
||||||
|
eyeR.setAttribute("d", eyeSleepLine(BASE.R.x, BASE.R.y + 10, BASE.eyeW));
|
||||||
|
} else {
|
||||||
|
switch (emo) {
|
||||||
|
case "happy":
|
||||||
|
eyeL.setAttribute("d", eyeHappyArc(BASE.L.x, BASE.L.y, BASE.eyeW));
|
||||||
|
eyeR.setAttribute("d", eyeHappyArc(BASE.R.x, BASE.R.y, BASE.eyeW));
|
||||||
|
break;
|
||||||
|
case "angry":
|
||||||
|
eyeL.setAttribute("d", eyeAngrySlashL(BASE.L.x, BASE.L.y));
|
||||||
|
eyeR.setAttribute("d", eyeAngrySlashR(BASE.R.x, BASE.R.y));
|
||||||
|
break;
|
||||||
|
case "sleepy":
|
||||||
|
eyeL.setAttribute("d", eyeSleepLine(BASE.L.x, BASE.L.y + 10, BASE.eyeW));
|
||||||
|
eyeR.setAttribute("d", eyeSleepLine(BASE.R.x, BASE.R.y + 10, BASE.eyeW));
|
||||||
|
break;
|
||||||
|
case "surprised":
|
||||||
|
eyeL.setAttribute("d", eyeRound(BASE.L.x, BASE.L.y, 40));
|
||||||
|
eyeR.setAttribute("d", eyeRound(BASE.R.x, BASE.R.y, 40));
|
||||||
|
break;
|
||||||
|
case "excited":
|
||||||
|
eyeL.setAttribute("d", eyeRound(BASE.L.x, BASE.L.y - 6, 46));
|
||||||
|
eyeR.setAttribute("d", eyeRound(BASE.R.x, BASE.R.y - 6, 46));
|
||||||
|
break;
|
||||||
|
case "sad":
|
||||||
|
eyeL.setAttribute("d", eyeSadSmall(BASE.L.x, BASE.L.y, BASE.eyeW));
|
||||||
|
eyeR.setAttribute("d", eyeSadSmall(BASE.R.x, BASE.R.y, BASE.eyeW));
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
eyeL.setAttribute("d", eyeOval(BASE.L.x, BASE.L.y, BASE.eyeW, BASE.eyeH));
|
||||||
|
eyeR.setAttribute("d", eyeOval(BASE.R.x, BASE.R.y, BASE.eyeW, BASE.eyeH));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// mouth mapping
|
||||||
|
switch (emo) {
|
||||||
|
case "neutral":
|
||||||
|
mouth.setAttribute("d", mouthDot(BASE.mouthCx, BASE.mouthY + 20));
|
||||||
|
break;
|
||||||
|
case "happy":
|
||||||
|
mouth.setAttribute("d", state.intensity > 0.75 ? mouthGrin(BASE.mouthCx, BASE.mouthY) : mouthSmile(BASE.mouthCx, BASE.mouthY, 190));
|
||||||
|
break;
|
||||||
|
case "excited":
|
||||||
|
mouth.setAttribute("d", mouthGrin(BASE.mouthCx, BASE.mouthY - 6));
|
||||||
|
break;
|
||||||
|
case "sad":
|
||||||
|
mouth.setAttribute("d", mouthFrown(BASE.mouthCx, BASE.mouthY - 6, 190));
|
||||||
|
break;
|
||||||
|
case "angry":
|
||||||
|
mouth.setAttribute("d", mouthShout(BASE.mouthCx, BASE.mouthY - 12));
|
||||||
|
break;
|
||||||
|
case "sleepy":
|
||||||
|
mouth.setAttribute("d", mouthLine(BASE.mouthCx, BASE.mouthY + 26, 170));
|
||||||
|
break;
|
||||||
|
case "surprised":
|
||||||
|
mouth.setAttribute("d", mouthO(BASE.mouthCx, BASE.mouthY - 6));
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
mouth.setAttribute("d", mouthLine(BASE.mouthCx, BASE.mouthY + 20, 170));
|
||||||
|
}
|
||||||
|
|
||||||
|
// top bar color hint
|
||||||
|
if (emo === "angry") topbarLit.setAttribute("stroke", "rgba(255,107,107,0.95)");
|
||||||
|
else if (emo === "sad" || emo === "sleepy") topbarLit.setAttribute("stroke", "rgba(120,200,255,0.95)");
|
||||||
|
else topbarLit.setAttribute("stroke", "rgba(120,255,235,0.95)");
|
||||||
|
|
||||||
|
updateControlLink();
|
||||||
|
}
|
||||||
|
|
||||||
|
function scheduleBlink() {
|
||||||
|
clearTimeout(blinkTimer);
|
||||||
|
const base = state.emotion === "sleepy" ? 5200 : (state.emotion === "excited" ? 2000 : 2800);
|
||||||
|
blinkTimer = setTimeout(() => {
|
||||||
|
blinking = true;
|
||||||
|
render();
|
||||||
|
setTimeout(() => {
|
||||||
|
blinking = false;
|
||||||
|
render();
|
||||||
|
scheduleBlink();
|
||||||
|
}, 140);
|
||||||
|
}, base + Math.random() * 2200);
|
||||||
|
}
|
||||||
|
|
||||||
|
let driftTimer = null;
|
||||||
|
function scheduleDrift() {
|
||||||
|
clearTimeout(driftTimer);
|
||||||
|
if (state.lookLock) return;
|
||||||
|
if (!state.eyesMoving) return;
|
||||||
|
|
||||||
|
const iconLocked = (state.emotion === "angry" || state.emotion === "happy" || state.emotion === "sleepy");
|
||||||
|
if (iconLocked) return;
|
||||||
|
|
||||||
|
state.look = {
|
||||||
|
x: (Math.random() * 2 - 1) * 0.5,
|
||||||
|
y: (Math.random() * 2 - 1) * 0.35,
|
||||||
|
};
|
||||||
|
render();
|
||||||
|
driftTimer = setTimeout(scheduleDrift, 900 + Math.random() * 900);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public API
|
||||||
|
window.applyFaceState = (payload) => {
|
||||||
|
if (!payload || typeof payload !== "object") return;
|
||||||
|
|
||||||
|
if (payload.intensity !== undefined) applyIntensity(payload.intensity);
|
||||||
|
if (typeof payload.emotion === "string") state.emotion = EMOTIONS.has(payload.emotion) ? payload.emotion : "neutral";
|
||||||
|
|
||||||
|
if (payload.look && typeof payload.look === "object") {
|
||||||
|
state.look = {
|
||||||
|
x: clamp(Number(payload.look.x ?? 0), -1, 1),
|
||||||
|
y: clamp(Number(payload.look.y ?? 0), -1, 1),
|
||||||
|
};
|
||||||
|
state.lookLock = true;
|
||||||
|
} else {
|
||||||
|
state.lookLock = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof payload.speaking === "boolean") state.speaking = payload.speaking;
|
||||||
|
if (typeof payload.eyesMoving === "boolean") state.eyesMoving = payload.eyesMoving;
|
||||||
|
|
||||||
|
render();
|
||||||
|
scheduleBlink();
|
||||||
|
if (!state.lookLock && state.eyesMoving) scheduleDrift();
|
||||||
|
|
||||||
|
if (state.speaking) startSpeaking(); else stopSpeaking();
|
||||||
|
};
|
||||||
|
|
||||||
|
// SSE /events
|
||||||
|
(function connectSSE(){
|
||||||
let es;
|
let es;
|
||||||
function open() {
|
function open() {
|
||||||
es = new EventSource("/events");
|
es = new EventSource("/events");
|
||||||
es.onopen = () => window.setConnected(true);
|
|
||||||
|
|
||||||
|
// server recommended: event: state
|
||||||
es.addEventListener("state", (ev) => {
|
es.addEventListener("state", (ev) => {
|
||||||
try { window.applyFaceState(JSON.parse(ev.data)); } catch (_) {}
|
try { window.applyFaceState(JSON.parse(ev.data)); } catch (_) {}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// fallback for plain data:
|
||||||
|
es.onmessage = (ev) => {
|
||||||
|
try { window.applyFaceState(JSON.parse(ev.data)); } catch (_) {}
|
||||||
|
};
|
||||||
|
|
||||||
es.onerror = () => {
|
es.onerror = () => {
|
||||||
window.setConnected(false);
|
|
||||||
try { es.close(); } catch (_) {}
|
try { es.close(); } catch (_) {}
|
||||||
setTimeout(open, 1200);
|
setTimeout(open, 1200);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
open();
|
open();
|
||||||
|
})();
|
||||||
|
|
||||||
|
// Init default
|
||||||
|
applyIntensity(state.intensity);
|
||||||
|
updateControlLink();
|
||||||
|
render();
|
||||||
|
scheduleBlink();
|
||||||
|
scheduleDrift();
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,112 +3,90 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||||
<title>Helva Face Display</title>
|
<title>Face</title>
|
||||||
<link rel="stylesheet" href="/static/style.css" />
|
<link rel="stylesheet" href="/face.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="stage" id="stage">
|
<div class="stage" id="stage" aria-label="robot face">
|
||||||
<div class="hint">Tippe, um Drive & Control zu sehen</div>
|
<svg class="face" viewBox="0 0 1000 600" role="img" aria-label="face">
|
||||||
|
|
||||||
<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>
|
<defs>
|
||||||
<!-- screen glass gradient -->
|
<filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
|
||||||
<linearGradient id="glass" x1="0" x2="1" y1="0" y2="1">
|
<feGaussianBlur stdDeviation="7" result="b"/>
|
||||||
<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>
|
<feMerge>
|
||||||
<feMergeNode in="b"/>
|
<feMergeNode in="b"/>
|
||||||
<feMergeNode in="SourceGraphic"/>
|
<feMergeNode in="SourceGraphic"/>
|
||||||
</feMerge>
|
</feMerge>
|
||||||
</filter>
|
</filter>
|
||||||
|
<filter id="glowStrong" x="-90%" y="-90%" width="280%" height="280%">
|
||||||
<!-- stronger glow (intensity) -->
|
<feGaussianBlur stdDeviation="12" result="b2"/>
|
||||||
<filter id="neonGlowStrong" x="-80%" y="-80%" width="260%" height="260%">
|
|
||||||
<feGaussianBlur stdDeviation="10" result="b2"/>
|
|
||||||
<feMerge>
|
<feMerge>
|
||||||
<feMergeNode in="b2"/>
|
<feMergeNode in="b2"/>
|
||||||
<feMergeNode in="SourceGraphic"/>
|
<feMergeNode in="SourceGraphic"/>
|
||||||
</feMerge>
|
</feMerge>
|
||||||
</filter>
|
</filter>
|
||||||
|
<linearGradient id="shine" x1="0" x2="1">
|
||||||
|
<stop offset="0" stop-color="rgba(255,255,255,0.22)"/>
|
||||||
|
<stop offset="1" stop-color="rgba(255,255,255,0.00)"/>
|
||||||
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<!-- outer screen frame -->
|
<!-- subtle gloss sweep (like your sticker reference) -->
|
||||||
<rect x="35" y="35" width="730" height="390" rx="70"
|
<path
|
||||||
fill="#05070c" stroke="rgba(255,255,255,0.10)" stroke-width="6"/>
|
d="M120,140 C260,90 520,90 820,150
|
||||||
|
C760,220 520,240 300,220
|
||||||
|
C200,210 140,185 120,140Z"
|
||||||
|
fill="url(#shine)" opacity="0.35"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- inner glass -->
|
<!-- top neon bar -->
|
||||||
<rect x="75" y="75" width="650" height="310" rx="52"
|
<g id="topbar" filter="url(#glow)">
|
||||||
fill="url(#glass)" stroke="rgba(255,255,255,0.06)" stroke-width="4"/>
|
<path
|
||||||
|
d="M340,120
|
||||||
<!-- big gloss sweep (like the sticker example) -->
|
Q500,70 660,120
|
||||||
<path d="M115,110 C220,85 420,85 620,125
|
Q680,130 670,150
|
||||||
C590,160 430,180 250,165
|
Q650,190 500,190
|
||||||
C170,158 125,142 115,110Z"
|
Q350,190 330,150
|
||||||
fill="url(#gloss)" opacity="0.55"/>
|
Q320,130 340,120Z"
|
||||||
|
fill="none"
|
||||||
<!-- top light bar -->
|
stroke="rgba(120,255,235,0.55)"
|
||||||
<g id="topbar">
|
stroke-width="18"
|
||||||
<rect x="260" y="92" width="280" height="34" rx="17"
|
stroke-linecap="round"
|
||||||
fill="rgba(120,255,235,0.20)"/>
|
stroke-linejoin="round"
|
||||||
<rect id="topbarLit" x="275" y="98" width="250" height="22" rx="11"
|
/>
|
||||||
fill="rgba(120,255,235,0.95)" filter="url(#neonGlow)"/>
|
<path id="topbarLit"
|
||||||
|
d="M360,128
|
||||||
|
Q500,90 640,128
|
||||||
|
Q655,136 648,148
|
||||||
|
Q630,176 500,176
|
||||||
|
Q370,176 352,148
|
||||||
|
Q345,136 360,128Z"
|
||||||
|
fill="none"
|
||||||
|
stroke="rgba(120,255,235,0.95)"
|
||||||
|
stroke-width="14"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
opacity="0.85"
|
||||||
|
/>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<!-- FACE LAYER (cyan line art) -->
|
<!-- face line art -->
|
||||||
<g id="face" filter="url(#neonGlow)">
|
<g id="faceGroup" filter="url(#glow)">
|
||||||
<!-- eyes container (we move this for look.x/y) -->
|
|
||||||
<g id="eyesGroup">
|
<g id="eyesGroup">
|
||||||
<!-- Left eye -->
|
|
||||||
<path id="eyeL" d="" />
|
<path id="eyeL" d="" />
|
||||||
<!-- Right eye -->
|
|
||||||
<path id="eyeR" d="" />
|
<path id="eyeR" d="" />
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<!-- mouth -->
|
|
||||||
<path id="mouth" d="" />
|
<path id="mouth" d="" />
|
||||||
</g>
|
</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>
|
</svg>
|
||||||
|
|
||||||
<!-- Touch-only overlay -->
|
<!-- Touch-only overlay (ONLY TWO LINKS) -->
|
||||||
<div class="overlay" id="overlay">
|
<div class="overlay" id="overlay" aria-hidden="true">
|
||||||
<div class="left">
|
|
||||||
<a class="btn" href="/drive">🚗 Drive</a>
|
<a class="btn" href="/drive">🚗 Drive</a>
|
||||||
<a class="btn" href="/control" id="controlLink">🎛️ Control: <span id="emotionLabel">neutral</span></a>
|
<a class="btn" id="controlLink" href="/control">🎛️ 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/static/face.js"></script>
|
<script src="/face.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,139 +0,0 @@
|
||||||
:root{
|
|
||||||
--bg:#000;
|
|
||||||
--panel:#0b1020cc;
|
|
||||||
--text:#e8f0ff;
|
|
||||||
--muted:#a8b6d8;
|
|
||||||
--accent:#7cffc9;
|
|
||||||
--accent2:#7cb7ff;
|
|
||||||
--danger:#ff6b6b;
|
|
||||||
--shadow: 0 12px 40px rgba(0,0,0,.55);
|
|
||||||
--r: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,body{
|
|
||||||
height:100%;
|
|
||||||
margin:0;
|
|
||||||
background:var(--bg);
|
|
||||||
color:var(--text);
|
|
||||||
font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage{
|
|
||||||
position:fixed; inset:0;
|
|
||||||
display:grid; place-items:center;
|
|
||||||
overflow:hidden;
|
|
||||||
touch-action:manipulation;
|
|
||||||
user-select:none;
|
|
||||||
background:#000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hint{
|
|
||||||
position:fixed;
|
|
||||||
top: max(10px, env(safe-area-inset-top));
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
text-align:center;
|
|
||||||
opacity:.55;
|
|
||||||
font-size:12px;
|
|
||||||
color:var(--muted);
|
|
||||||
pointer-events:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.displayWrap{
|
|
||||||
width:min(96vw, 720px);
|
|
||||||
aspect-ratio: 520 / 360;
|
|
||||||
position:relative;
|
|
||||||
display:grid; place-items:center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display{
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
display:block;
|
|
||||||
filter: drop-shadow(0 18px 40px rgba(0,0,0,.70));
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Touch overlay */
|
|
||||||
.overlay{
|
|
||||||
position:absolute;
|
|
||||||
left: max(12px, env(safe-area-inset-left));
|
|
||||||
right: max(12px, env(safe-area-inset-right));
|
|
||||||
bottom: max(12px, env(safe-area-inset-bottom));
|
|
||||||
display:flex;
|
|
||||||
gap:10px;
|
|
||||||
align-items:center;
|
|
||||||
justify-content:space-between;
|
|
||||||
background:var(--panel);
|
|
||||||
border:1px solid rgba(255,255,255,.10);
|
|
||||||
border-radius: var(--r);
|
|
||||||
padding:10px 12px;
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
opacity:0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
pointer-events:none;
|
|
||||||
transition: opacity .18s ease, transform .18s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay.show{
|
|
||||||
opacity:1;
|
|
||||||
transform: translateY(0);
|
|
||||||
pointer-events:auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay .left,
|
|
||||||
.overlay .right{
|
|
||||||
display:flex;
|
|
||||||
gap:10px;
|
|
||||||
align-items:center;
|
|
||||||
flex-wrap:wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.btn, button.btn{
|
|
||||||
appearance:none;
|
|
||||||
border:1px solid rgba(255,255,255,.14);
|
|
||||||
background: rgba(255,255,255,.06);
|
|
||||||
color:var(--text);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding:10px 12px;
|
|
||||||
font-size:14px;
|
|
||||||
text-decoration:none;
|
|
||||||
line-height:1;
|
|
||||||
display:inline-flex;
|
|
||||||
align-items:center;
|
|
||||||
gap:8px;
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.btn:active, button.btn:active{ transform: translateY(1px); }
|
|
||||||
|
|
||||||
.pill{
|
|
||||||
font-size:12px;
|
|
||||||
color:var(--muted);
|
|
||||||
padding:8px 10px;
|
|
||||||
border-radius:999px;
|
|
||||||
border:1px solid rgba(255,255,255,.12);
|
|
||||||
background: rgba(255,255,255,.04);
|
|
||||||
display:inline-flex;
|
|
||||||
align-items:center;
|
|
||||||
gap:8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot{
|
|
||||||
width:9px;
|
|
||||||
height:9px;
|
|
||||||
border-radius:99px;
|
|
||||||
background: var(--accent2);
|
|
||||||
box-shadow: 0 0 0 3px rgba(124,183,255,.15);
|
|
||||||
}
|
|
||||||
.dot.on{
|
|
||||||
background: var(--accent);
|
|
||||||
box-shadow: 0 0 0 3px rgba(124,255,201,.15);
|
|
||||||
}
|
|
||||||
.dot.off{
|
|
||||||
background: var(--danger);
|
|
||||||
box-shadow: 0 0 0 3px rgba(255,107,107,.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue