Subscribe to the::unwired's RSS Feedthe::unwired at Twitterthe::unwired on Facebookthe::unwired on Google Plus
the::unwired Article
HOW TO: Skinning the Smartphone 2002 Windows Media Player
Posted by Carlo Guerrero - on Saturday, 27.03.04 - 00:44:00 CET under 11 - Tips and Tutorials - Viewed 21906x
Not Tagged

The fun thing about Windows Media Player for the Smartphone is that it offers the user a rich multimedia experience through video and sound. But having fun with Windows Media Player doesn't really stop there.

You can even give Windows Media Player any look you want and match it with your Smartphone's custom Home Screen.

The concept of skinning Windows Media Player really isn't something new.  Windows Media Player used for Windows powered mobile devices from version 1, 1.1, 1.2, 7, 7.1, 8, 8.5, and 9 fully support skinning. We take a look at how skinning works for the Smartphone and what is really needed.

Skinning Windows Media Player for Smartphone 2002 is actually simpler than that of the Pocket PCs. There are less mapping images as the controls for the Smartphone 2002's Media Player makes use of the joystick or D-Pad of the Smartphone.

Let us take a look at the components of the Windows Media Player skin for Smartphone 2002.

To create a skin there are four required components for the Smartphone 2002 Windows Media Player skin.

  • Skin Definition file - this is where everything comes together. This defines the images to be used, the functions, the coordinates, the information displayed and so on and so forth
  • Background file - this is the image that is visible when you run Windows Media Player and this serves as the base for all superimposed images such as the Pushed file and Disabled file.
  • Disabled file - This button image shows when the function is not available
  • Pushed file - A good prompt to let the user know that the button is active and functional

Let us now look at the necessary elements in a skin.

  • Bitmaps - the images that serve as the user interface
  • Video box - the location of the video box for the player
  • Buttons - Play, Stop, Volume up, Volume down, Previous, Next
  • Status - displays the player status
  • Text - selected information which can be displayed
  • Time - showing the elapsed time of the playing media
  • Scrolling Marquis - displays file information
  • Thumbs - If you need a visual representation of volume and content status

As I said earlier, the Smartphone's Media Player is simpler than that of the Pocket PC's and more so when compared to the desktop PC's Windows Media Player. The main difference of the Smartphone's implementation when compared to that of the Pocket PC is that the controls are already mapped to the Joystick/D-Pad which does away with the need for mouse or stylus controls. Because of this, the main controls are limited and simply straightforward requiring less components.

So what is the minimum requirement for a Smartphone Media Player skin? Just these four files: wmplayer.bmp, pushed.bmp, disabled.bmp, and wmplayer.skn. While the Media Player supports GIF files too, the skin we'll be working on will be in BMP format.

Creating the background needs a little creativity.  The key items to consider here are the Video Screen location and size, as well as the Marquis or Text boxes for the information.  The buttons can be placed in the same location as the Video Screen to save on space.  The visual elements of the controls are not essential when playing a video as all commands are mapped to the Joystick/D-Pad.

Here is a sample of a custom skin for the Smartphone.

Now we look at the elements that make up the skin. Each of the elements has its own coordinates, based on the background image, it uses the <x, y> coordinates to map the starting point of each button (box).  Basically you are working on a 176x180 image, with the upper right-hand corner at <0, 0>.

 The first two numbers are coordinates and the last two numbers are dimensions. You will note that the area marked as active starts at 10,64 and has the dimensions of 60x60. Similarly the Next Button is located at 132,61 and has the dimensions of 30x30. These are also indications of the active area which will be replaced by images from the pushed image or the disabled image. Take note of the coordinates of each button or text box. These will be your guide for the skin definition file later. Further more, make sure that the buttons can be bound by a box and ideally each box does not eat up into the next button. If it does, as in the sample below (from another skin I made), you will have to create the pushed image in a different fashion including all the elements contained in the box. As you can see, it is arranged in a linear fashion.

The next is the pushed image.

The third is the disabled image.

Similarly, the buttons from the pushed image and the disabled image should have its coordinates recorded for the skin definition file later.

And the last image which is optional, the thumbs image. This is not in the original Smartphone skin but can be used to indicate the progress of a playing media. The thumbs image can be used for two items, the first being the visual representation of the volume level, and the second the visual representation of the media progress.

To simplify matters, I used the main background image as the basis for the pushed image. I added another button which is the Stop (pressed) button which was cloned from the Start (pressed) button. I was able to alter the color by changing the hue saturation settings of the pushed image.  In other words, it is a copy of the background image with altered colors.

The *.skn file labeled wmplayer.skn is basically a text file. One thing that it hates most, and the common cause of a failed skin is the use of the Tab when entering spaces. The skin file will not work if it has any entry of a Tab anywhere in it. Use the spacebar to add spaces between figures or headings. the items preceded by // are for information only. The best editor for this one is Notepad on the desktop PC.

Let us look at the contents of the wmplayer.skn.

[Pocket WMP Skin File v8.1]


///////////////////////////////////////////////////////////////
[ Bitmaps ]

// <Name> <File name> <x,y>
// ------ ----------- -----
Background wmplayer.bmp 0,0
Disabled disabled.bmp 0,0
Pushed pushed.bmp 0,0
Region wmplayer.bmp 0,0
Super wmplayer.bmp 0,0

////////////////////////////////////////////////////////////////
[ Video ]

// <Location>
// ----------
8,58,160,120

////////////////////////////////////////////////////////////////
[ Buttons ]

