Clock-Yourself

Ein Do-It-Yourself Projekt von TurmZeit.de

Digitalisiere deine eigene Turmuhr und lerne dabei Fotografie, Design und Programmierung.

Inhalt dieser Anleitung

01. Einleitung

Dieses DIY-Projekt ist Teil der Initiative turmzeit.de. Wir haben es uns zur Aufgabe gemacht, das kulturelle Erbe analoger Turmuhren und ihre faszinierende Geschichte im digitalen Zeitalter zu bewahren und für kommende Generationen erlebbar zu machen.


Hallo Zeitreisende und Technik-Entdecker! 🕒✨

Hast du dich schon mal gefragt, wer eigentlich die Zeit im Dorf oder in der Stadt "macht"? Hoch oben in den Kirchtürmen und an alten Schulgebäuden wohnen riesige, alte Räderwerke aus Eisen und Messing. Das sind die Turmuhren. Sie haben Kriege überstanden, Generationen beim Aufwachsen zugesehen und schlagen seit hunderten von Jahren im selben Takt.


Aber: Diese alten Riesen werden immer seltener. Hier kommst du ins Spiel! Beim "Clock-Yourself" Projekt wirst du zum digitalen Uhrmacher. Du lernst, wie man diese historischen Zeitmesser fotografiert, mit künstlicher Intelligenz (KI) "repariert" und am Ende auf deiner eigenen Webseite zum Schlagen bringt.

Diese Anleitung begleitet dich dabei, eine echte Kirchturmuhr zu fotografieren, digital aufzubereiten und als interaktive Web-App zum Leben zu erwecken. Ein Projekt von und für turmzeit.de.

Warum dieses Projekt?

Dieses Projekt vereint traditionelle Heimatkunde mit modernster MINT-Bildung. Die Schüler lernen nicht nur die lokale Geschichte kennen, sondern erwerben praxisnahe Kompetenzen in der digitalen Bildbearbeitung, dem Prompt-Engineering (KI) und der Web-Programmierung. Begleiten Sie die Kinder vor allem bei der Fotografie vor Ort und bei der ersten Einrichtung der Dateistruktur – der Rest ist kreatives Entdecken!

Was du dabei lernst:

  • Fotografie: Werde zum Profi für Perspektive und Licht.
  • Bildbearbeitung: Erfahre, wie man mit Affinity Photo Ebenen zaubert.
  • KI-Tools: Nutze Chatbots wie Gemini als deinen persönlichen Grafik-Assistenten.
  • Programmierung: Erwecke deine Uhr mit echtem HTML und JavaScript zum Leben.
  • Recherche: Entdecke die spannenden Geschichten hinter deiner Uhr.

02. Die Ziffernblatt Aufnahme

2.1 Das Ziffernblatt

Das Ziel ist ein klares, isometrisches Foto ohne Verzerrung.

  • Perspektive: Versuche so parallel wie möglich zum Ziffernblatt zu stehen.
  • Technik: Ein modernes Smartphone mit 8x Zoom reicht oft aus – eine Digitalkamera mit Tele-Objektiv ist wegen der Schärfe jedoch besser.
  • Pro-Tipp: Wer eine Drohne hat, kann direkt auf die Höhe der Uhr fliegen (Achtung: Flugregeln beachten!).
  • Licht & Timing: Wenig Schattenwurf ist ideal. Achte darauf, dass die Zeiger nicht über den Zahlen stehen (z.B. 18:13 Uhr), damit die Skala frei ist.
Beispiel Ziffernblatt Foto
Dieses Foto ist nicht optimal (vom Boden aus fotografiert), aber die Verzerrung ist gering genug, dass eine KI es noch hervorragend bearbeiten kann – wie du im nächsten Abschnitt siehst.

2.2 Das Gebäude

Ein schönes Panoramabild des gesamten Turms oder der Schule rundet dein Projekt ab. Hier zählt vor allem die Ästhetik.

Beispiel Turmansicht
Beispiel: Perfekte Bildstimmung durch den Goldenen Schnitt.
  • Der Goldene Schnitt: Platziere den Turm nicht starr in der Bildmitte. Teile das Bild gedanklich durch zwei vertikale Linien in drei gleiche Teile (Drittel-Regel). Wenn der Turm auf einer dieser Linien steht, wirkt das Bild harmonischer und dynamischer für das Auge.
  • Blickführung: Lass das Gebäude in das Bild "hineinschauen". Wenn der Turm rechts steht, sollte links daneben Platz für die Umgebung sein.
  • Abstand: Achte auf genügend "Weißraum" an den Rändern. Das Gebäude sollte nicht oben oder an den Seiten "anklatschen".
  • Datenschutz: Achte darauf, dass keine erkennbaren Personen, Gesichter oder Autokennzeichen auf dem Foto sind. Falls doch, müssen diese später unkenntlich gemacht werden.

Wichtig: Hol dir vorab eine Genehmigung von deiner Schule oder Kirchengemeinde für das Projekt!

03. Magie im Editor

3.1 KI als Assistent

