Feat #8: Logo im QR-Code #16

2026-08-21T01:36:43Z

florian.wilde commented

2026-08-21 01:36:43 +00:00

Ein Bild in der Mitte des Codes. Im Abschnitt Gestaltung gibt es dafür „Logo in der Mitte“ mit zwei Quellen — dem Logo der Installation aus dem Erscheinungsbild oder einem eigenen Logo je Code. Die Größe ist zwischen 10 und 25 % der Kantenlänge einstellbar, voreingestellt 20 %.

Die Fehlerkorrektur wird bei gesetztem Logo auf H erzwungen. Die Auswahl steht dann fest auf H, ist ausgegraut und sagt warum. Ab 22 % erscheint zusätzlich eine Warnung: Die Fehlerkorrektur trägt das zwar, aber manche Scanner-Apps suchen in der Mitte nach Ausrichtungsmustern.

Gerendert wie bisher serverseitig, damit Vorschau und Download übereinstimmen: Das SVG bekommt ein eingebettetes <image> samt Fläche in der Hintergrundfarbe, das PNG wird mit sharp zusammengesetzt. sharp lag ohnehin als Abhängigkeit von Next im Baum und steht jetzt ausdrücklich in der package.json; die musl-Binärdateien sind im Lockfile.

Zur Lesbarkeit — die Roadmap nennt das zu Recht den Punkt mit dem größten Risiko. Die Testreihe liest jeden erzeugten Code mit jsQR wieder ein und vergleicht ihn mit dem erwarteten Inhalt: 10/20/25 %, 256/512/1024 px, kurze und lange Adressen, dunkler Grund, Rand 1. Dazu der Nachweis, dass mit Logo wirklich H gilt (der Code braucht dann so viele Module wie mit H, mehr als mit L).

Migration: 20260821020000_logo_im_code — logoSource, logoUploadId, logoScale.

Geändert

src/lib/qr/design.ts — drei Felder, Grenzen, effectiveEcLevel
src/lib/qr/logo.ts (neu) — das Bild aus Erscheinungsbild oder Upload holen
src/lib/qr/render.ts — Einsetzen in SVG und PNG
src/lib/uploads.shared.ts — Upload-Art qrlogo (gehört zum Code, nicht zum Erscheinungsbild)
src/lib/uploads.ts — attachUpload / detachUpload für eine einzelne Datei
src/app/api/codes/**, src/app/api/qr/** — Logo laden, anhängen, lösen
src/components/design-panel.tsx, qr-generator.tsx, Erstellen-Seite
prisma/schema.prisma + Migration, README.md, docs/funktionen.md

Geprüft: 44 von 44, sowohl gegen next dev als auch gegen das fertig gebaute Alpine-Image — dort war die offene Frage, ob sharp im Standalone-Build ankommt. Tut es.

Closes #8

Ein Bild in der Mitte des Codes. Im Abschnitt **Gestaltung** gibt es dafür „Logo in der Mitte“ mit zwei Quellen — dem **Logo der Installation** aus dem Erscheinungsbild oder einem **eigenen Logo** je Code. Die Größe ist zwischen 10 und 25 % der Kantenlänge einstellbar, voreingestellt 20 %. **Die Fehlerkorrektur wird bei gesetztem Logo auf H erzwungen.** Die Auswahl steht dann fest auf H, ist ausgegraut und sagt warum. Ab 22 % erscheint zusätzlich eine Warnung: Die Fehlerkorrektur trägt das zwar, aber manche Scanner-Apps suchen in der Mitte nach Ausrichtungsmustern. **Gerendert wie bisher serverseitig**, damit Vorschau und Download übereinstimmen: Das SVG bekommt ein eingebettetes `<image>` samt Fläche in der Hintergrundfarbe, das PNG wird mit `sharp` zusammengesetzt. `sharp` lag ohnehin als Abhängigkeit von Next im Baum und steht jetzt ausdrücklich in der `package.json`; die musl-Binärdateien sind im Lockfile. **Zur Lesbarkeit** — die Roadmap nennt das zu Recht den Punkt mit dem größten Risiko. Die Testreihe liest **jeden** erzeugten Code mit `jsQR` wieder ein und vergleicht ihn mit dem erwarteten Inhalt: 10/20/25 %, 256/512/1024 px, kurze und lange Adressen, dunkler Grund, Rand 1. Dazu der Nachweis, dass mit Logo wirklich H gilt (der Code braucht dann so viele Module wie mit H, mehr als mit L). **Migration**: `20260821020000_logo_im_code` — `logoSource`, `logoUploadId`, `logoScale`. **Geändert** - `src/lib/qr/design.ts` — drei Felder, Grenzen, `effectiveEcLevel` - `src/lib/qr/logo.ts` (neu) — das Bild aus Erscheinungsbild oder Upload holen - `src/lib/qr/render.ts` — Einsetzen in SVG und PNG - `src/lib/uploads.shared.ts` — Upload-Art `qrlogo` (gehört zum Code, nicht zum Erscheinungsbild) - `src/lib/uploads.ts` — `attachUpload` / `detachUpload` für eine einzelne Datei - `src/app/api/codes/**`, `src/app/api/qr/**` — Logo laden, anhängen, lösen - `src/components/design-panel.tsx`, `qr-generator.tsx`, Erstellen-Seite - `prisma/schema.prisma` + Migration, `README.md`, `docs/funktionen.md` Geprüft: **44 von 44**, sowohl gegen `next dev` als auch gegen das fertig gebaute Alpine-Image — dort war die offene Frage, ob `sharp` im Standalone-Build ankommt. Tut es. Closes #8

florian.wilde added 1 commit 2026-08-21 01:36:44 +00:00

Logo in der Mitte des QR-Codes c06f87e6d9

Zur Wahl stehen zwei Quellen: das Logo der Installation aus dem
Erscheinungsbild oder ein eigenes je Code. Die Groesse ist zwischen 10 und
25 Prozent der Kantenlaenge einstellbar, hinter dem Bild liegt eine Flaeche
in der Hintergrundfarbe.

Mit Logo gilt die Fehlerkorrektur H, unabhaengig von der Auswahl — was das
Bild verdeckt, muss sie ausgleichen. Die Auswahl steht dann fest auf H und
sagt auch warum; heimlich geschieht das nicht. Ab 22 Prozent kommt eine
Warnung dazu.

Gerendert wird weiterhin serverseitig, damit Vorschau und Download
uebereinstimmen: das SVG bekommt ein eingebettetes Bild, das PNG wird mit
sharp zusammengesetzt. sharp lag ohnehin als Abhaengigkeit von Next im
Baum und steht jetzt ausdruecklich in der package.json.

Ein eigenes Logo gehoert zur Gestaltung, nicht zum Inhalt — es muss
trotzdem an den Code gehaengt werden. Sonst raeumt die Aufraeumroutine es
nach einem Tag weg und der Code verliert sein Bild.

Refs #8

florian.wilde referenced this pull request

2026-08-21 01:37:26 +00:00

Logo im QR Code #8

florian.wilde added 1 commit 2026-08-21 08:55:58 +00:00

Merge branch 'main' into feat/8-logo-im-code a4bf3c77b6