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).
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.
Thí dụ: Bạn có button “q” trong Default.png ở vị trí 1,8 có chiều rộng 20 và cao 30 (pixel). Ở mục [Default] trong file Skin.ini sẽ có 1 dòng:
16=1,8,20,30
(16 là mã cho “q” (xem US.map)).
Internal codes
Internal codes là số sử dụng để xác định 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)
Bảng sau đây cho danh sách internal codes cho tiếng Anh Mỹ( English US):
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)
Các số sử dụng internal codes đặc biệt. They are defined in the Numeric map. Xem danh sách sau:
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)
Máy tính sử dụng internal codes sau đây:
| 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 có internal codes là: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 (ẩn nhãn)
ButtonPreview=1 (xem trước button)
CharsReturnFromNum=1
IncompatibleLanguages=AR,BG,CS,IL,JP,RU,TA,TH,UA (các ngôn ngữ không phù hợp)
AzertyFix=1
[Font]
Size=15
Bold=1
ClearType=1
[Default]
16=1,8,20,30
17=25,8,20,30
… (xem Skins\iSkin\Skin.ini)
[NumSmall]
30=1,2,22,38
31=25,2,22,38
… (xem Skins\iSkin\Skin.ini)
[Calc]
11=120,6,22,34
12=144,6,22,34
… (xem Skins\iSkin\Skin.ini)
[Default_L]
16=1,7,27,27
17=33,7,27,27
… (xem Skins\iSkin\Skin.ini)
[Default_L]
16=1,7,27,27
17=33,7,27,27
… (xem Skins\iSkin\Skin.ini)
[NumSmall_L]
30=0,2,30,34
31=32,2,30,34
… (xem Skins\iSkin\Skin.ini)
[Calc_L]
11=160,6,29,29
12=192,6,29,29
… (xem Skins\iSkin\Skin.ini
Click vào biểu tượng để tải bản mới nhất
