Skip to content

A Web Component showing a 24h clock, build as Scalabale Vector Graphic (SVG). If the clock is given geo coordinates it is also able to show day, night and twilight.

License

Notifications You must be signed in to change notification settings

fboes/twentyfour-hours-clock

Repository files navigation

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;
}

Browser compatibility

See compatibility chart:

  • Google Chrome 67+
  • Mozilla Firefox 63+
  • Microsoft Edge 79+
  • Opera 64+

If you need extended compatibility, search for Web Components Polyfills.


Development

  • Run tsc --build.

Status

GitHub version npm version Published on webcomponents.org MIT license

Legal stuff

Author: Frank Boës

Copyright & license: See LICENSE.txt

About

A Web Component showing a 24h clock, build as Scalabale Vector Graphic (SVG). If the clock is given geo coordinates it is also able to show day, night and twilight.

Resources

License

Stars

Watchers

Forks

Packages

No packages published