Videonauth
Erfahrenes Mitglied
- 205
[Tutorial][Zooper] Erstellen einer Analog-Uhr mit Ziffernblatt
Schwierigkeitsgrad = Anfänger
Für dieses Tutorial benötigt:
- Zooper Widget Pro
- Taschenrechner (Der auf dem Telefon reicht auch)
Dateien:
Wallpaper
Widget
So soll es am Ende aussehen:
(Bild - Fertiges Widget)
Als erstes erstellen wir ein Rechteck das den Abmessungen unseres Zifferblatts entspricht. Arbeitet am besten mit mittigen Ankerpunkt bei jedem Element welches Ihr erstellt, ansonsten kann es später beim Verschieben oder verändern der Größe Probleme geben. Ich nehme hier der Einfachheit halber folgende Abmessungen:
Breite = 200
Höhe = 200
Ecken = 100
Aussenlinie = 1
(Bild - Aussenlinie)
Nun erstellen wir eine Fortschrittsanzeige um damit die Stundenteilung zu erstellen. Dazu bearbeitet Ihr die angezeigten Daten wie folgt:
min = 0
aktuell = 0
max = 12
Für die Höhe der Fortschrittsanzeige (die Länge der einzelnen Striche) wähle ich hier den Wert 20. Da der Mittelpunkt in Y Richtung genau auf der Hälfte liegt verschieben wir das Ganze nun in Y um -90.
Die Breite errechnen wir nun mit der Formel für den Kreisumfang
U = 2 × R × Pi
U = 2 × 90 × 3,1415 = 565,47
Abgerundet also 565, das ist die Breite der Fortschrittsanzeige. Nun stellen wir die Biegung auf 360, und drehen dann um 15 Grad. Danach positionieren wir unser Ergebnis wieder so das es deckungsgleich zu unserem zuvor erstellten Kreis ist. Dann bleibt nur noch die Teilung einzustellen. Dazu vergrößern wir den Abstand so lange bis die Striche die gewünschte Dicke haben. Den Wert für Teiler belassen wir auf 1.
(Bilder - Unsere erste Fortschrittsanzeige)
Das gleiche wiederholen wir nun für die Minutenstriche mit dem Unterschied das wir eine geringere Höhe für die Fortschrittsanzeige wählen, sie nur um 3 Grad drehen und der anzuzeigende Inhalt wie folgt aussieht:
min = 0
aktuell = 0
max = 60
(Bild - Beide Fortschrittsanzeigen)
Kommen wir nun dazu den MinutenZeiger zu erstellen. Dazu kopieren wir unser zuvor erstelltes Rechteck, und wandeln es wie folgt ab:
Breite = 3 (es ist gut hier bei einer ungeraden Zahl zu bleiben da sonst der Zeiger immer Leicht versetzt aussieht)
Höhe = 100
Ecken = 0
Aussenlinie = 0
Schattenunschärfe = 50
Versatz in X = 1
Versatz in Y = 3
Nun müssen wir einige erweiterte Parameter einsetzen, dazu aber erst mal eine kleine Grafik zur Erklärung.
(Bilder - Koordinaten und Erweiterte Parameter)
Als erstes Setzen wir den Wert [ar],dieser beträgt, wenn wir den Zeiger genau am Nullpunkt anfangen lassen wollen genau die hälfte der Höhe die wir festgelegt haben, also 50. Nun Wollen wir aber das Der Zeiger ca. 10 Punkte übersteht über die mitte also nehmen wir 40.
[ar]40[/ar]
Danach wollen wir das unser verschobener Mittelpunkt entsprechend in den richtigen Winkel gesetzt wird. Dazu setzen wir den Wert [as]. Dieser ergibt sich aus einer Rechnung.
[as]$(360/60*#Dm#)$[/as]
Wir teilen also den vollen Kreiswinkel von 360 durch die Anzahl der Minuten und multiplizieren das Ergebniss dann mit den aktuellen Minuten um so eine Winkelangabe zu erhalten. Nun wird unser REchteck ensprechend zu den Minuten versetzt, nun müssen wir es nun mit dem Wert [r] noch entsprechend drehen damit es vollständig ist. Dazu wenden wir die gleiche Rechnung nochmal an um [r] zu bestimmen.
[r]$(360/60*#Dm#)$[/r]
Genauso Basteln wir uns nun auch den Stundenzeiger indem wir wiederum unser erstes erstelltes REchteck duplizieren und wie folgt umwandeln:
Breite = 5
Höhe = 80
Ecken = 0
Aussenlinie = 0
Schattenunschärfe = 50
Versatz in X = 1
Versatz in Y = 3
Auch hier müssen wir [ar], [as] und [r] einstellen unter erweiterte Parameter, verfeinern aber die Formel ein wenig so das der Stundenzeiger langsam wandert jeh weiter die Stunde fortschreitet.
[ar]30[/ar]
[as]$((360/12*#DK#)+(30/60*#Dm#))$[/as]
[r]$((360/12*#DK#)+(30/60*#Dm#))$[/r]
Und damit sind wir am Ende und haben eine voll funktionierende analoge Uhr in Zooper gebastelt. Fragen und Anregungen bitte hier im Thread aber bitte keine Diskussionen.
Viel Spaß
Videonauth a.k.a. Michael
Schwierigkeitsgrad = Anfänger
Für dieses Tutorial benötigt:
- Zooper Widget Pro
- Taschenrechner (Der auf dem Telefon reicht auch)
Dateien:
Wallpaper
Widget
So soll es am Ende aussehen:
(Bild - Fertiges Widget)
Als erstes erstellen wir ein Rechteck das den Abmessungen unseres Zifferblatts entspricht. Arbeitet am besten mit mittigen Ankerpunkt bei jedem Element welches Ihr erstellt, ansonsten kann es später beim Verschieben oder verändern der Größe Probleme geben. Ich nehme hier der Einfachheit halber folgende Abmessungen:
Breite = 200
Höhe = 200
Ecken = 100
Aussenlinie = 1
(Bild - Aussenlinie)
Nun erstellen wir eine Fortschrittsanzeige um damit die Stundenteilung zu erstellen. Dazu bearbeitet Ihr die angezeigten Daten wie folgt:
min = 0
aktuell = 0
max = 12
Für die Höhe der Fortschrittsanzeige (die Länge der einzelnen Striche) wähle ich hier den Wert 20. Da der Mittelpunkt in Y Richtung genau auf der Hälfte liegt verschieben wir das Ganze nun in Y um -90.
Die Breite errechnen wir nun mit der Formel für den Kreisumfang
U = 2 × R × Pi
U = 2 × 90 × 3,1415 = 565,47
Abgerundet also 565, das ist die Breite der Fortschrittsanzeige. Nun stellen wir die Biegung auf 360, und drehen dann um 15 Grad. Danach positionieren wir unser Ergebnis wieder so das es deckungsgleich zu unserem zuvor erstellten Kreis ist. Dann bleibt nur noch die Teilung einzustellen. Dazu vergrößern wir den Abstand so lange bis die Striche die gewünschte Dicke haben. Den Wert für Teiler belassen wir auf 1.
(Bilder - Unsere erste Fortschrittsanzeige)
Das gleiche wiederholen wir nun für die Minutenstriche mit dem Unterschied das wir eine geringere Höhe für die Fortschrittsanzeige wählen, sie nur um 3 Grad drehen und der anzuzeigende Inhalt wie folgt aussieht:
min = 0
aktuell = 0
max = 60
(Bild - Beide Fortschrittsanzeigen)
Kommen wir nun dazu den MinutenZeiger zu erstellen. Dazu kopieren wir unser zuvor erstelltes Rechteck, und wandeln es wie folgt ab:
Breite = 3 (es ist gut hier bei einer ungeraden Zahl zu bleiben da sonst der Zeiger immer Leicht versetzt aussieht)
Höhe = 100
Ecken = 0
Aussenlinie = 0
Schattenunschärfe = 50
Versatz in X = 1
Versatz in Y = 3
Nun müssen wir einige erweiterte Parameter einsetzen, dazu aber erst mal eine kleine Grafik zur Erklärung.
(Bilder - Koordinaten und Erweiterte Parameter)
Als erstes Setzen wir den Wert [ar],dieser beträgt, wenn wir den Zeiger genau am Nullpunkt anfangen lassen wollen genau die hälfte der Höhe die wir festgelegt haben, also 50. Nun Wollen wir aber das Der Zeiger ca. 10 Punkte übersteht über die mitte also nehmen wir 40.
[ar]40[/ar]
Danach wollen wir das unser verschobener Mittelpunkt entsprechend in den richtigen Winkel gesetzt wird. Dazu setzen wir den Wert [as]. Dieser ergibt sich aus einer Rechnung.
[as]$(360/60*#Dm#)$[/as]
Wir teilen also den vollen Kreiswinkel von 360 durch die Anzahl der Minuten und multiplizieren das Ergebniss dann mit den aktuellen Minuten um so eine Winkelangabe zu erhalten. Nun wird unser REchteck ensprechend zu den Minuten versetzt, nun müssen wir es nun mit dem Wert [r] noch entsprechend drehen damit es vollständig ist. Dazu wenden wir die gleiche Rechnung nochmal an um [r] zu bestimmen.
[r]$(360/60*#Dm#)$[/r]
Genauso Basteln wir uns nun auch den Stundenzeiger indem wir wiederum unser erstes erstelltes REchteck duplizieren und wie folgt umwandeln:
Breite = 5
Höhe = 80
Ecken = 0
Aussenlinie = 0
Schattenunschärfe = 50
Versatz in X = 1
Versatz in Y = 3
Auch hier müssen wir [ar], [as] und [r] einstellen unter erweiterte Parameter, verfeinern aber die Formel ein wenig so das der Stundenzeiger langsam wandert jeh weiter die Stunde fortschreitet.
[ar]30[/ar]
[as]$((360/12*#DK#)+(30/60*#Dm#))$[/as]
[r]$((360/12*#DK#)+(30/60*#Dm#))$[/r]
Und damit sind wir am Ende und haben eine voll funktionierende analoge Uhr in Zooper gebastelt. Fragen und Anregungen bitte hier im Thread aber bitte keine Diskussionen.
Viel Spaß
Videonauth a.k.a. Michael
Zuletzt bearbeitet von einem Moderator:
