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