3Quarks » Bahnhofsuhr english

Die Technik einer Bahnhofsuhr ist den besonderen Bedingungen des Bahnbetriebs geschuldet. Zum einen kennt das Kursbuch der Bahn keine Sekunden, die Züge verlassen immer zur vollen Minute den Bahnhof. Zum anderen müssen alle Uhren eines Bahnhofs synchron laufen, um Passagieren und Bahnpersonal an jedem Ort des Bahnhofgeländes eine verbindliche Zeit anzugeben.

Bahnhofsuhren sind deshalb Minutensprungnebenuhren, die von einer zentralen Hauptuhr jede volle Minute einen elektrischen Impuls erhalten und den Minutenzeiger elektromechanisch um eine Minute vorspringen lassen.

Der Sekundenzeiger wird unabhängig von der Hauptuhr von einem Elektromotor angetrieben und benötigt nur rund 58,5 Sekunden für eine Umrundung. Der Zeiger verharrt dann kurz auf der 60-Sekunden-Stellung und beginnt mit dem nächsten Minutenimpuls der Hauptuhr einen neuen Umlauf. Dieser sogenannte voreilige Sekundenzeiger wurde 1955 vom Schweizer Ingenieur Hans Hilfiker zusammen mit dem Uhrenhersteller Mobatime entwickelt.

Auch wenn Hilfikers Uhr Maßstab und Grundlage aller mir bekannten Bahnhofsuhren ist, so hat doch jedes Land seine eigene Version entwickelt. Hier vier Beispiele aus dem deutschsprachigen Raum.

• Schweizer Bahnhofsuhr von Hans Hilfiker
• Deutsche Bahnhofsuhr nach DIN
• Moderne deutsche Bahnhofsuhr
• Österreichische Bahnhofsuhr ohne Sekundenzeiger

Ich suche übrigens nach weiteren nationalen Bahnhofsuhren. Über ein hochauflösendes Foto einer solchen Uhr würde ich mich freuen.

In diesem Abschnitt können Gehäuse, Zifferblatt, Zeiger und Zeigerabdeckung der Bahnhofsuhr sowie das Verhalten des Minuten- und Sekundenzeigers verändert werden.

Gehäuse

• transparenter Hintergrund
• runder, weißer Hintergrund
• rundes, schwarzes Gehäuse
• rundes, grünes Gehäuse (Österreich)
• quadratisches, blaues Gehäuse (Deutsche Bahn)

Zifferblatt

• Ohne Zifferblatt
• Zifferblatt mit Stundenstrichen (DIN 41091, Teil 3)
• Zifferblatt mit Minuten- und Stundenstrichen (DIN 41091, Teil 1)
• Zifferblatt mit Minuten- und Stundenstrichen (Österreich)
• Zifferblatt mit Minuten- und Stundenstrichen (Schweiz)

Stundenzeiger

• spitzer Balkenzeiger (DIN 41092, Teil 3)
• stumpfer Balkenzeiger (Deutsche Bahn)
• stumpfer, keilförmiger Zeiger (Schweiz, Österreich)

Minutenzeiger

• spitzer Balkenzeiger (DIN 41092, Teil 3)
• stumpfer Balkenzeiger (Deutsche Bahn)
• stumpfer, keilförmiger Zeiger (Schweiz, Österreich)

Sekundenzeiger

• ohne Sekundenzeiger
• Keil-Zeiger (DIN 41071, Teil 1)
• Loch-Zeiger (DIN 41071, Teil 2)
• Loch-Zeiger (Deutsche Bahn)
• Kellen-Zeiger (Schweiz)

Zeigerachsabdeckung

• ohne Achsabdeckung
• rote Achsabdeckung
• schwarze Achsabdeckung

Verhalten des Minutenzeigers

• schleichender Minutenzeiger
• springender Minutenzeiger
• springender und federnder Minutenzeiger

Verhalten des Sekundenzeigers

• voreiliger Sekundenzeiger
• schleichender Sekundenzeiger
• springender Sekundenzeiger
• springender und federnder Sekundenzeiger

Die hier vorgestellte Bahnhofsuhr ist mit JavaScript und dem <canvas>-Tag realisiert. Dieses HTML-Element ist Bestandteil von HTML 5 und wird bereits von allen modernen Browsern unterstützt; der Internet Explorer bis zur Version 8 gehört leider nicht dazu. Um das <canvas>-Tag auch für die Anwender des Internet Explorer nutzbar zu machen, stellt das Open Source Projekt explorercanvas mit Hilfe einer kleinen JavaScript-Bibliothek zumindest die Grundfunktionen zur Verfügung.

Im Folgenden ist beschrieben, wie Du die Bahnhofsuhr in Deine HTML-Seiten einbinden kannst. Du benötigst dazu lediglich die JavaScript-Klasse StationClock und, wenn Du Rücksicht auf die Nutzer des Internet Explorers nehmen willst, die oben genannte JavaScript-Bibliothek.

Einbindung in das HTML-Dokument

Das <canvas>-Tag wird wie jedes andere HTML-Tag deklariert und kennt die drei Attribute id, width und height. Vergebe eine sinnvolle id - zum Beispiel "clock" - und eine beliebige Breite und Höhe für das Element. Die Uhr wird im <canvas>-Tag zentriert und ihre Größe entsprechend angepaßt. Kann ein Browser die Uhr nicht darstellen, wird dem Benutzer der eingeschlossene Text angezeigt.

