Skip to content

A precision analog clock-and-gauge library in standard JavaScript.

License

Notifications You must be signed in to change notification settings

hacksalot/revolve.js

Repository files navigation

Revolve.js

A precision analog clock-and-gauge library, animated and skinnable, in 500 lines of standard JavaScript with no dependencies.

Demo

Visit the Revolve.js website or check out the /examples folder for code examples.

Installation

Install with Yarn or NPM:

yarn install revolve.js

# -- or --

npm install revolve.js

Or download the revolve.js file directly.

Use

See the /examples folder for live code examples.

In HTML

The quickest way to use the library is to link to the revolve.pkgd.js file and add a canvas element with the data-revolve attribute set to either clock or gauge.

<head>
  <!-- yada yada -->
  <script src="dist/revolve.pkgd.js" type="text/javascript"></script>
  <!-- other stuff -->
</head>
<body>
  <canvas width="256" height="256" data-revolve="clock" data-theme="dark"></canvas>
</body>

With JavaScript

Alternately, call the Revolve.clock or Revolve.gauge method directly in JavaScript.

Revolve.clock( can.getContext("2d"), opt );
Revolve.gauge( can.getContext("2d"), opt );

Specifying a Theme

Revolve.js ships with over a dozen predefined themes and the ability to define your own. The current predefined themes are:

To use a theme, specify the theme name in the options object...

Revolve.clock(ctx, { theme: 'office' } );
Revolve.gauge(ctx, { theme: 'pressure' } );

...or use the data-theme attribute on a Revolve.js canvas:

<canvas width="256" height="256" data-revolve="clock" data-theme="office"></canvas>
<canvas width="256" height="256" data-revolve="gauge" data-theme="pressure"></canvas>

Every Revolve.js clock and gauge is driven by an editable JSON theme description.

Features

  • Robust on-screen rendering of analog clocks and gauges with HTML canvas.
  • Precision alignment and geometrical positioning of clock elements.
  • Continuous and discrete animation with millisecond precision.
  • Custom clock and gauge axes (for example, to implement a [pressure gauge][1]).
  • Scalable graphics at any size or level of zoom.
  • Multiple predefined themes, from classic office clocks to speedometers.
  • JSON-driven theming system allows clock and gauge customization to the pixel.
  • Clean ES6 JavaScript with a permissive MIT license and no dependencies.
  • Dedicated project website at https://revolvejs.org.
  • Package-friendly via Yarn and/or NPM; supports AMD, CommonJS, and browser-global approaches.

Changelog

See CHANGELOG.md for full release info.

  • v1.3.0 New theme (theory), better positioning and resizing support.
  • v1.2.0 Improve build packaging.
  • v1.1.0 Add unitless theme & GitHub Package support.
  • v1.0.0 Initial public release.

License

The Revolve.js library is licensed under the terms of the MIT license. Go crazy. See LICENSE.md for details.

Copyright (c) 2019 | James M. Devlin | All rights reserved