twentyfour-hours-clock

v1.1.0

Published

2 years ago

A Web Component showing a 24h clock, build as Scalable Vector Graphic (SVG). The hour hand does a complete circle every 24h (instead of 12h like on a regular watchface). If the clock is given geo coordinates it is also able to show day, night and twilight

Downloads

0High
0Medium
0Low

fboes

web-component clock

Twenty-four hours clock

A Vanilla JavaScript web component which displays a self-contained twenty-four hours clock with a scale for night, twilight and day.

For a demo see https://fboes.github.io/twentyfour-hours-clock/dist/.

Installation

Either download the twentyfour-hours-clock.js to a sensible location in your web project, or do a NPM installation:

npm install twentyfour-hours-clock --save

Instead of a local installation you may also load the library from https://unpkg.com/. Beware: This makes https://unpkg.com/ a dependency of your project and may pose data protection issues.

<script type="module" src="https://unpkg.com/twentyfour-hours-clock@latest/dist/twentyfour-hours-clock.js"></script>

Everything required for the front-end functionality of this web component is contained in twentyfour-hours-clock.js.

Usage

Loading the library prior to use:

<!-- load element library -->
<script type="module" src="twentyfour-hours-clock.js"></script>

Invoke a new instance by placing this into your HTML source code:

<!-- use element -->
<twentyfour-hours-clock></twentyfour-hours-clock>

Properties

Properties can be set on initialization via HTML attributes, or selecting the DOM node via JavaScript and setting the properties of the DOM node.

| Name | Type | Default | Description | | ----------------- | --------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | width | ?number | 256 | Width of element in pixels | | height | ?number | 256 | Height of element in pixels | | datetime | ?string | current date | String to set clock to (see Date). Will be set to current time if empty. Example: 2011-10-10T14:48:00.* | | longitude | ?number | "auto" | undefined | Decimal longitude. Set to "auto" to ask browser for geolocation | | latitude | ?number | "auto" | undefined | Decimal latitude. Set to "auto" to ask browser for geolocation | | frequency | ?number | 1 | How many times per second should the clock be updated. 0 makes the clock static, as a number small than 1 will remove the second hand. | | twilight-degree | ?number | -6 | At this sun elevation the clock changes from twilight to night. |

Types prefixed with ? allow setting value to undefined as well.

(*) Please note that there is no way to supply a time zone to datetime as of now. The supplied time will always use the local user agent time zone.

Methods

There are no public methods.

Events

There are no events.

Styling

To change the layout of the clock component use CSS variables. There is a set of defined CSS variables which you may use:

twentyfour-hours-clock {
  --font-family: sans-serif;
  --color-background: black;
  --color-foreground: white;
  --color-watchhand: orange;
  --color-night: #0f396c;
  --color-twilight: #1d6fd3;
  --color-day: #a1c5f2;
  --stroke-width: 1px;
  --stroke-width-watchhand: 2px;
  --stroke-width-daylight: 2px;
}