<canvas id="clock" width="200" height="200">
  Dieser Browser wird leider nicht unterstützt.
</canvas>
            

JavaScript Code

Der unten stehende JavaScript Code wird automatisch aus den Einstellungen des Abschnitts „Eigene Bahnhofsuhr“ generiert. Du kannst so Deine eigene Bahnhofsuhr zusammenklicken und anschließend den erzeugten Source Code einfach kopieren.

Die ersten drei Zeilen sind nur für den Internet Explorer bis zur Version 8 interessant. Sie binden die JavaScript-Bibliothek excanvas.js über einen bedingten Kommentar ein; andere Browser ignorieren diese Anweisung.

Das Script geht davon aus, daß sich die beiden JavaScript-Bibliotheken station-clock.js und excanvas.js im gleichen Verzeichnis wie die HTML-Seite mit dem <canvas>-Tag befinden. Ist dies bei Dir nicht der Fall, dann mußt Du die beiden Pfadangaben entsprechend ändern.

Weiter geht das Script davon aus, daß Du auf der HTML-Seite als <canvas> id den Namen clock verwendest. Wenn Du eine andere id bevorzugen, dann mußt Du auch hier den Source Code anpassen.

Download

Die beiden JavaScript-Dateien station-clock.js und excanvas.js sowie eine HTML-Beispielseite sind hier in einer Zip-Datei zum Download zusammengefaßt:

• Bahnhofsuhr (16 kByte, gezippt)

Die hier vorgestellte Bahnhofsuhr steht unter der Creative Commons 3.0 Lizenz und darf für private und kommerzielle Zwecke frei verwendet werden. Über einen Hinweis auf den Autor oder ein Link auf diese Seite würde ich mich freuen.

Mit der kostenlosen App „Clockmaker“ für iPhone und iPad lassen sich weit über 1 Million verschiedene Uhren konstruieren. 18 stimmungsvolle, photorealistische HD-Szenarios von zumeist Bahnhofsuhren sowie 6 graphische Szenarios bilden den Hintergrund. Für die Uhr selbst stehen dann eine Vielzahl von Zifferblättern, Stunden- und Minutenzeigersätzen, Sekundenzeigern und Achsabdeckungen bereit. Und schließlich läßt sich noch das Verhalten der Minuten- und Sekundenzeiger bestimmen.

Das Script für diese Bahnhofsuhr ist mit 15 kByte verhältnismäßig klein, ein Bild der Uhr in guter Auflösung wäre schon um einiges größer. Es geht aber noch kleiner. Die Seite www.js1k.com veranstaltet seit 2010 regelmäßig den „1k Javascript demo contest“. Ziel ist es, ein eindrucksvolles Demo mit maximal 1024 Byte JavaScript zu schreiben. Beim ersten Wettbewerb 2010 nahm ich mit dieser Schweizer Bahnhofsuhr teil, für einen der lustigen Preise hat es leider nicht gereicht.

Die Uhr sitzt in einem runden schwarzen Gehäuse und paßt sich automatisch der Canvasgröße an. Die Zeiger werfen einen natürlichen Schatten und der Sekundenzeiger ist als voreiliger Kellenzeiger realisiert. Unten steht der komplette HTML- und JavaScript-Source. Du kannst ihn direkt aus dieser Seite kopieren, ihn in eine leere Textdatei einfügen, als HTML-Seite abspeichern und fertig ist die 1021 Byte große Schweizer Bahnhofsuhr.

<!DOCTYPE html>
<html>

  <head>
    <title>Station Clock</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
    <canvas id="clock" width="200" height="200"></canvas>
    <script>
      
      var c=(e=document.getElementById('clock')).getContext('2d'),
      w=e.width,h=e.height,r=Math.min(w,h)*.4,p=Math.PI,q=p/30,b="#000",d="#e00";A(); 
      function A(){c.clearRect(0,0,w,h);S();c.translate(w/2,h/2);S();T();B(b);
      c.lineWidth=r*.07;c.arc(0,0,r*1.1,0,2*p,1);c.stroke();R();
      for(i=0;i<60;i++){
      S();c.rotate(i*q);(i%5)?P(.013,-1,.013,-.92,b):P(.035,-1,.035,-.75,b);R()}
      t=new Date();m=t.getMinutes();S();c.rotate(t.getHours()*q*5+m*q/12);T();
      P(.05,-.6,.05,.26,b);R();S();c.rotate(m*q);T();P(.035,-.93,.05,.25,b);R();
      S();c.rotate(Math.min((t.getSeconds()+t.getMilliseconds()/1000)*1.02,60)*q);
      T();P(.018,-.6,.024,.35,d);B(d);c.arc(0,-r*.64,r*.1,0,2*p,1);c.fill();R();R();
      window.setTimeout('A()',50)}
      function B(z){c.beginPath();c.strokeStyle=c.fillStyle=z;}
      function L(x,y){c.lineTo(r*x,r*y)}
      function P(u,v,x,y,z){B(z);c.moveTo(r*u,r*v);L(-u,v);L(-x,y);L(x,y);L(u,v);c.fill()}
      function R(){c.restore()}
      function S(){c.save()}
      function T(){c.shadowColor="rgba(0,0,0,.3)";
      c.shadowOffsetX=c.shadowOffsetY=c.shadowBlur=r*.035}

    </script>
  </body>
  
</html>