Logo im QR Code #8

New Issue

2026-08-20T23:21:25Z

florian.wilde commented

2026-08-20 23:21:25 +00:00

Angelegt aus QR Code Generator in Nebula.

_Angelegt aus [QR Code Generator](https://nebula.wilde-ste.de/projects/cmss12yq702p6mm01ctlfe6nz) in Nebula._

florian.wilde added the in-arbeit label 2026-08-21 01:08:06 +00:00

florian.wilde started working 2026-08-21 01:08:20 +00:00

florian.wilde commented

2026-08-21 01:10:39 +00:00

🤖 Claude Code hat mit der Umsetzung begonnen.

Branch: feat/8-logo-im-code
Verstanden als: Ein Bild in die Mitte des QR-Codes setzen. Woher es kommt, war im Chat abgestimmt: beides zur Wahl — das Logo der Installation aus dem Erscheinungsbild, oder ein eigenes je Code hochgeladen.
Geplantes Vorgehen:
- Die Gestaltung bekommt drei Felder: Quelle (keins / Installation / eigenes), Upload-Kennung und Größe in Prozent der Kantenlänge (10–25, voreingestellt 20).
- Fehlerkorrektur wird bei gesetztem Logo auf H erzwungen — sichtbar in der Oberfläche, nicht heimlich.
- Ab 22 % steht eine Warnung dabei, dass manche Scanner damit hadern.
- Gerendert wird weiterhin serverseitig, damit Vorschau und Download übereinstimmen: SVG bekommt ein eingebettetes Bild, PNG wird mit sharp zusammengesetzt. Hinter dem Logo liegt eine Fläche in der Hintergrundfarbe.
- Die Prüfung ist hier die halbe Arbeit. Jeder erzeugte Code wird im Test wieder eingelesen und mit dem erwarteten Inhalt verglichen — über mehrere Größen, Prozentsätze und Inhaltslängen. Die Roadmap nennt das zu Recht den Punkt mit dem größten Risiko.

Zeiterfassung läuft.

🤖 **Claude Code hat mit der Umsetzung begonnen.** - Branch: `feat/8-logo-im-code` - Verstanden als: Ein Bild in die Mitte des QR-Codes setzen. Woher es kommt, war im Chat abgestimmt: **beides zur Wahl** — das Logo der Installation aus dem Erscheinungsbild, oder ein eigenes je Code hochgeladen. - Geplantes Vorgehen: - Die Gestaltung bekommt drei Felder: Quelle (keins / Installation / eigenes), Upload-Kennung und Größe in Prozent der Kantenlänge (10–25, voreingestellt 20). - **Fehlerkorrektur wird bei gesetztem Logo auf H erzwungen** — sichtbar in der Oberfläche, nicht heimlich. - Ab 22 % steht eine Warnung dabei, dass manche Scanner damit hadern. - Gerendert wird weiterhin serverseitig, damit Vorschau und Download übereinstimmen: SVG bekommt ein eingebettetes Bild, PNG wird mit `sharp` zusammengesetzt. Hinter dem Logo liegt eine Fläche in der Hintergrundfarbe. - **Die Prüfung ist hier die halbe Arbeit.** Jeder erzeugte Code wird im Test wieder eingelesen und mit dem erwarteten Inhalt verglichen — über mehrere Größen, Prozentsätze und Inhaltslängen. Die Roadmap nennt das zu Recht den Punkt mit dem größten Risiko. Zeiterfassung läuft.

florian.wilde worked for 27 minutes

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

florian.wilde referenced this issue from a commit

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

Logo in der Mitte des QR-Codes

florian.wilde referenced a pull request that will close this issue

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

Feat #8: Logo im QR-Code #16

florian.wilde added zu-testen and removed in-arbeit labels 2026-08-21 01:36:56 +00:00

florian.wilde commented

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

✅ Umsetzung abgeschlossen — bereit zum Testen.

Was geändert wurde

Im Abschnitt Gestaltung gibt es „Logo in der Mitte“: ein Haken, dann die Wahl zwischen Logo dieser Installation (aus dem Erscheinungsbild) und eigenem Logo je Code. Ist kein Logo hinterlegt, entfällt die Wahl und es bleibt der eigene Upload.
Größe zwischen 10 und 25 % der Kantenlänge, voreingestellt 20 % — das entspricht rund 4 % der Fläche.
Die Fehlerkorrektur wird auf H erzwungen, sobald ein Logo gesetzt ist. Die Auswahl steht dann fest auf H, ist ausgegraut und erklärt sich: „Mit Logo gilt H — was das Bild verdeckt, muss die Fehlerkorrektur ausgleichen.“
Ab 22 % kommt eine Warnung dazu, dass manche Scanner-Apps in der Mitte nach Ausrichtungsmustern suchen.
Hinter dem Bild liegt eine Fläche in der Hintergrundfarbe. Das Bild wird eingepasst, nicht beschnitten — ein Logo im Querformat bleibt vollständig.
Vorschau und Download stimmen weiterhin überein: SVG bekommt ein eingebettetes Bild, PNG wird mit sharp zusammengesetzt.

Zur Lesbarkeit — der eigentliche Punkt

Die Roadmap nennt das den Punkt mit dem größten Risiko, etwas Kaputtes auszuliefern. Die Testreihe liest deshalb jeden erzeugten Code wieder ein und vergleicht ihn mit dem erwarteten Inhalt:

Fall	Ergebnis
10 / 20 / 25 % bei 512 px	lesbar
20 / 25 % bei 256 px	lesbar
20 % bei 1024 px, 25 % bei 1024 px	lesbar
lange Adresse (100 Zeichen) mit 20 % und 25 %	lesbar
dunkler Grund, Rand 1 Modul	lesbar

Dazu der Nachweis, dass wirklich H greift: Mit Logo braucht derselbe Inhalt so viele Module wie mit H — und mehr als mit L.

Das ersetzt trotzdem nicht deinen Scan. Ein Automat liest wohlwollender als eine Kamera bei schlechtem Licht. Vor dem ersten Druck gehört ein Code mit Logo einmal mit dem Handy geprüft, gern mit zwei Apps. Das steht auch so in der Oberfläche.

Migration: 20260821020000_logo_im_code — drei Spalten an QrCode.

Geänderte Dateien

src/lib/qr/design.ts, src/lib/qr/logo.ts (neu), src/lib/qr/render.ts
src/lib/uploads.shared.ts, src/lib/uploads.ts
src/app/api/codes/route.ts, src/app/api/codes/[id]/route.ts, src/app/api/codes/[id]/qr/route.ts, src/app/api/qr/preview/route.ts, src/app/api/qr/download/route.ts
src/components/design-panel.tsx, src/components/qr-generator.tsx, src/app/(app)/erstellen/[type]/page.tsx
prisma/schema.prisma + Migration, package.json/package-lock.json, README.md, docs/funktionen.md

So testest du es

git switch feat/8-logo-im-code
docker compose up -d --build app
Einen Website-Code anlegen, im Abschnitt Gestaltung unten „Ein Logo in die Mitte des Codes setzen“ anhaken, ein PNG wählen.
Erwartet: Die Vorschau zeigt das Logo mittig, die Fehlerkorrektur springt auf H und lässt sich nicht mehr ändern.
Den Code als PNG herunterladen und mit dem Handy scannen — das ist der Test, auf den es ankommt.
Regler auf 25 % ziehen → Warnung erscheint. Auch diesen Code einmal scannen.
Gegenprobe mit dem Logo der Installation: unter Verwaltung → Erscheinungsbild ein Logo hochladen, dann steht im Generator die Auswahl der Herkunft.

Geprüft mit einer eigenen Testreihe: 44 von 44 — einmal gegen next dev und einmal gegen das fertig gebaute Alpine-Image. Letzteres war wichtig, weil sharp als Binärabhängigkeit im Standalone-Build ankommen muss. Tut es.

Aufgewendete Zeit: 00:28
Pull Request: #16

Nach Freigabe: /issue-freigabe 8

Am Rande aufgefallen (kein eigenes Issue angelegt):

Der Punkt „Logo im QR-Code“ steht noch unter Als Nächstes in docs/roadmap.md. Ich lasse die Roadmap hier bewusst unangetastet — sie soll ohnehin einmal geschlossen an die Issues angeglichen werden, und dabei wandert der Punkt nach unten zum Changelog.
In Meine Codes lässt sich die Gestaltung eines gespeicherten Codes gar nicht ändern — auch Farben nicht. Ein Logo nachträglich zu setzen geht deshalb nur über die API. Das war schon vorher so und ist für sich genommen eine eigene Aufgabe.

✅ **Umsetzung abgeschlossen — bereit zum Testen.**  **Was geändert wurde** - Im Abschnitt **Gestaltung** gibt es „Logo in der Mitte“: ein Haken, dann die Wahl zwischen **Logo dieser Installation** (aus dem Erscheinungsbild) und **eigenem Logo** je Code. Ist kein Logo hinterlegt, entfällt die Wahl und es bleibt der eigene Upload. - Größe zwischen 10 und 25 % der Kantenlänge, voreingestellt 20 % — das entspricht rund 4 % der Fläche. - **Die Fehlerkorrektur wird auf H erzwungen**, sobald ein Logo gesetzt ist. Die Auswahl steht dann fest auf H, ist ausgegraut und erklärt sich: „Mit Logo gilt H — was das Bild verdeckt, muss die Fehlerkorrektur ausgleichen.“ - Ab 22 % kommt eine Warnung dazu, dass manche Scanner-Apps in der Mitte nach Ausrichtungsmustern suchen. - Hinter dem Bild liegt eine Fläche in der Hintergrundfarbe. Das Bild wird eingepasst, nicht beschnitten — ein Logo im Querformat bleibt vollständig. - Vorschau und Download stimmen weiterhin überein: SVG bekommt ein eingebettetes Bild, PNG wird mit `sharp` zusammengesetzt. **Zur Lesbarkeit — der eigentliche Punkt** Die Roadmap nennt das den Punkt mit dem größten Risiko, etwas Kaputtes auszuliefern. Die Testreihe liest deshalb **jeden** erzeugten Code wieder ein und vergleicht ihn mit dem erwarteten Inhalt: | Fall | Ergebnis | | --- | --- | | 10 / 20 / 25 % bei 512 px | lesbar | | 20 / 25 % bei 256 px | lesbar | | 20 % bei 1024 px, 25 % bei 1024 px | lesbar | | lange Adresse (100 Zeichen) mit 20 % und 25 % | lesbar | | dunkler Grund, Rand 1 Modul | lesbar | Dazu der Nachweis, dass wirklich H greift: Mit Logo braucht derselbe Inhalt so viele Module wie mit H — und mehr als mit L. **Das ersetzt trotzdem nicht deinen Scan.** Ein Automat liest wohlwollender als eine Kamera bei schlechtem Licht. Vor dem ersten Druck gehört ein Code mit Logo einmal mit dem Handy geprüft, gern mit zwei Apps. Das steht auch so in der Oberfläche. **Migration:** `20260821020000_logo_im_code` — drei Spalten an `QrCode`. **Geänderte Dateien** - `src/lib/qr/design.ts`, `src/lib/qr/logo.ts` (neu), `src/lib/qr/render.ts` - `src/lib/uploads.shared.ts`, `src/lib/uploads.ts` - `src/app/api/codes/route.ts`, `src/app/api/codes/[id]/route.ts`, `src/app/api/codes/[id]/qr/route.ts`, `src/app/api/qr/preview/route.ts`, `src/app/api/qr/download/route.ts` - `src/components/design-panel.tsx`, `src/components/qr-generator.tsx`, `src/app/(app)/erstellen/[type]/page.tsx` - `prisma/schema.prisma` + Migration, `package.json`/`package-lock.json`, `README.md`, `docs/funktionen.md` **So testest du es** 1. `git switch feat/8-logo-im-code` 2. `docker compose up -d --build app` 3. Einen Website-Code anlegen, im Abschnitt **Gestaltung** unten „Ein Logo in die Mitte des Codes setzen“ anhaken, ein PNG wählen. 4. Erwartet: Die Vorschau zeigt das Logo mittig, die Fehlerkorrektur springt auf H und lässt sich nicht mehr ändern. 5. Den Code als PNG herunterladen und **mit dem Handy scannen** — das ist der Test, auf den es ankommt. 6. Regler auf 25 % ziehen → Warnung erscheint. Auch diesen Code einmal scannen. 7. Gegenprobe mit dem Logo der Installation: unter **Verwaltung → Erscheinungsbild** ein Logo hochladen, dann steht im Generator die Auswahl der Herkunft. Geprüft mit einer eigenen Testreihe: **44 von 44** — einmal gegen `next dev` und einmal gegen das fertig gebaute Alpine-Image. Letzteres war wichtig, weil `sharp` als Binärabhängigkeit im Standalone-Build ankommen muss. Tut es. **Aufgewendete Zeit:** 00:28 **Pull Request:** #16 Nach Freigabe: `/issue-freigabe 8` --- **Am Rande aufgefallen** (kein eigenes Issue angelegt): - Der Punkt „Logo im QR-Code“ steht noch unter **Als Nächstes** in `docs/roadmap.md`. Ich lasse die Roadmap hier bewusst unangetastet — sie soll ohnehin einmal geschlossen an die Issues angeglichen werden, und dabei wandert der Punkt nach unten zum Changelog. - In **Meine Codes** lässt sich die Gestaltung eines gespeicherten Codes gar nicht ändern — auch Farben nicht. Ein Logo nachträglich zu setzen geht deshalb nur über die API. Das war schon vorher so und ist für sich genommen eine eigene Aufgabe.

florian.wilde closed this issue

2026-08-21 08:56:58 +00:00

florian.wilde referenced this issue from a commit

2026-08-21 08:56:59 +00:00

Merge #8: Logo im QR-Code

florian.wilde commented

2026-08-21 08:57:45 +00:00

🚀 Freigegeben und nach main übernommen.

Merge-Commit: 830d6d7
Pull Request: #16 (gemergt)
Gesamtaufwand: 00:28

Konflikt mit #6, aufgelöst. Beide Zweige haben in docs/funktionen.md an derselben Stelle einen Abschnitt eingefügt. Aufgelöst nach Zugehörigkeit: Die Dublettenprüfung aus #6 schließt an das Ablegen an und bleibt deshalb im Abschnitt „Ein statischer Code mit Namen“; der neue Abschnitt „Ein Logo in der Mitte“ folgt danach, vor „Der Kurz-Link“. Kein Text der jeweils anderen Seite wurde geändert.

src/app/api/codes/route.ts und src/components/qr-generator.tsx hat Git selbst zusammengeführt — nachgesehen: Dublettenprüfung und Logo stehen dort unabhängig nebeneinander.

Danach beide Testreihen gegen den zusammengeführten Stand: Logo 44 von 44, Dubletten 24 von 24. Typprüfung und Linter auf main: grün.

Issue wird geschlossen.

🚀 **Freigegeben und nach `main` übernommen.**  - Merge-Commit: `830d6d7` - Pull Request: #16 (gemergt) - Gesamtaufwand: 00:28 **Konflikt mit #6, aufgelöst.** Beide Zweige haben in `docs/funktionen.md` an derselben Stelle einen Abschnitt eingefügt. Aufgelöst nach Zugehörigkeit: Die **Dublettenprüfung** aus #6 schließt an das Ablegen an und bleibt deshalb im Abschnitt „Ein statischer Code mit Namen“; der neue Abschnitt **„Ein Logo in der Mitte“** folgt danach, vor „Der Kurz-Link“. Kein Text der jeweils anderen Seite wurde geändert. `src/app/api/codes/route.ts` und `src/components/qr-generator.tsx` hat Git selbst zusammengeführt — nachgesehen: Dublettenprüfung und Logo stehen dort unabhängig nebeneinander. Danach beide Testreihen gegen den zusammengeführten Stand: Logo **44 von 44**, Dubletten **24 von 24**. Typprüfung und Linter auf `main`: grün. Issue wird geschlossen.

florian.wilde removed the zu-testen label 2026-08-21 08:57:47 +00:00

florian.wilde referenced this issue

2026-08-21 09:00:59 +00:00

QR-Typen je Gruppe freigeben #11

florian.wilde referenced this issue

2026-08-21 09:27:40 +00:00

Version 1.7.0: Dokumentation durchgesehen, Roadmap angeglichen #18

Sign in to join this conversation.