// <Function> <Type> <Location> <Push Image Src> <Dis Image Src> <Hit R,G,B> <Norm 2 Image Src> <Push 2 Image Src>
// ---------- ------ ---------- ---------------- --------------- ----------- ------------------ ------------------
VolumeUp Toggle 72,96,30,30 Pushed @ 128,35 Background @ 72,96 0, 0, 0
Prev Push 92,61,30,30 Pushed @ 148,0 Background @ 92,61 0, 0, 0
Next Push 132,61,30,30 Pushed @ 188,0 Background @ 132,61 0, 0, 0
PlayPause 2Push 10,64,60,60 Pushed @ 65,3 Disabled @ 65,3 0, 0, 0 Disabled @ 2,3 Pushed @ 1,3
VolumeDown Toggle 111,96,30,30 Pushed @ 167,35 Background @ 111,96 0, 0, 0

///////////////////////////////////////////////////////////////
[ Status ]

// <Item> <Location> <Align> <Font> <Color>
// ------ ---------- ------- ------ -------
On 65,10,95,18 Left Nina,8,N 0,0,0

///////////////////////////////////////////////////////////////
[ Text ]

// <Item> <Location> <Align> <Font> <Color>
// ------ ---------- ------- ------ -------
Time 10,10,51,18 Right Nina,8,N 0,0,0

///////////////////////////////////////////////////////////////
[ Marquis ]

// <Location> <Font> <Color> <Text item combinations>
// ---------- ------ ------- ------------------------
10,29,150,18 Nina,8,N 0,0,0 Title+Author+Bitrate,Title+Bitrate,Filename+Bitrate

///////////////////////////////////////////////////////////////
[ Trackbars ]

// <Function> <Location> <Dis Image Src> <Thumb Image Src> <Thumb Size>
// ---------- ---------- --------------- ----------------- ------------
Seek 10,23,150,8 Super @ 0,0 thumb.bmp 8,8
 

Interpreting the *.skn file, we will see that the headings explain the sequence of how the items are supposed to be typed in. As an example, let us use the PlayPause button.

// <Function> <Type> <Location> <Push Image Src> <Dis Image Src> <Hit R,G,B> <Norm 2 Image Src> <Push 2 Image Src>

PlayPause    2Push    10,64,60,60    Pushed @ 65,3    Disabled @ 65,3    0, 0, 0    Disabled @ 2,3   Pushed @ 1,3   

As you can see, the location specifies the coordinates and size, while the following items will only need the coordinates in the pushed and disabled images.

You will have to map out all the buttons in a similar manner. Once this is done and all the components are completed, they can be placed in a folder appropriately named and the Smartphone's registry hacked to point Media Player to use the new skin files.  You can look at the sample. Download the zipped file, unzip this on your PC and copy the folder to your IPSM or storage card. You will now have to edit the entries in HKEY_LOCAL_MACHINESoftwaremicrosoftWindows Media Player 8 , look for the skindir and edit the value to data to IPSMwmplayer or Storage Cardwmplayer. You can try this out with the sample skin found here. Just copy the folder either to your IPSM or Storage Card.

When you try out your skin, you might have to edit the Skin Definition file to get the buttons to be seamless. But that's where all the fun is.

Mabuhay!!! ~ Carlo

Download : [PPCW.Net skin]


 

Related Articles HOW TO Skinning the Smartphone 2002 Windows Media Player

  • No related articles found.
Comments
Posted by Filip Norrgård on 27.03.04 - 20:00:13

It is interesting to see that the Windows Media skin files work in the same way for Windows Mobile Smartphones as for Pocket PCs. I've been writing a guide for creating WMP skins, but mainly intended for Pocket PCs and this is something really new to me.

(What I'm waiting for right now is WM2003SE to see how the skinning for WMP is implemented in landscape mode.)

I wonder one thing, however: does it work to have the skins in My documents subfolders without tweaking in the registry (on Smartphones)? On Pocket PCs it seems to work and you can also have the skins in /Program Files/Windows Media Player/'s subfolders. (ok, the path might be wrong here..)

Thanks for the guide! wink

Posted by Arne Hess on 27.03.04 - 20:17:38

@Filip NorrgÃ¥rd: The thing with the Smartphone version of Media Player is that it does not have a provision for a skin changer.  Therefore, coding it into the registry is the easiest way around it.  If you want to put it into another folder, say in the IPSMMy Documents folder, you can do so creating another folder in it called wmplayer. Then in your My Documents folder, you can have several skin sets in their own folders (ex. BlueSkin, Metal, etc.) What you will then have to do is copy the contents of these folders and paste them into the wmplayer folder.

It's crude, but it's the only way to go so far for the Smartphone version.

As for the newer WM2003SE version of Windows Media Player (version 9.0.1), the skins support both portrait and landscape modes and are encoded into the *.skn file. It will check on the Pocket PC's orientation and it will use the necessary image files and section of the skin definition file that best suits the current orientation.

You're welcome. I hope it was of some help. :-)

Mabuhay! ~ Carlo

Posted by BOb on 10.01.05 - 01:51:16

So after loading the pictures and the .skn file onto the phone, what do you do?

Social Sharing
     
This Week's Top Stories
Feeds & More
Awards & More
Recent Discussions
© Copyright 1998 - 2013 by the::unwired® & Arne Hess
All rights reserved!
the::unwired is a registered trademark of Arne Hess.
All trademarks are owned by their respective companies.
All site video, graphic and text content is copyrighted to the respective party and may not be reproduced without express written consent.