Tạo mới Skin cho Resco Keyboard

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).

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
… (and so on; see Skins\iSkin\Skin.ini)

[NumSmall]
30=1,2,22,38
31=25,2,22,38
… (and so on; see Skins\iSkin\Skin.ini)

[Calc]
11=120,6,22,34
12=144,6,22,34
… (and so on; see Skins\iSkin\Skin.ini)

[Default_L]
16=1,7,27,27
17=33,7,27,27
… (and so on; see Skins\iSkin\Skin.ini)

[Default_L]
16=1,7,27,27
17=33,7,27,27
… (and so on; see Skins\iSkin\Skin.ini)

[NumSmall_L]
30=0,2,30,34
31=32,2,30,34
… (and so on; see Skins\iSkin\Skin.ini)

[Calc_L]
11=160,6,29,29
12=192,6,29,29
… (and so on; see Skins\iSkin\Skin.ini)