Geburtstagskalender

Aus einem Foto pro Kind werden zwei A4-PDFs zum Ausdrucken und Ausschneiden:

• Geburtstagskalender – runde Bilder mit farbigem Rand: Name und Geburtstag stehen im Bogen im Rand, die Farbe zeigt die Jahreszeit der Geburt.
• Fotoseiten – pro Kind eine Seite mit allen Bildern, die im Kindergarten gebraucht werden (großes Bild mit Namen, großer Kreis, Namensstreifen, Karte mit Geburtstag, Passbilder, Kreis mit Ring), alle schon zugeschnitten.

Die Fotos bleiben auf dem eigenen Computer. Die Seite läuft komplett im Browser, es wird nichts hochgeladen, es gibt keinen Server und kein Benutzerkonto.

So geht's

1. Fotos auswählen – alle auf einmal. Am besten heißt jede Datei wie das Kind (Lyra.jpg).

2. Geburtstage eintragen – entweder direkt in die Felder, oder unter Geburtstage aus einer Liste übernehmen die ganze Liste einfügen, eine Zeile pro Kind:

   Lyra, 16.01.2022
   Sophia, 08.10.2021
   

   Gibt es zwei Kinder mit dem gleichen Namen, wird nichts geraten – die Karte fragt nach, welcher der beiden Geburtstage gemeint ist.

3. PDF erstellen – unten rechts:

   • Geburtstagskalender: 20 Kreise pro A4-Seite, sortiert von Januar bis Dezember.
   • Fotoseiten: eine Seite pro Kind, alphabetisch. Einzelne Seite: bei der Karte unter Fotoseite → Nur diese Seite als PDF.

Das Foto im Kreis lässt sich mit der Maus verschieben, der Regler darunter zoomt. Beim Einlesen wird das Gesicht automatisch gesucht und mittig gesetzt.

Für die Fotoseite gibt es bei jeder Karte den aufklappbaren Teil Fotoseite: eine Vorschau der ganzen Seite und zwei Fenster zum Zurechtrücken – Groß & Kreise (quadratisch) und Hochformat (2:3). Mehr Formen hat die Seite nicht. Diese Ausschnitte sind unabhängig vom Geburtstagskreis. Die Farbe des Rings auf der Fotoseite lässt sich unten rechts ändern (Standard: Gelb wie in der Vorlage). Zu lange Namen werden automatisch kleiner gesetzt.

Alles wird im Browser gespeichert: beim nächsten Öffnen – auch nächstes Jahr – sind alle Kinder noch da, und es kommen nur die neuen dazu.

Farben

Die Ringfarbe richtet sich nach der astronomischen Jahreszeit des Geburtstags:

Jahreszeit	Zeitraum	Farbe
Frühling	20.03. – 20.06.	Grün #00B050
Sommer	21.06. – 21.09.	Gelb #FFC000
Herbst	22.09. – 20.12.	Rot #C00000
Winter	21.12. – 19.03.	Blau #2E74B5

Die Maße (Kreis 45 mm, Foto 35 mm) und die Farbwerte stammen aus dem ursprünglichen Word-Dokument, damit neue Kreise zu den bereits gebastelten passen.

Auch die Maße der Fotoseite kommen aus ihrem Word-Dokument (Beispiel „Erik“). Die Schrift dort ist Calibri; verwendet wird Carlito, die gleich breit ist, aber frei verwendbar.

Entwicklung

Kein Build-Schritt, keine Abhängigkeiten zum Installieren – reine statische Dateien.

python3 -m http.server 8000     # und http://localhost:8000 öffnen

Datei	Aufgabe
src/badge.js	zeichnet den Kreis (Ring, Foto, Bogentext) – für Vorschau und PDF
src/season.js	Datum → Jahreszeit → Farbe
src/faces.js	Gesichtserkennung für die ersten Bildausschnitte
src/images.js	Fotos einlesen, drehen, verkleinern
src/cards.js	Namen zuordnen, Geburtstagsliste einlesen
src/pdf.js	A4-Raster und PDF des Geburtstagskalenders
src/layout.js	die Fotoseite: Position und Größe jedes Bildes, jeder Linie, jedes Textes in mm
src/page.js	zeichnet die Fotoseite – als Vorschau und als PDF-Seite
src/crop.js	Ausschnitte der Fotoseite (quadratisch / hoch)
src/fotoseite-pdf.js	PDF der Fotoseiten, Schrift eingebettet
src/store.js	Speichern im Browser (IndexedDB)
src/app.js	Bedienoberfläche

Testseite

test.html zeichnet alle Testfotos als Kreise nebeneinander – gut, um den Bogentext nach Änderungen zu prüfen. test-fotoseite.html baut aus denselben Fotos die Fotoseiten samt PDF (mit ?b64 landet das PDF als Base64 auf der Seite, für automatische Tests). Dafür braucht es zwei Dinge, die absichtlich nicht im Repository liegen (es sind echte Kinderfotos):

• _fixtures/ – ein Ordner (oder Symlink) mit den Fotos
• _fixtures.js – export const FIXTURES = [{ file, name, date }, …]

Mitgelieferte Bibliotheken

Alles liegt in vendor/ bzw. fonts/, damit die Seite ohne CDN und auch offline funktioniert:

• jsPDF 4.2.1 – MIT
• @vladmandic/face-api 1.7.15 samt tiny_face_detector-Modell – MIT
• Nunito – SIL Open Font License (fonts/OFL.txt)
• Carlito – SIL Open Font License (fonts/OFL-carlito.txt)