Skip to main content

CoolClock

CoolClock shows an analog clock that keeps time in the browser. It suits dashboards, kiosks and world-clock panels: once it's on the page it ticks without any server round trips. It comes with 19 skins, from a Swiss railway clock to purely decorative faces.

It wraps the CoolClock JavaScript library by Simon Baird and draws on an HTML canvas.

An analog clock with a green rim, light grey ticks, a lilac center, red and blue hands and the digital time 9:14:30 am inside the face

The Fancy skin with ShowDigital turned on.

Installation​

dotnet add package Wisej-4-CoolClock

The package targets .NET Framework 4.8 and .NET 8 (including the -windows, Android, iOS and Mac Catalyst targets). After a rebuild, CoolClock appears in the Visual Studio toolbox.

Getting started​

using Wisej.Web.Ext.CoolClock;

// A clock showing the time in Tokyo.
var clock = new CoolClock
{
    Size = new Size(200, 200),
    Skin = CoolClockSkin.Classic,
    ShowDigital = true,
    GmtOffset = 9
};
this.Controls.Add(clock);

The face is always round. Its radius is half of the smaller of the control's width and height, and it's centered horizontally.

Properties​

PropertyDefaultWhat it does
SkinChunkySwissThe look of the face and hands. See the list below.
ClockTypeStandardStandard, or Logarithmic / LogarithmicReversed, which draw the hands and ticks on a logarithmic scale (CoolClockType).
ShowDigitalfalseAlso shows the time as digits inside the face.
ShowSecondHandtrueShows the second hand. It also decides which of the two redraw intervals applies.
TickDelay1000Milliseconds between redraws while the second hand is shown.
LongTickDelay15000Milliseconds between redraws while it's hidden.
GmtOffset0Hours added to UTC. 0 means the browser's local time.

The available CoolClockSkin values are Babosa, ChunkySwiss, Classic, Cold, Disc, Fancy, Lev, Machine, Modern, Sand, Securephp, Simonbaird, Simple, Stone, Sun, SwissRail, Tor, Tumb and Watermelon.

A clock that doesn't need to tick every second

Hiding the second hand switches the redraw to LongTickDelay, every 15 seconds by default. For a wall of clocks, or on low-powered devices, that uses far less CPU than redrawing every clock every second.

Time zones​

The clock reads the time in the browser, not on the server. With GmtOffset at 0 it shows the user's local time. Any other value shows UTC plus that many hours, which makes a row of world clocks easy:

this.clockNewYork.GmtOffset = -5;
this.clockBerlin.GmtOffset = 1;
this.clockLocal.GmtOffset = 0;   // the browser's local time
Whole hours, no daylight saving time

GmtOffset is an integer number of hours, and the library doesn't apply daylight saving time. Time zones with half-hour offsets, such as India (UTC+5:30), can't be shown exactly, and a fixed offset is off by an hour for half the year wherever the clocks change. To follow a zone's rules, compute its current offset on the server, for example with TimeZoneInfo.GetUtcOffset, and update GmtOffset when it changes.

UTC 0 itself is the one offset you can't set, since 0 means local time. Use a clock with GmtOffset = 0 for a UTC display only when you know the browser runs on UTC.

Theming​

The control's appearance key is coolclock. Use it in a theme mixin to style the control's container, such as its background and border. The face and hands are drawn by the skin.

API reference​