Spb Keyboard skin documentation

Overview

Spb Keyboard 4. 0 skin is a separate zip file, which contains several files: button imgaes, consists from several files: bitmap files with the button image, and the text files with button layout and actions for these buttons.

The keyboard has three modes: full screen, half-screen and reduced or narrow mode. Skin images and files have versions for each mode.

Each key within layout has an id which allows it to be referred from the layout file. There could be many layout files for different languages. The file _langs.txt contains description of all the layouts and languages included in the current skin. Button images
The file _image*.bmp holds the outlook of all buttons for different layouts and screen resolutions. The position of the elements is arbitrary and determined by the description in the file _skin*.txt. The only requirement for the elements is that the buttons should be of rectangular shape. Every button has two parts: normal and depressed (on this skin it is the light and blue rectangles). It is recommended for the “depressed” image to be located next to the “normal” button image. The button image can be stretched if it is written so in the skin layout file.
The button image could be either 8 bit grayscalebmp file or 24 bit color bmp file. In case of 8 bit bmp file the engine will add the main theme color for drawing the keyboard layout.




Button layout file format
The file _skin.txt describes how the buttons should be positioned within layout. It may contain several button layouts for different screen resolutions and different languages or special button layouts like layout with symbols. Each button can hold up to two symbols within one layout, the one will be generated when the user just taps the button and the second one will be generated when the user holds the on-screen button for 1 second (long tap).
The file _skin.txt has simple text form, consisting of several sections each starting from a keyword. If the section is written with more than one line it must be finished with keyword end.

Textcolor
This keyword describes the color of the text used on the keyboard layout.
Format:
Textcolor
The colors can be writted as the hexademal value of the color in the form 0x00
Example:
textcolor 0x00181C18 0x00181C18 0x00C0C0C0

Textcolor2
This keyword describes the color of the alternative text used on the keyboard layout (i.e. second character that is generated when the user hold the button for 1 second).
Format:
textcolor2
The colors can be writted as the hexademal value of the color in the form 0x00
Example:
textcolor2 0x00181C18 0x00181C18 0x00C0C0C0 Key skins
The key skin is the description of one button appearance. The skin can be either simple or stretching. Stretching means that the button image can be stretched to fill given rectangle thus avoiding drawing many button images for different button sizes.

Simple button skin
This section describes the position of the simple button image within the skin image _src_image.bmp

Format:
keyskin simple
, , , , ,
end

, - position of the “normal” image in the skin image
, - position of the “pressed” image in the skin image


Example:
keyskin 1 simple
0 0 58 0 58 50
end

Stretching button image

This section describes the image that can be stretched to fit the given rectangle. The image is divided into three parts, left, central and right (or up, central and bottom in case of vertical stretching)

Format:
keyskin




end

Example:
keyskin 3 htile
50
27 0 0 58 0
4 27 0 85 0
27 31 0 89 0
End

Other possible format is vertical stretching .
Layouts
Layout is the description of positions of all buttons within one keyboard screen. The layout can be created for each specific screen resolution (for example qVGA or wVGA), orientation (portrait or landscape) or the specific language. For example the layout for English keyboard contains four lines of buttons while layout for Russian, which needs more keys comes with 5 lines of buttons in portrait orientation.



; buttons layout
layout
name 5lines ; name, to be referred in the key layout
screen 640 480 ; screen dimensions, the engine will match the screen size to this layout
screen 800 480 ; additional screen size that could be used with this layout
size 640 240 ; skin size
key 101 0 0 64 48 - + + - * * 4 ; key description: key
; symbol center position - , ; can be: "-" - 1/3 width; "--" 1/4 width; "*"-1/2 width; "+" - 2/3 witdh; "++" - 3/4 width; - position in pixels; % - position in width percents; "!" do not draw any symbols

key 102 64 0 64 48 - + + - * * 4
; key with id "102" placed at (64,0), size(64,48), symbol placed at (21,32), second symbol placed at (43, 16), if no second symbol place it at center(32, 24), use keyskin with id "4"

key 503 192 192 64 48 * * ! ! * * 4
key 504 256 192 128 48 * * ! ! * * 4
key 505 384 192 64 48 * * ! ! * * 4
key 506 448 192 64 48 * * ! ! * * 4
key 507 512 192 128 48 * * ! ! * * 4
end

mode and action description in the key section
_langs.txt description
_id.txt description
_font*.bmp description