Layer-Symbol: falscher Pfad in der App, zu klein in beiden (2026.8.30.12)

Drei Anlaeufe, die ersten beiden mein Fehler. Gemeldet war "Icon falsch im
Knopf platziert". Ich habe die Zeichenflaeche gemessen, sie fuellt 20,9x15,6
des 24er-Rasters gegen 20x20 bis 24x22 bei den Nachbarn, und daraus auf "zu
schwer und aussermittig" geschlossen - also verkleinert. Zwei Fehler darin:
gemessen habe ich das Panel und geaendert habe ich beide, ohne das Symbol der
App je selbst zu messen; und "fuellt weniger Flaeche als die Nachbarn" spricht
fuer "wirkt kleiner", nicht dagegen.

Nach der Ruecknahme im Panel zeigte die Messung der App den echten Fehler
dort: ihr mapLayer-Pfad begann mit grossem M statt kleinem m. Beim ersten
Befehl ist das gleichbedeutend, aendert aber alles danach - nach M gelten
folgende Zahlenpaare als absolute Linien, nach m als relative. Der zweite
Punkt sprang damit auf (-8.97,-5.66), weit aus dem Raster: das Symbol war
verzerrt, nicht bloss falsch dimensioniert. Pfad wortgleich vom Panel
uebernommen, alle vier Steuerungssymbole vergleichen sich jetzt zeichengleich.

