Image
Jump to navigation
Jump to search
This object shows an image file from the www/img directory. You can add an optional label text next to the image, and define several optional CSS attributes to control the text’s format and position. The “top” CSS attribute is used to move the text from its default position. If top is not defined, the text will be located just below the image. If defined, you can specify a positive or negative offset, in pixels. The zero offset position is at the top corner of the image; a positive offset moves the text down, a negative offset moves the text up.
Parameters
- id: the object's ID, used by UISets
- image: image filename
- position: the object's position. Use the pixels or rows and columns coordinates format
- size:the image's width and height
- label:the image's label
- css:the label's css attributes
Image files are searched inside the www/<project's name>/img directory first, then inside the www/img directory.
If the filename is set with a UISet, it's possible to load an image from the web by entering the URL, or a path relative to www/<skin's name>/pic by specifying /pic/ followed by the filename
If the filename is set with a UISet, it's possible to load an image from the web by entering the URL, or a path relative to www/<skin's name>/pic by specifying /pic/ followed by the filename
Syntax
(image<!id> <image's filename>; <pos>; <width>; <height>; <label>; <css>)
E.g.
(image myimage.png; r8c7; 100; 100; Label; (font-style:italic; top:-15px))
UI Attributes
Common attributes
Name | Value | Description |
---|---|---|
pos | x<x>y<y> | Position specified as x/y coordinates. E.g. x-5y10 |
r<r>c<c> | Position specified as row/column. E.g. r1c2 | |
visible | true | Default. Show the object |
false | Hide the object | |
blink | true | slow | Blink the object at a slow speed |
fast | Blink the object at a fast speed | |
false | Stop the blinking | |
opacity | 0.0 ... 1.0 | Object opacity from 0 (not visible) to 1 (fully visible) |
Image attributes
img | <full url (http://...)> | <path relative to /img/> | Changes the image source |
draw | <draw instructions> | Draws the image. See the Draw API
e.g.: line(0,100,20,50,blue);line(50,50,70,70,'255,10,150'); |