Moderne KI-Tools wie Google Gemini oder ChatGPT sind extrem hilfreich, um komplexe Bildbearbeitungsschritte vorzubereiten. Die KI kann die Perspektive entzerren und die Zeiger digital "ausradieren", sodass du ein sauberes Ziffernblatt erhältst.


Hier ist ein praxiserprobter Grafiker-Prompt, den du zusammen mit deinem Foto an die KI senden kannst:

Du bist ein Grafikdesigner. Deine Aufgabe ist es, dieses Foto einer Kirchturmuhr so aufzubereiten, dass daraus eine digitale Lern-Uhr gebaut werden kann. Das Foto wurde vom Boden aus aufgenommen, daher muss zuerst die Perspektive korrigiert werden (Draufsicht simulieren).


Erstelle daraus ein hochauflösendes Bild mindestens 1500 pixel breit auf neutralem, weißem Hintergrund mit zwei strikt getrennten Bereichen:


Ebene 1 Oben (Ziffernblatt): Das isolierte Ziffernblatt. Entferne die Zeiger digital und fülle die Stellen dahinter so auf, dass ein völlig freies Ziffernblatt entsteht. Ist das Ziffernblatt im original viereckig extrahiere es auch viereckig.

Ebene 2 Unten (Zeiger): Extrahiere den Stunden- und Minutenzeiger. Platziere sie parallel nebeneinander (nicht überlappend) neben dem Ziffernblatt. Beide Zeiger sollen exakt senkrecht nach oben zeigen (12:00 Uhr Ausrichtung).


Technische Details: Erhalte die originalen Proportionen, Farben und Texturen. Nur das runde Ziffernblatt extrahieren, kein Mauerwerk drumherum. Nutze flache, diffuse Beleuchtung.

Tipp: Lade dein Foto bei Google Gemini hoch, kopiere diesen Prompt hinein und schau zu, wie die KI die schwere Arbeit für dich erledigt!

Vorher: Originalfoto
Vorher: Das Originalfoto (vom Boden aus mit Zoom).
Nachher: KI-Ergebnis
Nachher: Das KI-Ergebnis mit entzerrter Perspektive und freigestelltem Ziffernblatt.

3.2 Der Zuschnitt (Affinity Photo)

Da die KI oft noch keine perfekten transparenten PNGs in Einzelteilen liefert, machen wir das manuell:

Vorlage & Software:

Nutze unsere fertige Muster-Vorlage, um direkt loszulegen. Falls du Affinity Foto noch nicht hast, findest du hier die Testversionen.

Musteruhr.afphoto laden Affinity für Windows/Mac
  1. Vorlage öffnen: Starte Affinity Photo und öffne die heruntergeladene musteruhr.afphoto. Diese hat bereits das richtige Format (1000x1000px) und hilfreiche Markierungen in der Mitte.
  2. KI-Bild importieren: Ziehe dein von der KI generiertes Uhrenfoto einfach per Drag & Drop in das Programmfenster. Es erscheint als neue Ebene.
  3. Ziffernblatt zentrieren: Skaliere und verschiebe das Bild so, dass die Achse der Zeiger exakt auf dem Schnittpunkt der Hilfslinien bei 500 x 500 Pixel liegt.
  4. Hintergrund entfernen: Wähle das "Auswahl-Pinsel-Werkzeug" oder den "Zauberstab" aus. Markiere die Bereiche um das Ziffernblatt und lösche sie, bis nur noch das runde Ziffernblatt vor einem transparenten Hintergrund (Schachbrettmuster) zu sehen ist.
  5. Zeiger isolieren: Dupliziere das Bild für die Zeiger. Nutze das Radiergummi-Werkzeug oder Masken, um alles außer dem jeweiligen Zeiger (Stunde/Minute) zu entfernen.
  6. High Noon (12:00 Uhr): Das ist der wichtigste Schritt! Drehe die Zeiger-Ebenen so, dass beide Zeiger exakt nach oben auf die 12 zeigen. Nur so kann das Programm später die richtige Zeit berechnen.
  7. Ebenen einzeln exportieren: Blende nacheinander alle anderen Ebenen aus (Haken im Ebenen-Panel) und speichere die sichtbare Ebene über Datei > Exportieren als PNG mit transparentem Hintergrund.
  8. Dateinamen vergeben: Benenne die Dateien exakt so, wie sie später im Programm aufgerufen werden: ziffernblatt.png, stundenzeiger.png und minutenzeiger.png.
  9. Speicherort: Lege alle drei Bilder in den Unterordner /uhr deines Projekts ab.

3.3 Die Dateistruktur

Am Ende deiner Bearbeitung solltest du folgende Dateien im Ordner /uhr haben. Diese sind die Basis für deine digitale Uhr:

ziffernblatt
ziffernblatt.jpg
stundenzeiger
stundenzeiger.png
minutenzeiger
minutenzeiger.png
original
original.jpg
turmansicht
turmansicht.jpg

04. Die Uhr zum Leben erwecken

In der Datei Turmuhr.html setzen wir alle Puzzleteile zusammen. Ein Webbrowser liest diese Datei und baut daraus die grafische Oberfläche.


Code oder Notepad++, die den Code farbig hervorheben.

