Theming

Abstract

Theming of the speedometer is carried out via theme objects defined into a separate javascript
file, then included in the HTML source and then referenced in the constructor.

The theme name is specified into the theme file, with the following scheme: Speedometer.themes.NAME.

You can name your theme by using any allowed javascript variable name (e.g. letters, numbers, and underscores).

Example:

themes/wonderful.js

Speedometer.themes.my_wonderful_theme = {
  /* .... */
}

speedometer.html

<script type="text/javascript" src="themes/wonderful.js"></script>
<script type="text/javascript">
  var speedometer = new Speedometer({ element: 'antani', theme: 'my_wonderful_theme' });
</script>

Default theme, name specification

You can find the default theme into `themes/default.js`, and here follows:

Speedometer.themes.default = {
  dial        : 'Gray',
  rim         : 'SlateGray',
  rimArc      : 'Gainsboro',
  thresh      : 'LawnGreen',
  center      : 'Black',
  nose        : 'SlateGray',
  hand        : 'Black',
  handShine   : 'SlateGray',
  handShineTo : 'Black',
  ticks       : 'Black',
  marks       : 'Black',
  strings     : 'Black',
  digits      : 'Black',
  font        : 'Sans-Serif',
  globalalpha : '0.45'
};

Multiple instances
Now you can superimpose, multiple intances don’t forget you can order with css z-index

Contributing themes

New themes are, of course, gladly accepted! You can send them to me via message via github, using a gist, drop me a note via e-mail ([email protected]), or even using IP over Pigeon.

Thanks in advance! :)