Timepiece Widgets

intro
clocks
dates
custom
notes

Customising

Both the Clock and Date style menus have a 'Custom' item at the bottom. This is to allow you to make your own custom styles. All you need to do is to produce appropriate GIF or PNG files for the elements you need, and replace the default custom graphics in the templates folder. They are called custom.png (the numerals) customd.png (the ":" separator) or for the date elements, years0.png, months0.png, days0.png, nums0.png. You don't have to worry about the pixel dimensions, those are all handled automatically when the image is loaded.

 

Custom Clocks

The format for the numerals is like this...

This example is deliberately colourful to show how the digits sit within the individual frames of the 'film-strip' animation.

 

Just make a vertical column of numbers 0-9 plus an extra blank space at the end. If you set your text to have a line height of, say 12 pixels, then the total height of the graphic will be 12 x 11 = 132 pixels. Depending on the style of lettering, the text should either be centred or ranged right - never range left because that won't look right with single digit numerals.

 

You also need to produce a single frame graphic for the seperator dots which is the same height as the numerals but you can make it narrower if you wish.

Transparency. If you want a transparent background that's okay. With MiniFonts, you don't have to worry about getting any anti-aliasing fringe colours correct. If you are using anti-aliased text as in the examples here, it's better not to use transparency unless you can be certain of the background colour the type is eventually going to appear on.

IMPORTANT. The program uses white #ffffff (rgb 255,255,255) as the transparent colour so you shouldn't use pure white in your images or they will become transparent. Just shift the colour slightly off-white (#fefefe) and there won't be any problem.

Custom Dates

You need to make separate graphics for month, day names, day numbers and years. Again, it's just a matter of making vertical columns of the text in sequence JAN-DEC, SUN-SAT, 1-31, 2000-2010.

             monthsweekdaysday numbersyears

As the text column widths are fixed, it is best to use a monospaced font otherwise the horizontal spacing can look erratic.

Check that the total height of each graphic is an exact multiple of the line height. eg, if your days0.png graphic has a line height of twenty, the image should be exactly 7 x 20 = 140 pixels high. The width doesn't matter.

The same comments about transparency are also true for the date images. Don't use pure white unless you want transparency.

Next »