GPS Skinner: Tutorial

This section contains a walk through to create your first skin for GPS Skinner.

Synopsis

The best way to learn something, is to do it yourself! With that in mind, below are 10 easy to follow steps to create your first GPS Skinner skin file.

Step 1

The first step in the process is to create a text file, this is best done on your PC and not on your PDA. You will need a text editor to make and update your skin file. I would recommend a decent text editor like PSPad but Notepad will do just fine too.

Open your text editor and create a new text file. Add the following line to the file;

GPS SKINNER

This line will ensure that GPS Skinner knows that the text file is indeed a skin file.

We also need to add some font and colors to the file so that we can refer to them later. Add the following lines;

FN|0|Tahoma|20|0|0
CL|0|0|0|0

The first line is a font declaration which specifies (for font 0) the Tahoma font size at a size of 20. The following options specify whether the font is bold or italic (a zero means that these options are false i.e. its not bold or italic). The second line is an RGB color declaration (for color 0), the RGB values in this case translate to the color black.

Your file should look like this so far;

Now save the text file somewhere you will remember, call it MyFirstSkin.txt.

Step 2

We now need to add some pages to the empty skin. We will add three pages to the skin file by adding the following lines to the text file;

PG|0|Page 0|Background.png
PG|1|Page 1|Background.png
PG|2|Page 2|Background.png

These lines declare our pages, with the page number, the page name and the background image. The background image can be any common image format such as bitmap, jpeg or png. In this case we are using an image called "Background.png". You can also use different image names for different pages if you wish. Remember that background images should cover the entire screen resolution as GPS Skinner can run in a full screen mode.

Your file should look like this so far;

Remember to save the text file as you make changes to it.

Step 3

Our pages are blank at the moment, lets add some text to them.

Add the following line below each page declaration;

TX|#PAGENAME|0|0|240|20|0|0|C

This line will display the page name at the top of each page. We have specified that we are using the PAGENAME system text (all system texts have a # prefix). We have also specified the bounding rectangle for the text (i.e. 0,0,240,20). The text will be displayed using color zero (0) in font zero (0) and it will be center justified (C).

Your file should look like this so far;

Remember to save the text file as you make changes to it.  

Step 4

We can also add our own text to each page by adding a new text declaration into the file. Add the following line below the page name system text in the file;

TX|This is my first skin!|0|25|240|45|0|0|L

This time the text is user text and is left justified.

Your file should look like this so far;

Remember to save the text file as you make changes to it.

Step 5

We now have a skin file with three pages and some text. Although we have multiple pages in the file we cant actually move between the pages easily, we have to add some hot spots to the skin file to do this. Add the following lines below each page declaration;

HS|PAGE_NEXT|0|0|240|320|0

This will effectively add a hot spot to each page and the extent of the hot spot covers the entire page. Clicking on the page will make the next page appear.

Your file should look like this so far;

Remember to save the text file as you make changes to it.

Step 6

To load the skin onto your device, copy the skin file and background image to the device. The background image is assumed to be in the same directory as the skin file so make sure they are in the same location. The default location for skins on the device is under "\My Documents\GPS Skinner" but any location will do (e.g. on a storage card).

Using ActiveSync, copy the files across to your device and then start the GPS Skinner application. To load the skin press the right hand soft key to bring up the menu and select the "Skin>Load" menu item. Browse to the skin file on your device and select it.

Once the skin loads the screen should look like this;

Well done! You've just created and loaded your first skin file.

Tapping anywhere on the screen will load the next page (due to the hot spot that covers the whole screen).

Step 7

The skin file (so far) only contains some user and system text. We will now add some graphical elements

Before we add any graphical elements into the skin, we will need to add some additional colors and fonts.

Most graphical elements need 3 or more colors, add the following color declarations to the skin file;

CL|1|197|197|197
CL|2|192|0|0
CL|3|0|0|192

We will also need a smaller font in order to fit the graphical element, add this line to declare a new font;

FN|1|Arial|12|0|0

Your file should now look like this;

Remember to save the text file as you make changes to it.

Step 8

Now to add the graphical elements.

For page zero, add the following line (below the page declaration);

WG|SPEEDO|0|50|150|180|1|0|0|1|2

This will add a speedometer to the first page.

For page one, add the following line (below the page declaration);

GR|SPEED_CURRENT|10|25|230|125|1|0|0|3

This will add a graph showing current speed to the second page.

For page two, add the following line (below the page declaration);

WG|CLOCK|0|25|180|175|1|0|3|2|1

This will add a clock showing the current time to the third page.

Your file should now look like this;

Remember to save the text file as you make changes to it.

Step 9

Upload the skin file to your device and restart the GPS Skinner application (or if its already running, refresh the skin by selecting the "Skin>Refresh" menu item). 

The skin should now look like this;

  

Step 10

Below is the full listing of the skin file;

GPS SKINNER
FN|0|Tahoma|20|0|0
FN|1|Arial|12|0|0
CL|0|0|0|0
CL|1|197|197|197
CL|2|255|0|0
CL|3|0|0|255
PG|0|Page 0|Background.png
HS|PAGE_NEXT|0|0|240|320|0
TX|#PAGENAME|0|0|240|20|0|0|C
TX|This is my first skin!|0|25|240|45|0|0|L
WG|SPEEDO|0|50|150|180|1|0|0|1|2
PG|1|Page 1|Background.png
HS|PAGE_NEXT|0|0|240|320|0
TX|#PAGENAME|0|0|240|20|0|0|C
GR|SPEED_CURRENT|10|25|230|125|1|0|0|3
PG|2|Page 2|Background.png
TX|#PAGENAME|0|0|240|20|0|0|C
HS|PAGE_NEXT|0|0|240|320|0
WG|CLOCK|0|25|180|175|1|0|3|2|1

You can download the complete skin (including the background) from here

The next step is really to read the documentation and experiment with the different items available in GPS Skinner.