Clock Tutorial v1.0


At first the Clock Generator may look complicated, but it is really very simple to use. Clock settings are saved to a .INI file, and there are some examples available in the download section that can be loaded and used by simply pressing the 'Load .INI' and 'Test' buttons.

This document applies to version 1.0 of the Clock Generator, see Clock Generator History for full details.


Toolbar 1

From left to right we have: New, Open .INI, Save .INI, Test, Stop Test, Plot Centre and Save .AVI. All of these functions are accessible through menu items.

Toolbar 2

From left to right we have: Hour Hand Smooth Movement, Minute Hand Smooth Movement, Second Hand Smooth Movement, Hour Hand Jitter, Minute Hand Jitter, Second Hand Jitter, Hour Hand Sweep, Minute Hand Sweep, Second Hand Sweep.

Note: At the time of writing 1.0 does not implement Hour Hand Jitter, Minute Hand Jitter, Hour Hand Sweep and Minute Hand Sweep. These features may be added in a later release.
Jitter animations require a minimum of 5 frames per second. Second Hand Smooth Movement requires a multiple of 6 frames per second. Second Hand Sweep Movement requires a minimum of 6 frames per second.

User interface conventions

1. The Clock Generator is a standard Microsoft Windows MDI (Multiple Document Interface) application. This is necessary because many bitmap images and control forms can be open at the same time.
2. The application will now run happily on 800*600 in 16 bits per pixel, however this may look a bit crowded. 1024*768 is recommended. 1280*1024 is even better.
3. Every button with an icon now has a tooltip to help users.
4. The toolbars cannot be moved around the screen or 'docked' but the button order can be changed by double clicking the toolbar.
5. In the application r,g,b and w always mean red, green, blue to specify a single colour and width, usually the width of a line.
6. The colour of any pixel on a picture can be set by pressing the left mouse button, this can be transferred to a screen item by pressing the 'from point' button.

Main Controls

This form controls the basic appearance of an analog clock. Lines are drawn from a centre point to points on the circumference of a circle. The radius value is a whole shown as r1 below. The inner radius, r2, can be used to allow the program to draw inner circles for you and optionally fill them in a different color. This feature has been introduced to make it less tedious to draw the clock shape.

Fig 1. Basic Clock Shape

The reflection values have been introduced because it was observed that some clocks have hands that go through the centre and appear on the opposite side of the clock. This feature draws the reflection hand as a percentage of the total radius.

The positioner controls allow the user to draw a circle to define the radius and centre position, place the hour hand in bitmap mode within the main picture and place a digital clock within the main picture. Circles can be expanded, moved and then positioned in the correct place. Rectangles can be moved and the position confirmed by pressing the left mouse button. The picture below shows the basic screen when a digital clock is being positioned.

Advanced Controls

The advanced controls form has all of the parameters necessary to control the powerful 4 point vectoring function. Some terminology should be explained with the help of figure 2 below. The polar distance is the distance between BC. The high centre point is the point along AD where BC intersects. AD is a percentage of the radius distance on the main controls.

Fig 2. Outline view of a 4 point vector hand


Triangulation works on 4 point vector data. This can be done by setting a negative High Centre value.
The basic shape without the triangulation function being enabled would be like this:

Fig 3. Outline view of a 4 point vector hand with negative high centre

When drawing the triangular shape vectors DB, BC and CD are joined.

Fig 4. Triangulated 4 point vector

Status bar

The status bar sits at the bottom of the MDI frame. In the first box it shows the x and y coordinates within a picture. In the second box it shows the circle information for hours, minutes and seconds hand positions for the time being displayed and the frame count of the animation.

Creating a Clock from scratch

1. When creating a new clock first press the 'Save .INI' button and save the file to a directory.
Any bitmaps that are loaded must also be in this directory. This makes it much easier to move the directory around the file systems or to other drives and still be able to find the bitmaps.
2. Load a bitmap containing the clock face graphics by pressing the 'Main Picture\Load...' menu item.
Tip: If you want to choose another bitmap you MUST press the 'Main Picture\Unload' button first. This also applies to Bitmap Mode graphics in the 'Bitmap mode' frame. This allows the program to keep track of memory much easier. The program will prevent you from loading another bitmap if you do not select 'Unload'.
3. To specify the centre where the hands start enter the coordinates in the x and y edit boxes and by pressing the 'Set centre' button.
Tip: The colour of any pixel can be found by hovering the mouse over a picture and pressing the left mouse button.
The selected colour can then be filled into the transparency edit boxes manually or by pressing the 'From point' buttons.
Note: In previous versions the right mouse button could be used to set this value, but we found that is was too easy move the centre using this method
4. Specify the start time and duration in the Time frame.
5. If you want the seconds hand to not eminate from a single point set the 'inner radius' to a value and tick the 'Use IR' check box.
6. Press the test button to see what the animation will look like.
Tip: Switch off 'Sync test' to ensure that the time progresses correctly without having to wait.
You must press the 'Stop test' button to stop a test once it has started.
7. If you want the seconds hand to appear on the opposite side of the centre set the 'Second hand reflection' to a percentage and tick the check box.
8. Save the animation to a .AVI file by pressing the 'Save AVI...' button.

Note: 'Copy FPS' specifies the number of frames that a picture is copied per second into the .AVI. A value of at least 5 is required for jitter animations because the second hand moves through the sequence 0, +2, 0, -2, 0 (hold) where 0 is the normal position. 15 FPS is a good number for most cases because the normal position should be held for a while.

Note: People used to dealing with .AVI files know that you need a lot of disk space to save .AVIs
It is preferred to use a high quality codec such as Ligos Indeo Video 5.11 or DIVX rather than uncompressed AVIs, in .AVI format they can be loaded into movie making software where they can be combined with other clips or audio tracks can be added later. The resulting movie can then be converted to RealVideo format for example.

Additional information

1. 'Hour hand smooth movement', 'Minute hand smooth movement' and 'Second hand smooth movement' position the hands within sub segments of the clock rather than at 30 degree intervals only. Enabling these switches make the clock look much more realistic.
2. The hand properties should be read as colour (red, green, blue), width and diameter expressed as a percentage of the total radius.
3. Other functions including bitmap and erase mode are easy to use once the basics are understood. If you need help, please email me.

Back to index.