Borda

Borda is a JavaScript class for drawing animated SVG clock faces, clock hands, with enough parameters to allow customising the look of the clock while trying not to get in the way of CSS styling.

The main goal of this library is to provide a usable widget for accurately calculating and displaying French revolutionary decimal time hence the name Borda, who is the man responsible for proposing this scheme (among other works on decimalisation of units) to the Convention where it was subsequently legally adopted on 5 October 1793. It was however never widely used and was eventually abandoned in favour of the customary sexagesimal time.

Borda also supports a variety of "exotic" clock types in addition to decimal clocks, including hexadecimal and 24-hour clocks as well as more fancy clocks with rotary dials, mean solar time and true solar time computation at a given longitude, and hopefully any other feature that could remotely be useful to display time on a clock face.

Usage

new Clock(element)

Creates a clock using the given SVG element.

element should be a container SVG element, either g or directly the svg node.

<svg>
   <g id="clock"></g>
</svg>
<script>
  var clock = new Clock(document.querySelector("#clock"));
</script>

.draw()

Creates the various SVG elements used for the clock.

.start()

Starts the clock, using actual browser time.

.stop()

Stops the clock.

.display(Date)

Displays time of given date on the clock.

Date should be a JavaScript Date object.

.toString()

Returns clock time, formatted depending on the clock base.

Events

clockTick

The clockTick event is dispatched to the clock SVG element every second, depending on the clock base.

Parameters

.offset(int)

Time offset to use from UTC, in seconds. Default is browser's timezone.

.longitude(float)

Longitude of location, use with .offset(0) in order to display Local Mean Time, or use together with an offset to use a reference meridian other than Greenwich. Default is 0 (Greenwich).

.useTrueSolarTime(bool)

Use true solar time at longitude rather than Local Mean Time. Does not make much sense to use with offset, but should work. Default is false.

.radius(int)

Radius of the clock face, in pixels (default 50).

.hoursRadius(int)

Radius of the hours hand (default radius() × 0.6).

.minutesRadius(int)

Radius of the minutes hand (default same as radius()).

.secondsRadius(int)

Radius of the seconds hand (default same as minutesRadius()).

.base(string)

Clock base, can be "sexagesimal" (regular clocks), "24" (24-hour clock face) or "decimal" (French revolutionary time) (default sexagesimal).

.hoursTicks(bool)

Show hours ticks (12 for sexagesimal clocks, 24 for 24-hour clocks, 10 for decimal clocks) (default true).

.hoursDigits(bool)

Show hours digits (default true).

.minutesHand(bool)

Show minutes hand (default true).

.minutesTicks(bool)

Show minutes ticks (60 for sexagesimal clocks, 100 for decimal clocks) (default false).

.minutesDigits(bool)

Show minutes digits (0-55 for sexagesimal clocks by default, 00-90 for decimal clocks) (default false).

.secondsHand(bool)

Show seconds hand (default true).

.rotateDigits(bool)

Rotate digits so they follow the face's curvature (default false).

.digits(array)

Specify the digits to use for the hours. All array elements will be evenly spaced along the clock face, ending at top center.

You could have a clock with roman numerals by passing ['I', 'II', 'III', 'IIII', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'] to this option, or only four digits by passing [3, 6, 9, 12] (default is arabic numerals depending on clock base).

.smooth(bool)

Move seconds hand continuously instead of once per second (default false).

.transitions(bool)

Use smooth transitions to move the hands (default true). This is independent of the above parameter.

Examples

Regular modern clock

new Clock(element)
  .draw().start();

Roman numerals

new Clock(element)
  .digits(['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'])
  .rotateDigits(true)
  .secondsHand(false)
  .draw().start();

French revolutionary clock

new Clock(element)
  .base("decimal")
  .minutesTicks(true)
  .minutesDigits(true)
  .draw().start();

Hexadecimal clock

new Clock(element)
  .base("hexadecimal")
  .minutesTicks(true)
  .minutesDigits(true)
  .draw().start();

24-hour clock

new Clock(element)
  .base("24")
  .draw().start();

Rotary clock

Lookup the source of this demo page as this involves more than a few lines of code.