Max/helva-robot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

additional new face stuff

Browse Source
This commit is contained in:
max
2026-02-08 21:22:52 +01:00
parent 34756be2de
commit 3d5b5704f5
4 changed files with 535 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
face/var/www/html/index.html
+74 -96
View File
@@ -3,112 +3,90 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<title>Helva Face Display</title>
<link rel="stylesheet" href="/static/style.css" />
<title>Face</title>
<link rel="stylesheet" href="/face.css" />
</head>
<body>
<div class="stage" id="stage">
<div class="hint">Tippe, um Drive &amp; Control zu sehen</div>
<div class="stage" id="stage" aria-label="robot face">
<svg class="face" viewBox="0 0 1000 600" role="img" aria-label="face">
<defs>
<filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
<feGaussianBlur stdDeviation="7" result="b"/>
<feMerge>
<feMergeNode in="b"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="glowStrong" x="-90%" y="-90%" width="280%" height="280%">
<feGaussianBlur stdDeviation="12" result="b2"/>
<feMerge>
<feMergeNode in="b2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</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>
<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>
<!-- subtle gloss sweep (like your sticker reference) -->
<path
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"
/>
<!-- 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>
<!-- top neon bar -->
<g id="topbar" filter="url(#glow)">
<path
d="M340,120
Q500,70 660,120
Q680,130 670,150
Q650,190 500,190
Q350,190 330,150
Q320,130 340,120Z"
fill="none"
stroke="rgba(120,255,235,0.55)"
stroke-width="18"
stroke-linecap="round"
stroke-linejoin="round"
/>
<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>
<!-- 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)"/>
<!-- face line art -->
<g id="faceGroup" filter="url(#glow)">
<g id="eyesGroup">
<path id="eyeL" d="" />
<path id="eyeR" d="" />
</g>
<path id="mouth" d="" />
</g>
</svg>
<!-- 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>
<!-- 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>
<!-- Touch-only overlay (ONLY TWO LINKS) -->
<div class="overlay" id="overlay" aria-hidden="true">
<a class="btn" href="/drive">🚗 Drive</a>
<a class="btn" id="controlLink" href="/control">🎛️ Control: <span id="emotionLabel">neutral</span></a>
</div>
</div>
<script src="/static/face.js"></script>
<script src="/face.js"></script>
</body>
</html>