Dr. O. Hoffmann
Eins, zwei, drei im Sauseschritt
eilt die Zeit - wir eilen mit.
Wilhelm Busch
PHP kann oft recht hilfreich eingesetzt werden, um mit
Schleifen einfache Strukturen auszurechnen, aber auch um
dynamische Prozesse zu initialisieren.
Eine analoge oder digitale SVG-Uhr
(auch: Analoguhr
beziehungsweise Digitaluhr)
ist da ein schönes Übungsbeispiel,
welches von überschaubarem Ausmaß ist.
Zwar gibt es mit ecma-script oder java-script auch andere
Methoden, um ähnliche Aufgaben zu erledigen, diese haben
jedoch den Nachteil, daß sie nicht zuverlässig
sind, da sie nutzerseitig ablaufen, während PHP serverseitig
abläuft und somit nicht von dem Eigenschaften des
Darstellungsprogrammes abhängt. Daten wie die Zeit des servers sind zudem
so zugänglich, während mit nutzerseitigen Skripten
ähnliche Daten des Nutzerrechners zum Einsatz kommen.
Bei der geplanten Uhr wird also entweder eine vom Nutzer vorgegebene
Zeit genommen werden oder die Zeit des servers. Andere Autoren haben
auch bereits SVG-Uhren mit nutzerseitigen Skripten realisiert, die
somit deren Zeit anzeigen - die die entsprechenden Nutzer ja vermutlich
selbst besser kennen werden.
Das Ziel ist also erst einmal, eine analoge Uhr zu erstellen, die irgendwie auf die richtige Zeit gestellt ist. Weil das Stellen mit SVG allein entweder nicht ganz einfach ist oder dabei oft Mängel der aktuellen Darstellungsprogramme zum Vorschein kommen, ist die Verwendung von PHP zuverlässiger, bindet die Uhr aber jedenfalls immer an den server.
Als Grundgerüst werden zunächst ein paar Eingaben von GET-Parametern zur Größe
der Uhr x die Breite, y die Höhe und m als
Maßeinheit (px, %, cm, mm)
und der Eingabe der Anfangszeit in der Form hh:mm:ss mit hh der Stundenangabe,
mm der Minuteneingabe und ss der Sekundeneingabe angelegt.
Als nächstes wird ein header
für das SVG-Format gesendet und dann
kommt schon das Grundgerüst der SVG-Datei mit Titel, Kurzbeschreibung,
zwei Rechtecken für Hintergrundfarbe und Rahmen und etwas Text als Signatur.
Durch Einsatz des viewBox
-Attributes im svg
-Element
wird der Inhalt unabhängig von den von außen vorgebbaren Abmessungen der Uhr.
Analoge
SVG-Uhr, Vorbereitung
(Quelltext analoge
SVG-Uhr, Vorbereitung).
Der nächste Schritt ist die Erstellung der typischen Skalen einer runden
Uhr. Das wird mit einigen Schleifen erreicht. Einmal ausgerechnet, könnte
der statische Quelltext auch abgespeichert werden, um ihn nicht jedesmal neu berechnen
zu lassen, das würde den server etwas entlasten, vergrößert aber
die abgespeicherte Datei.
Analoge
SVG-Uhr, erster Schritt
(Quelltext analoge
SVG-Uhr, erster Schritt).
Etwas eleganter und präziser und auch noch mit der Hand erstellbar werden die Skalen, wenn in SVG gedreht wird und nicht in PHP: Analoge SVG-Uhr, erster Schritt, Alternative (Quelltext analoge SVG-Uhr, erster Schritt, Alternative).
Nun werden die Zeiger der Uhr ergänzt - das sind erstmal einfache Striche.
Da diese sich zeitlich drehen sollen, werden sie von einem animierten g
-Element
umschlossen. Was in XHTML das div
-Element ist, ist in SVG
gewissermaßen das g
-Element.
Nun sind 12 Stunden genau 43200s - die im dur
-Attribut angegebene Dauer
für eine ganze Drehung. Ein mir immer noch unverstandenes Phänomen
ist die 12-Stundenskala statt einer 24-Stundenskala, weil ja nunmal ein Tag
24 Stunden hat und nicht 12 - aber lassen wir das hier an dieser Stelle.
3600s ist die Umlaufzeit für den Minutenzeiger - also eine Stunde.
Bleiben dann natürlich 60s für die Umlaufzeit des Sekundenzeigers.
Analoge
SVG-Uhr, zweiter Schritt
(Quelltext analoge
SVG-Uhr, zweiter Schritt).
Bislang ist die Uhr noch gar nicht auf die aktuelle Zeit eingestellt -
sie wird also nur zweimal am Tag richtig gestellt sein. Auf einen solchen
Zeitpunkt mögen natürlich nur wenige warten.
Zum ersten Mal wird nun PHP ernsthaft gebraucht, um die aktuelle server-Zeit in Erfahrung zu bringen.
Damit wird die Uhr gestellt, indem die Zeiger wie im richtigen Leben in die richtige
Position gedreht werden, wozu abermals ein g
-Element verwendet wird. Zwar könnte
auch das jeweils bereits vorhandene verwendet werden, im Sinne einer Aufgabentrennung
sieht das so aber übersichtlicher aus. Das mit einem g
-Element zu erreichen,
bleibt dem Leser zur Übung überlassen. Ebenso eine gegebenenfalls
notwendige Zeitzonenkorrektur, wenn die Uhrzeit gegenüber der des web-servers
verschoben sein soll.
Analoge
SVG-Uhr, dritter Schritt
(Quelltext analoge
SVG-Uhr, dritter Schritt).
Eingangs angelegt wurde ja auch noch die Möglichkeit, die Startzeit als GET-Parameter
einzugeben, dies wird nun berücksichtigt mit einfachen if
-Abfragen.
Die Perfektionierung der Kontrolle der Nutzereingabe bleibt ebenfalls dem
Leser zur Übung überlassen. Hier vorgegeben: zeit=12:34:56,
zum Testen einfach in der URI ändern.
Analoge
SVG-Uhr, vierter Schritt
(Quelltext analoge
SVG-Uhr, vierter Schritt).
Sofern das Darstellungsprogramm mitspielt, geht es natürlich auch noch einfacher mit
dem Stellen der Uhr. Dann wird nicht unbedingt PHP gebraucht.
Dazu hat SVG den überaus praktischen wallclock-Wert für das
begin
-Attribut. Damit kann die Uhrzeit einfach gestellt werden.
Weder PHP noch sonst eine
Programmier- oder Skriptsprache sind dazu notwendig, schlichtes SVG 1.1 tiny reicht aus:
Analoge
SVG-Uhr mit aktueller UTC
(Quelltext analoge
SVG-Uhr, mit aktueller UTC).
Analoge
SVG-Uhr mit aktueller lokaler Zeit des Nutzers
(Quelltext analoge
SVG-Uhr, mit aktueller lokaler Zeit des Nutzers).
Wenn das nicht geht, bleibt die Überlegung, wie die Uhr wenigstens manuell gestellt werden
kann. Dies funktioniert in SVG mit entsprechend schnelleren Animationen, die mittels
Interaktion angesprochen werden können:
Manuell stellbare analoge
SVG-Uhr
(Quelltext manuell stellbare analoge
SVG-Uhr).
Die Uhr wird mittels der Knöpfe S (schnell),
N (normal), L (langsam) gestellt, starten geht
mit mousedown, stoppen mit mouseup.
Mit dem Startknopf wird die normale Uhr gestartet.
Eine Digitaluhr kann über das
Austauschen von Inhalten recht
einfach erreicht werden - hat mich einiges Grübeln gekostet, bis
ich das verstanden hatte. Dazu wird etwa von einem
use
-Element oder tref
-Element das
xlink:href
-Attribut
animiert - zuvor hat man in einem defs
-Bereich die Zahlen von 0 bis 9 als
Text abgelegt. Beispiele ohne das Stellen der digitalen Uhr,
welches ja bereits hier erläutert wurde, gibt es unter dem Menüpunkt
Vektorgraphik - Animation.
Digitale
SVG-Uhr mit lokaler Zeit
(Quelltext digitale
SVG-Uhr mit lokaler Zeit).
Entsprechend dazu eine
Digitale
SVG-Uhr, Zeit mit PHP gestellt
(Quelltext digitale
SVG-Uhr, Zeit mit PHP gestellt).
Will man etwa zu Silvester rückwärts zählen, tauscht man einfach die Reihenfolge der Animationswerte:
Silvesteruhr, Zeit mit PHP gestellt
(Quelltext Silvesteruhr, Zeit mit PHP gestellt).
Bei einer analogen Uhr könnte man entsprechend einfach die Ziffern rückwärts auftragen. Man kann sie auch so lassen,
dann muß man aber die Zeiger an der vertikalen Achse (von der 12 zur 6) spiegeln. Eventuell sollte man dann aber
doch die 12 gegen eine 0 tauschen.
Das manuelle Stellen ist bei nicht gleichmäßig laufenden Uhrwerken
wie auch digitalen Uhren etwas komplizierter oder umfangreicher, weil es
nicht reicht, die Stunden, Minuten und Sekunden unabhängig voneinander
einzustellen, was einfach ist. Das Problem liegt darin, die Animation dann
so laufen zu lassen, daß Stunden und Minuten jeweils exakt zum richtigen
Zeitpunkt wechseln. Eine Möglichkeit besteht darin, die Sekunden nur
auf 0 einstellbar zu lassen und nur die volle Stunde oder nur jede Viertelstunde
und dann jeweils für jede Viertelstunde eine andere Animation anzulegen. Ist
dann allerdings nichts für ungeduldige Mitmenschen. Wird die Uhr hingegen
mit der Hilfe von PHP gestellt, ergibt sich dies Problem nicht
und es ist lediglich ein korrekter Start zu erstellen.
Für SVG ist allerdings auch ein Modul in Vorbereitung, bei dem
Parameter an eine Datei übergeben werden können, damit sollte sich
auch die manuelle Einstellung per PHP in Zukunft ersetzen lassen.
Eine andere Idee ist, Ziffern als Pfade, Glyphen oder aus einzelnen Strichen zu konstruieren und sie dann entweder diskret oder kontinuierlich animierend ineinander zu transformieren. Das erfordert aber etwas genauere Studien und etwas Programmier- und Denkarbeit. In jedem Falle ist für keinen der beiden Uhrtypen java-script oder ecma-script notwendig. Eine normale deklarative Animation funktioniert bei deutlich mehr Darstellungsprogrammen als eine Animation per Skript, weswegen man auf letztere soweit möglich verzichten sollte.
Stattdessen ist es unterhaltsamer zu gucken, wie die Uhr noch etwas
dekoriert werden kann - Zeiger austauschen, das Springen des Sekundenzeigers einiger
Uhren simulieren und sonst noch ein paar Spielereien einbauen.
Die folgende Deko-Uhr hat es da schon in sich - besonders der animierte
Gradient als Hintergrund hat das Potential, ältere langsame Prozessoren
in die Knie zu zwingen ;o)
Analoge
SVG-Uhr, Dekoration
(Quelltext analoge
SVG-Uhr, Dekoration)
Alternativ dazu eine Mischung aus analoger und digitaler Uhr, eine, bei der die Zeiger etwas
federnd in eine neue Position springen:
SVG-Uhr mit Dekoration
(Quelltext
SVG-Uhr mit Dekoration)
Dafür oder außerdem wird bei diesem Beispiel kumulative Animation verwendet und
auch spline-Interpolation. Die präzisen Zeiten für das Springen der Zeiger werden
mit negativen Zeiten für begin
eingestellt.
Als weitere Variation hier eine
Analoge 24-Stunden-Uhr
(Quelltext Analoge 24-Stunden-Uhr).
Das Uhrwerk funktioniert ähnlich wie bei der vorherigen Uhr. 0 Uhr ist nur horizontal rechts.
Der Haken solcher Uhren ist natürlich, daß der Nutzer die
Animation jederzeit unterbrechen kann. Die Fortsetzung der Animation
hat dann natürlich eine falsche Uhrzeit zur Folge. Allerdings wird
man nicht davon ausgehen, daß solch eine Uhr wirklich über längere
Zeit genutzt werden wird. Die Genauigkeit der Uhr wiederum hängt nur am
Darstellungsprogramm des Nutzers und wird nie wieder mit dem server
synchronisiert. Vermutlich wird das Darstellungsprogramm zur Synchronisation
den Quarzoszillator im Rechner des Nutzers verwenden. Erfahrungsgemäß
kann bei üblichen Quarzoszillatoren mit einer relativen Genauigkeit besser als
10-5 gerechnet werden.
Nun könnte mittels PHP auch auf Zeitsignale der
PTB
zurückgegriffen werden, um die Uhr zu stellen, da sollte zwar die Genauigkeit besser als
10-13 sein, wegen fehlender Synchonisation hat man da
aber nicht viel von. Bei einem server sollte man ohnehin davon ausgehen, daß dieser
über NTP synchronisiert wird, so daß sich
der Autor eines PHP-Skriptes darauf verlassen kann, statt nach eigenen Lösungen zu suchen.