STIXE 9-Grid Slice
From TrillWiki
Contents |
[edit] Slicing a Bitmap with Region, Slice, SliceWidth, BackColor
Unlike other skinnable software such as Winamp, Trillian windows are resizable, thus a static bitmap needs to be sliced into pieces so Trillian knows the parts that are not tiled at the corners, and parts that are tiled on the top, left, right and bottom.
While SkinXML allows skinners to source backgrounds flexibility in different rectangular areas, it requires more than 50 long lines of codes to do so. The genuine slicing technique in Stixe simplifies all the code for slicing into 12 simple numbers to fill in for the entities.
[edit] Example 1: the Thumbnail element
The Thumbnail element is commonly used for the background of an avatar in message window. It has the standard set of entities used by most elements. Below is the code used by the Thumbnail element in its corresponding section in the settings.ini of Trillian Whistler for 3.0 skin.
<!ENTITY % inibmpThumbnail-Region-top '0'> <!ENTITY % inibmpThumbnail-Region-bottom '54'> <!ENTITY % inibmpThumbnail-Region-left '0'> <!ENTITY % inibmpThumbnail-Region-right '54'> <!ENTITY % inibmpThumbnail-Slice-top '4'> <!ENTITY % inibmpThumbnail-Slice-bottom '34'> <!ENTITY % inibmpThumbnail-Slice-left '4'> <!ENTITY % inibmpThumbnail-Slice-right '50'> <!ENTITY % inibmpThumbnail-SliceWidth-top '4'> <!ENTITY % inibmpThumbnail-SliceWidth-bottom '20'> <!ENTITY % inibmpThumbnail-SliceWidth-left '4'> <!ENTITY % inibmpThumbnail-SliceWidth-right '4'>
[edit] ini...-Region-top/bottom/left/right
- Values
- Any integer.
- Descriptions
- Region is the coordinates that encloses the region of a bitmap you want to use. Typically the window bitmap starts at (0,0) and ends at the lowerright corner. That's why usually Region-top and Region-left are zero, or Region-bottom and Region-right are usually the same values as the size of the bitmap.
[edit] ini...-Slice-top/bottom/left/right
- Values
- Any integer.
- Descriptions
- Slice is the widths measured from the left, and heights measured from the top.
[edit] ini...-SliceWidth-top/bottom/left/right
- Values
- Any integer.
- Descriptions
- SliceWidth is the width measured from its corresponding side, i.e. SliceWidth-bottom is measured height of the slice from the bottom. Basically: SliceWidth = Region - Slice, and is always a positive value.
- Notes
- Although Trillian SkinXML can do Skin Math, it is advised that skinners should do the job of calculating the SlideWidth so the skin may load slightly faster. ;)
Last of all, since Trillian does not have a middle background, we will need to fill it up with a color, thus the lines:
<!ENTITY % iniThumbnailFrame-BackColor-red '255'> <!ENTITY % iniThumbnailFrame-BackColor-green '255'> <!ENTITY % iniThumbnailFrame-BackColor-blue '255'>
[edit] ini...-BackColor-red/green/blue
- Values
- Any Integer from -1 to 255
- Descriptions
- BackColor is the RGB values of the color used to fill in the middle area of the element frame, as illustrated in the diagram below.
- Notes
- If you do not want the middle of the element frame to be filled with a color, you can enter the values '-1', '-1' and '-1' to paint no colors in the middle.
Combining all these entities together, Trillian will know the areas you have specified for the corners and sides of a bitmap. Area between slices will be tiled automatically and area between slice and region will be placed in corners.
The same slicing technique applies to all other elements that use the Region-Slice-SliceWidth combination.
[edit] Example 2: the Toolbar Resizable Button Element, Push State
The Toolbar Resizable Button elements are unique in the way that it collects the 4 states of the button, normal, over, push and disabled, in one single bitmap. As a result, the regions of these states are not exactly the top-left and bottom-right of the bitmap, and adjustments to the codes are made, for example in the Push state:
<!ENTITY % inibmpToolbarRButton-Push-Region-top '0'> <!ENTITY % inibmpToolbarRButton-Push-Region-bottom '40'> <!ENTITY % inibmpToolbarRButton-Push-Region-left '80'> <!ENTITY % inibmpToolbarRButton-Push-Region-right '120'> <!ENTITY % inibmpToolbarRButton-Push-Slice-top '30'> <!ENTITY % inibmpToolbarRButton-Push-Slice-bottom '39'> <!ENTITY % inibmpToolbarRButton-Push-Slice-left '81'> <!ENTITY % inibmpToolbarRButton-Push-Slice-right '119'> <!ENTITY % inibmpToolbarRButton-Push-SliceWidth-top '30'> <!ENTITY % inibmpToolbarRButton-Push-SliceWidth-bottom '1'> <!ENTITY % inibmpToolbarRButton-Push-SliceWidth-left '1'> <!ENTITY % inibmpToolbarRButton-Push-SliceWidth-right '1'>
Notice that the Region-left value is not zero any more, and the Slice-left value also shifted responding to the change. However, the SliceWidth-left value remains small because SliceWidth = Region - Slice. And the following diagram shows how these numbers work:
[edit] Example 3: the MenuBar Element
The MenuBar element in Trillian Whistler skin is designed to be one single piece of bitmap to be tiled horizontally and stuck to the bottom side. No slicing should be needed, however, we can still use the same Region-Slice-SliceWidth codes in such situation:
<!ENTITY % inibmpMenuBar-Region-top '0'> <!ENTITY % inibmpMenuBar-Region-bottom '23'> <!ENTITY % inibmpMenuBar-Region-left '0'> <!ENTITY % inibmpMenuBar-Region-right '100'> <!ENTITY % inibmpMenuBar-Slice-top '0'> <!ENTITY % inibmpMenuBar-Slice-bottom '0'> <!ENTITY % inibmpMenuBar-Slice-left '0'> <!ENTITY % inibmpMenuBar-Slice-right '100'> <!ENTITY % inibmpMenuBar-SliceWidth-top '0'> <!ENTITY % inibmpMenuBar-SliceWidth-bottom '23'> <!ENTITY % inibmpMenuBar-SliceWidth-left '0'> <!ENTITY % inibmpMenuBar-SliceWidth-right '0'> <!ENTITY % iniMenuBarFrame-BackColor-red '-1'> <!ENTITY % iniMenuBarFrame-BackColor-green '-1'> <!ENTITY % iniMenuBarFrame-BackColor-blue '-1'>
Notice that SliceWidth-top is made to be zero pixel high and SliceWidth-left and right are tuned to zero pixel wide, which implies that nothing would be tiled at the top, left and right. A BackColor of (-1,-1,-1) ensures that nothing will be painted in the middle. Here is the result:
