Swiss Federal Railway Clock modeled w/ Circular Gauges

Motivated by this traed about how to show step counter graphically as a progress indicator in the shape of half of a circle, I ventured into building a JS prototype / 'class' of a Circular Gauge. The Gauge can start at any angle, end at any angle and can be a thin or fat arc in two segments of different colors, one representing the value and the other one a 'filler' up to the max value.

To show the gauge alive, I animated the values. Since the arc can be fat to the extent of the outer radius and 360 degrees, it looks more like partial pie, and animated, the cuts look like moving hands of a clock. And that inspired me to do the Swiss Federal Railway Clock. Attached you see four snapshots that show the hand states in the last few and the first few seconds of a minute, and and two clips and an animated gif that show the behavior (Attribution: Uhrendesign Hans Hilfiker, Animation Hk kng, License: CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0) via Wikimedia Commons).

The .mov clip is a screen recording of the clock in the BangleJS Emulator. The .mp4 is a 9s recording spanning the minute-change of the clock running on a BangleJS watch.

The next post includes a brief description and the code.

4 Attachments

• swissFederalRailwayClockWithCGauges.mov
• swissFederalRailwayClockWithCGauges.mp4
• 
•