This website utilizes elements from HTML 5 such as rounded-off corners, transparent color details and shadows, as well as the SVG element. It functions using all modern browsers (Chrome, Firefox, Opera or Safari) except for Internet Explorer. In other words, if you want to view this website in all its glory, then change the browser you’re using.
The simplest way to display a railway station clock on a website is via SVG. Neither JavaScript – already contained within the SVG file – nor plug-ins are needed. An SVG file and a simple HTML tag are enough.
And this is how it works: Either choose one of the ready-made scenarios or put together your own railway station clock on this website by selecting the dial, hands, hand movement, hand axis cover and colors. The result is immediately visible to the right. Then copy the generated HTML source code and get the SVG file station-clock.svg. Stir the two together on your website, and your own individualized SVG railway station clock is ready to run.
The only browser that causes problems is Windows Explorer 9 – older versions of this browser don’t recognize SVG at all and won’t display anything. In other words, if you want to support this browser, then you ought to choose one of the ready-made clocks: German Railway Station Clock or Siemens Railway Station Clock.
The SVG railway station clocks presented here are governed by the Creative Commons 3.0 Lizenz and may be used freely for private and commercial purposes. I would be glad if reference is made to the author or if a link to this website is posted.
Choose one of the ready-made scenarios here.
The background pictures are not an integral element of the SVG file: they are set via the CSS attribute background-image. If you want to use the pictures on your website, then please note that, as a rule, the authors of the pictures insist on being mentioned by name.
Define the dial, hands and hands axis cover for the railway station clock in this section.
| Cover radius |
In this section you alter the behavior of the minute and second hands. A behavior that jumps from second to second or moves at a constant creep can be set for both hands. In addition, the second hand can be modeled as an oscillating hand – the same way it moves on today’s German railway station clocks – it ‘swings’ from second to second, so to speak.
The second hand on a modern station clock is modeled as a so-called ‘stop to go’ hand. It takes only about 58.5 seconds to go full circle, then pauses until the next minute strikes before it moves on to the 12 o’clock position.
| Dial | |||
| Hour hand | |||
| Minuten hand | |||
| Second hand | |||
| Axis cover | |||
The following HMTL tag is generated from the settings performed above. You can copy it directly from this website and paste it into your HTML file. You can freely define the width and height of the station clock – 200 × 200 pixels in the example shown. The clock automatically adapts to the size you specify.
The SVG clock can be configured via a total of 16 paramters, 13 of which can be set using this Web App. The remaining 3 parameters cannot be set via the Web App and can be changed as needed in the source code:
backgroundColor stipulates a background color for the dial. A transparent dial background is preset.
secondHandStopTime defines the waiting time in seconds for the ‘stop to go’ second hand. The second hand is sped up accordingly and requires 60 seconds, minus the waiting time set, to go full circle around the clock dial. Valid values are 0 seconds, in other words no waiting time, up to 30 seconds. The preset value is 1.5 seconds.
updateInterval defines the waiting time between animation phases in milliseconds. The preset interval is 50 milliseconds. On the one hand, this assures a smooth animation, and on the other doesn’t use up an excessive amount of computing time. If no second hand or a stepping second hand is being used, the interval can be increased to 200 milliseconds or more.
At today’s present status, March 2012, there are plenty of problems with the current SVG implementations. For instance, I would have liked to put a shadow underneath the hands by means of an SVG filter, but Safari is not able to depict even primitive filters, and all other browsers produce unsightly artefacts. Not one implementation functions as expected, so for the time being I’ll do without the cast shadow. If the situation improves one day, then I’ll build in an appropriate filter.
The SVG clock’s appearance and behavior can be set via HTML parameters. Sadly, Internet Explorer 9 doesn’t play along here. Activating document.defaultView.frameElement in the SVG file supplies null and, by doing so, effectively prevents a reading out of the parameters:
// 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();
}
}
As a result, the clock cannot be configured via HTML parameters and Explorer 9 always displays the preset Swiss Railway Station Clock.
If other clocks are supposed to be shown, then the SVG file has to be adapted ‘manually’.
If you have a solution to this problem, then please let me know. I’ve already wasted so much time with Microsoft’s Explorer – something doesn’t function properly or behaves differently from the way specified by W3C. Voluntarily I’m not willing to spend another minute longer busying myself with this browser.