Borda

Borda is a JavaScript class for drawing animated SVG clocks, 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 abandonned in favour of the customary sexagesimal time.

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.

.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();