D4rkst3r/d4rk_divegear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
30c40c9f69a051368d57b989b236c1ef343a6346
d4rk_divegear/docs/hud-kritisch.svg
T
D4rkst3randClaude Opus 5 30c40c9f69 feat(hud): Dreier-Konsole mit Finimeter und Tiefenmesser 
Statt zweier Zahlenfelder jetzt zwei Zeigerinstrumente links und rechts vom
Luft-Ring - wie eine echte Tauchkonsole. Der Ring bleibt in der Mitte, weil die
Restzeit die Zahl ist, auf die es ankommt.

- Finimeter 0-300 bar, roter Bereich = Reserve unter reservePressure
- Tiefenmesser 0-depthDialMax, roter Bereich = Tiefengrenze des Atemgases. Der
  faengt bei Pressluft bei 45 m an und bei Trimix erst bei 100 m - der
  Gefahrenbereich haengt also an der getragenen Flasche. Gibt es real nicht,
  hilft im Spiel aber sofort beim Einschaetzen
- Skalenzahlen bewusst weggelassen: bei 96 px kollidieren sie mit allem und
  liest ohnehin niemand. Zeiger zeigt die Tendenz, die Zahl in der Uhr den Wert
- Zeiger und Wert faerben sich rot, sobald der rote Bereich erreicht ist

Beim Bauen gefunden: CSS transform-origin auf dem Zeiger wird zusaetzlich zum
rotate(winkel 50 50) im Attribut angewendet, der Drehpunkt wandert dadurch
doppelt und der Zeiger landet ausserhalb der Uhr. transform-origin ist raus.

README-Renderings auf die Konsole umgebaut.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-11 09:55:45 +02:00

