Menu

How to create skin

Nick Korotysh

It is very easy to create your own skin for my clock. You only need to create images and write simple configuration file and skin will be ready to use!

Images

To create usable clock skin you need to create 11-14 images:

  • 10 images for digits (0-9) [required]
  • 1 or 2 images for separator ("dot") [1 required + 1 optional]
  • 2 images for AM/PM symbols [optional]

2 images for separator are used to animate separator: 1st is shown during 0.5 sec and then 2nd. If you don't want (or lazy :) ) to use animation or don't draw separator at all, all the same you must create 1 image for separator (empty image is allowed). Its width will used to separate hours and minutes.

2 images for AM/PM symbols (1 for AM and 1 for PM) are optional. There are needed only if you decide to support this feature in your skin.

You can use any background color, but transparent background is recommended. Otherwise not transparent background will be displayed too, and not all customization options will work correctly.

Clock "understands" only two image formats for skins: PNG (raster image) and SVG (vector image). All images must be in same format for whole skin.
PNG image can be created in any raster image editor (such as GIMP or Adobe Photoshop).
SVG image can be created using any vector graphics editor which can export drawing as SVG file. This format is native for Inkscape, CorelDraw and Adobe Illustrator can export images to this format.

It is recommended to use same height value for all images, about 120-150 pixels (up to 400px for raster images with complex details). Images width can be different. Do not leave much space around your drawing, make images with minimum canvas size. Clock inserts some space between digits itself.

Any string can be used as filename, this is not important.

Configuration file

Configuration file for clock skin is standard .ini file with only 2 sections. Both of them are required.
First section contains info about skin and its author. There is an example of this section (text after ';' is comment):

[info]                          ; section name, must be [info]
name=Skin example               ; skin name (this will displayed in skins list) [required]
version=1.0                     ; skin version (you can set anything here)      [optional]
author=Nick Korotysh            ; skin author, your name/nick                   [optional]
e-mail=nick.korotysh@gmail.com  ; your e-mail if you want to show it            [optional]
comment=dummy skin              ; short skin description                        [optional]

You can leave optional keys empty (for example, comment=) or even do not create them. Instead of their values you will see word 'unknown' in clock settings dialog.

Second section contains info about skin images. It describes images purpose. There is an example:

[files]                         ; section name, must be [files]
1=img_1.svg                     ; image file for digit '1'                      [required]
2=img_2.svg                     ; image file for digit '2'                      [required]
3=img_3.svg                     ; image file for digit '3'                      [required]
4=img_4.svg                     ; image file for digit '4'                      [required]
5=img_5.svg                     ; image file for digit '5'                      [required]
6=img_6.svg                     ; image file for digit '6'                      [required]
7=img_7.svg                     ; image file for digit '7'                      [required]
8=img_8.svg                     ; image file for digit '8'                      [required]
9=img_9.svg                     ; image file for digit '9'                      [required]
0=img_0.svg                     ; image file for digit '0'                      [required]
s1=sep_dot.svg                  ; 1st image for separator                       [required]
s2=sep_empty.svg                ; 2nd image for separator                       [required]
am=am.svg                       ; image for 'AM' symbol                         [optional]
pm=pm.svg                       ; image for 'PM' symbol                         [optional]

Values for 's1' and 's2' keys may be same (if you create only one image for separator).

Keys (and sections) order in file is not important. Configuration file name must be 'skin.ini'.

All images and configuration file must be placed in same folder, folder name is not important. It is recommended do not use spaces in folder name.
To start to use your created skin just place folder with all your files to 'skins' folder in clock root folder ('C:\Program Files\Nick Korotysh\Digital Clock' is default root folder), open clock setting dialog and choose your skin in list.


Related

Wiki: Home