OggPlay skin Reverse engineering

(How to modify an existing skin)

About this tutorial

This tutorial will guide you step by step to customize an existing skin. The tutorial is using Series 60 Oggplay port as example, but is applicable to any Oggplay port. This tutorial is heavily based on the the skin creation guide originally written by Memphis X.

Required programs

Few program should be installed on your PC, before we start the customizing of own skin, These are:

Image manipulation SW (the simple MS Paint is enough for a very simple work, but a more flexible image manipulation program like Paintshop, Photoshop or the open source GIMP will ease the work and result will be much better.
Text editor (Simple windows notepad it is ok)
Symbian SDK + OggPlay. More below how to get this.
MBM Whizard. That handy utility will help generating symbian compressed bitmap file. Get this SW.

No compilation involved, no IDE are needed. No coding skills needed.

Symbian SDK

Symbian SDK is needed, to see the final result of your skin. Which SDK you'll need depends on which port you'd like to create your skin. In addition to the SDK, you'll need OggPlay emulator binaries. The binaries provided here are for CodeWarrior SDK, so make sure you download CodeWarrior SDK. You do not need to have CodeWarrior to use the CodeWarrior SDK!

	Symbian SDK	Oggplay binaries
Series60	Forum Nokia	S60 CW binaries
Series80	Forum Nokia	S80 CW binaries

First install the SDK, for example to C:\Symbian\7.0s\S80_DP2_0_SDK_CW. The compact installion is enough for our purpose. That's an important path, this tutorial will refer to it as EPOCROOT
Then, unzip the CW binaries to the very same path where you installed the SDK. The path where the binaries are unzipped is very important. In this case, C:\Symbian\7.0s\S80_DP2_0_SDK_CW

If everything when fine, you should now be able to run the OggPlay emulation. Let's try it:

Browse the directory EPOCROOT\epoc32\release\winscw\UDEB
Start the executable epoc.exe

You should get a screen which look like this (this is the Series80 emulator). If you see the Oggplay fish, then installation is ok. If not, the directory where you unzipped the CW binaries is not the correct one. To launch Oggplay, move the cursor and click the "open" button.

No niin ! Everything should be in place, we're almost ready to edit our first skin.

The skin files

Ogpplay skin is defined by two files. One file has the extension .mbm and the other file has the extension .skn. The .mbm file is a standard symbian file, where all the bitmaps are zipped. The .skn file is a text file that defines what to do with the bitmaps contained in the mbm file. Let's use the emulator to see the skin the tutorial uses. Download the two following files, and copy them to the directory EPOCROOT\epoc32\release\winscw\UDEB\z\system\apps\OggPlay
The mbm file (deviant.mbm)
The skn file (deviant.skn)

Then start the emulator, and from the emulator start Oggplay. The skin has now changed, to the quite horrible tutorial skin. If you still have the default skin, try copying the 2 files again, you probably didn't copy them to the correct directory. Here is what you should see:

Wou'll notice that this is the series 80 emulator, and the skin is for Series 60. It doesn't matter, Oggplay accepts the skin from any ports. Here is a close-up on the skin:

You'll probably want to play some music too in the emulator. You can copy some .ogg files in :EPOCROOT\epoc32\winscw\c , then use OggPlay find file as you would do in the phone.

So first thing to remember:

The 2 skin files must be copied to EPOCROOT\epoc32\release\winscw\UDEB\z\system\apps\OggPlay, in order that the emulator finds them.

Every time we will do changes, they should be done in the directory listed above otherwise the emulator won't take them into account.

Let's now fiddle with the mbm file.

Fiddling with mbm file

Start MBM Whizard, and open the file :
EPOCROOT\epoc32\release\winscw\UDEB\z\system\apps\OggPlay\deviant.mbm

From MBMWhizard, you'll see that the mbm file contains 35 bitmaps. Here is what you is in that mbm file

Index in MBM	OggPlay mandatory bitmaps	Name	bitmap
0	Track icon	Image00.bmp
1	Track icon mask	Image01.bmp
2	Album icon	Image02.bmp
3	Album icon mask	Image03.bmp
4	Artist icon	Image04.bmp
5	Artist icon mask	Image05.bmp
6	Music type icon	Image06.bmp
7	Music type icon mask	Image07.bmp
8	Folder icon	Image08.bmp
9	Folder icon mask	Image09.bmp
10	File icon	Image10.bmp
11	File icon mask	Image11.bmp
12	"go back" icon	Image12.bmp
13	"go back" icon mask	Image13.bmp
14	Play icon	Image14.bmp
15	Play mask	Image15.bmp
16	Pause icon	Image16.bmp
17	Pause mask	Image17.bmp
18	Background image 1	Image18.bmp
19	Background image 2	Image19.bmp
20	-	Image20.bmp
21	-	Image21.bmp
22	-	Image22.bmp
23	-	Image23.bmp
24	-	Image24.bmp
25	-	Image25.bmp
26	-	Image26.bmp
27	-	Image27.bmp
28	-	Image28.bmp
29	-	Image29.bmp
30	-	Image30.bmp
31	-	Image31.bmp
32	-	Image32.bmp
33	-	Image33.bmp
34	Play icon	Image34.bmp
35	Play icon mask	Image35.bmp

Remarks: Note that there exists two background image. This is a feature of the UIQ version of OggPlay where the screen size can change if the cover is open or closed. In Series 60, what mainly interests us is background image 2, but for good measure, we'll put the same image in index 18 and 19. Also it should be observed that the play icon and it's mask exist two times, in indexes 14-15 and 34-35. This used to be an OggPlay bug. For compatibility reasons, we will defined both twice, that way we can make sure that the skin will run on any version of Oggplay.

Let's change that ugly background for something else. Let's put in the background "La Joconde". Here is the bitmap we'll use. Unfortunately, MbmWhizard doesn't allow us directly to modify the bitmaps through the UI. We will use a symbian tool to generate the new mbm file that will contain all the bitmaps of the original mbm + our modified background bitmap.
First step is to extract all the bitmaps from the original mbm. We'll use mbm Whizard for this. Mbm Whizard saves it's temporary files to a directory called tempextract. That directory is located in the same directory than the mbmwhizard.exe. Here is what should be done to extract the bitmaps:

Start mbmwhizard. Open the mbm you want to modify.
(In Windows file explorer) Locate the directory tempextract. Copy and rename the directory to something else, let's say my_bitmaps.
(In MBM Whizard) Tools->Export List to use with bmconv. Save that file with the name my_mbm to the directory my_bitmaps,
(In Windows file explorer)You'll now have several bmp files, but with some strange prefix imageXX-XX-XX_. You'll have to rename these. I use 1-4a rename to do it, but any way will do the trick.

Before Renaming
After renaming

Let's resume what we have done so far: we extracted the bitmaps from the origninal mbm file to the directory my_bitmaps. We also created a file called my_mbm.txt. You can take a peak into my_mbm.txt, it's a text file that gives the order of the bitmaps in the mbm and the level of colors. We won't modify that file right now, but if you want to do more fancy skins, you'll have to customize the my_mbm.txt file.

We can finally change the background of the skin. Looking at one of the tables above, we see that background is image19.bmp. Let's replace the image19.bmp from the my_bitmaps directory, with the joconde.bmp. (That is, delete the original image19.bmp, and rename the joconde.bmp to image19.bmp)

To replace everything in the mbm file, type the following command:

bmconv my_mbm.txt

Browse with Whizard the mbm file you've just created to see if the image with index 19 is really the joconde, if not here is my version of the mbm, if you got lost in the steps above. Look at it using mbm whizard. And here is the skin in action, when we launch the emulator:

Try it in the emulator ! Copy the mbm file to EPOCROOT\epoc32\release\winscw\UDEB\z\system\apps\OggPlay\deviant.mbm and start the emulator. You should get something similar that what you see above.

Masks

Changing the background is a quite forward task, since the background doesn't interact with anything: it's just there. But or each interactive objects, we need to give a little bit more information to Oggplay : we have to define a mask. The masks are useful for transparency reasons. They tell to OggPlay which pixels should be drawn and which pixels should be transparent. There is no mask needed for the background picture, since the background is not allowed to be transparent. In the following table, objects and their corresponding masks are drawned.

Description	object	mask
Frequency bar
Volume sprite
Song Position Bar
"go back" Icon
pause icon

We can see that the masks are monochorome 'shadows' of the pictures. The black color indicates that the pixels should be drawned, while a white color indicates that the pixel is transparent.

That's about it for the mbm file. Take your time to play with it. Here is the deviant mbm where several icons and masks have been modified.

Creation of file SKN

Basic Elements
The skn file a text file which contains the indications how OggPlay should manage the pictures in the MBM file. OggPlay is very pedant about the syntax, any single error (like an empty line) and the skn will be rejected. This is why it is much easier to always modify an existing skn file. Since this is a text file, it is going to be much easier to fiddle with this file.

Let's start ! Open the deviant skn file with your text editor EPOCROOT\epoc32\release\winscw\UDEB\z\system\apps\OggPlay\deviant.skn.

The syntax of the skn file is described in http://symbianoggplay.sourceforge.net/OggPlaySkinningGuide.html but for this tutorial, we'll just introduce the concepts of the skn files. .

Common attributes of objects
Color: This attribute is mainly used with objects that contains text. The name differs depending on the object ( FontColor, FontColorSelected etc). The color is defined using RGB values, each component can take a value between 0-255. For example
the red colour is defined as 255.0.0
the green colour is defined as 0.255.0
the blue colour is defined as 0.0.255
the white colour is defined as 255.255.255
the black colour is defined as 0.0.0

Most paint programs let you know the RGB value of a certain color.

Position (place and dimensions): The position is represented by two pairs of numbers. The first pair is the position x,y of the top corner of the object, while the second pair the is the dimensions of object.

So the picture above would be 51,84,93,74.

Font : For text object, the font can be specified. Through this, it can be also specified whether the font is bolded or not. The syntax is as follow: the name of the font, followed by the size of the font and finally a number telling whether bold text should be used (1 if bolded, 0 if not). For example "Font LatinBold12 7 1" tells Oggplay to use the bolded font LatinBold12 with size 7 . Following table shows all the fonts that can be used in Series60 (Siemens SX-1).

Font	Possible Sizes ^**	Attribute
Font	Possible Sizes ^**	Regular	Bold
LatinBold12	7
LatinBold13	8
LatinBold17	10
LatinBold19	11
LatinPlain12	7
Alpi12	7
Albi12	7
Alp13	8
Alpi13	8
Albi13	8
alp17	10
Alb17b	10
albi17b	10
alpi17	10

Ok, armed with this little background information, we can hack the original deviant.skn file. Here is my new skin, mona.

Now, you should have most important information to create your own skin. Hope this little tutorial has helped you and that you've been able to successfully create your nice own skin. If you stumbled somewhere, please tell it to the oggplay forum.