27 lines
5.4 KiB
XML
Raw Blame History

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 239" width="560" height="239" role="img" aria-label="Tauch-HUD: unter der Tiefengrenze des Atemgases">
<defs>
<linearGradient id="water" x1="0" y1="0" x2="0.6" y2="1">
<stop offset="0%" stop-color="#0d3550"/>
<stop offset="100%" stop-color="#071a26"/>
</linearGradient>
</defs>
<rect width="560" height="239" fill="url(#water)"/>
<rect x="98" y="35" width="364" height="169" rx="16" fill="#09121c" fill-opacity="0.72" stroke="#94a3b8" stroke-opacity="0.18"/>
<circle cx="166" cy="97" r="44.16" fill="#0b1622" stroke="#94a3b8" stroke-opacity="0.25" stroke-width="1.5"/><path d="M 138.85 124.15 A 38.4 38.4 0 0 1 127.6 97" fill="none" stroke="#f87171" stroke-width="3.5" stroke-opacity="0.9"/><line x1="141.56" y1="121.44" x2="146.31" y2="116.69" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="133.13" y1="107.68" x2="136.78" y2="106.49" stroke="#cbd5e1" stroke-opacity="0.4" stroke-width="1"/><line x1="131.87" y1="91.59" x2="138.5" y2="92.64" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="138.04" y1="76.69" x2="141.15" y2="78.94" stroke="#cbd5e1" stroke-opacity="0.4" stroke-width="1"/><line x1="150.31" y1="66.21" x2="153.36" y2="72.19" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="166" y1="62.44" x2="166" y2="66.28" stroke="#cbd5e1" stroke-opacity="0.4" stroke-width="1"/><line x1="181.69" y1="66.21" x2="178.64" y2="72.19" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="193.96" y1="76.69" x2="190.85" y2="78.94" stroke="#cbd5e1" stroke-opacity="0.4" stroke-width="1"/><line x1="200.13" y1="91.59" x2="193.5" y2="92.64" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="198.87" y1="107.68" x2="195.22" y2="106.49" stroke="#cbd5e1" stroke-opacity="0.4" stroke-width="1"/><line x1="190.44" y1="121.44" x2="185.69" y2="116.69" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="172.42" y1="92.78" x2="139.52" y2="114.39" stroke="#f87171" stroke-width="2.6" stroke-linecap="round"/><circle cx="166" cy="97" r="3.26" fill="#f87171"/><text x="166" y="119" text-anchor="middle" font-size="16" font-weight="700" fill="#f87171" font-family="'Segoe UI',Roboto,system-ui,sans-serif">13<tspan font-size="10" font-weight="500" fill="#94a3b8" dx="2">bar</tspan></text><text x="166" y="158" text-anchor="middle" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8" font-family="'Segoe UI',Roboto,system-ui,sans-serif">DRUCK</text>
<g transform="rotate(-90 280 105)">
<circle cx="280" cy="105" r="39.87" fill="none" stroke="#94a3b8" stroke-opacity="0.16" stroke-width="6.13" stroke-linecap="round"/>
<circle cx="280" cy="105" r="39.87" fill="none" stroke="#f87171" stroke-width="6.13" stroke-linecap="round" stroke-dasharray="250.49" stroke-dashoffset="239.91"/>
</g>
<text x="280" y="104" text-anchor="middle" font-size="21" font-weight="600" fill="#f87171" font-family="'Segoe UI',Roboto,system-ui,sans-serif">00:38</text>
<text x="280" y="120" text-anchor="middle" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8" font-family="'Segoe UI',Roboto,system-ui,sans-serif">LUFT</text>
<circle cx="394" cy="97" r="44.16" fill="#0b1622" stroke="#94a3b8" stroke-opacity="0.25" stroke-width="1.5"/><path d="M 385.04 59.66 A 38.4 38.4 0 0 1 421.15 124.15" fill="none" stroke="#f87171" stroke-width="3.5" stroke-opacity="0.9"/><line x1="369.56" y1="121.44" x2="374.31" y2="116.69" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="361.13" y1="107.68" x2="364.78" y2="106.49" stroke="#cbd5e1" stroke-opacity="0.4" stroke-width="1"/><line x1="359.87" y1="91.59" x2="366.5" y2="92.64" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="366.04" y1="76.69" x2="369.15" y2="78.94" stroke="#cbd5e1" stroke-opacity="0.4" stroke-width="1"/><line x1="378.31" y1="66.21" x2="381.36" y2="72.19" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="394" y1="62.44" x2="394" y2="66.28" stroke="#cbd5e1" stroke-opacity="0.4" stroke-width="1"/><line x1="409.69" y1="66.21" x2="406.64" y2="72.19" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="421.96" y1="76.69" x2="418.85" y2="78.94" stroke="#cbd5e1" stroke-opacity="0.4" stroke-width="1"/><line x1="428.13" y1="91.59" x2="421.5" y2="92.64" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="426.87" y1="107.68" x2="423.22" y2="106.49" stroke="#cbd5e1" stroke-opacity="0.4" stroke-width="1"/><line x1="418.44" y1="121.44" x2="413.69" y2="116.69" stroke="#cbd5e1" stroke-opacity="0.85" stroke-width="1.6"/><line x1="393.13" y1="104.63" x2="397.58" y2="65.52" stroke="#f87171" stroke-width="2.6" stroke-linecap="round"/><circle cx="394" cy="97" r="3.26" fill="#f87171"/><text x="394" y="119" text-anchor="middle" font-size="16" font-weight="700" fill="#f87171" font-family="'Segoe UI',Roboto,system-ui,sans-serif">52.4<tspan font-size="10" font-weight="500" fill="#94a3b8" dx="2">m</tspan></text><text x="394" y="158" text-anchor="middle" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8" font-family="'Segoe UI',Roboto,system-ui,sans-serif">TIEFE</text>
<rect x="237" y="167" width="86" height="23" rx="8" fill="#38bdf8" fill-opacity="0.15"/>
<circle cx="251" cy="178.5" r="4" fill="#38bdf8"/>
<text x="261" y="182" font-size="10" font-weight="600" letter-spacing="1.2" fill="#38bdf8" font-family="'Segoe UI',Roboto,system-ui,sans-serif">LAMPE</text>
</svg>
Reference in New Issue View Git Blame Copy Permalink