Analog-Uhr als SVG Objektgrafik

Einige Elemente dieser Objekt-Grafik sind interaktiv einstellbar:

Die Grafik besteht aus folgenden SVG-Objekten
(Reihenfolge im Programm ⇒ Grafik-Objekte von hinten nach vorne)
Uhren-Scheibe als <circle> Kreis mit blauem Rand
12 Stunden-Striche in verschiedenen Winkeln um das Zentrum
Stunden-Zeiger als <line> gerade Linie
Minuten-Zeiger als <line> gerade Linie
Mittelpunkt als kleiner <circle> Kreis

Vergleich dieses Beispiels mit Objekt-Grafik und Pixel-Grafik

Experimente mit dem HTTP-QueryString


Ohne besondere Anweisungen werden die im Programm festgelegten Vorgaben verwendet, z.B. Breite = Höhe = 200 Pixel, keine Animation, kein Datum und keine Digital-Zeit.


Die GET-Variable r steuert den Radius,die Animation (Sekunden),das Datum unddie digitale Zeit.
Nur mit der Option s verhält sich die Datei dynamisch und zeigt jeweils die aktuelle Zeit.

Experimentieren sie mit dem QueryString:
Man kann den Text in der Adresszeile des Browsers ändern und mit Taste Return erneut absenden. Sie können die Zahlen ändern, GET-Argumente löschen oder hinzufügen.


SVG und Javascript

Der ↓ SVG-Quelltext dient selbst als Programm, mit dessen Anweisungen ihr Browser die Grafik Live herstellt. Man kann den Quelltext in einer einfachen Text-Datei *.svg am eigenen Arbeits-PC speichern.

Mit dem GET-Argument s enthält der SVG-Quelltext zusätzlich ein javascript-Programm, welches die Animation ausführt und die Sekunden anzeigt.

Diese 'nach Maß' hergestellte SVG-Datei kann man auch ohne Webserver an jedem PC mit jedem modernen Browser anzeigen.


Verwandte Themen auf anderen Seiten dieses Webs:
→ HTTP-GET-Methode mit PHP
→ Live HTTP Experimente
→ HTTP-Diagramm

Wikipedia: HTTP-Protokoll, GET-Methode, QueryString

SVG-Quelltext der Analog-Uhr

◀   Aus diesem Text hat ihr Browser die ↑ oben gezeigte Objekt-Grafik hergestellt.

Die Grafik besteht aus diesen Objekten:
  • Hintergrund: <circle>-Element
  • 12 Stunden-Striche: <line>-Elemente
  • 3 Zeiger: Linien <line>-Elemente
  • Mittelpunkt: <circle>-Element)
Die Objekte sind in der 'Programmiersprache' → SVG angegeben. Man findet sie am Ende des Quelltextes.

Größe, Position und Aussehen der Objekte wird durch einstellbare Eigenschaften bestimmt.
Darunter fallen z.B. die Attribute x1,y1, x2, y2, cx,cy und die im <style>-Element enthaltenen → CSS-Regeln zur Formatierung.

Auch der Dreh-Winkel ist eine Eigenschaft: Der Winkel der Zeiger wird durch ein Programm in der Programmiersprache → Javascript laufend geändert.
Das Programm ist im <script>-Element des Quelltextes enthalten.

Mit diesem Link wird die statische Version der ↗ Objekt-Grafik in einem eigenen Browser-Tab geladen: Man kann sie als Text-Datei *.svg am eigenen Arbeits-PC speichern und mit jedem modernen Browser öffnen.

Mit diesem Link wird der ↗ SVG-Quelltext in einem eigenen Browser-Tab geladen. Man kann die Zeilen-Nummern mit Klick entfernen, den Text in einer einfachen Text-Datei *.svg am eigenen PC speichern und mit jedem Browser öffnen.



Man kann alternativ auch den SVG-Quelltext jeder anderen hier angebotenen Version der Analog-Uhr anzeigen:

Wählen sie die gewünschten Optionen mit den ↑ interaktiven Elementen.
Mit RechtsKlick in die ObjektGrafik bietet jeder Browser eine Möglichkeit zur Anzeige des Quelltextes (SourceCode).


SVG <use>-Element

SVG bietet die Möglichkeit, ein Element 1mal zu definieren und danach beliebig oft zu verwenden. Dazu muss das Element ein eindeutiges id-Attribut erhalten. Hier wird mit dem Element id="mark" ein kurzer Stunden-Strich definiert.

Das Koordinaten-System wird so gewählt, wie es für die Anwendung sinnvoll ist: In diesem Fall wird der Strich genau oberhalb des Ursprungs definiert (=der spätere 12-Uhr-Strich).
Es ist guter Stil, die wiederverwendbaren Elemente in einem <defs>-Element zusammenzufassen.

Zur Anwendung benutzt man ein <use>-Element und gibt mit einem href-Attribut sein id-Attribut an. Das mark-Element wird hier 12mal verwendet und dabei um je 1 Stunden-Winkel gedreht. Das Attribut transform="rotate()" dreht immer um den jeweiligen Ursprung - in diesem Fall um den Mittelpunkt der Uhr.



Funktion do_repeat() wird 1mal pro Sekunde ausgeführt.
Damit werden die Zeiger gedreht: Dazu wird dem SVG-Attribut transform="rotate()" des jeweiligen Elements mit der Methode setAttribute() der passende Wert (Winkel in Grad) zugewiesen.
Wenn die Option 'Digitalzeit' angekreuzt ist, dann wird zusätzlich der im Element <text id="dt"> enthaltene Text geändert.

Weitere Details der Programme erfordern fortgeschrittene Kenntnisse und werden an dieser Stelle nicht kommentiert.

PHP-Quelltext

◀   Der oben angezeigte ↑ SVG-Quelltext wurde am Server-PC soeben von diesem Programm in der Programmiersprache → PHP hergestellt. Dieses Programm wird als Programm-Generator verwendet, um passende Versionen des SVG-Programms herzustellen und an den Browser zu senden:
  • Mit oder ohne Animation & Sekunden-Anzeige
  • Mit oder ohne Datum oder Digital-Zeit
  • Gesamte Grafik in beliebiger Größe

Das Programm beginnt mit der Funktion header()
Damit wird dem HTTP-Client (Browser) der MIME-Typ der nachfolgenden Daten angekündigt (hier: image/svg+xml)

Im Abschnitt 'Defaults' werden die Standard-Werte aller einstellbaren Parameter festgelegt.

Im Abschnitt → GET-Argumente werden die Standard-Werte durch die vom User optional angegebenen Argumente ersetzt. Diese Werte werden vom HTML Formular (<form>-Element, oben auf dieser Webseite) automatisch formuliert.

Der weitere PHP-Quelltext ist aus statischem Text (hier in schwarzer Farbe) und PHP-Anweisungen gemischt.
Die Details der PHP-Programmierung werden mit einer Ausnahme nicht vorgestellt:

Wenn die Option 'Animation' angekreuzt wurde, dann werden die Zeiger Live mit Javascript-Programmen gedreht. In diesem Fall braucht man mit PHP nicht zu drehen.
Wenn diese Option nicht angekreuzt wurde, dann muss der SVG-Quelltext die Zeiger mit (statischen) Attributen transform="rotate()" drehen. Diese werden mit PHP nach der aktuellen Uhrzeit formuliert.



PHP ist kosten- und lizenzfrei. An jedem Standard Webserver ist ein PHP Interpreter-Programm installiert. Daher werden PHP-Programme an jedem Webserver ausgeführt und jeder Browser erhält die damit erzeugten Produkte - hier eine Objekt-Grafik.

An einem typischen Arbeits-PC ist kein PHP-Interpreter-Programm installiert. Man kann den PHP-Quelltext zwar kopieren und in einer Text-Datei *.php speichern, jedoch am eigenen Arbeits-PC nicht ausführen. Wenn man versucht, eine *.php-Datei mit einem Browser-Programm zu öffnen, dann ist das Ergebnis nicht vorhersagbar, jedenfalls nicht die erwartete Objekt-Grafik.

Man kann das PHP-Programm als Programm-Generator verwenden und damit ein genau passendes SVG-Programm herzustellen: Die mit PHP ↑ SVG-Datei kann man auch ohne Webserver an jedem PC verwenden und mit jedem Browser anzeigen.

Alternative:  Canvas

Das gleiche Beispiel kann man auch mit anderen Mitteln programmieren:
Die Verwendung von → Canvas (HTML-5) und Javascript kann eine sinnvolle Alternative sein.
Auf einer→ eigenen Seite werden die beiden Grafik-Technologien miteinander verglichen.