Ich habe ein interaktives Malbuch für Kinder entwickelt, das sowohl online als auch offline verfügbar ist. Die Online-Version ermöglicht mehreren Personen das gleichzeitige Ausmalen eines Bildes – ideal für gemeinsames Zeichnen mit Freunden oder Eltern. Die Offline-Version ist als digitales PDF-Produkt konzipiert und eignet sich besonders für kleinere Kinder, bei denen Bildschirmzeit vermieden werden soll.
Online-Version
Die Online-Version steht auf der Website stadtpiraten.at zur Verfügung.
Sie ist für mobile Endgeräte optimiert (responsiv) und lässt sich mit Stift, Finger oder Maus bedienen.
Hauptfunktionen:
- Gleichzeitiges Ausmalen durch mehrere Personen in Echtzeit: Bild teilen für gemeinsames Zeichnen
- Ausmalhilfe durch automatische Maskierung einzelner Bereiche
- Pinch-to-Zoom für einfaches Vergrößern
- Vollbildmodus für konzentriertes Arbeiten
- Info-Modus mit Titel, Beschreibung und farbigem Beispielbild
- Pipette, um Farben direkt aus dem Bild aufzunehmen
- Farbpalette basierend auf der Vorlage, eigene Farben werden ergänzt
- HSV-Farbwähler
- Bearbeitungen werden automatisch am Server gespeichert
- Speichern und Schließen
Offline-Version
Die Offline-Version ist als druckbares PDF erhältlich. Sie enthält die gleichen Ausmalbilder in Schwarz-Weiß und kann beliebig oft gedruckt werden – ideal, wenn Kinder ein Bild mehrfach ausmalen möchten.
Technisches Realisierung
Online-Version:
- Frontend: HTML5 mit Canvas (zum Malen) und SVG (für die Vorlagen) zum verlustfreien Vergrößern
- Build-Tool: Vite für effiziente Entwicklung und kompakte Auslieferung
- Backend: Node.js mit WebSockets für Echtzeit-Kommunikation
- Integration: Einbindung via Reverse Proxy in die bestehende WordPress-Seite
- Admin Interface: Authentifizierung über WordPress (als Proxy)
- Illustrationen: mit Adobe Illustrator realisiert
Umsetzung der Offline-Version (Malbuch)
- PDF-Generierung aus Bild-Metadaten (Titel, Beschreibung) und Vorlagen
- Automatisierte Mockup-Erstellung mit Python und Blender aus Einzelbildern
Fazit
Was denkt ihr über dieses Projekt? Postet in den Kommentaren!