Files
audi-app/design/README.md
T
tobias d8b12da36d pyscript-Backend zur echten HA-Integration umgebaut (HACS-fähig)
Das Backend liegt jetzt als custom_components/audi_dashboard/ vor - eine
normale Home-Assistant-Integration mit Config-Flow, einer sensor-Plattform
und 18 Diensten. Damit ist die App über HACS installierbar; bis das Repo auf
GitHub gespiegelt ist (HACS spricht ausschließlich mit GitHub), installiert
homeassistant/installationspaket/install.ps1 denselben Ordner ohne HACS.

Fünf Installationsschritte entfallen ersatzlos: der pyscript:-Block, der
panel_custom:-Block, das Kopieren der Oberfläche nach www/, das langlebige
Zugriffstoken (der Verlauf wird direkt über die recorder-API gelesen) und
"pip install pypdf" (steht in manifest.json). Das Fahrzeugprofil legt die
Integration beim ersten Start aus ihrer Vorlage an.

Drei alte Schwächen sind dabei mit erledigt:
- Die Nutzlast landet nicht mehr in der Recorder-Datenbank
  (_unrecorded_attributes - das kann nur eine echte Entität).
- Eine laufende Fahrt überlebt einen Neustart (Store statt Arbeitsspeicher);
  fiel sie während eines Ausfalls ins Ende, schließt
  nach_neustart_fortsetzen() sie beim letzten aufgezeichneten Zeitpunkt.
- Sensor-Zuordnungen wirken sofort - die Zustandsbeobachter werden neu
  gebunden, der Neustart-Hinweis und der Neustart-Dienst sind weg.

Namensvertrag geändert, beide Oberflächen mitgezogen:
pyscript.audi_dashboard_x -> sensor.audi_dashboard_x,
pyscript.audi_dashboard_y -> audi_dashboard.y. Eine Companion-App vom alten
Stand findet nach dem Umstieg nichts mehr und muss neu gebaut werden; das
Panel liegt in der Integration und kann nicht driften.

Der selbstgebaute Updater entfällt - HACS ist die Update-Mechanik, die Home
Assistant kennt. Die Versionierung schrumpft auf eine Quelle: manifest.json.

Geprüft am laufenden Testcontainer (Container byteweise identisch mit dem
Repo): alle 18 Dienste, Panel, Config-Entry neu laden, Historienimport,
echter Shell-Beleg in-process, Neuinstallation im Wegwerf-Container blank mit
automatisch nachinstalliertem pypdf. Companion-App: tsc sauber, 112/112
Tests, beide Rauchtests gegen das laufende Backend grün. Belegparser 8/8.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-23 23:53:56 +02:00

81 lines
6.5 KiB
Markdown

# design/ — Entwurf aus Claude Design
Export des Claude-Design-Projekts **DataMetric360 App Design**
(https://claude.ai/design/p/c28a8d4d-ec4e-4178-9e49-ab5b90c02097).
Das ist der **Entwurf**, nicht der lauffähige Code. Umgesetzt wird er später in
`companion-app/` auf Basis der Komponenten aus `design-system/`; die Architektur dahinter steht in
`../COMPANION_APP_ARCHITECTURE.md`, der Auftrag an den Entwurf in `../DESIGN_BRIEF_DATAMETRIC360.md`.
## Inhalt
| Pfad | Was |
|---|---|
| `DataMetric360.dc.html` | Einstiegsdatei des Entwurfs |
| `DM360.dc.html` | Die eigentlichen Bildschirme und Zustände |
| `DataMetric360 Board.dc.html` | Vergleichsansicht: dieselbe App gleichzeitig als Smartphone- und Großbildschirm-Rahmen nebeneinander, mit Bildschirm-/Theme-Umschalter. Steuert beide Rahmen per `postMessage`. |
| `dm360-host.html` | Lädt `audi-dashboard-app.js` in einem eigenen `<audi-dashboard-panel>`, hängt danach `audi-dashboard-ios.css` in dessen Shadow-Root - der eigentliche Träger hinter dem Board. **Achtung: beide Dateien liegen nicht in diesem Ordner.** Aus der Repo-Kopie heraus bleibt das Board deshalb leer; es läuft nur im Claude-Design-Projekt, wo sie mit hochgeladen sind. |
| `ios-frame.jsx` | iOS-26-Gerätekachel (Statusleiste, Dynamic Island, Home-Indikator) - reine Optik, keine App-Logik. |
| `audi-dashboard-ios.css` *(liegt in `../homeassistant/www/`, nicht in diesem Ordner)* | **Die eigentliche Neuerung dieses Exports.** Optik-Auflage über `audi-dashboard.css`: iOS-natives Erscheinungsbild (44-px-Zeilen, transluzente Tab-Leiste, iOS-Schalter) plus - wichtig - die responsive Großbildschirm-Umsetzung per `@container (min-width:860px)` (Tab-Leiste wird zur seitlichen Navigation). **Seit 2026-08-11 in `homeassistant/www/` scharf geschaltet und im Docker-Testcontainer bei 375px und 1280px verifiziert.** Die Auflage selbst ist rein additiv; `audi-dashboard-app.js` wurde nur um den Stylesheet-Loader ergänzt, der sie nachlädt (siehe unten). |
| `datametric360-ios.css` | Dieselbe Optik-Auflage, aber für die `@audi-dash/ui`-Komponentenklassen (`.ads-*`) statt für die Panel-eigenen Klassen - für später, wenn `companion-app/` eine UI bekommt. |
| `support.js` | Hilfsfunktionen des Entwurfs |
| `assets/` | Icons, Logos, Typenschilder und Schriften, die der Entwurf verwendet |
| `uploads/` | Rohdateien, die ins Design-Projekt hochgeladen wurden (Schriften, Ringe, alle RS-/S-Typenschilder) |
| `_ds/` | Kompiliertes Bündel des Design-Systems `@audi-dash/ui` - erzeugt aus `../design-system/`, hier nur mitgeliefert, damit der Entwurf für sich allein darstellbar ist. **Nicht von Hand ändern**, sondern `../design-system/` anpassen und neu synchronisieren. |
## Stand dieses Exports
Heruntergeladen am 2026-08-11 direkt per Claude-Design-MCP (nicht per ZIP). Zwei bekannte Abweichungen,
die im Design-Projekt bereits als Korrektur beauftragt, in *diesem* Export aber noch nicht enthalten
sind:
1. **Falsches Modell:** zeigt „Audi RS 6 Avant" mit RS-6-Typenschild. Richtig ist der
**RS 4 Avant competition** (siehe `../SPECIFICATION.md` §1).
2. **Zu geringer Umfang:** enthält erst die Hauptbildschirme. Es fehlen 16 weitere Seiten, die das
bestehende HA-Panel bereits hat (Fahrzeugstatus, Fahrzeugdaten, Batterieverlauf, Service,
Werkstatt, Servicebuch, Versicherung/Steuer, Beitrag, Vertragsdetails, Schutzbrief, Notruf,
Kfz-Steuer, Reifen, Fahrt-Detail, Tankvorgang-Detail sowie deutlich umfangreichere Einstellungen)
- vollständige Liste in `../SPECIFICATION.md` §3.
**Drittens, neu und wichtig:** das im Board-Entwurf verwendete `audi-dashboard-app.js` weicht vom
tatsächlich in `../homeassistant/www/` laufenden Stand ab (641 Zeilen Unterschied im Diff). Der
Design-Entwurf scheint auf einem älteren Stand aufzusetzen und enthält nicht alle seither gemachten
Anpassungen - u. a. fehlen die Vier-Kacheln-Kurzwahl auf der Übersicht (Fahrzeugstatus/Service/
Reifen/Tanken), die füllstandsabhängige Balkenfarbe und die Resttank-in-Liter-Angabe. **Deshalb wurde
nur `audi-dashboard-ios.css` übernommen (reine CSS-Auflage, keine Logik) - `audi-dashboard-app.js`
selbst wurde NICHT aus diesem Export übernommen**, um diese bereits fertigen Funktionen nicht zu
verlieren.
**Aktivierung 2026-08-11:** `audi-dashboard-ios.css` ist jetzt in
`../custom_components/audi_dashboard/frontend/audi-dashboard-app.js` (Stylesheet-Loader, ~Zeile 3098) fest verdrahtet - als
zweiter `<link>` neben `audi-dashboard.css`, rein additiv. Im Docker-Testcontainer bei 375px
(Handy: `.phone` bleibt `flex`, Tab-Leiste unten) und 1280px (Desktop: `.phone` wird `grid`,
264px-Seitennavigation, Inhalt bis 860px begrenzt) verifiziert.
Dabei zwei Fixes nötig, die für künftige Arbeit an dieser Datei wichtig sind:
1. **`:host`-Selektoren werden von diesem Browser innerhalb von `@container`-Blöcken verworfen**
(unbedingtes `:host > div{...}` parst und wirkt, dasselbe innerhalb `@container(){}` verschwindet
spurlos aus dem CSSOM - kein Syntaxfehler, die Regel fehlt einfach). Der alten `:host > div`-
Zentrierung aus `audi-dashboard.css` (`max-width:412px`, für die alte Einzelgröße gedacht) musste
deshalb **unbedingt** statt bedingt (nur ab 860px) die Deckelung genommen werden - auf schmalen
Bildschirmen macht der Viewport selbst die Breite eng genug, das ist folgenlos.
2. **Die Version in `manifest.json` muss bei jeder CSS-/JS-Änderung hochgezählt werden**, sonst
liefert der Browser die alte Datei aus dem HTTP-Cache aus, obwohl der Server längst die neue
hat. Die Integration hängt diese Zahl als `?v=…` an die Panel-URL; sie ist der Cache-Brecher
(siehe VERSIONIERUNG.md). *Bis 2026-08-23 stand sie in `audi-dashboard-version.json` - die
Datei gibt es nicht mehr.* Zusätzlich cacht `window.__audiDashboardStarten` das Ladeergebnis pro
Browser-Tab - eine SPA-interne Navigation zur selben Panel-URL lädt nicht neu; ein neuer Tab
(oder echter Hard-Reload) ist bei Verifikationen nötig.
Bevor diese Auflage weitergehend produktiv genutzt wird, muss noch geklärt werden, ob/wie sie mit
zukünftigen Änderungen am aktuellen `audi-dashboard-app.js` zusammenpasst.
Dieser Ordner wird beim nächsten Export komplett ersetzt.
## Markenrechtlicher Hinweis
`assets/` und `uploads/` enthalten die Hausschrift Audi Type, die Ringe und die Typenschilder. Die
sind lizenz- beziehungsweise markenrechtlich geschützt (`../bauauftrag.md` §8/§12) und nur für diese
private Installation freigegeben. Dieses Repository ist deshalb privat zu halten. `../design-system/`
kommt bewusst ohne diese Dateien aus, weil es nach außen (Claude Design) hochgeladen wird.