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
-
Fotos auswählen – alle auf einmal. Am besten heißt jede Datei wie das Kind (Lyra.jpg).
-
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.
-
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:
