Resco Keyboard Pro for Windows Mobile

Compatibility:

Supported Devices

Version:	6.00
Released:	June 15, 2010
Restriction:	7-day trial

Downloads

Add to Cart

Download handbook

Skin maker’s handbook

Introduction

How to make a new skin

The skin is a folder under “Skins” subfolder in Resco Keyboard installation folder. The skin which is designed to support both QVGA (240x320) and VGA (480x640) resolutions needs to have two folders, let’s say “MySkin” and “MySkin_VGA”. If the “_VGA” postfix is found, Resco Keyboard inspects the resolution and it takes the right version of the skin. The second folder will be deleted.

The skin folder must contain the following items:

Skin.ini file having the skin description
A set of PNG files defining particular keyboard panel modes
Optionally it contains the KeyZoom.png image defining the button preview

Skin images

Here is the list of images which can be implemented in the skin:

Default.png	Default (text) mode
NumSmall.png	Default numeric mode
NumLarge.png	Optional — Large numeric mode (may be chosen in the options instead of default numeric mode)
Fx.png	Optional — Frequently used phrases
Calc.png	Calculator
KeyZoom.png	Optional — Button preview (must be activated in Skin.ini)

Your skin can also have these images:

Default_L.png, NumSmall_L.png, NumLarge_L.png, Fx_L.png, Calc_L.png

If they are available in currently selected skin, they are used when device is in landscape mode (rotated screen: resolution 320x240 or 640x480).

Skin image

The Skin image is a common PNG file. It is recommended to save it as “indexed color” PNG image (having 8-bit color palette) to save the storage. 24-bit (true-color) PNG images are also supported.

Each PNG may have 3 parts. Each part must have the same size and they must be horizontally aligned in the following order:

Map section (optional)
Normal section
Pressed state section (optional)

1. Map section

The map section is an optional section of the PNG image. If it is used, the Skin.ini file must have the value HasMap set to 1 in the [General] section.

The map section defines the button areas as well as their internal code. If the map section is not used, Skin.ini file must contain a section defining the button areas for each PNG image (see Skin.ini structure).

The map Section has a black border (RGB 0,0,0) and specific RGB color for each button. R channel must be set to 255, G channel is 0, and B channel defines the internal code. This code identifies the button —it points to language MAP files.

Sample: Please take a look at the “Default” skin as a sample. The second red area on top has a RGB value 255,0,2. Now take a look at Languages\US.map (the file defining US English keyboard layout). The second line is “2 1 ! ¿ ¿”. It means that the button with the RGB value 255,0,2 has the internal code 2 and points to button which will type “1” under US English layout (it will type “!” in “Shift” mode and “¿” when “áÜ” switch is on).

Keyboard Map

2. Normal section

Each PNG image must have the Normal section. It is the section which appears when the keyboard panel is visible. It must be next to the map section (if it is present) and before the pressed state section (if it is present). There are no rules for this section. Transparency is currently not supported.

3. Pressed state section

The pressed state section is optional section of the PNG image. If it is used, the Skin.ini file must have the value HasPressedState set to 1 in [General] section. A part of this section appears when the button is pressed. Each button has a rectangle which is either defined in Skin.ini or it is calculated from the map section (as the smallest bounded rectangle). If a button is non-convex (like Enter in Default skin), the button is drawn using a mask (calculated from map section).

Skin.ini file

[General] section

HasMap (0/1)	if 1 - each PNG has a map section defining the active area for each button (see default skin)
HasPressedState (0/1)	if 1 - Each PNG has a pressed state section defining how the buttons should look like when they are pressed (see default skin)
LandscapeSupport (0/1)	if 1 - Each PNG has pair with postifx “_L” which is used when device is in landscape
TextColor (dec or hex value)	general button label color (e.g. 0 is black, 0xFFFFFF is white)
CalcResultColor (dec or hex value)	text color for result area on calculator
ModifSwitchColor (dec or hex value)	text color for button which is switching the national characters
NoDiakrColor (dec or hex value)	text color for buttons without diacritics
HideLabels (0/1)	do not write label on special buttons (they are already drawn inside the skin PNG)
ButtonPreview (0/1)	skin supports the button preview (has KeyZoom.png)
CharsReturnFromNum (0/1)	numeric layout is closed after typing non-numeric character
IncompatibleLanguages	the list of languages which are not fully compatible with this skin (not all characters are visible)
AzertyFix	; apply fix for French/Belgian layout (put "m" instead of ",")

[Font] section

Defines default font offered for this skin (user can change it in the Options)

Size	Font size (height)
Bold (0/1)	Bold font
ClearType (0/1)	Use cleartype

PNG layout section

Defines button rectangles for PNG image. Each button must have a line in the form InternalCode=x,y,width,height.

Sample: You have a button “q” in Default.png on position 1,8 and it has width 20 and height 30. There will be a section [Default] in Skin.ini and it will have a line:

16=1,8,20,30

(16 is internal code for “q” (as you can see in US.map)).

Internal codes

Internal codes are numbers which are used to identify the button. They are used in the PNG layout section of the Skin.ini file and also as a B channel in the PNG image map section.

The meaning of the button with a certain internal code may differ depending on the selected language. The meaning for each language is defined in the MAP files located in the “Languages” subfolder. The numeric modes, Fx modes and the Calculator are using special map files (see below).

Text mode (internal codes for Default.png)

Following table has a list of internal codes for text mode for English US language layout:

1 123 (Num mode)

2 “1”

3 “2”

4 “3”

5 “4”

6 “5

7 “6”

8 “7”

9 “8”

10 “9”

11 “0”

12 “-“

13 “=”

14 Bksp/Del

15 Tab

16 “q”

17 “w”

18 “e”

19 “r”

20 “t”

21 “y”

22 “u”

23 “i”

24 “o”

25 “p”

26 “[“

27 “]”

28 CAPS

29 “a”

30 “s”

31 “d”

32 “f”

33 “g”

34 “h”

35 “j”

36 “k”

37 “l”

38 “;”

39 “'”

40 Enter

41 Shift

42 “z”

43 “x”

44 “c”

45 “v”

46 “b”

47 “n”

48 “m”

49 “,”

50 “.:

51 “/”

52 Ctrl

53 Fx

54 “áÜ” modifier

55 “`”

56 “\”

57 Lang switch

58 Down

59 Up

60 Left

61 Right

62 Modif Switch (see iSkin)

Numeric mode (internal codes for SmallNum.png and LargeNum.png)

The numeric mode uses special internal codes. They are defined in the Numeric map. The following list shows all possible values:

1 ab (Text mode)

2 [

3 ]

4 {

5 }

6 7

7 8

8 9

9 #

10 %

11 =

12 Bksp

13 Calc

14 ,

15 .

16 <

17 >

18 4

19 5

20 6

21 +

22 -

23 *

24 /

25 ±

26 °

27 :

28 \

29 |

30 1

31 2

32 3

33 Down

34 Up

35 Left

36 Right

37 $

38 ¢

39 €

40 £

41 ¥

42 (

43 0

44 )

45 Tab

46 Space

47 Enter

63 &

64 @

65 "

66 ?

67 !

68 '

Calculator mode (internal codes for Calc.png)

The calculator mode uses the following internal codes:

1 abc (Text mode)

2 write mode

3 Result box

4 MS

5 M+

6 MC

7 MR

8 Bksp

9 C

10 CE

11 7

12 8

13 9

14 4

15 5

16 6

17 1

18 2

19 3

20 +/-

21 0

22 .

23 /

24 1/x

25 *

26 %

27 –

28 √

29 +

30 =

64 123 (Num mode)

Fx mode (internal codes for Fx.png)

Fx mode internal codes 1, 2, …, 12.

Appendix A – Sample Skin.ini file

[General]

HasMap=0

HasPressedState=0

LandscapeSupport=1

TextColor=0

CalcResultColor=0

ModifSwitchColor=0xFFFFFF

NoDiakrColor=0xA0A0A0

HideLabels=1

ButtonPreview=1

CharsReturnFromNum=1

IncompatibleLanguages=AR,BG,CS,IL,JP,RU,TA,TH,UA

AzertyFix=1

[Font]

Size=15

Bold=1

ClearType=1

[Default]

16=1,8,20,30

17=25,8,20,30