Types of skins
PocketMusic uses two different skin formats: Winamp 2.x skins and PocketMusic’s own format. To learn how to create skins for Winamp, visit www.winamp.com. PocketMusic uses Wimap skins from the Skins subdirectory (i.e. \ Program Files \ PocketMusic \ Skins \).

Skins in their own format PocketMusic located in a subdirectory PMSkins. PocketMusic supports horizontal and vertical orientation of the skins. To separate them using different extensions: .vsk for the vertical (portrait) .lsk skins and horizontal (landscape). In fact, these files are just .zip-archive containing the file description (layout.xml), a set of images with the elements of the skin, as well as the optional file preview preview.png. This file must have a resolution of 139? 185 for QVGA skins or 278? 370 for VGA and be reduced screenshot of the skin. It is displayed on the skin selection dialog in PocketMusic options.

Description file layout.xml
For starters, you can use the supplied to PocketMusic as a basis for your own creations. Copy the standard vertical skin (usually \ Program Files \ PocketMusic \ PMSkins \ default.vsk) on your desktop computer, rename it to default.zip and extract the contents. Layout.xml file you can open with Internet Explorer, where you can keep track of arising in a xml-code error. Edit it, you can by using any simple text editor (such as "Notepad").

The skin description consists of two parts:

Part 1 - preload (preload) Code:
<preload>
<bitmap>
<bitmap>
<bitmap>
<bitmap>
<bitmap>
</ preload>

This part describes all the images used in the skin. Images can be in PNG, JPG, BMP or static GIF formats. For each image, you must specify a unique alias, according to which it will be called later.

Part 2 - layout (layout) Code:
<layout>
<control1>
<control2>
. . .
<controlN>
</ layout>

This part contains a description of each control used in the skin. Below is a complete list of possible controls:

Background Code:
<background>

This element must be included in every skin. It defines the background image for the skin. The “src” parameter contains the image alias, the “x”, “y”, “w” and “h” parameters define the location and size of the rectangular background area on the image specified in src. The background must be full screen, i.e. you cannot create non-fullscreen skins.

Timer Code:
<timer>
x = "17" y = "15" w = "76" h = "30"
orientation = "0"
font = "Tahoma"
point = "18"
weight = "700"
color = "000000"
</ timer>

Timer - This item displays the current playback time. You can define its position on the screen (parameters «x» and «y») and size ( «w» and «h»). Also, you can set the «orientation» - it can be 0, 90, 180 or 270 degrees. Standard value - 0 degrees, other values ​​rotate counterclockwise. It is also possible to define the font name (parameter «font»), its size ( «size») at points weight ( «weight», the allowable value - 200 (small), 400 (normal), 700 (fat), 900 (very greasy )). The color of the text defined as RRGGBB value, where RR, GG and SS - red, green and blue in hexadecimal format (000000 - black, FFFFFF - white).

Titlebar code:
<titlebar>
x = "15" y = "41" w = "210"
h = "25"
orientation = "0"
font = "Tahoma"
point = "12"
weight = "700"
color = "000000"
</ titlebar>

Titlebar displays the name of the song being played or the help message. It uses the same parameters as timer.

Iconstatus code:
<iconstatus>
x = "95" y = "23" w = "11" h = "13"
<stop>
<play>
<pause>
</ iconstatus>

Displays one of three images, depending on the current playback status: stop, play or pause. Iconstatus uses the usual parameters that define position and size, as well as 3 subsections to describe each of the playback states. Each subsection contains the alias of the image used, as well as the coordinates of the upper left corner of the icon inside the image.

Text Code:
<text>
x = "112" y = "20" w = "35" h = "15"
id = "BITRATE"
orientation = "0"
font = "Tahoma"
point = "10"
weight = "400"
color = "000000"
</ text>

You can use this element to display the bit rate and frequency of the file being played. Use id = "BITRATE" to display the bitrate or id = "SAMPLINGRATE" to display the frequency.

Button code:
<button>
id = "PLAY"
x = "205"
y = "142"
w = "35"
h = "75"
<released>
<pressed>
</ button>

The button element creates, as the name implies, a button. You must set the position and size of the button, as well as define the images for the button pressed and released. The button action is determined by the id parameter. The following is a list of supported id:

Checkbutton code:
<checkbutton>
id = "XBASSONOFF"
x = "12" y = "102" w = "35" h = "35"
<state1>
<released>
<pressed>
</ State1>
<state2>
<released>
<pressed>
</ State2>
</ checkbutton>

Checkbutton creates buttons that have two states - on and off. The syntax of this element is similar to the syntax of a simple button (button), but you must specify two additional images to display in the second state. List of supported id:

Slider Code:
<slider>
id = "SEEKBAR"
orientation = "0"
x = "10" y = "67" w = "220" h = "24"
<released>
<pressed>
</ slider>

Slider can be used to adjust the volume or to search for a position in the file. Parameters «x», «y», «w» and «h» define a rectangle that will be the element boundaries. Also slider has a setting «orientation», which may take the values ​​0, 90, 180 or 270 degrees. When the 180-degree orientation, slider will look as well as at 0 degrees, but the minimum and maximum positions are placed at opposite. Slider does not have its own background, instead it uses a part of the general background (cell background), which limited the scope of slider'a, so all you need - to specify an image for the engine. The engine has two states: pressed and released. Also, it may be partially transparent. In order to make some pixels transparent, fill them with some unique color, and then specify it in the «mask_color» parameter.

Useful tips
You can use as many images as you need, but loading a large number of small images may be slower than a few medium-sized images. Also try not to leave free space in the images, as they occupy the program memory.