Analog clock :: Customization

Basic clock

This shows a basic clock:

    <html>
            <head>
                    (...)
                    <!-- step 1: add the javascript file -->
                    <script src="/javascript/anclock/anclock.class.js"></script>
            </head>
            <body>
                    (...)

                    <!-- step 2: create an div element with an id -->
                    <div id="myclock"></div>

                    (...)

                    <!-- step 3: init clock -->
                    <script>
                            var oClock=new Anclock("myclock");
                    </script>
            </body>
    </html>

Options

You can initialize the clock and send an options array as second parameter.
You also can change the options during runtime with the setOptions method.

The options object can contain one or some of these values:

Variable	Type	Comments
width	string	Width of the clock. The value is a css value. I recommend to use pixel. example: {width: '120px'}
height	string	Height of the clock. The value is a css value. I recommend to use pixel. Use the same width and height to keep a round clock. example: {height: '120px'}
iAnimate	float	time in seconds for transition to move clock hands. If you display the second hands its value should be below 1. I recommend values between 0 .. 0.5. example: {iAnimate: 0.3}
bShowDay	bool	Show the day? Enable the current day of the month next to the hour "3"? Valid values: true or false, 0 or 1. example: {bShowDay: false}
bShowDigital	bool	Show the digital clock too? In the default clock it is set to false. Valid values: true or false, 0 or 1. example: {bShowDigital: true}
bShowSeconds	bool	Show the seconds? Enable the display of the seconds value in the digital clock? In the default clock it is set to false. Valid values: true or false, 0 or 1. example: {bShowSeconds: true}
bShowSecHand	bool	Show the second hand in the analog clock? In the default clock it is set to true. Valid values: true or false, 0 or 1. example: {bShowSecHand: false}
bStopped	bool	Set true to keep the shown time. Default is false; the clock is running and updates the time. Valid values: true or false, 0 or 1. example: {bStopped: false}
bShowTimeAsTitle	bool	Use date and time as title? It will be visible on mouseover. Valid values: true or false, 0 or 1. example: {bShowTimeAsTitle: false}
bUseOffset	bool	Use an offset time or local time? In the default clock it is set to false (it shows the local time of the computer). You can set it to true to show the current time of another time zone. Additionally you have to set the offset in the variable iOffset (see below). Valid values: true or false, 0 or 1. example: {bUseOffset: true}
iOffset	integer	Offset to UTC time? If you set bUseOffset to true then you can set an offset to UTC (London time). example: show the time of Caracas {bUseOffset:1, iOffset:-4.5*60}

All options above you can add into an object. This options object you can add as 2nd parameter for initialisation.

    var aOptions={
        width: false,           // size of the clock
        height: false,
        
        iAnimate: 0.0,          // duration for animation of clock hands [s]
        
        bShowDay: true,         // show day of the month (as text)
        bShowSeconds: false,    // show seconds (as text)
        bShowSecHand: true,     // show seconds hand in the analog clock
        
        bUseOffset: false,      // use offset no: show users system time; yes: use iOffset to UTC time
        iOffset: 0             // offset value to UTC in minutes
    };
    var oClock=new Anclock("myclock", aOptions);

Use another skin

You can customize the clock and define your own skin.
You need to define an array structure with all skinnable items.
For first steps I suggest to use the code generator: test the options and watch the generated code.
Code generator

The colours for the analog clock items (backgrounds, hands, ...) are css definitions.
You can change their colours in the background attribute. So it is possible to set an background image too.

Define your own skin

In a skin you can define an option preset and additionally set the stiles for the clock. There you can change the style, size, colors used in the clock.
To user your own skin you have to

set key named skins (pl.) in your options. It contains all skins as an array with your own definitions
set skin (sing.) value - it is a pointer to skin to use.
To apply the skin initialize a new clock with the options array
OR
use setOptions() method to change the skin of an existing clock.

  // set skins you need to switch between on your page
  var aSkins={
    'black':{
      'options': {

        // put all options here that override the default init settings
        // i.e. bShowSecHand, width, height, ...
        
        'styles': {
         'analog': 'background:#000; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 3px #000;',
         'dot1': 'background: #333;',
         'dot2': 'background: #fff;',
         'hhand': 'background: #fff; height: 30%; width: 8%; left: 46%;',
         'mhand': 'background: #fff; height: 45%; width: 6%; left: 47%;',
         'shand': 'background: #f00; height: 48%; width: 2%; left: 49%;',
         'day': 'background:#444; color:#999; border-radius: 5px; border: 1px solid rgba(0,0,0,0.1); padding: 0 2px;'
        }
      }
    }
  };

  // define options and put your skin(s) here
  var aOptions={
    'skins': {
      'black': aSkins['black']
    },
    'skin': 'black'
  }

In the styles array you can define css settings

Variable	Comments
analog	background of the analog clock; useful settings are border-radius and background;
dot1	dots for hours
dot2	dots for hours 3, 6, 9 and 12
hands	settings for all clock hands
hhand	hour hand
mhand	minute hand
shand	second hand
day	day of the month
digital	digital clock (below the analog clock)

Apply skin on a new clock

  // define aOptions ... see above "Define your skins"

  // apply skin on a new clock
  var oClock=new Anclock("myclock", aOptions);

Apply skin on an existing clock

  oClock.setOptions("myclock", aOptions);