WidSets SDK Tips : Add Custom Emulator Skin

From Forum Nokia Wiki

This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. The article is believed to be still valid for the original topic scope.

Introduction

You might already know that WidSets support skin changing and there are 4 skins embeded with WidSets SDK 3.1.0 (from WidSets SDK Tips : Emulator Skin Changing). Furthermore, you are also able to create your custom skin for WidSets SDK too! This article will show you how to do that.

Browse for embeded skins files

First, browse to bin folder under WidSets SDK root folder. You will see devkit.jar inside. Rename it to devkit.zip. (I suggest you to backup it somewhere first)

Open that zip file with any zip file manager. And then browse to devices folder.

These are skins files for WidSets SDK Emulator. Notice that each skin consists of 3 files, skinname.png, skinname-hi.png and skinname.properties. Let’s see what they are.

Skin Structure

In this article, cool skin will be used for being skin template. Extract cool.png, cool-hi.png and cool.properties to anywhere you want.

Let’s open cool.png and cool-hi.png with any image viewer.


cool.png	cool-hi.png

As you see, cool.png is the skin image file in idle state while cool-hi.png is the skin image file in mouseover state.

Next, open cool.properties with any text editor. Here is the content inside.

#
# Record store
#
rms.provider = vajax.microedition.rms.file.FileRMS
rms.limit = 1000000

#
# Record store delays
# 
rms.delay.store.open   = 0
rms.delay.store.delete = 0
rms.delay.store.close  = 0

rms.delay.list   = 0
rms.delay.get    = 0
rms.delay.put    = 0
rms.delay.delete = 0

#
# Procotols
#
#protocol.socket = vajax.microedition.io.SocketProxy
#protocol.http = vajax.microedition.io.HttpProxy

protocol.socket = vajax.tools.TunneledSocketProxy
protocol.http = vajax.tools.HttpClientProxy
protocol.localmsg = vajax.microedition.io.local.LocalConnection
protocol.sms = vajax.wireless.messaging.DummyMessageConnection
protocol.file = vajax.microedition.io.file.FileConnectionImpl

env.fileconn.dir.memorycard = file:///MemoryCard/
env.fileconn.dir.photos = file:///Photos/


#
# Dimension of emulator image
#
device.width = 220
device.height = 430
device.name = WidSets

#
# Background image
#
display.image = /devices/cool.png
display.image.pressed = /devices/cool-hi.png

#
# Position and size of actual midlet display
#
display.x = 20
display.y = 33
display.width = 178
display.height = 210

#
# Key bindings, multiple keys may produce same keycode
#
# key.<informativeName> = <keyCode>, <x>, <y>, <width>, <height>
#
# keyCode 27 will close the client
#
key.ok   = -6,25,244,60,32
key.back = -7,138,244,60,32

key.green = -10,25,277,56,29
key.red   = 27,138,277,56,29

key.fire  = -5,103,270,14,14

key.up    = -1,101,254,18,15
key.down  = -2,101,284,18,15
key.left  = -3,89,268,13,19
key.right = -4,118,268,13,19

key.1    = 49,37,307,35,17
key.4    = 52,37,325,35,17
key.7    = 55,37,343,35,17
key.hash = 35,37,361,35,17

key.2    = 50,93,307,35,17
key.5    = 53,93,325,35,17
key.8    = 56,93,343,35,17
key.0    = 48,93,361,35,17

key.3    = 51,148,307,35,17
key.6    = 54,148,325,35,17
key.9    = 57,148,343,35,17
key.star = 42,148,361,35,17

#
# AWT to Midlet keycodes.
# Available VK_* codes are listed at java.awt.event.KeyEvent.
#
# Following negative keycodes are used by client:
#
#   KEY_UP     = -1;
#   KEY_DOWN   = -2;
#   KEY_LEFT   = -3;
#   KEY_RIGHT  = -4;
#   KEY_FIRE   = -5;
#   KEY_DELETE = -8;
#   KEY_OK     = -6;
#   KEY_BACK   = -7;
#
# Keycode 27 (ESCAPE) will close the client
#
keycode.ESCAPE = 27

keycode.UP = -1
keycode.DOWN = -2
keycode.LEFT = -3
keycode.RIGHT = -4

keycode.DELETE = -6
keycode.END = -5
keycode.PAGE_DOWN = -7

keycode.F1 = -6
keycode.F2 = -5
keycode.F3 = -7

#
# Font families
#
font.system       = dialog
font.proportional = sansserif 
font.monospace    = monospaced

#
# Font sizes
#
font.small  = 10
font.medium = 12
font.large  = 14

#
# java.lang.System.getProperty environment variables.
#
# env.<key> = <value>
# 

#
# MMAPI - players. 
#
# player.<locator> = <classname>
#
player.capture\://video = vajax.microedition.media.dummy.DummyCamera
player.audio/midi = vajax.microedition.media.MIDIPlayer
player.audio/basic = vajax.microedition.media.WavePlayer
player.audio/x-wav = vajax.microedition.media.WavePlayer
player.audio/x-aiff = vajax.microedition.media.WavePlayer

There are many interesting lines in this file. First part is used for linking to the skin image file.

 #
 # Background image
 #
 display.image = /devices/cool.png
 display.image.pressed = /devices/cool-hi.png

Next part contains image file resolution and Emulator caption for this skin.

 #
 # Dimension of emulator image
 #
 device.width = 220
 device.height = 430
 device.name = WidSets

This part contains screen position (top left) in skin image and screen resolution.

 #
 # Position and size of actual midlet display
 #
 display.x = 20
 display.y = 33
 display.width = 178
 display.height = 210

The last, this part contains keys position in image file.

 #
 # Key bindings, multiple keys may produce same keycode
 #
 # key.<informativeName> = <keyCode>, <x>, <y>, <width>, <height>
 #
 # keyCode 27 will close the client
 #
 key.ok   = -6,25,244,60,32
 key.back = -7,138,244,60,32
 
 key.green = -10,25,277,56,29
 key.red   = 27,138,277,56,29
 
 key.fire  = -5,103,270,14,14
 
 key.up    = -1,101,254,18,15
 key.down  = -2,101,284,18,15
 key.left  = -3,89,268,13,19
 key.right = -4,118,268,13,19
 
 key.1    = 49,37,307,35,17
 key.4    = 52,37,325,35,17
 key.7    = 55,37,343,35,17
 key.hash = 35,37,361,35,17
 
 key.2    = 50,93,307,35,17
 key.5    = 53,93,325,35,17
 key.8    = 56,93,343,35,17
 key.0    = 48,93,361,35,17
 
 key.3    = 51,148,307,35,17
 key.6    = 54,148,325,35,17
 key.9    = 57,148,343,35,17
 key.star = 42,148,361,35,17

Each key position is defined in this form.

 key.<informativeName> = <keyCode>, <x>, <y>, <width>, <height>

Create your own skin

Create your skin image files both normal one and mouseover one. And then save them in any skin name you want, for example, N958GB.png and N958GB-hi.png. (Use your Photoshop skill!!!). After that, rename cool.properties file name to your skin name.

Open properties file with any IDE and do the following step.

1. Change display.image and display.image.pressed value to your file name.

 #
 # Background image
 #
 display.image = /devices/N958GB.png
 display.image.pressed = /devices/N958GB-hi.png

2. Modify device.width, device.height and device.name to the right value.

 #
 # Dimension of emulator image
 #
 device.width = 334
 device.height = 744
 device.name = Nokia-N95 8GB

3. Modify display.x, display.y, display.width and display.height to the right value.

 #
 # Position and size of actual midlet display
 #
 display.x = 46
 display.y = 84
 display.width = 240
 display.height = 320

4. Last, the most tired part. Change <x>, <y>, <width> and <height> of each key in the Key Binding section.

 key. <informativeName> = <keyCode>, <x>, <y>, <width>, <height>

Please note that DON'T change <informativeName> and <keyCode> or your skin will not work properly.

Test it

Add edited files to the devices folder in devkit.zip

Rename devkit.zip back to devkit.jar and launch emulator using this command.

 devkit --skin <YOUR_SKIN_NAME> runw

If everything goes fine, you will see your custom skin on WidSets emulator. Enjoy!

Example Custom Skin (Nokia N95 8GB)

You can download Nokia N95 8GB skin from File:WidSets Skin n958gb.zip

Here is the result.

Community: Wiki

WidSets SDK Tips : Add Custom Emulator Skin

From Forum Nokia Wiki

Contents

Introduction

Browse for embeded skins files

Skin Structure

Create your own skin

Test it

Example Custom Skin (Nokia N95 8GB)

See Also

Related Wiki Articles

Rate This