EU-Data-Act-Reste bereinigt, Slider-Bug behoben, zwei Design-Audit-Runden umgesetzt

Entfernt die letzten Verweise auf die abgeloeste TommiG1/HA_VAG-EU-Data-Act-
Integration (Versionstile, Testumgebungs-Fixture) und ersetzt sie durch die
FMM003-Werte. Behebt eine CSS-Spezifitaetskollision, durch die alle iOS-
Toggle-Switches viel zu breit gerendert wurden. Dokumentiert und behebt sieben
Layout-Befunde aus zwei Design-Audit-Runden (Zahnrad-Ueberlauf auf breiten
Bildschirmen, zu kleine Ringe als mobiler Einstellungen-Zugang, zu breite
Popups, Kopfzeilen-Versatz, ueberlappende Kachel-Pfeile, fehlender
Editierbarkeits-Hinweis bei Auswahlfeldern, Haekchen-artige Auf/Zu-Pfeile) -
siehe DESIGN_AUDIT_2026-08-13.md fuer Root-Cause und Beleg je Befund.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-13 20:52:07 +02:00
parent 5fc86d2b5e
commit 440ff22bda
8 changed files with 353 additions and 42 deletions
+74 -1
View File
@@ -1,7 +1,10 @@
# AGENTS.md — Project state, review findings, open items, and working rules
**Last updated: 2026-08-13** (merged the `umsetzung-datametric360` branch — companion app phases
110 done, see `UMSETZUNGSPLAN.md`). This file is the entry point for every new agent
110 done, see `UMSETZUNGSPLAN.md`; later the same day: cleaned up remaining EU Data Act residue,
fixed oversized toggle switches, and fixed a desktop-layout audit (settings button / rings logo /
popups overflowing past the capped content column) — see `DESIGN_AUDIT_2026-08-13.md` and section
C). This file is the entry point for every new agent
session: what this repo is, what is finished, what is missing, and how to work here. Detail lives in
the linked documents — this file points, it does not duplicate.
@@ -528,6 +531,76 @@ wraps the web app for iPhone; a PWA home-screen install is the accepted intermed
Abbrechen/Speichern and the "Einrichten"/"Setup"/"Fertig" buttons in Einstellungen render with
the corrected fills at both mobile and desktop widths, switches render green, no console
errors.
- [x] Clean up remaining "EU Data Act" residue from the FMM003 pivot (2026-08-13) — the
Einstellungen "Version" tile in `audi-dashboard-app.js` hardcoded `Fahrzeugdaten: EU Data
Act / Abruf alle 15 Minuten` and `Position: iPhone / Companion App`, both stale: vehicle data
and position now come exclusively from the FMM003 (`ZUENDUNG_SENSOR`, `BATTERIE_SENSOR`,
`STANDORT_TRACKER` in `einstellungen.py`), not the abandoned HACS integration or the iPhone.
Both rows now read `FMM003`. Also fixed `testumgebung/konfiguration.yaml` +
`testumgebung/README.md`: the `input_text.test_wlan` / `iPhone WiFi Connection` template
sensor simulated WLAN-based trip detection, fully removed 2026-08-12 (`fahrzeug.wlan_ssid` no
longer exists anywhere) — its "Fahrt auslösen" example was non-functional. Replaced with
`input_boolean.test_zuendung` driving a `binary_sensor.testzone_fmm003_engine_ignition_or_acc_status`
template sensor matching the real `ZUENDUNG_SENSOR` entity ID, so trip detection stays
testable. The remaining KM/Tank/Range/door/window/lock template sensors correctly still
describe the abandoned `TommiG1/HA_VAG-EU-Data-Act` integration (per `einstellungen.py`) and
were left in place — those fields are blank by default but stay manually mappable via the
Setup menu, so the fixtures remain useful for testing that path; comments updated to make
this distinction explicit.
- [x] Fix oversized toggle switches ("Slider") across the app (2026-08-13) — `.feld label` in
`audi-dashboard.css` (`flex: 1 1 auto`, meant to let the *text* label grow so the control
lands at the row's right edge) unintentionally also matched `<label class="switch">`, since
the toggle switch is itself implemented as a `<label>` — its own `.switch { flex-shrink: 0;
width: 46px }` rule lost because `.feld label` has equal-or-higher specificity and comes
later in the file. Every switch inside a `.feld` (Einstellungen, Tanken, Reifen, ...)
stretched to fill the row (~260-300px measured live, instead of 46-51px). Fixed by excluding
switches from the selector: `.feld label:not(.switch)`. Verified live in `audi_ha_test` at
mobile (375px) and desktop widths — switches render at the correct ~51px iOS size, no
console errors.
- [x] Fix desktop (≥860px container) layout audit findings (2026-08-13, see
`DESIGN_AUDIT_2026-08-13.md` for full detail) — user-reported: (1) the settings gear button
sat far past the right edge of the visible content column on wide screens because `.topbar`
(grid-column:2, same track as `main#view`) had no `max-width:860px` while `main#view` did —
the track itself is `minmax(0,1fr)` and stretches to the full remaining window width, so
`.head{flex:1}` pushed `.profilbtn` to the track's far edge, ~450px past where `main#view`
visually ends. Fixed by giving `.topbar`/`.phone:has(.back.on) .topbar`/`.ptr` the same
`max-width:860px`. (2) In phone width the Audi rings (`#marke`/`.rings`) are, per existing
code comment, the *only* access to Einstellungen (the gear icon is hidden there) but were
42×24px — well under the 44px minimum touch target every sibling icon-button uses. Bumped to
58×32px. (3) Found while verifying (1): `.setup-popup`, `.sdpopup`, `.sheet`, and
`.standortmenu` are all `position:absolute` with `left`/`right` relative to the *full*
`.phone` box (sidebar included), not the content column, and had no desktop max-width either
`.setup-popup` measured 1644px wide on a 1920px window (10px margins only). Fixed with
`max-width:560px` (`.setup-popup`/`.sdpopup`/`.sheet`) or `640px` (`.standortmenu`) plus
`margin-left/right:auto` in the same container query — deliberately not
`transform:translateX(-50%)`, which would fight these elements' own transform-based entry
animations. Centering is relative to the full `.phone` width (sidebar included), not the
860px content column exactly — a ~138px rightward offset from true content-center remains at
1920px; fixing that precisely would require moving these overlays into grid-column 2 in the
markup, deferred as a larger structural change. All three verified live in `audi_ha_test` at
375px and 1920px, no console errors.
- [x] Fix 4 more user-reported design findings (2026-08-13, same session, see
`DESIGN_AUDIT_2026-08-13.md` "Runde 2" for full detail with before/after measurements):
(1) page title sat ~30px right of the content tiles below it on wide screens — `.back`
reserves 44px+gap in `.topbar` even when inactive (`opacity:0`, not `display:none`), fixed
with `.back:not(.on){width:0;...}` in the desktop container query, root pages only (detail
pages with `.back.on` unaffected, verified back-navigation still works). (2) the chevron on
the 5 `.go`-tiles (Fahrzeug/Service/Versicherung/Reifen/Schutzbrief on Mein Audi/Versicherung)
was vertically centered on the *entire* multi-row tile (`top:50%` in the iOS overlay) instead
of next to the title, overlapping wrapped row text — removed the override, falls back to the
base `top:var(--sp-5)` next-to-title position. (3) the Ölwechsel-Intervall `<select>` values
("10.000 km"/"1 Jahr") looked like inert text — iOS overlay strips border/background from
`.feld select` and colors it the same grey as any other secondary text; added
`.feld select{color:var(--ios-tint)}` so picker fields read as editable the way iOS
conventionally signals it (accent color), free-text `.feld input`s deliberately left alone.
(4) the expand/collapse `.mark` chevron on group headers (Fahrten "2026"/"August") looked
like a checkmark — it uses the classic "2 borders + rotate(45deg)" CSS chevron technique,
which requires a square box; `.mark` was 6×10px (non-square, sized for the unrelated SVG-path
`.chev`/`.go` icons), made it 8×8px. Two more reported findings ("grey box around all menu
icons", "red partial frame on Fahrten/Tanken rows") were investigated (computed-style
diffing across all 5 tabs in both themes, a temporary 2.5x `transform:scale()` zoom on the
live swipe-row DOM) but could not be reproduced — documented in the audit file as open,
pending a screenshot from the real device.
- [ ] Fix remaining documentation drift (statistics claim, README gaps, obsolete TODO comment) —
text-only changes; INSTALL.md's WLAN/TommiG1 drift and stale variable names were fixed
2026-08-12 (see section B); `DESIGN_REVIEW_2026-08-13.md` and `REVIEW_main_2026-08-13.md`
+191
View File
@@ -0,0 +1,191 @@
# Design Audit — 2026-08-13 (Grossbildschirm-Layout)
Auslöser: zwei konkrete User-Reports ("Einstellungen-Knopf sitzt am Bildschirmrand, obwohl
die App-Spalte schon vorher endet" und "die Ringe als Einstellungen-Knopf sind zu klein").
Beide sind bestätigt, behoben und live im `audi_ha_test`-Container verifiziert (Desktop
1920px + Mobil 375px, Chrome-Konsole fehlerfrei bis auf die vorbestehenden, unbezogenen
Service-Worker-/Platzhalterbild-404-Meldungen). Im Zuge der Fehlersuche wurde ein dritter,
verwandter Fehler im selben Muster gefunden und mitbehoben.
Geprüft wurden Übersicht, Mein Audi, Fahrten, Statistik, Tanken und Einstellungen (inkl.
Setup-Popup) bei 375px und 1920px. Die drei unten dokumentierten Befunde sind die einzigen
gefundenen Abweichungen; der Rest folgt konsistent den bestehenden Tokens (`--r-tile`,
Farbrollen aus dem iOS-Overlay, `.aktion`/`.switch`-Semantik).
## Befund 1 — Zahnrad/Kopfzeile sass bei breiten Fenstern am Fensterrand statt am Inhaltsrand
**Root Cause:** `.topbar` (enthält den Einstellungen-Knopf `.profilbtn`) liegt im
Grossbildschirm-Raster (`@container (min-width:860px)` in `audi-dashboard-ios.css`) in
Spalte 2 (`grid-column:2`), derselben Spalte wie `main#view`. `main#view` hat dort ein
`max-width:860px`, `.topbar` hatte keins - die Spalte selbst ist aber `minmax(0,1fr)`, füllt
also die volle restliche Fensterbreite. `.head{flex:1}` in der Kopfzeile hat den Rest der
Zeile aufgefüllt und `.profilbtn` bis an den rechten Rand der vollen Spalte geschoben, weit
hinter das Ende des sichtbaren Inhalts.
**Beleg (1920px Fenster):** `main#view` endete bei `x=1380`, `.topbar` ging bis `x=1920`,
`.profilbtn` sass bei `x=1832-1876` - eine Lücke von über 450px zwischen Inhaltsende und
Knopf.
**Fix:** `.topbar`, `.phone:has(.back.on) .topbar` und `.ptr` bekommen im
860px-Container-Query dasselbe `max-width:860px` wie `main#view`. Nach dem Fix enden
`.topbar` und `main#view` an derselben Kante (`x=1380`), der Knopf sitzt bei `x=1292-1336`,
sichtbar über dem Inhalt.
**Datei:** `homeassistant/www/audi-dashboard-ios.css`
## Befund 2 — Audi-Ringe als einziger Einstellungen-Zugang in Telefonbreite zu klein
**Root Cause:** In Telefonbreite blendet die iOS-Auflage das Zahnrad-Icon (`.profilbtn`) aus
- die Audi-Ringe (`#marke`/`.rings`) sind dort laut eigenem Code-Kommentar "der einzige
Zugang zu den Einstellungen" und seit einer früheren Session bewusst ein echter,
tastaturbedienbarer Knopf. Die Knopfgrösse war mit 42×24px aber deutlich kleiner als jeder
andere Symbol-Knopf in derselben Kopfzeile (`.themebtn`/`.profilbtn`/`.back` sind alle
44×44px) und lag unter der üblichen 44px-Mindestgrösse für Tippflächen.
**Fix:** `.rings` von 42×24px auf 58×32px vergrössert (Seitenverhältnis beibehalten,
`.rings svg{width:58px}`). Funktion (Klick navigiert zu Einstellungen) unverändert getestet.
**Datei:** `homeassistant/www/audi-dashboard.css`
## Befund 3 — Popups/Sheets auf breiten Bildschirmen fast bildschirmbreit (gleiches Muster wie Befund 1)
Beim Nachprüfen von Befund 1 fiel derselbe Fehler bei vier weiteren Elementen auf: sie sind
`position:absolute` mit `left`/`right` relativ zu `.phone` (der vollen Rasterbreite,
Seitenspalte inklusive) statt zur schmaleren Inhaltsspalte, ohne eigenes `max-width` für
grosse Bildschirme:
- `.setup-popup` (Sensor-Zuordnung) - **bestätigt live:** 1644px breit bei 1920px Fenster
(nur 10px Rand auf jeder Seite), praktisch bildschirmfüllend statt eines ruhigen Dialogs.
- `.sdpopup` (SmartDeal-Aktivierung)
- `.sheet` (Action-Sheet, ersetzt confirm()/alert() beim Löschen)
- `.standortmenu` (Standort-Bottom-Sheet auf der Kartenansicht)
**Fix:** Im selben 860px-Container-Query `max-width:560px` (Popups/Sheet) bzw. `max-width:
640px` (Standortmenü, mehr Inhalt) plus `margin-left/right:auto` ergänzt - zentriert die
Elemente innerhalb ihres bestehenden `left`/`right`-Abstands, ohne die
Transform-basierte Einblend-Animation dieser Elemente anzufassen (eine
`transform:translateX(-50%)`-Zentrierung hätte mit der `sheet-rein`-Keyframe-Animation
kollidiert, die am Ende selbst `transform:none` setzt). `border-radius` bleibt jeweils
unverändert (`.standortmenu` behält oben abgerundete/unten eckige Kanten, passend zur
weiterhin am unteren Fensterrand andockenden Bauweise).
**Beleg nach Fix (Setup-Popup, 1920px Fenster):** 560px breit, zentriert bei `x=808-1368`.
**Datei:** `homeassistant/www/audi-dashboard-ios.css`
## Nicht verändert (bewusst ausserhalb dieses Audits)
- `.bildmenu` (Kontextmenü bei Fahrzeugbildern) ist bereits `min-width:160px` und wächst
nicht mit der Fensterbreite - kein Fehler.
- Zentrierung der Popups erfolgt relativ zur vollen `.phone`-Breite (Seitenspalte
inklusive), nicht exakt zur Mitte der 860px-Inhaltsspalte - bei 1920px ein Versatz von
ca. 138px nach rechts gegenüber echter Inhaltsmitte. Sichtbar besser als der vorige
Zustand (praktisch volle Fensterbreite), aber für pixelgenaue Zentrierung müssten die
Popups im Markup in die Grid-Spalte 2 verschoben werden statt als Geschwister von
`main#view` direkt in `.phone` zu liegen - eine grössere strukturelle Änderung, hier
bewusst zurückgestellt.
## Runde 2 — sechs weitere User-Findings
Vier bestätigt, ursächlich geklärt und behoben; zwei trotz gezielter Suche (Computed-Style-
Vergleich, 2.5x-Zoom per temporärem `transform:scale()` auf das Live-DOM, Tag- und
Nacht-Theme) nicht reproduzierbar - siehe unten.
### Befund 4 — Kopfzeile (Übersicht/Fahrten/...) auf breiten Bildschirmen 30px zu weit rechts
**Root Cause:** `.back` (Zurück-Pfeil) ist auch inaktiv (`opacity:0`, kein `.on`) weiterhin
ein 44px breites Flex-Element in `.topbar` plus `gap`. Auf Wurzelseiten ohne Zurück-Pfeil
(Übersicht, Fahrten, ...) schiebt dieser unsichtbare Platzhalter `.head`/`.title` sichtbar
weiter nach rechts als `main#view` darunter beginnt.
**Beleg:** `.title` links bei `x=594`, die erste Kachel in `main#view` links bei `x=564` -
30px Versatz.
**Fix:** `.back:not(.on){width:0;min-width:0;margin:0;overflow:hidden}` im
860px-Container-Query. Nur für Wurzelseiten relevant; auf Detailseiten (`.back.on`, z. B.
Einzelfahrt) bleibt der Knopf unverändert 44px breit und funktionsfähig - live getestet
(Klick navigiert zurück zur Liste).
**Beleg nach Fix:** Versatz auf 4px reduziert (der verbleibende `gap` zum nächsten
Flex-Element, nicht mehr wahrnehmbar).
**Datei:** `homeassistant/www/audi-dashboard-ios.css`
### Befund 5 — Graue Pfeile auf "Mein Audi" (Fahrzeug/Service/Versicherung/Reifen) überlappen Text
**Root Cause:** `.tilebtn .go{top:50%;margin-top:-5px}` zentriert den Kachel-Chevron
vertikal auf die **gesamte** Kachelhöhe. Diese fünf Kacheln sind aber keine Einzeiler,
sondern `<span class="label">Titel</span>` + Chevron + eine ganze `dl.rows`-Liste darunter -
die 50%-Mitte der gesamten Kachel liegt damit mitten in der Zeilenliste statt neben dem
Titel, und überlappt besonders bei mehrzeilig umgebrochenen Werten (z. B. "2.9 TFSI quattro
· 331 kW · 450 PS") sichtbar den Text.
**Fix:** `top:50%;margin-top:-5px` aus der iOS-Auflage entfernt - fällt zurück auf
`top:var(--sp-5)` aus der Basis, die den Chevron wieder neben den Titel oben in der Kachel
setzt (dafür existiert dort bereits extra Padding: `.tile:has(> .go) > .label:first-child
{padding-right:44px}`).
**Betroffen:** alle 5 `.go`-Kacheln (Fahrzeug, Service, Versicherung/Steuer, Reifen,
Schutzbrief Mobilität) - identisches Markup-Muster überall.
**Datei:** `homeassistant/www/audi-dashboard-ios.css`
### Befund 6 — "10.000 km" / "1 Jahr" (Ölwechsel-Intervall) sehen nicht editierbar aus
**Root Cause:** Beide Werte sind echte `<select>`-Dropdowns, aber die iOS-Auflage entfernt
Rahmen und Fläche komplett (`background:transparent;border:0`) und färbt den Wert in
`--fg2` - demselben gedämpften Grau wie jeder andere Fliesstext. Kombiniert mit
`appearance:none` (entfernt zusätzlich den nativen Auswahlpfeil des Browsers, base-CSS) gibt
es keinerlei visuellen Hinweis, dass hier eine Auswahl möglich ist.
**Fix:** `.feld select{color:var(--ios-tint)}` ergänzt - der Wert erscheint jetzt in der
Marken-Akzentfarbe (Rot), dem iOS-üblichen Signal "hier gibt es eine Auswahl" bei
Picker-artigen Feldern (anders als bei freien Texteingaben, die bewusst unverändert bleiben).
**Datei:** `homeassistant/www/audi-dashboard-ios.css`
### Befund 7 — Auf/Zu-Pfeile bei Gruppenkopfzeilen (z. B. "2026", "August" in Fahrten) sehen wie Häkchen aus
**Root Cause:** `.mark` baut den Chevron aus der klassischen "zwei Kanten + 45°-Drehung"-
CSS-Technik (`border-right`+`border-bottom`, `transform:rotate(-45deg/45deg)`). Diese
Technik braucht zwingend ein **Quadrat** für eine saubere Pfeilform - `.mark` war aber
6×10px (für die SVG-Chevrons `.chev`/`.go` gedacht, die eine eigene, absichtlich
nicht-quadratische Pfad-Form nutzen). Die ungleich langen Kantenabschnitte (10px vs. 6px)
ergeben verdreht eine Form, die eher wie ein Häkchen als ein Pfeil aussieht - besonders im
per Default aufgeklappten Zustand (`rotate(45deg)`), in dem "2026"/"August" standardmässig
starten.
**Fix:** `.mark` auf 8×8px quadratisch gesetzt.
**Datei:** `homeassistant/www/audi-dashboard.css`
### Nicht reproduziert — Befund A: "Alle Menü-Icons haben eine graue Box"
Programmatisch geprüft (`.tab`, `.tabpille`, `.tab svg`: `background`, `border`,
`box-shadow`, `outline` für alle 5 Tabs sowohl im Seitenmenü (Desktop) als auch in der
Tableiste unten (375px)): nur der **aktive** Tab hat eine (sehr dezente, 7% Deckkraft)
graue Füllung - `.tab.on .tabpille{background:var(--tile-2)}`/`.tab.on{background:
var(--ios-fill)}`, exakt wie beabsichtigt. Die vier inaktiven Tabs sind computed
`rgba(0,0,0,0)` (vollständig transparent) auf allen geprüften Ebenen. Falls auf dem
tatsächlichen Gerät etwas anderes zu sehen ist (z. B. alle 5 Icons mit sichtbarer Box),
bräuchte es einen Screenshot vom echten Gerät/Browser, um die Abweichung von diesem
Testcontainer einzugrenzen.
### Nicht reproduziert — Befund B: "Roter Teilrahmen rechts an jeder Zeile" (Fahrten/Tanken)
Geprüft: `.swipe-content{background:var(--tile-deckend)}` (deckend, #171B21 Nacht /
#FFFFFF Tag) deckt den dahinterliegenden roten Löschen-Button (`.swipe-delete`,
`rgb(255,69,58)`) vollständig ab - beide Boxen exakt deckungsgleich (`x`/`width`/`right`
identisch bis auf Subpixel), kein CSS-seitiger Spalt gefunden. Bei 2.5x-Zoom (temporärer
`transform:scale()` auf das Live-DOM, nicht deploybar, nur zur Inspektion) war am rechten
Rand in Tag- und Nacht-Theme kein Rot sichtbar. Möglich, dass dies nur unter bestimmten
Bedingungen auftritt (Swipe-Geste mitten in der Transition, ein bestimmter Zoom-/DPI-Stand
auf dem echten Gerät) - ein Screenshot oder eine genauere Beschreibung, wann genau es
auftritt (beim Laden, nach einer Wischgeste, permanent?), würde helfen.
## Deployment
Alle sieben Fixes deployed und verifiziert im `audi_ha_test`-Docker-Container
(`audi-dashboard-version.json``1786744000`), nach `homeassistant/installationspaket/`
synchronisiert. Konsole fehlerfrei bis auf die vorbestehenden, unbezogenen
Service-Worker-/Platzhalterbild-404-Meldungen.
+2 -2
View File
@@ -1925,8 +1925,8 @@ function vEinst() {
<div class="tile"><span class="label">Version</span>
<dl class="rows">
<div class="row"><dt>Dashboard</dt><dd>${esc(CONFIG.version)}</dd></div>
<div class="row"><dt>Fahrzeugdaten</dt><dd>EU Data Act<small>Abruf alle 15 Minuten</small></dd></div>
<div class="row" style="border-bottom:0"><dt>Position</dt><dd>iPhone<small>Companion App</small></dd></div>
<div class="row"><dt>Fahrzeugdaten</dt><dd>FMM003<small>Zündung · Batterie</small></dd></div>
<div class="row" style="border-bottom:0"><dt>Position</dt><dd>FMM003<small>GPS-Tracker</small></dd></div>
</dl>
${(() => {
const s = UPDATE_STATUS;
+37 -4
View File
@@ -91,7 +91,14 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
.tile{padding:16px 18px;margin-bottom:14px;border-radius:var(--r-tile)}
.tile.flat{padding:0}
.tilebtn:hover{background:var(--tile-2)}
.tilebtn .go{top:50%;margin-top:-5px;right:18px;stroke:var(--ios-grau);stroke-width:1.6}
/* top/margin-top NICHT von der Basis uebernehmen: alle .go-Kacheln
(Fahrzeug/Service/Versicherung/Reifen/Schutzbrief) sind mehrzeilige
Kacheln mit .label oben plus einer ganzen dl.rows-Liste darunter - eine
vertikale 50%-Zentrierung landet dann mitten in der Zeilenliste statt
neben dem Titel und ueberlappt umgebrochenen Zeilentext (Design-Audit
2026-08-13). Bleibt bei top:var(--sp-5) aus der Basis, nur rechter
Abstand/Farbe werden fuer die iOS-Optik angepasst. */
.tilebtn .go{right:18px;stroke:var(--ios-grau);stroke-width:1.6}
.label{font-size:13px;letter-spacing:.01em;text-transform:none;color:var(--fg3)}
.row{min-height:44px;padding:11px 0;border-bottom:1px solid var(--ios-sep)}
.row dt{font-size:16px;color:var(--fg)}
@@ -131,6 +138,12 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
.feld label{font-size:16px;color:var(--fg)}
.feld input,.feld select{background:transparent;border:0;border-radius:8px;font-size:16px;
padding:8px 4px;color:var(--fg2)}
/* Design-Audit 2026-08-13: ein <select> (z.B. Oelwechsel-Intervall "10.000 km"/
"1 Jahr") sah wie reiner, nicht editierbarer Text aus, seit hier Rahmen/
Flaeche entfernt wurden - anders als bei freien Texteingaben zeigt iOS bei
Picker-Feldern wie diesem ueblicherweise die Akzentfarbe statt Fliesstext-
Grau als Hinweis "hier gibt es eine Auswahl". */
.feld select{color:var(--ios-tint)}
.feld input:focus,.feld select:focus{background:var(--ios-fill);color:var(--fg)}
.mitEinheit input{background:var(--ios-fill);padding:8px 10px}
.notiz{background:var(--ios-fill);border:0;border-radius:12px;font-size:16px}
@@ -207,12 +220,22 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
:host > div{height:calc(100dvh - 24px)}
.phone{display:grid;grid-template-columns:264px minmax(0,1fr);
grid-template-rows:auto auto minmax(0,1fr)}
.topbar{grid-column:2;grid-row:1;padding:38px 44px 8px}
.phone:has(.back.on) .topbar{grid-column:2;grid-row:1;padding:34px 44px 8px;justify-content:flex-start}
/* max-width:860px muss zu main#view passen, sonst treibt der Flex-Inhalt
(.head{flex:1} schiebt .profilbtn nach rechts) das Zahnrad bis an den
Rand der vollen Grid-Spalte statt an den Rand der Inhaltsspalte darunter -
auf breiten Bildschirmen klaffte da eine sichtbare Luecke. */
.topbar{grid-column:2;grid-row:1;padding:38px 44px 8px;max-width:860px}
.phone:has(.back.on) .topbar{grid-column:2;grid-row:1;padding:34px 44px 8px;justify-content:flex-start;max-width:860px}
/* Design-Audit 2026-08-13: .back ist auch inaktiv (opacity:0) noch ein
44px breites Flex-Element plus Gap - auf Wurzelseiten ohne Zurueck-Pfeil
schob das die Kopfzeile (.head/.title) sichtbar weiter nach rechts als
main#view darunter beginnt. Auf Detailseiten (.back.on) bleibt der Platz
bewusst reserviert, das ist dort ein echter, bedienbarer Knopf. */
.back:not(.on){width:0;min-width:0;margin:0;overflow:hidden}
.phone:has(.back.on) .head{align-items:flex-start}
.phone:has(.back.on) .title{font-size:26px;text-align:left}
.title{font-size:34px}
.ptr{grid-column:2;grid-row:2}
.ptr{grid-column:2;grid-row:2;max-width:860px}
main#view{--seitenrand:44px;grid-column:2;grid-row:3;padding:8px var(--seitenrand) 48px;max-width:860px}
.tabbar{grid-column:1;grid-row:1 / 4;display:flex;flex-direction:column;gap:4px;
@@ -247,6 +270,16 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
.carfix.klein,.bildbox.carfix.klein{height:220px}
.bildgrid{grid-template-columns:repeat(4,1fr)}
.quad{gap:14px}
/* Design-Audit 2026-08-13: .setup-popup/.sdpopup/.sheet/.standortmenu sind
position:absolute relativ zu .phone (der vollen Rasterbreite, nicht nur
der Inhaltsspalte) mit left/right auf einen festen Abstand - auf breiten
Bildschirmen ergab das einen fast bildschirmbreiten Dialog statt einer
ruhigen Karte. max-width + margin:auto zentriert sie innerhalb des
bestehenden left/right-Abstands, ohne die transform-basierte
Einblend-Animation dieser Elemente zu beruehren. */
.setup-popup,.sdpopup,.sheet{max-width:560px;margin-left:auto;margin-right:auto}
.standortmenu{max-width:640px;margin-left:auto;margin-right:auto}
}
/* Fahrzeugbild randlos wie in einer Fahrzeug-App: der Platzhalter bleibt
@@ -1 +1 @@
{"version": 1786730400}
{"version": 1786744000}
+17 -4
View File
@@ -173,8 +173,13 @@
bedienbar. Auf grossen Bildschirmen gibt es damit zwei Wege in die
Einstellungen (Ringe und Zahnrad) - unschaedlich, und der Zugang haengt
nicht mehr davon ab, ob audi-dashboard-ios.css geladen wurde. */
.rings { width: 42px; height: 24px; color: var(--fg); }
.rings svg { width: 42px; height: auto; }
/* Design-Audit 2026-08-13: in Telefonbreite ist dies der einzige Zugang zu
den Einstellungen (siehe Kommentar oben), war mit 42px aber deutlich
kleiner als jeder andere Symbol-Knopf in der Kopfzeile (.themebtn/
.profilbtn/.back sind alle 44px) und lag damit unter der ueblichen
44px-Mindestgroesse fuer Tippflaechen. */
.rings { width: 58px; height: 32px; color: var(--fg); }
.rings svg { width: 58px; height: auto; }
/* Der Markenklon in der Seitenleiste wird vom Skript unbedingt in die
Menueleiste gehaengt; sichtbar macht ihn erst die iOS-Auflage ab 860px.
@@ -490,7 +495,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
min-height: 56px;
border-bottom: 1px solid var(--line);
}
.feld label { font-size: 14px; color: var(--fg2); flex: 1 1 auto; min-width: 0; line-height: 1.35; }
/* :not(.switch): der Schalter (Tanken/Einstellungen etc.) ist selbst ein
<label class="switch">, kein Textlabel - ohne den Ausschluss erbte er
dieselbe flex:1 1 auto-Regel und zog sich über die ganze Zeilenbreite. */
.feld label:not(.switch) { font-size: 14px; color: var(--fg2); flex: 1 1 auto; min-width: 0; line-height: 1.35; }
/* Eingaben nie breiter als die Kachel: die im Markup gesetzten festen
Breiten (width:132px) bleiben Obergrenze, schrumpfen aber mit. */
.feld input, .feld select, .notiz {
@@ -619,7 +627,12 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
.acc-h { transition: background .15s; }
.acc-h:active { background: var(--tile-2); }
.mark {
width: 6px; height: 10px;
/* Design-Audit 2026-08-13: die Border-Ecken-Technik (zwei Kanten +
45deg-Drehung) braucht ein Quadrat, um einen sauberen Chevron zu
ergeben - bei 6x10px (nicht quadratisch, wie fuer die SVG-Chevrons
.chev/.go gedacht) sind die beiden Kantenlaengen ungleich lang und das
Ergebnis sah eher wie ein Haekchen als ein Pfeil aus. */
width: 8px; height: 8px;
border-right: 1.4px solid var(--fg3);
border-bottom: 1.4px solid var(--fg3);
transform: rotate(-45deg);
+18 -17
View File
@@ -29,33 +29,34 @@ authentifizierten Tests.
## Was nachgebildet wird
`konfiguration.yaml` bildet die Entitäten der HACS-Integration
`TommiG1/HA_VAG-EU-Data-Act` als Template-Sensoren nach, damit das Backend echte
Werte sieht. Steuerbar zur Laufzeit über Helfer — damit lassen sich die
`@state_trigger`-Abläufe wirklich auslösen:
`konfiguration.yaml` bildet zwei Datenquellen als Template-Sensoren nach, damit
das Backend echte Werte sieht. Steuerbar zur Laufzeit über Helfer — damit
lassen sich die `@state_trigger`-Abläufe wirklich auslösen:
| Helfer | Steuert | Wofür |
|---|---|---|
| `input_number.test_kilometerstand` | `sensor.audi_rs_4_avant_mileage` | Reifenzähler, Fahrtabschluss-Screening |
| `input_number.test_tankfuellstand` | `sensor.audi_rs_4_avant_fuel_level` | automatische Tankerkennung |
| `input_number.test_reichweite` | `sensor.audi_rs_4_avant_range_primary` | Übersichtsanzeige |
| `input_text.test_wlan` | `sensor.iphone_wifi_connection` | Fahrterkennung (Start/Ende) |
| `input_boolean.test_tuer_vl` | Tür vorne links | „sicher abgestellt" |
| `input_boolean.test_fenster_vl` | Fenster vorne links | „sicher abgestellt" |
| `input_boolean.test_entriegelt` | Türschloss vorne links | „sicher abgestellt" |
| `input_boolean.test_zuendung` | `binary_sensor.testzone_fmm003_engine_ignition_or_acc_status` | Fahrterkennung (Start/Ende, `einstellungen.ZUENDUNG_SENSOR`) |
| `input_number.test_kilometerstand` | `sensor.audi_rs_4_avant_mileage` | Reifenzähler, Fahrtabschluss-Screening (nur bei manueller Zuordnung über das Setup-Menü, `KM_SENSOR` ist per Default leer) |
| `input_number.test_tankfuellstand` | `sensor.audi_rs_4_avant_fuel_level` | automatische Tankerkennung (nur bei manueller Zuordnung, `TANK_SENSOR` ist per Default leer) |
| `input_number.test_reichweite` | `sensor.audi_rs_4_avant_range_primary` | Übersichtsanzeige (nur bei manueller Zuordnung, `RANGE_SENSOR` ist per Default leer) |
| `input_boolean.test_tuer_vl` | Tür vorne links | „sicher abgestellt" (nur bei manueller Zuordnung) |
| `input_boolean.test_fenster_vl` | Fenster vorne links | „sicher abgestellt" (nur bei manueller Zuordnung) |
| `input_boolean.test_entriegelt` | Türschloss vorne links | „sicher abgestellt" (nur bei manueller Zuordnung) |
Beispiel — Fahrt auslösen (WLAN des Fahrzeugs verbinden, dann trennen):
Die Kilometerstand-/Tankfüllstand-/Reichweite- und Tür-/Fenster-/Schloss-Sensoren
bilden die Entitäten der abgelösten HACS-Integration `TommiG1/HA_VAG-EU-Data-Act`
nach (siehe `einstellungen.py`) — für den Standardbetrieb ohne Bedeutung, aber
weiterhin nützlich, um die manuelle Zuordnung über das Setup-Menü zu testen.
Beispiel — Fahrt auslösen (Zündung/ACC an, dann aus):
```bash
T=$(grep VITE_TEST_TOKEN ../companion-app/.env.local | cut -d= -f2)
curl -X POST -H "Authorization: Bearer $T" -H "Content-Type: application/json" \
-d '{"entity_id":"input_text.test_wlan","value":"Audi_MMI"}' \
http://localhost:18123/api/services/input_text/set_value
-d '{"entity_id":"input_boolean.test_zuendung"}' \
http://localhost:18123/api/services/input_boolean/turn_on
```
Der WLAN-Name muss zu `fahrzeug.wlan_ssid` in
`audi_dashboard/fahrzeugprofil.json` passen.
## Aufräumen
```bash
+13 -13
View File
@@ -1,8 +1,11 @@
# Wegwerf-Testinstanz fuer DataMetric360.
# Bildet die Entitaeten der HACS-Integration TommiG1/HA_VAG-EU-Data-Act nach,
# damit das pyscript-Backend echte Werte sieht. Ueber die input_*-Helfer sind
# die Werte zur Laufzeit aenderbar (Fahrterkennung, Reifenzaehler, Tankerkennung
# haengen an @state_trigger).
# Bildet zwei Datenquellen nach: den FMM003-Zuendungssensor (Fahrterkennung,
# aktiv per Standard in einstellungen.py) sowie die Entitaeten der
# abgeloesten HACS-Integration TommiG1/HA_VAG-EU-Data-Act (Kilometerstand,
# Tankfuellstand, Tueren/Fenster/Schloesser - in einstellungen.py per Default
# leer, aber ueber das Setup-Menue weiterhin manuell zuordenbar). Ueber die
# input_*-Helfer sind die Werte zur Laufzeit aenderbar (Fahrterkennung,
# Reifenzaehler, Tankerkennung haengen an @state_trigger).
default_config:
@@ -51,13 +54,9 @@ input_number:
initial: 385
mode: box
input_text:
test_wlan:
name: Test WLAN
initial: Zuhause
max: 60
input_boolean:
test_zuendung:
name: Test Zuendung/ACC
test_tuer_vl:
name: Test Tuer vorne links
test_fenster_vl:
@@ -66,10 +65,11 @@ input_boolean:
name: Test entriegelt
template:
- binary_sensor:
- name: "Testzone FMM003 Engine Ignition Or Acc Status"
unique_id: test_fmm003_zuendung
state: "{{ is_state('input_boolean.test_zuendung', 'on') }}"
- sensor:
- name: "iPhone WiFi Connection"
unique_id: test_iphone_wifi
state: "{{ states('input_text.test_wlan') }}"
- name: "Audi RS 4 Avant Mileage"
unique_id: test_audi_mileage
state: "{{ states('input_number.test_kilometerstand') | int(0) }}"