 |
KUIML
Blue Cat's User Interface Programming Language
|
|
|
KUIML
Blue Cat's User Interface Programming Language
|
|
Version 1.0 of the skinning engine only supported bitmap formats (*.bmp – monochrome, 8, 16 or 24 bits per pixel). In order to support transparency with an alpha channel (for smooth transparency effects), an image is defined by two files in the skinning language: the image (my_image.bmp) and its transparency mask (my_image_mask.bmp). The first file contains the image we want to display but without transparency information (the bmp format does not support transparency). The second file contains the alpha channel of the transparent image.
Since version 1.7, the engine also supports png files that can contain transparency information. If no additional mask is specified, the engine selects the transparency layer that is inside the png file for display and mouse masks. You can override these using mask files just like for bmp files.
Since version 2.4, you can also use simple svg files that use only paths, fills, strokes and gradients (text and filters not supported). They will be properly scaled when using zooming and scaling.
Example:
| 
| 
|
| sample.bmp | sample_mask.bmp | result on a white background |
Another file can be used to define the 'active' zone of the image: this is the zone of the image where the mouse is detected for clicks and movements. If we want the mouse to be active only on the round part of the knob in the previous example, we can add a sample_mouse_mask.bmp file which defines where the mouse is active:
Note: if this file does not exist, the system will choose by default the mask file (or the transparency layer for a transparent image). If you want the entire rectangle of the widget to be active, just set the image_mouse_mask attribute to “” (empty string).
The KUIML language relies on default naming conventions to find the mask and mouse_mask files so that attributes related to the images can be guessed automatically (it can be a lot of attributes to write otherwise).
The first convention is that mask and mouse mask images are by default suffixed with _mask and _mouse_mask. If the _mouse_mask file has not been found, the _mask file is used: for example, if the image attribute is set to 'my_img.bmp', the system will look for 'my_img_mask.bmp' and 'my_img_mouse_mask.bmp'. If you want to use a different file for these, just set the 'image_mask' and 'image_mouse_mask' attributes to another file name (can be an empty string if no file is to be used). The second convention is that if the mouse_mask cannot be found, the mask file will be used for the mouse mask.
The same convention is recursively applied to other attributes for widgets that require multiple images. For example, for an IMAGE_PARAM_KNOB that requires image and image_hover attributes, the resolution of files for image_hover is done the following way:
if the “image_hover” attribute is set, use the file name.
else look for a file which name corresponds to “image” attribute suffixed with “hover”.
if not found, use the same file as for “image”
For the mask and mouse_mask, it works the same way. That means that you can use the same mask and mouse_mask file for all your widget states if they have the same shape. It avoids you to use copies of the same image and waste memory and disk space and also avoids you to have to fill all the attributes.
Since V2.7, all widgets that use images have an additional opaque_mouse_mask attribute that when set to 'true' makes the entire area of the widget clickable (if mouse sensitive). It is very handy for widgets that use transparent images and should be clickable in the entire area.
Since V2.4, all widgets that use images have an additional image_scaling attribute that represents the scaling factor to be used to load images. With this attribute, images will be scaled by the engine upon load.