Ein Wort zum Internet Explorer

Diese Seite verwendet SVG und Elemente aus HTML 5, wie abgerundete Ecken, transparente Farbangaben und Schatten. Das funktioniert mit allen modernen Browsern (Chrome, Firefox, Opera oder Safari), nur nicht mit dem Internet Explorer. Wenn Du also diese Seite betrachten willst, dann wechsel jetzt den Browser.

Übersicht

Der einfachste Weg, um eine Bahnhofsuhr auf einer Webseite anzuzeigen, führt über SVG. Weder JavaScript - dieses befindet sich gegebenenfalls in der SVG-Datei - noch Browser-PlugIns sind notwendig. Es reicht eine SVG-Datei und ein einfaches HTML-Tag.

Und so funktioniert es: Wähle entweder eines der vorgefertigten Scenarios oder stelle Dir Deine eigene Bahnhofsuhr auf dieser Seite zusammen, indem Du Zifferblatt, Zeiger, Zeigerbewegung, Achsabdeckung und Farben wählst. Das Ergebnis ist rechts sofort sichtbar. Kopiere dann den generierten HTML-Source und hole Dir die SVG-Datei station-clock.svg. Rühre beides auf Deiner Webseite zusammen und fertig ist Deine individuelle SVG-Bahnhofsuhr.

Einzig der Windows Explorer 9 - die älteren Versionen dieses Browsers kennen kein SVG und zeigen nichts an - macht Probleme. Wenn Du diesen Browser unterstützen willst, dann solltest Du eine der fertigen Uhren - Deutsche Bahnhofsuhr oder Siemens Bahnhofsuhr - nehmen.

Download und Lizenzbedingungen

Die hier vorgestellten SVG-Bahnhofsuhren stehen unter der Creative Commons 3.0 Lizenz und dürfen für private und kommerzielle Zwecke frei verwendet werden. Über einen Hinweis auf den Autor oder einen Link auf diese Seite würde ich mich freuen.

In eigener Sache: Die Schweizerischen Bundesbahnen SBB sind Inhaber der Rechte an der sogenannten SBB-Bahnhofsuhr und wünscht nicht, daß ich es „Nutzern ermögliche, sich das Kellenzifferblatt selbständig zusammenzubauen und auf ihren Websites abzuspeichern“. Deshalb ist auf dieser Seite die Auswahl des Schweizer Kellenzeigers leider nicht mehr möglich. Wenn Du die Schweizer Bahnhofsuhr auf Deiner Webseite anzeigen willst, dann ersuche vorher die Schweizerischen Bundesbahnen SBB um Erlaubnis.

Szenario

Wähle hier eines der vorgefertigten Szenarios.

Die Hintergrundbilder sind nicht Bestandteil der SVG-Datei, sie werden über das CSS-Attribut background-image gesetzt. Wenn Du die Bilder auf Deiner Webseite verwenden willst, dann beachte bitte, daß die Urheber der Bilder in der Regel auf einer Namensnennung bestehen.

Zifferblatt und Zeiger

Bestimme in diesem Abschnitt das Zifferblatt, die Zeiger und die Zeigerabdeckung der Bahnhofsuhr.

Zifferblatt

Stundenzeiger

Minutenzeiger

Sekundenzeiger

Zeigerachsabdeckung

Radius der Abdeckung

Zeigerbewegung

In diesem Abschnitt veränderst Du das Verhalten des Minuten- und Sekundenzeigers. Für beide Zeiger läßt sich ein von Sekunde zu Sekunde springendes oder ein stetig, schleichendes Verhalten einstellen. Der Sekundenzeiger kann zudem wie bei aktuellen deutschen Bahnhofsuhren als schwingernder Zeiger - er schwingt sich sozusagen von Sekunden zu Sekunde - ausgeführt werden.

Bewegung des Minutenzeigers

Bewegung des Sekundenzeigers

Voreiliger Sekundenzeiger

Der Sekundenzeiger einer modernen Bahnhofsuhr ist als sogenannter voreiliger Zeiger ausgeführt. Er benötigt für eine Umrundung nur rund 58,5 Sekunden und verharrt dann bis zum nächsten Minutensprung auf der 12-Uhr-Stellung.

Farben

Zifferblatt
Stundenzeiger
Minutenzeiger
Sekundenzeiger
Achsabdeckung

HTML

Der folgende HMTL-Tag wird aus den oben gemachten Einstellungen generiert. Du kannst ihn direkt aus dieser Seite kopieren und in Deine HTML-Datei einfügen. Die Breite und Höhe der Bahnhofsuhr - im Beispiel sind es 200 × 200 Pixel - kannst Du frei bestimmen; die Uhr paßt sich automatisch Deiner Größenvorgabe an.

            

Parameter

Die SVG-Uhr kann über insgesamt 16 Paramter konfiguriert werden, wovon sich 13 Parameter mit dieser Web-App einstellen lassen. Die übrigen drei Parameter lassen sich nicht über die Web-App setzen und können bei Bedarf im Source verändert werden:

backgroundColor legt eine Hintergrundfarbe für das Zifferblatt fest. Voreingestellt ist ein transparenter Zifferblatthintergrund.

secondHandStopTime bestimmt die Wartezeit des voreiligen Sekundenzeigers in Sekunden. Der Sekundenzeiger wird entsprechend beschleunigt und benötigt für einen Umlauf 60 Sekunden minus der eingestellten Wartezeit. Gültige Werte sind 0 Sekunden - keine Wartezeit - bis 30 Sekunden. Der voreingestellte Wert beträgt 1,5 Sekunden.

updateInterval bestimmt die Wartezeit zwischen den Aninmationsphasen in Millisekunden. Voreingestellt sind 50 Millisekunden, die einerseits für eine flüssige Animation sorgen und andererseits nicht übermäßig Rechenzeit verbrauchen. Wenn kein oder ein springender Sekundenzeiger verwendet wird, kann das Intervall auf 200 Millisekunden oder mehr erhöht werden.

Probleme

Probleme mit den aktuellen SVG-Implementierungen gibt es heute - Stand März 2012 - jede Menge. So hätte ich gerne die Zeiger mittels eines SVG-Filters mit einem Schatten unterlegt. Aber Safari kann nicht einmal die primitiven Filter darstellen und alle anderen Browser erzeugen unschöne Artefakte. Nicht eine Implementierung funktioniert wie erwartet und für's erste verzichte ich auf den Schattenwurf. Sollte sich die Situation eines Tages verbessern, dann werde ich einen entsprechenden Filter einbauen.

Internet Explorer 9

Das Aussehen und Verhalten der SVG-Uhr kann über HTML-Parameter eingestellt werden. Hier spielt der Internet Explorer 9 leider nicht mit. Der Aufruf document.defaultView.frameElement in der SVG-Datei liefert null und verhindert so wirkungsvoll das Auslesen der Parameter:

// get html parameter and set clock attributes
if (document.defaultView.frameElement) {
  var params = document.defaultView.frameElement.getElementsByTagName('param');
  for (var i = 0; i < params.length; i++) {
    this[params[i].name] = params[i].value.toLowerCase();
  }
}
Damit kann die Uhr nicht über HTML-Parameter konfiguriert werden und der Explorer 9 zeigt immer die voreingestellte Schweizer Bahnhofsuhr an. Sollen andere Uhren angezeigt werden, muß die SVG-Datei händisch angepaßt werden.

Wenn Du eine Lösung für dieses Problem hast, dann laß es mich bitte wissen. Ich habe schon zu viel Zeit mit Microsofts Explorer verplempert - irgendetwas funktioniert nicht oder verhält sich anders als vom W3C spezifiziert - und werde mich freiwillig nicht eine Minute länger mit diesem Browser beschäftigen.