Home | Test yourself (Five reasons to purchase fm-tuner) | CoolFM manual (with screenshots) | Future development (schedule) | ToDo List (what's new) | Draw custom skin

This article describes superficial concepts, how to make your custom skin. (Full reference will be published in January 2001)

Skin compiler and decompiler are located in Skins\ directory.

1. Decompile default skin
(Decompile other finished skins to know, how to describe advanced controls)

- Go to Skins\ directory
- Run decompile.exe default.skp - you will decompile default skin:
  New subdirectory is created and it's filled with bitmaps files and table.skn file.
- Read table.skn to understand how the skin is described;
- View bitmaps to satisfy one self, that all buttons have rectangular form. (Circular "call list", blot "minimize" buttons are rectangular!)

2. Creating your own skin

- Go to Skins\ directory
- Create directory "Eklmn". Its name is the name of the future skin.
- Draw background;
  draw buttons in "normal" state and "pressed" state. Moreover, you can draw "normal state when mouse is over" and "pressed when mouse is over". This step is the most difficult and important.
  Save pictures in .BMP format (OS/2 BMP or Windows BMP)
- Choose fonts for your skin
- Create myskin.skn file. Edit it (read below)
- Run compile.exe Eklmn - you get skin Eklmn.skp; Now, CooLFM is ready to use this skin

Your .skn file contents blocks (every block describes one component: button, indicator, list box, etc). Common format of every block is < object=.. mean=.. parameter=value ...... >

    <object=button  mean=close
        xpos=2 ypos=26 width=18 height=18
            normal=close.bmp pressed=close2.bmp
                text=" Quit CooLFM ">

Such lines are enough to create close button using 2 bitmaps. Bubble help contains string " Quit CooLFM ".
In reality, you have to begin .skn file with description of object "environment"

    <object=environment
        width=167 height=86
            bgred=0 bggreen=102 bgblue=255
    >

- width and height determine size of the Bar.
- All skin components must lie in the zone: (0, 0)-(width, height);
- The components can't intersect one with other.
- Group of bg* parameters determine color of the Bar backgound in RGB color space. For example, 255-0-0 is red color, 0-255-0 green, 255-255-255 white, etc

Let's describe list of stations

    <object=list mean=list
      bgred=0 bggreen=102 bgblue=255
      red=255 green=255 blue=0
      foundred=80 foundgreen=95 foundblue=249

      font="9.WarpSans"

      ndir="0 0 167 86"
      sdir="0 0 167 86"
      wdir="0 0 167 86"
      edir="0 0 167 86">

- WARNING: Create list even you don't use it!
- font determines font and size of font to use. Examples: "14.Helv", "10.System Proportional.Bold", "8.Helvetica.Italic"
- ndir determines offset and size of list box, when Bar is located in the bottom of the screen; wdir determines offset and size of list box, when Bar is located in the east side of the screen. In the example above, list box is created over Bar in every case.

Let's create "call list box" button.

    <object=button
     mean=calllist
        xpos=62 ypos=2 width=46 height=43
           normal=calist.bmp pressed=calist2.bmp
              text=" Stations list ">

Usually, user arranges favourite stations close together. To give quick access to the next station let's create "switch to next" button.

    <object=button mean=listdown
             xpos=108 ypos=10 width=21 height=21
                normal=right.bmp pressed=right2.bmp
                onnormal=onright.bmp onpressed=right2.bmp
                   text=" Next station ">

Don't forget to create "call settings notebook" button. Only this button gives access to "change skin" page: give user a chance to change your skin to another =)

    <object=button
     mean=callsetup
        xpos=0 ypos=0 width=32 height=32
           normal=configA.bmp pressed=config2A.bmp
              text=" Open/close Settings notebook">

The next object will show name of current radio station. You can predefine color of ink and file of backgound bitmap.

    <object=indicator
     mean=name
        xpos=0 ypos=48 width=167 height=38
        font="20.BrushType"
        f=nameback.bmp
        red=70 green=255 blue=9>

To use CooLFM Bar as full-value OS/2 window, let's add "move zone". User can move mouse to this zone, press right mouse button and drag Bar to new position on Desktop.

    <object=button
      mean=move
      xpos=0 ypos=55 width=160 height=38
        text=" Keep right mouse button pressed to move window ">

This zone is invisible. You can to cover it by "name" indicator (look above) or bitmap:

    <object=bitmap
         xpos=0 ypos=55 width=160 height=38
            f=title.bmp>

The fastest way to understand format of .skn file - decompile other people's skins. I showed you, that it has very simple and natural format.

Home | Test yourself (Five reasons to purchase fm-tuner) | CoolFM manual (with screenshots) | Future development (schedule) | ToDo List (what's new) | Draw custom skin