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>
This commit is contained in:
2026-08-11 09:55:45 +02:00
co-authored by Claude Opus 5
parent 64b2549cf9
commit 30c40c9f69
10 changed files with 404 additions and 201 deletions
+86 -48
View File
@@ -1,6 +1,6 @@
#!/usr/bin/env node
// Erzeugt die HUD-Renderings für die README aus denselben Werten wie nui/style.css.
// Keine In-Game-Screenshots - eine massstabsgetreue Nachbildung des Overlays.
// Keine In-Game-Screenshots - eine massstabsgetreue Nachbildung der Konsole.
//
// Nutzung: node docs/gen-hud-svg.mjs [ziel-ordner] (default: docs)
@@ -17,44 +17,78 @@ const C = {
text: '#e2e8f0',
muted: '#94a3b8',
panel: '#09121c',
border: '#94a3b8'
face: '#0b1622'
};
// Geometrie spiegelt das Grid aus style.css:
// padding 14/22, Spalten 84 | 92 | 84 mit column-gap 22, row-gap 8, Lampe 23 hoch.
const PAD_X = 22, PAD_Y = 14, COL = 84, GAUGE = 92, GAP = 22, ROW_GAP = 8, LAMP_H = 23;
const PW = PAD_X * 2 + COL * 2 + GAUGE + GAP * 2;
const PH = PAD_Y * 2 + GAUGE + ROW_GAP + LAMP_H;
const F = "'Segoe UI',Roboto,system-ui,sans-serif";
const W = 520, H = PH + 70;
// Masse spiegeln das Grid aus style.css: padding 14/20, column-gap 20,
// Uhr 96, Ring 92, Beschriftung darunter, Lampe in Zeile 2.
const PAD_X = 20, PAD_Y = 14, DIAL = 96, GAUGE = 92, GAP = 20;
const ROW1 = 112, ROW_GAP = 6, LAMP_H = 23;
const PW = PAD_X * 2 + DIAL * 2 + GAUGE + GAP * 2;
const PH = PAD_Y * 2 + ROW1 + ROW_GAP + LAMP_H;
const W = 560, H = PH + 70;
const PX = (W - PW) / 2, PY = (H - PH) / 2;
const GX = PX + PAD_X + COL + GAP;
const CX = GX + GAUGE / 2, CY = PY + PAD_Y + GAUGE / 2;
const LEFT_CX = PX + PAD_X + DIAL / 2;
const RIGHT_CX = PX + PW - PAD_X - DIAL / 2;
const MID_CX = PX + PW / 2;
const DIAL_CY = PY + PAD_Y + DIAL / 2;
const GAUGE_CY = PY + PAD_Y + ROW1 / 2;
const R = 52 * (GAUGE / 120); // r=52 im viewBox 120, auf 92px skaliert
const SW = 8 * (GAUGE / 120);
const CIRC = 2 * Math.PI * R;
const n = (v) => Number(v.toFixed(2));
const rad = (d) => ((d - 90) * Math.PI) / 180;
const pt = (cx, cy, r, d) => [cx + r * Math.cos(rad(d)), cy + r * Math.sin(rad(d))];
const DEPTH_X = PX + PAD_X + COL; // rechtsbündig, zeigt zum Ring
const PRESS_X = GX + GAUGE + GAP; // linksbündig, zeigt zum Ring
const CAP_Y = PY + PAD_Y + 35;
const VAL_Y = PY + PAD_Y + 61;
const FONT = "'Segoe UI',Roboto,system-ui,sans-serif";
const fmt = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
function readout(x, anchor, label, value, unit, colour) {
const unitTspan = `<tspan font-size="13" font-weight="500" fill="${C.muted}" dx="3">${unit}</tspan>`;
return `<text x="${x}" y="${CAP_Y}" text-anchor="${anchor}" font-family="${FONT}" font-size="9" font-weight="600" letter-spacing="1.4" fill="${C.muted}">${label}</text>
<text x="${x}" y="${VAL_Y}" text-anchor="${anchor}" font-family="${FONT}" font-size="26" font-weight="600" fill="${colour}">${value}${unitTspan}</text>`;
/** Zeigerinstrument. 270-Grad-Skala, unten offen - wie ein echtes Finimeter. */
function dial(cx, cy, { value, max, unit, label, zoneFrom, zoneTo, needleColour, valueColour, decimals = 0 }) {
// 96px Uhr, Geometrie aus dem viewBox 0 0 100 100 skaliert
const k = DIAL / 100;
const R = 42 * k, A0 = -135, SWEEP = 270;
const ang = (v) => A0 + SWEEP * Math.min(1, Math.max(0, v / (max || 1)));
let s = `<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(46 * k)}" fill="${C.face}" stroke="${C.muted}" stroke-opacity="0.25" stroke-width="1.5"/>`;
if (zoneFrom !== undefined && zoneFrom < max) {
const a = ang(zoneFrom), b = ang(Math.min(zoneTo, max));
const [x1, y1] = pt(cx, cy, R - 2 * k, a);
const [x2, y2] = pt(cx, cy, R - 2 * k, b);
s += `<path d="M ${n(x1)} ${n(y1)} A ${n(R - 2 * k)} ${n(R - 2 * k)} 0 ${b - a > 180 ? 1 : 0} 1 ${n(x2)} ${n(y2)}" fill="none" stroke="${C.danger}" stroke-width="3.5" stroke-opacity="0.9"/>`;
}
for (let i = 0; i <= 10; i++) {
const a = A0 + (SWEEP * i) / 10, major = i % 2 === 0;
const [x1, y1] = pt(cx, cy, R - 6 * k, a);
const [x2, y2] = pt(cx, cy, (major ? R - 13 * k : R - 10 * k), a);
s += `<line x1="${n(x1)}" y1="${n(y1)}" x2="${n(x2)}" y2="${n(y2)}" stroke="#cbd5e1" stroke-opacity="${major ? 0.85 : 0.4}" stroke-width="${major ? 1.6 : 1}"/>`;
}
const [tipX, tipY] = pt(cx, cy, 33 * k, ang(value));
const [tailX, tailY] = pt(cx, cy, -8 * k, ang(value));
s += `<line x1="${n(tailX)}" y1="${n(tailY)}" x2="${n(tipX)}" y2="${n(tipY)}" stroke="${needleColour}" stroke-width="2.6" stroke-linecap="round"/>`;
s += `<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(3.4 * k)}" fill="${needleColour}"/>`;
s += `<text x="${n(cx)}" y="${n(cy + 22)}" text-anchor="middle" font-size="16" font-weight="700" fill="${valueColour}" font-family="${F}">${value.toFixed(decimals)}<tspan font-size="10" font-weight="500" fill="${C.muted}" dx="2">${unit}</tspan></text>`;
s += `<text x="${n(cx)}" y="${n(cy + DIAL / 2 + 13)}" text-anchor="middle" font-size="9" font-weight="600" letter-spacing="1.4" fill="${C.muted}" font-family="${F}">${label}</text>`;
return s;
}
function build({ file, title, oxygen, capacity, depth, pressure, level, deep, reserve, lamp }) {
function build({ file, title, oxygen, capacity, level, depth, depthLimit, pressure, reservePressure, lamp, deep }) {
const ratio = Math.max(0, Math.min(1, oxygen / capacity));
const ring = level === 'danger' ? C.danger : level === 'warn' ? C.warn : C.accent;
const ringColour = level === 'danger' ? C.danger : level === 'warn' ? C.warn : C.accent;
const R = 52 * (GAUGE / 120), SW = 8 * (GAUGE / 120), CIRC = 2 * Math.PI * R;
const overLimit = depth >= depthLimit;
const depthColour = overLimit ? C.danger : deep ? C.warn : C.text;
const inReserve = pressure <= reservePressure;
const pressureColour = inReserve ? C.danger : C.text;
const lampColour = lamp ? C.accent : C.muted;
const lampX = CX - 43;
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" role="img" aria-label="${title}">
<defs>
@@ -65,27 +99,30 @@ function build({ file, title, oxygen, capacity, depth, pressure, level, deep, re
</defs>
<rect width="${W}" height="${H}" fill="url(#water)"/>
<rect x="${n(PX)}" y="${n(PY)}" width="${PW}" height="${PH}" rx="16" fill="${C.panel}" fill-opacity="0.72" stroke="${C.muted}" stroke-opacity="0.18"/>
<rect x="${PX}" y="${PY}" width="${PW}" height="${PH}" rx="16"
fill="${C.panel}" fill-opacity="0.72" stroke="${C.border}" stroke-opacity="0.18"/>
${dial(LEFT_CX, DIAL_CY, {
value: pressure, max: 300, unit: 'bar', label: 'DRUCK',
zoneFrom: 0, zoneTo: reservePressure,
needleColour: pressureColour, valueColour: pressureColour
})}
<g transform="rotate(-90 ${CX} ${CY})">
<circle cx="${CX}" cy="${CY}" r="${R.toFixed(2)}" fill="none" stroke="${C.muted}" stroke-opacity="0.16" stroke-width="${SW.toFixed(2)}" stroke-linecap="round"/>
<circle cx="${CX}" cy="${CY}" r="${R.toFixed(2)}" fill="none" stroke="${ring}" stroke-width="${SW.toFixed(2)}" stroke-linecap="round"
stroke-dasharray="${CIRC.toFixed(2)}" stroke-dashoffset="${(CIRC * (1 - ratio)).toFixed(2)}"/>
<g transform="rotate(-90 ${n(MID_CX)} ${n(GAUGE_CY)})">
<circle cx="${n(MID_CX)}" cy="${n(GAUGE_CY)}" r="${n(R)}" fill="none" stroke="${C.muted}" stroke-opacity="0.16" stroke-width="${n(SW)}" stroke-linecap="round"/>
<circle cx="${n(MID_CX)}" cy="${n(GAUGE_CY)}" r="${n(R)}" fill="none" stroke="${ringColour}" stroke-width="${n(SW)}" stroke-linecap="round" stroke-dasharray="${n(CIRC)}" stroke-dashoffset="${n(CIRC * (1 - ratio))}"/>
</g>
<text x="${n(MID_CX)}" y="${n(GAUGE_CY - 1)}" text-anchor="middle" font-size="21" font-weight="600" fill="${ringColour}" font-family="${F}">${fmt(oxygen)}</text>
<text x="${n(MID_CX)}" y="${n(GAUGE_CY + 15)}" text-anchor="middle" font-size="9" font-weight="600" letter-spacing="1.4" fill="${C.muted}" font-family="${F}">LUFT</text>
<text x="${CX}" y="${CY - 1}" text-anchor="middle" font-family="${FONT}" font-size="21" font-weight="600" fill="${ring}">${fmt(oxygen)}</text>
<text x="${CX}" y="${CY + 15}" text-anchor="middle" font-family="${FONT}" font-size="9" font-weight="600" letter-spacing="1.4" fill="${C.muted}">LUFT</text>
${dial(RIGHT_CX, DIAL_CY, {
value: depth, max: 100, unit: 'm', label: 'TIEFE', decimals: 1,
zoneFrom: depthLimit, zoneTo: 100,
needleColour: depthColour, valueColour: depthColour
})}
${readout(DEPTH_X, 'end', 'TIEFE', depth.toFixed(1), 'm', deep ? C.warn : C.text)}
${readout(PRESS_X, 'start', 'DRUCK', String(Math.round(pressure)), 'bar', reserve ? C.danger : C.text)}
<g>
<rect x="${lampX}" y="${PY + PAD_Y + GAUGE + ROW_GAP}" width="86" height="${LAMP_H}" rx="8" fill="${lampColour}" fill-opacity="${lamp ? 0.15 : 0.1}"/>
<circle cx="${lampX + 14}" cy="${PY + PAD_Y + GAUGE + ROW_GAP + LAMP_H / 2}" r="4" fill="${lampColour}"/>
<text x="${lampX + 24}" y="${PY + PAD_Y + GAUGE + ROW_GAP + LAMP_H / 2 + 3.5}" font-family="${FONT}" font-size="10" font-weight="600" letter-spacing="1.2" fill="${lampColour}">LAMPE</text>
</g>
<rect x="${n(MID_CX - 43)}" y="${n(PY + PAD_Y + ROW1 + ROW_GAP)}" width="86" height="${LAMP_H}" rx="8" fill="${lampColour}" fill-opacity="${lamp ? 0.15 : 0.1}"/>
<circle cx="${n(MID_CX - 29)}" cy="${n(PY + PAD_Y + ROW1 + ROW_GAP + LAMP_H / 2)}" r="4" fill="${lampColour}"/>
<text x="${n(MID_CX - 19)}" y="${n(PY + PAD_Y + ROW1 + ROW_GAP + LAMP_H / 2 + 3.5)}" font-size="10" font-weight="600" letter-spacing="1.2" fill="${lampColour}" font-family="${F}">LAMPE</text>
</svg>
`;
@@ -95,17 +132,18 @@ function build({ file, title, oxygen, capacity, depth, pressure, level, deep, re
build({
file: 'hud-normal.svg', title: 'Tauch-HUD: normaler Zustand',
oxygen: 545, capacity: 1200, depth: 12.4, pressure: 136, level: 'ok', lamp: true
oxygen: 545, capacity: 1200, level: 'ok',
depth: 12.4, depthLimit: 45, pressure: 136, reservePressure: 50, lamp: true
});
build({
file: 'hud-warnung.svg', title: 'Tauch-HUD: Warnstufe und Reservedruck',
oxygen: 92, capacity: 900, depth: 27.5, pressure: 31,
level: 'warn', deep: true, reserve: true, lamp: false
oxygen: 92, capacity: 900, level: 'warn',
depth: 27.5, depthLimit: 45, deep: true, pressure: 31, reservePressure: 50, lamp: false
});
build({
file: 'hud-kritisch.svg', title: 'Tauch-HUD: kritischer Luftstand',
oxygen: 8, capacity: 600, depth: 31.7, pressure: 4,
level: 'danger', deep: true, reserve: true, lamp: true
file: 'hud-kritisch.svg', title: 'Tauch-HUD: unter der Tiefengrenze des Atemgases',
oxygen: 38, capacity: 900, level: 'danger',
depth: 52.4, depthLimit: 45, deep: true, pressure: 13, reservePressure: 50, lamp: true
});
+13 -20
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 221" width="520" height="221" role="img" aria-label="Tauch-HUD: kritischer Luftstand">
<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"/>
@@ -6,28 +6,21 @@
</linearGradient>
</defs>
<rect width="520" height="221" fill="url(#water)"/>
<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"/>
<rect x="86" y="35" width="348" height="151" 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 260 95)">
<circle cx="260" cy="95" r="39.87" fill="none" stroke="#94a3b8" stroke-opacity="0.16" stroke-width="6.13" stroke-linecap="round"/>
<circle cx="260" cy="95" r="39.87" fill="none" stroke="#f87171" stroke-width="6.13" stroke-linecap="round"
stroke-dasharray="250.49" stroke-dashoffset="247.15"/>
<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>
<text x="260" y="94" text-anchor="middle" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="21" font-weight="600" fill="#f87171">00:08</text>
<text x="260" y="110" text-anchor="middle" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8">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>
<text x="192" y="84" text-anchor="end" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8">TIEFE</text>
<text x="192" y="110" text-anchor="end" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="26" font-weight="600" fill="#fbbf24">31.7<tspan font-size="13" font-weight="500" fill="#94a3b8" dx="3">m</tspan></text>
<text x="328" y="84" text-anchor="start" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8">DRUCK</text>
<text x="328" y="110" text-anchor="start" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="26" font-weight="600" fill="#f87171">4<tspan font-size="13" font-weight="500" fill="#94a3b8" dx="3">bar</tspan></text>
<g>
<rect x="217" y="149" width="86" height="23" rx="8" fill="#38bdf8" fill-opacity="0.15"/>
<circle cx="231" cy="160.5" r="4" fill="#38bdf8"/>
<text x="241" y="164" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="10" font-weight="600" letter-spacing="1.2" fill="#38bdf8">LAMPE</text>
</g>
<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>

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

+13 -20
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 221" width="520" height="221" role="img" aria-label="Tauch-HUD: normaler Zustand">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 239" width="560" height="239" role="img" aria-label="Tauch-HUD: normaler Zustand">
<defs>
<linearGradient id="water" x1="0" y1="0" x2="0.6" y2="1">
<stop offset="0%" stop-color="#0d3550"/>
@@ -6,28 +6,21 @@
</linearGradient>
</defs>
<rect width="520" height="221" fill="url(#water)"/>
<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"/>
<rect x="86" y="35" width="348" height="151" 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="167.68" y1="104.5" x2="159.09" y2="66.08" stroke="#e2e8f0" stroke-width="2.6" stroke-linecap="round"/><circle cx="166" cy="97" r="3.26" fill="#e2e8f0"/><text x="166" y="119" text-anchor="middle" font-size="16" font-weight="700" fill="#e2e8f0" font-family="'Segoe UI',Roboto,system-ui,sans-serif">136<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 260 95)">
<circle cx="260" cy="95" r="39.87" fill="none" stroke="#94a3b8" stroke-opacity="0.16" stroke-width="6.13" stroke-linecap="round"/>
<circle cx="260" cy="95" r="39.87" fill="none" stroke="#38bdf8" stroke-width="6.13" stroke-linecap="round"
stroke-dasharray="250.49" stroke-dashoffset="136.73"/>
<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="#38bdf8" stroke-width="6.13" stroke-linecap="round" stroke-dasharray="250.49" stroke-dashoffset="136.73"/>
</g>
<text x="280" y="104" text-anchor="middle" font-size="21" font-weight="600" fill="#38bdf8" font-family="'Segoe UI',Roboto,system-ui,sans-serif">09:05</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>
<text x="260" y="94" text-anchor="middle" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="21" font-weight="600" fill="#38bdf8">09:05</text>
<text x="260" y="110" text-anchor="middle" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8">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="401.53" y1="95.47" x2="362.96" y2="103.33" stroke="#e2e8f0" stroke-width="2.6" stroke-linecap="round"/><circle cx="394" cy="97" r="3.26" fill="#e2e8f0"/><text x="394" y="119" text-anchor="middle" font-size="16" font-weight="700" fill="#e2e8f0" font-family="'Segoe UI',Roboto,system-ui,sans-serif">12.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>
<text x="192" y="84" text-anchor="end" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8">TIEFE</text>
<text x="192" y="110" text-anchor="end" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="26" font-weight="600" fill="#e2e8f0">12.4<tspan font-size="13" font-weight="500" fill="#94a3b8" dx="3">m</tspan></text>
<text x="328" y="84" text-anchor="start" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8">DRUCK</text>
<text x="328" y="110" text-anchor="start" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="26" font-weight="600" fill="#e2e8f0">136<tspan font-size="13" font-weight="500" fill="#94a3b8" dx="3">bar</tspan></text>
<g>
<rect x="217" y="149" width="86" height="23" rx="8" fill="#38bdf8" fill-opacity="0.15"/>
<circle cx="231" cy="160.5" r="4" fill="#38bdf8"/>
<text x="241" y="164" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="10" font-weight="600" letter-spacing="1.2" fill="#38bdf8">LAMPE</text>
</g>
<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>

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

+13 -20
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 221" width="520" height="221" role="img" aria-label="Tauch-HUD: Warnstufe und Reservedruck">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 239" width="560" height="239" role="img" aria-label="Tauch-HUD: Warnstufe und Reservedruck">
<defs>
<linearGradient id="water" x1="0" y1="0" x2="0.6" y2="1">
<stop offset="0%" stop-color="#0d3550"/>
@@ -6,28 +6,21 @@
</linearGradient>
</defs>
<rect width="520" height="221" fill="url(#water)"/>
<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"/>
<rect x="86" y="35" width="348" height="151" 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="173.34" y1="94.74" x2="135.72" y2="106.32" 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">31<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 260 95)">
<circle cx="260" cy="95" r="39.87" fill="none" stroke="#94a3b8" stroke-opacity="0.16" stroke-width="6.13" stroke-linecap="round"/>
<circle cx="260" cy="95" r="39.87" fill="none" stroke="#fbbf24" stroke-width="6.13" stroke-linecap="round"
stroke-dasharray="250.49" stroke-dashoffset="224.88"/>
<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="#fbbf24" stroke-width="6.13" stroke-linecap="round" stroke-dasharray="250.49" stroke-dashoffset="224.88"/>
</g>
<text x="280" y="104" text-anchor="middle" font-size="21" font-weight="600" fill="#fbbf24" font-family="'Segoe UI',Roboto,system-ui,sans-serif">01:32</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>
<text x="260" y="94" text-anchor="middle" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="21" font-weight="600" fill="#fbbf24">01:32</text>
<text x="260" y="110" text-anchor="middle" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8">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="400.7" y1="100.75" x2="366.36" y2="81.52" stroke="#fbbf24" stroke-width="2.6" stroke-linecap="round"/><circle cx="394" cy="97" r="3.26" fill="#fbbf24"/><text x="394" y="119" text-anchor="middle" font-size="16" font-weight="700" fill="#fbbf24" font-family="'Segoe UI',Roboto,system-ui,sans-serif">27.5<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>
<text x="192" y="84" text-anchor="end" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8">TIEFE</text>
<text x="192" y="110" text-anchor="end" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="26" font-weight="600" fill="#fbbf24">27.5<tspan font-size="13" font-weight="500" fill="#94a3b8" dx="3">m</tspan></text>
<text x="328" y="84" text-anchor="start" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="9" font-weight="600" letter-spacing="1.4" fill="#94a3b8">DRUCK</text>
<text x="328" y="110" text-anchor="start" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="26" font-weight="600" fill="#f87171">31<tspan font-size="13" font-weight="500" fill="#94a3b8" dx="3">bar</tspan></text>
<g>
<rect x="217" y="149" width="86" height="23" rx="8" fill="#94a3b8" fill-opacity="0.1"/>
<circle cx="231" cy="160.5" r="4" fill="#94a3b8"/>
<text x="241" y="164" font-family="'Segoe UI',Roboto,system-ui,sans-serif" font-size="10" font-weight="600" letter-spacing="1.2" fill="#94a3b8">LAMPE</text>
</g>
<rect x="237" y="167" width="86" height="23" rx="8" fill="#94a3b8" fill-opacity="0.1"/>
<circle cx="251" cy="178.5" r="4" fill="#94a3b8"/>
<text x="261" y="182" font-size="10" font-weight="600" letter-spacing="1.2" fill="#94a3b8" font-family="'Segoe UI',Roboto,system-ui,sans-serif">LAMPE</text>
</svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB