This tutorial is for making skins for versions 3.x and 4.x of the Compass. We are happy to host your completed skins on Iconico.com with your name and a link to your site. Visit our current skin library.

To make a skin you'll need a free afternoon, a copy of Photoshop, or other image editor, and a text editor like Notepad. To set things up open the skins folder: C:/Program Files/Screen Compass 4.0/skins and make a new subfolder, giving it the name of your skin. In that folder you'll put all of your skin files.

Your skin consists of one .ini file which is the configuration file for your skin containing all the measurements. Name that file with the name of your skin. You'll also place your image files in that directory. Version 4.x of the Compass for Windows supports semi-transparent ".png" graphics. Version 3.x only supports bitmaps ".bmp", which will also work on version 4. You can make one version of your skin for version 3.x and another for version 4.x if you want.

Windows skins for version 4.x can be made by creating a zip file contining your ini file and images. Simply rename the file extension to .compassskin and doubleclick to install into the Compass skin folder.

If you run into trouble please contact us, we're happy to help.

The easiest way to start a skin is to use one of the existing skins that comes with the program. We'll be using the Base Skin throughout this tutorial. Make a copy of the 'default' folder and move it into the 'skins' folder. Rename the folder 'NewSkin' and we'll begin working. With the Compass open you can press 'R' at any time and the skin will be reloaded. You will be able to select your new skin from the Compass menu.

In your 'NewSkin' folder you will see an .ini file which you can edit with any text editor. The ini file is made up of several sections. The first is the 'General' section. This contains information about the skin such as the name and who created it. This information shows up in the 'About this Skin' dialogue box. Below is an example 'General' section.

[General]
Name = Base Skin
Author = Nico
Description = Metal skin
Contact = [your email here]
Site = www.iconico.com
Version = 2
CompassVersion = 4

The name is the name of the skin (this name shows up in menus). The Version is the Version of the skin, the CompassVersion should be set to equal 3 or 4 depending on what version you are building for.

Go ahead and change the Name to 'NewSkin', save the file and press 'R' with the Compass open and the new name will appear in the skin menu.

Once you've completed the 'General' section you'll need to add a 'Main' section. This sets up some of the colors and the fonts used for the Compass. All colors are stated in hexadecimal, just like web colors are specified.

[Main]
TransColor = ff00ff
BleedColor = 999999
ButtonBleedColor = 666666
BaseColors = 0E35C7, 800000, 7BA5B7, F5F5F5, AEAEAE, 000000
FontFace = Arial
FontSize = 14
FontBold = 0
FontItalic = 0
FontColor = 000000
FontColorBack = ffffff

The TransColor is the color of transparent pixels in your skin's bitmaps. In the example above white is used, but it might be more useful to choose ff00ff (unless you are making a bright pink skin). Color any area on your skin bitmap with this color and it will be transparent - you can even make holes in your skin! If you are using a .png graphic then this value is not used.

The BleedColor and ButtonBleedColor are used especially during rotation when the skin is set at it's highest Quality. The BleedColor controls which color will be mixed with the edge pixels to provide a smooth outline. Similarly the ButtonBleedColor is used to smooth the edges of the buttons. In version 4 these values are no longer used as the Compass automatically smoothes the edges, so only specify them if you want to make your skin for version 3.

The BaseColors are used to cycle colors used on the Compass's measuring area. Specify any number of colors you wish.

The FontFace is the font that will be used to report the distance. Please choose a common font as some users might not have a strange or unusual font installed on their computer. FontSize is the height in pixels of the font. FontBold and FontItalic are 0 for false and 1 for true. FontColor is obviously the font's color. Don't worry too much about these settings until you're all done and then come back and tweak them a little. When tweaking please be sure that there is enough room to display distance in small units (for example twips). FontColorBack is used to smooth the font edges, similar to ButtonBleedColor.

This section defines the main rectangles for your Compass's Base (the left part), Bar (the middle part), and Slide (the right part). Note that you don't need to create a vertical image or vertical section in the ini file. All the vertical calculations and images are worked out and created by the program!

Below is the first part of the 'Horizontal' section for the test skin.

[Horizontal]
Image = 			default.png
BaseRect = 		5, 38, 54, 60
BaseEdge = 		32
SlideRect = 		241, 38, 143, 60
SlideEdge = 		254
BarRect = 		59, 50, 180, 35

The Image is the name of the image file for your skin. This must be in the same folder as the ini file.

The BaseRect, SlideRect and BarRect are the coordinates that define the three main rectangles of the skin. These are given as (left, top, width, height), relative to the top left of the bitmap. On your skin you'll probably want to bunch up the rectangles into the top left corner a bit more to save space. Be careful doing this. The position of the BarRect relative to the BaseRect is important. The BarRect is copied over and over to fill the gap up. Please use a BarRect that's at least 10 pixels wide, otherwise there will be a noticeable performance drop.

The BaseEdge and the SlideEdge give the edges of the measurement points. These are relative to the left of the BaseRect, not the left of the bitmap.

Once you have these measurements ready for your image you should try and see if the skin works. You may be a few pixels off (check for overlap when the Compass are set to zero). You might need to modify your design a little to fit the bar in correctly.

BasePanelRect = 		416, 3, 27, 27
BasePanelCenter = 	429, 16
BasePanelAnchor = 	24, 67
SlidePanelRect = 	423, 93, 48, 42
SlidePanelCenter = 	446, 114
SlidePanelAnchor = 	305, 67

When the Compass rotates these panels move to the correct place, but do not rotate. In the default skin th Base Panel has the four up, down, left and right buttons on it; these stay pointing in the correct direction when rotated. The Slide Panel contains the textbox and four function buttons. Try rotating the Compass and you will be able to see where the panels are.

The BasePanelRect defines the bitmap coordinates that are to be used for the panel. Note that you can make great use of transparency here. The BasePanelCenter defines the central rotation point for the panel. The BasePanelAnchor defines where the BasePanelCenter will be placed on the Compass base. The slide Panel works in a similar way.

You can add as many or as few buttons as you wish on your skin, simply specify the positions.

SizeRect =		270, 32, 60, 13, 3

CloseRect =		292, 74, 10, 13, 3
ColorBaseRect =		302, 74, 10, 13, 3
MenuRect =		312, 74, 10, 13, 3

MoveLeftRect =		12, 62, 11, 11, 2
MoveUpRect = 		19, 55, 11, 11, 2
MoveRightRect =		26, 62, 11, 11, 2
MoveDownRect =		19, 69, 11, 11, 2

InRect =		268, 61, 13, 13, 1
OutRect =		330, 61, 13, 13, 1
LeftRect =		287, 62, 11, 11, 1
RightRect =		301, 62, 11, 11, 1

FlipMinusRect =		294, 45, 11, 11, 1
AngleMinusRect =		294, 55, 11, 11, 1
AngleRect =		294, 69, 11, 11, 1
FlipRect =		294, 78, 11, 11, 1

RadiusRect =		289, 51, 32 ,7, 3
CircumferenceRect =	289, 51, 32 ,7, 3
AreaRect =		289, 51, 32 ,7, 3

The previous lines define the areas for the Compass buttons. The last parameter is either 0, 1, 2 or 3 defining whether the button is placed on the Base(0), on the Slide(1), on the BasePanel(2) or the SlidePanel(3). The buttons do not have to be drawn on the bitmap in these positions, you can use these coordinates as placeholders and define the bitmaps for the buttons later.

The first line is the SizeRect rectangle which defines the area in which the measurement is reported. This area will not be filled in or colored, it just marks where the text will appear. This is defined just like the buttons rectangles are.

In our example we place the Radius, Circumference and Area rects on top of each other so that clicking them will toggle the state. We advise you do the same.

To finish off the buttons you may specify 'Over' images (for when the mouse moves over the image) and also 'Down' images for when the mouse is clicked. These are all optional and are defined just like the buttons in the 'Horizontal' section. All these coordinates are given relative to the top-left of the bitmap.

As mentioned above you may optionally specify a HorizontalControls section. This for when you want to use the initial button coordinates as placeholders.

[HorizontalControls]
CloseRect =		433, 121, 10, 13, 3
ColorBaseRect =		443, 121, 10, 13, 3
MenuRect =		453, 121, 10, 13, 3

MoveLeftRect =		455, 11, 11, 11, 2
MoveUpRect = 		464, 2, 11, 11, 2
MoveRightRect =		473, 11, 11, 11, 2
MoveDownRect =		464, 20, 11, 11, 2

InRect =		473, 108, 13, 13, 1
OutRect =		515, 108, 13, 13, 1
LeftRect =		435, 31, 11, 11, 1
RightRect =		453, 31, 11, 11, 1

FlipMinusRect =		434, 53, 11, 12, 1
AngleMinusRect =		444, 22, 11, 11, 1
AngleRect =		444, 40, 11, 11, 1
FlipRect =		434, 90, 11, 12, 1

RadiusRect =		430, 98, 32 ,7, 3
CircumferenceRect =	480, 98, 32 ,7, 3
AreaRect =		520, 98, 32 ,7, 3


[HorizontalControlsOver]
CloseRect =		433, 81, 10, 13, 3
ColorBaseRect =		443, 81, 10, 13, 3
MenuRect =		453, 81, 10, 13, 3

MoveLeftRect =		495, 11, 11, 11, 2
MoveUpRect = 		504, 2, 11, 11, 2
MoveRightRect =		513, 11, 11, 11, 2
MoveDownRect =		504, 20, 11, 11, 2

InRect =		473, 68, 13, 13, 1
OutRect =		515, 68, 13, 13, 1
LeftRect =		475, 31, 11, 11, 1
RightRect =		493, 31, 11, 11, 1

FlipMinusRect =		485, 53, 11, 12, 1
AngleMinusRect =		484, 22, 11, 11, 1
AngleRect =		484, 40, 11, 11, 1
FlipRect =		485, 90, 11, 12, 1

RadiusRect =		430, 58, 32 ,7, 3
CircumferenceRect =	480, 58, 32 ,7, 3
AreaRect =		520, 58, 32 ,7, 3

[HorizontalControlsDown]
CloseRect =		433, 41, 10, 13, 3
ColorBaseRect =		443, 41, 10, 13, 3
MenuRect =		453, 41, 10, 13, 3

MoveLeftRect =		535, 11, 10, 11, 2
MoveUpRect = 		544, 2, 11, 11, 2
MoveRightRect =		553, 11, 10, 11, 2
MoveDownRect =		544, 20, 11, 11, 2

InRect =		473, 28, 13, 13, 1
OutRect =		515, 28, 13, 13, 1
LeftRect =		515, 31, 11, 11, 1
RightRect =		533, 31, 11, 11, 1

FlipMinusRect =		536, 53, 11, 12, 1
AngleMinusRect =		524, 22, 11, 11, 1
AngleRect =		524, 40, 11, 11, 1
FlipRect =		536, 90, 11, 12, 1

RadiusRect =		430, 18, 32 ,7, 3
CircumferenceRect =	480, 18, 32 ,7, 3
AreaRect =		520, 18, 32 ,7, 3

You'll probably want to position these button images off to the right of the other images on your bitmap so they don't conflict with the other images.

Please remember to test everything before you finish your skin. After you have finished it please email the skin into me and I'll test it and add it to the main skins page. If you have any questions while you are making skins then please email me so that I can help and also update this page so that others don't run into the same problems. Feel free to look at how any of the downloadable skins are made, oh, and Happy Skinning!