Smooth Analog Clock for Übersicht
An analog clock with smooth running pointers for Übersicht (that is also reasonably efficient, see below)
This Übersicht widget has been created by N00bySumairu. Many thanks for this magnificent clock. I have it running in a corner of my desktop and noticed a little problem. Fixed it and because N00bySumairu does not have a Macbook anymore he suggested that he transfer this repo to me for maintenance. Honored to do that. Thank you NoobySumairu for all your work.
At the top of the index.coffee file is a section with styling options, the default options are as follows:
options =
pos:
x: "left: 40px"
y: "top: 40px"
size: 512 # width of the clock in px
scale: 1 # for retina displays set to 2
fontSize: 48 # in px
secPtr:
color: "rgb(239,53,114)" # css color string
width: 3 # in px
length: 230 # in px
minPtr:
color: "rgb(107,191,221)" # css color string
width: 10 # in px
length: 184 # in px
hrPtr:
color: "rgb(106,147,211)" # css color string
width: 10 # in px
length: 128 # in px
markerOffset: 4 # offset from the border of the clock in px
majorMarker:
width: 2 # in px
length: 60 # in px
minorMarker:
width: 2 # in px
length: 40 # in px
intervalLength: 30 # interval between the transition triggers in seconds (also change the refresh rate)
backgroundBlur: false
If any bugs appear please file an issue, I will then see if I can fix them.
- The background blur filter of the clock is not clipped properly
Thanks to @ruurd who discovered a bug in how the current time of day in seconds was computed and suggested code to fix the issue.
This clock works by using css transitions of the transform property of the pointers. Transitions of the transform property are hardware accelerated, this allows the clock to be reasonably efficient while also having silky smooth 60fps animations (best case).
Since tests using different transition trigger intervals other than 30s have yet to be made, the clock might not work as expected using a different interval.