4.1 Der Grundbauplan (HTML-Gerüst)

Jede Webseite hat den gleichen Grundaufbau. Stell es dir wie einen Brief vor: Es gibt einen Kopf (Anzeige/Info) und einen Körper (Inhalt).

<!DOCTYPE html> <html> <head> (Das Gehirn: Titel, Design/CSS) </head> <body> (Der Körper: Alles was man sieht) </body> </html>

4.2 Die Bausteine im Body

Im Body-Bereich platzieren wir unsere Bilder. Wir nutzen ein <div> als Container, in dem die drei Bilder wie Schichten übereinanderliegen:

<div class="clock"> <!-- Der Container für die Uhr --> <img src="uhr/ziffernblatt.jpg"> <!-- Die Schicht ganz unten --> <img id="hour" src="uhr/stundenzeiger.png"> <!-- Der Stundenzeiger --> <img id="minute" src="uhr/minutenzeiger.png"> <!-- Der Minutenzeiger --> </div>

4.3 Das Styling (CSS)

Damit die Zeiger nicht nebeneinander liegen, sondern genau auf der Uhr, nutzen wir CSS. Wichtig ist position: absolute (übereinander stapeln) und transform-origin: 50% 50%, damit sich die Zeiger um ihre Mitte drehen.

.clock { position: relative; width: 1000px; height: 1000px; } /* Rahmen */ .clock img { position: absolute; top: 0; left: 0; } /* Ebenen */ #hour, #minute { transform-origin: 50% 50%; } /* Drehpunkt */

4.4 Die Animation (JavaScript)

Das ist der "Motor" der Uhr. Das Skript fragt jede Sekunde: "Wie spät ist es gerade?". Dann berechnet es den Winkel für die Zeiger (360 Grad / 12 Stunden = 30 Grad pro Stunde).

const now = new Date(); // Zeit holen const h_deg = now.getHours() * 30; // 30 Grad pro Stunde const m_deg = now.getMinutes() * 6; // 6 Grad pro Minute document.getElementById('hour').style.transform = `rotate(${h_deg}deg)`;

4.5 Der komplette Mustercode

Hier siehst du, wie alle Teile in einer einzigen Datei zusammenarbeiten. Du kannst diesen Code kopieren und in deine eigene Turmuhr.html einfügen.

<!DOCTYPE html> <html lang="de"> <head> <style> /* Grunddesign: Dunkler Hintergrund und zentrierter Inhalt */ body { background: #1a1a1a; color: white; display: flex; flex-direction: column; align-items: center; padding: 40px; font-family: sans-serif; } /* Die Uhr-Box: Quadratisch und dient als Anker für die Bilder */ .clock { position: relative; width: 600px; height: 600px; background: #000; } /* Alle Bilder in der Uhr liegen exakt übereinander */ .clock img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* WICHTIG: Die Zeiger drehen sich um ihre eigene Mitte */ #hour, #minute { transform-origin: 50% 50%; } </style> </head> <body> <h1>Meine Kirchturmuhr</h1> <div class="clock"> <!-- Das Ziffernblatt als unterste Ebene --> <img src="uhr/ziffernblatt.jpg"> <!-- Die Zeiger als Ebenen darüber --> <img id="hour" src="uhr/stundenzeiger.png"> <img id="minute" src="uhr/minutenzeiger.png"> </div> <script> function update() { const now = new Date(); // Die aktuelle Computerzeit abrufen // Stunden-Winkel: 30 Grad pro Stunde + kleiner Anteil der Minuten const h = (now.getHours() % 12) * 30 + now.getMinutes() * 0.5; // Minuten-Winkel: 6 Grad pro Minute (360 Grad / 60 Min) const m = now.getMinutes() * 6; // Den Zeigern per CSS die Drehung zuweisen document.getElementById('hour').style.transform = `rotate(${h}deg)`; document.getElementById('minute').style.transform = `rotate(${m}deg)`; } // Den "Motor" starten: Jede Sekunde (1000ms) aktualisieren setInterval(update, 1000); update(); // Direkt beim Laden einmal ausführen </script> </body> </html>
Musterdatei (Turmuhr.html) öffnen

05. Werde Teil der TurmZeit-Galerie

Hast du deine Uhr erfolgreich digitalisiert? Herzlichen Glückwunsch! 🎉

Wir von turmzeit.de haben uns zum Ziel gesetzt, so viele lokale Zeitzeugen wie möglich zu bewahren. Hilf uns dabei, deine Uhr weltweit verfügbar zu machen und sie in unsere interaktive Karte aufzunehmen.

So reichst du deine Uhr ein:

Sende einfach eine E-Mail an turmzeit@gmail.com mit folgenden Inhalten:

  • Das Ziffernblatt-Foto: Ein unbearbeitetes Bild der Uhr.
  • Die Gebäudeansicht: Ein Foto des Turms oder Gebäudes.
  • Nutzungsrechte: Ein kurzer Satz, dass du uns die Rechte zur Nutzung im Projekt einräumst (siehe Vorlage).

Muster-E-Mail

Kopiere einfach diesen Text und passe die Platzhalter in Klammern an: