IMAGE
Passive element (does not respond to mouse or keyboard) that displays a single image.
For more information about image files, see the Images section.
Attributes brief detailed show all inherited
Examples
Display an opaque image, with default attributes values:
- <IMAGE image="/path/to/image.jpg" />

Paths to images
To specify the correct image path relative to the current script in Plug'n Script, you can use pre-defined variables such as $SCRIPT_DATA_PATH$ or (LM Skin only) $KUIML_DIR$.
Now let's play with repeat and stretch attributes. For that we need to set width/height for the image. Also note the use of image_scaling.
- <IMAGE image="$SCRIPT_DATA_PATH$/image.jpg" width="600" height="262" repeat="true" image_scaling="0.5" />

- <IMAGE image="$SCRIPT_DATA_PATH$/image.jpg" width="600" height="262" stretch="true" />

Transparency
If we want to add transparency to our image, we could either use image formats that support transparency (like .png) or just add a mask file named 'image_mask.bmp' in the same directory, the system will automatically find it and associate it to our image which file name is 'image.bmp'. Read more about image file naming conventions in the Images section.
The image is fully transparent when the image mask is black, and fully opaque when the image mask is white. The intermediate values (grey) are taken into account and the image then becomes partially transparent (visible here on the shadow of the image).
Nested images
Another use of images is to serve as background for other widgets. We can use for example a repeated image as background for other widgets (we used the same image here as widget). The widgets just need to be inserted inside the background IMAGE tag, and since the IMAGE widget is a layout cell, we can adjust the layout properties of the included widgets (with 'layout_type' and 'spacing' attributes here):
- <!-- image-container -->
- <IMAGE image="$SCRIPT_DATA_PATH$/image.jpg" spacing="20" layout_type="row">
- <!-- included image 1 -->
- <IMAGE image="$SCRIPT_DATA_PATH$/meter1.png" image_scaling="0.75" />
- <!-- included image 2 -->
- <IMAGE image="$SCRIPT_DATA_PATH$/meter2.png" image_scaling="0.5" />
- </IMAGE>

For more advanced capabilities, see the IMAGE_GROUP_BOX widget: it adapts the size of the graphics to the size of the contained widgets.
Comments
Please, authorize to view and post comments.