Damit stand die urspruengliche Meldung fuer sich und war schlicht richtig: die
flache Form wirkt bei gleicher Kastengroesse kleiner. Beide zeichnen sie jetzt
mit 26px statt 22px - dieselbe Loesung wie beim Oelwechsel-Icon der
Servicebloecke, das aus demselben Grund 26px neben 20px bekommt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-30 23:29:07 +02:00
parent 0fd81df700
commit 67135da4f7
6 changed files with 51 additions and 26 deletions
+29 -4
View File
@@ -1,7 +1,7 @@
# AGENTS.md — Project state, review findings, open items, and working rules
**Last updated: 2026-08-30** (owner findings batch - vehicle pin, tile chevrons, select arrows,
SmartDeal dialog, address cache and pull-to-refresh; manifest `2026.8.30.10`, see section AO.
SmartDeal dialog, address cache and pull-to-refresh; manifest `2026.8.30.12`, see section AO.
Before that: design-audit follow-through - the five priority items applied to
both codebases, plus the location preview's wrong pin; manifest `2026.8.30.8`, see section AN.
Before that: third parity round — the panel had never actually rendered Audi
@@ -5874,9 +5874,7 @@ Batteriespannung row got its chevron back (an earlier note claiming the panel ma
was wrong - the panel has a `.chev` there); the Reifen box leads with "aktuell montiert: /
Sommerräder" and drops the dash under the change date; Anzugsmoment uses the gear, not the pencil (the
pencil belongs to the kilometre correction); the wheel odometer is back in the figure typeface at
32px; the map-layer icon is the only one of the four controls not centred in its own grid (2.1 left
vs 1.1 right, measured via `getBBox`) and is now nudged onto centre and scaled to 0.88 so it stops
outweighing its outline neighbours; Teilen uses the real `share-s` from the CI set; and the sheet's
32px; the map-layer icon is covered separately below; Teilen uses the real `share-s` from the CI set; and the sheet's
close button only exists while the sheet is raised - half-covered it looked operable and did nothing.
**The "could not be reproduced" finding was a night-mode-only defect (2026.8.30.10).** The owner
@@ -5930,6 +5928,33 @@ cache landed.
the end of section AN; the panel's 56px sit below Home Assistant's own header, the native shell has
nothing above them but the status bar.
**The map-layer icon took three passes, and the first two were my error - worth recording as a
method failure, not just a fix (2026.8.30.12).** The report was "icon wrongly placed in the button".
I measured the icon's own bounding box, found it filling 20.9 x 15.6 of its 24-grid against
neighbours filling 20x20 to 24x22, read that as *too heavy and off-centre*, and scaled it to 0.88
with a centring nudge - in both codebases. Two mistakes in that: I measured the **panel** and then
changed both, without ever measuring the app's own icon; and "fills less area than its neighbours"
is an argument for it looking *smaller*, which is what the owner had actually meant.
The owner reverted me on the panel ("it had the right size before"), which was correct. Measuring the
app's icon properly then found the real defect there: its `mapLayer` path began with an uppercase
**M** where the panel has a lowercase **m**. For the first command that is equivalent - but it
changes everything after it, because implicit coordinate pairs following `M` are *absolute* linetos
and those following `m` are *relative*. The second point therefore jumped to (-8.97, -5.66), far
outside the viewBox: the app's icon was geometrically wrong, not merely mis-sized. Copied the panel's
string verbatim; all four control icons now compare byte for byte.
With that fixed and my scaling reverted, the original complaint stood on its own and was simply
correct: the glyph is flat (20.9 x 15.6 where the others are near-square), so at the same 22px it
reads noticeably smaller. Now rendered at **26px** in both - the same remedy already used for the
oil-change icon in the service blocks, which gets 26px next to the inspection icon's 20px for exactly
this reason. Measured after: drawn 22.6 x 16.9px against neighbours at 22 x 20.3, 21.1 x 21.1 and
18.3 x 18.3.
**The method lesson:** when a report concerns one of two codebases, measure *that* one before
changing either - and when a measurement says an element is smaller than its neighbours, that is
evidence for "too small", not against it.
**One finding could not be reproduced:** "Fahrten/Tankfüllung: Auflistung/grauer Hintergrund ist
falsch". Panel and app are identical there - same backgrounds (transparent rows on a white tile),
same paddings, same indents, same text. Reported back rather than guessed at.
+13 -13
View File
@@ -29,8 +29,13 @@ const SAT_ZUSATZ = "© Esri"
// Inspektion) — hier lokal, weil sie nur für die Kartensteuerung/den
// Fahrzeugmarker gebraucht werden, nicht als allgemeine UI-Symbole.
const CI = {
/* Beginnt mit kleinem m. Hier stand ein grosses M - beim ersten Befehl
ist das gleichbedeutend, aendert aber alles danach: nach M gelten die
folgenden Zahlenpaare als absolute Linien, nach m als relative. Mit M
sprang der zweite Punkt auf (-8.97,-5.66), also weit aus dem 24er-Raster
heraus - das Symbol war dadurch verzerrt, nicht bloss zu gross. */
mapLayer:
'M11.7 19.4-8.97-5.66.54-.85 8.96 5.67c.17.1.37.1.54 0l8.96-5.67.54.85-8.97 5.66a1.5 1.5 0 0 1-1.6 0m.53-3.84c.17.1.37.1.54 0l8.3-5.25-8.3-5.23a.5.5 0 0 0-.54 0l-8.3 5.23zm-.53.84-9.64-6.09 9.64-6.08a1.5 1.5 0 0 1 1.6 0l9.64 6.08-9.64 6.1c-.49.3-1.11.3-1.6 0Z',
'm11.7 19.4-8.97-5.66.54-.85 8.96 5.67c.17.1.37.1.54 0l8.96-5.67.54.85-8.97 5.66a1.5 1.5 0 0 1-1.6 0m.53-3.84c.17.1.37.1.54 0l8.3-5.25-8.3-5.23a.5.5 0 0 0-.54 0l-8.3 5.23zm-.53.84-9.64-6.09 9.64-6.08a1.5 1.5 0 0 1 1.6 0l9.64 6.08-9.64 6.1c-.49.3-1.11.3-1.6 0Z',
carSearch:
'M1 7.8a6.16 6.16 0 0 0 6.1 6.1h.4A5.7 5.7 0 0 0 13 7.91V7.9a6.1 6.1 0 0 0-5.91-6A5.93 5.93 0 0 0 1 7.8m-1 0C0 3.92 3.23.8 7.11.9a7.1 7.1 0 0 1 6.89 7c.06 2.33-1 4.44-2.73 5.71L14.8 19H20v1.5c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-7.8l-1.9-1.9-.04-.06a55 55 0 0 0-2.84-4.71c-1.42-.1-2.49-.17-3.2-.2l.04-1c.77.04 1.93.1 3.48.22l.24.02.14.2a55 55 0 0 1 2.99 4.93L24 12.3v8.2c0 .83-.67 1.5-1.5 1.5h-2a1.5 1.5 0 0 1-1.5-1.5V20h-3.55l1.67 2.54-.84.54L14.26 20 5 19.96v.54c0 .83-.67 1.5-1.5 1.5h-2A1.5 1.5 0 0 1 0 20.5v-7.08h1v7.08c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-1.54l9.6.02-3.17-4.83c-.87.45-1.85.72-2.92.75H7.1c-3.88 0-7-3.13-7.1-7.09zm5.47-2.75c1.86-.12 3.37-.2 4.52-.24l.03 1c-1.08.03-2.5.1-4.24.22L4.51 8c-.27.43-.6 1-1 1.7l-.87-.48c.4-.72.74-1.3 1.03-1.76q.6-.96 1.41-2.19l.14-.2z',
gps: 'M12.5 3.51V6.5h-1V3.51a8.46 8.46 0 0 0-7.99 7.99H6.5v1H3.51a8.46 8.46 0 0 0 7.99 7.99V17.5h1v2.99a8.46 8.46 0 0 0 7.99-7.99H17.5v-1h2.99a8.46 8.46 0 0 0-7.99-7.99m0-1a9.46 9.46 0 0 1 8.99 8.99h2.01v1h-2.01a9.46 9.46 0 0 1-8.99 8.99v2.01h-1v-2.01a9.46 9.46 0 0 1-8.99-8.99H.5v-1h2.01a9.46 9.46 0 0 1 8.99-8.99V.5h1z',
@@ -64,11 +69,6 @@ function ciIcon(d: string, px: number): string {
return `<svg viewBox="0 0 24 24" width="${px}" height="${px}" fill="none" aria-hidden="true"><path fill="currentColor" d="${d}"/></svg>`
}
/* Wie ciIcon, aber mit der Korrektur fuer das Layer-Symbol (siehe dort). */
function ciIconZentriert(d: string, px: number): string {
return `<svg viewBox="0 0 24 24" width="${px}" height="${px}" fill="none" aria-hidden="true"><g transform="translate(1.44 1.44) scale(0.88) translate(-0.55 0.2)"><path fill="currentColor" d="${d}"/></g></svg>`
}
function fahrzeugMarkerHtml(px = 38): string {
// Groessenwechsel wie fahrzeugMarkerSVG() im Panel: ab 34px die grosse
// Zeichnung (48er-Raster), darunter die kleine (24er). Die Vorschaukarte der
@@ -439,13 +439,13 @@ export function Standort() {
onClick={() => setzeSatellit((s) => !s)}
aria-pressed={satellit}
aria-label={satellit ? "Satellitenansicht, zur Straßenkarte wechseln" : "Straßenkarte, zur Satellitenansicht wechseln"}
/* Das Layer-Symbol ist als einziges der vier Kartenknoepfe nicht mittig in
seinem eigenen 24er-Raster (Rand links 2,1 / rechts 1,1, gemessen ueber
getBBox) und fuellt als gefuellte Form deutlich mehr Flaeche als die drei
Kontur-Nachbarn. Die Verschiebung setzt seinen Mittelpunkt genau auf
(12,12), der Faktor 0,88 nimmt ihm das Uebergewicht - dieselbe Behandlung
wie beim Statistik-Tabsymbol. */
dangerouslySetInnerHTML={{ __html: ciIconZentriert(CI.mapLayer, 22) }}
/* Das Layer-Symbol ist flach: seine Zeichnung fuellt im 24er-Raster nur
20,9 x 15,6, waehrend die drei Nachbarn 20x20 bis 24x22 einnehmen (alle
per getBBox gemessen). Bei gleicher Kastengroesse wirkt es dadurch
deutlich kleiner. 26px statt 22px gleichen das aus - dieselbe Loesung
wie beim Oelwechsel-Icon der Servicebloecke, das aus demselben Grund
26px statt 20px bekommt. */
dangerouslySetInnerHTML={{ __html: ciIcon(CI.mapLayer, 26) }}
/>
<button
type="button"
@@ -1 +1 @@
{"version":"2026.8.30.10","sha256":"0a9cdbbccf4e91b07152699e0331bf75ff62908832880e6c2408981b76347710","bytes":257008,"gebaut":"2026-08-30T21:20:20Z"}
{"version":"2026.8.30.12","sha256":"b91419aed81d958d18f3e943158f03f198a0a25dfd34069015933e333b481e9a","bytes":256961,"gebaut":"2026-08-30T21:27:45Z"}
@@ -1166,13 +1166,13 @@ function vStandort() {
<div class="kartensteuerung">
<button type="button" data-standort-layer aria-pressed="${SMAP_STIL === "satellit"}"
aria-label="${SMAP_STIL === "satellit" ? "Satellitenansicht, zur Straßenkarte wechseln" : "Straßenkarte, zur Satellitenansicht wechseln"}">
<!-- Das Layer-Symbol ist als einziges der vier Kartenknoepfe nicht mittig in
seinem eigenen 24er-Raster (Rand links 2,1 / rechts 1,1, gemessen ueber
getBBox) und fuellt als gefuellte Form deutlich mehr Flaeche als die drei
Kontur-Nachbarn. Die Verschiebung setzt seinen Mittelpunkt genau auf
(12,12), der Faktor 0,88 nimmt ihm das Uebergewicht - dieselbe Behandlung
wie beim Statistik-Tabsymbol. -->
${ciSVG(CI.mapLayer, 22).replace("<path", '<g transform="translate(1.44 1.44) scale(0.88) translate(-0.55 0.2)"><path').replace("</svg>", "</g></svg>")}
<!-- Das Layer-Symbol ist flach: seine Zeichnung fuellt im 24er-Raster nur
20,9 x 15,6, waehrend die drei Nachbarn 20x20 bis 24x22 einnehmen (alle
per getBBox gemessen). Bei gleicher Kastengroesse wirkt es dadurch
deutlich kleiner. 26px statt 22px gleichen das aus - dieselbe Loesung
wie beim Oelwechsel-Icon der Servicebloecke, das aus demselben Grund
26px statt 20px bekommt. -->
${ciSVG(CI.mapLayer, 26)}
</button>
<button type="button" data-standort-fahrzeug aria-label="Fahrzeug auf der Karte suchen">
${ciSVG(CI.carSearch, 22)}
@@ -1,7 +1,7 @@
{
"domain": "audi_dashboard",
"name": "Audi Dashboard",
"version": "2026.8.30.10",
"version": "2026.8.30.12",
"documentation": "https://gitea.nothaft.cloud/paul/audi-app/src/branch/main/README.md",
"issue_tracker": "https://gitea.nothaft.cloud/paul/audi-app/issues",
"codeowners": ["@paul"],