Uhr

Vorbereitung

1. Blatt (engl. face): Hintergrund mit Logo
2. Indizes: 'Streifen' am Blattrand
3. Zeiger: drei (rotierende) Rechtecke in der Mitte, die die Zeit ausweisen mit Sekunden, Minuten und Stunden

Hintergrund mit Rahmen

Zeichen Sie den (weissen) Hintergrund und silbernen Rahmen. side ist der Radius des weissen Blatts, margin die Breite des silbernen Rahmens.

Indizes: Stunden

Zeichnen Sie die 12 Streifen für die Stunden. side ist der Radius des weissen Hintergrunds, margin ist der Abstand zwischen den Indexstreifen und dem weissen Rand, color ist die Farbe der Indexstreifen.

Indizes: Minuten

Führen Sie dasselbe für die Methode für die Minutenindizes aus.

Challenge: Ändern Sie obige Funktion so, dass sie auch für die Minutenstreifen genutzt werden kann. Dann müssen Sie auch den Namen der Funktion anpassen und evtl. die Parameter in der Funktionsdefinition anpassen.

Logo

side ist Länge einer Seite des roten Dreiecks.

Zeichnen Sie den Text und Logo

size ist die Fontgrösse des grösseren Texts.

Hintergrund zusammenbauen

Legen Sie nun die beiden Indizes-Ringe und das Logo mit Schrift auf das Ziffernblatt mit Rand.

Zeiger erstellen

Da Stunden- und Minutenzeiger sich nur in den Dimensionen unterscheiden, müssen wir nur eine Methode für beide erstellen und diese dann mit verschiedenen Argumenten (Werten) aufrufen.

Der Sekundenzeiger hingegen erhält eine eigene Methode.

Alle Zeiger jedoch müssen über dem tail den Pin gesetzt haben, damit sich der Zeiger später um die richtige Stelle dreht.

Stunden- und Minutenzeiger

Sekundenzeiger

Zeiger und Zeit anzeigen

Erstellen Sie nun die Methode, die eine Zeiteingabe (h, min, sek) in eine korrekte Zeitausgabe (Grafik) verwandelt.

Tipp: Beginne Sie mit der Grundposition und arbeiten Sie sich dann vom Sekunden- über den Minuten zum Stundenzeiger 'hoch'.

Was Sie gelernt haben

• Grafiken zerlegen und zusammenbauen
• gleiche Funktion für verschiedene Teile benutzen (Parametrisierung)
• for-loops
• längeren Code verfassen
• alle Grössen relativ auf einer Variable (side) aufbauen
• durchhalten :)
• assert (kennengelernt)

Animation (Challenge)

Animieren Sie nun die Uhr so, dass sie 2 Minuten lang die passenden Zeiger bewegt. Dazu erstellen Sie eine Liste von Grafiken, wobei jede Grafik eine Sekunde darstellt.

Achtung: Wenn Sie die ganze Uhr abspielen (also von Mitternacht bis Mitternacht), sind das zu viele Grafiken und das Programm wird frühzeitig abbrechen.