Difference between revisions of "Image"
Jump to navigation
Jump to search
| (3 intermediate revisions by one other user not shown) | |||
| Line 6: | Line 6: | ||
{{UI Object Parameter (image)}} | {{UI Object Parameter (image)}} | ||
{{UI Object Parameter (position)}} | {{UI Object Parameter (position)}} | ||
| − | *'''size''':the image's width and height | + | *'''size''': the image's width and height |
| − | *'''label''':the image's label | + | *'''label''': the image's label |
| − | *'''css''':the label's css attributes | + | *'''css''': the label's css attributes |
| + | *'''resize''': specifies how the image is cropped and/or resized | ||
{{Note: IMG Filename}} | {{Note: IMG Filename}} | ||
| + | |||
== Syntax == | == Syntax == | ||
| − | (image<!id> <image's filename>; <pos>; <width>; <height>; <label>; <css>) | + | (image<!id> <image's filename>; <pos>; <width>; <height>; <label>; <css>; <resize>) |
E.g. | E.g. | ||
(image myimage.png; r8c7; 100; 100; Label; (font-style:italic; top:-15px)) | (image myimage.png; r8c7; 100; 100; Label; (font-style:italic; top:-15px)) | ||
| Line 53: | Line 55: | ||
|Draws the image. See the [[Draw API]] | |Draws the image. See the [[Draw API]] | ||
e.g.: line(0,100,20,50,blue);line(50,50,70,70,'255,10,150'); | e.g.: line(0,100,20,50,blue);line(50,50,70,70,'255,10,150'); | ||
| + | |- | ||
| + | |||
| + | |legacymode | ||
| + | |true | ||
| + | |To use with the draw attribute. Enables a compatibility mode that allows draw instructions on old browsers. It works by sending instructions to the HSYCO server that generates an image. For this reason it is slower than standard, client-side, drawing. | ||
|} | |} | ||
Latest revision as of 14:28, 26 April 2020
For a description and a complete list of UI Objects, see 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.
Contents
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
- resize: specifies how the image is cropped and/or resized
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>; <resize>)
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 |
| 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) |
| rotation | 0 ... 360 | Object rotation in degrees. Images are rotated around the center point, all other objects are rotated around the top left corner |
Label attributes
| Name | Value | Description |
|---|---|---|
| label | <string> | Label's text. Can contain HTML tags |
| fontfamily | <family name> | A prioritized list of font family names |
| fontsize | <size> | Font size in pixels. E.g. 15px |
| fontcolor | <CSS color> | Font color |
| fontstyle | normal | Normal font style, default |
| italic | Italic font style | |
| oblique | Oblique font style | |
| fontweight | normal | Normal characters, default |
| bold | Thick characters | |
| bolder | Thicker characters | |
| lighter | Lighter characters | |
| 100 ... 900 | Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold |
Image attributes
| Name | Value | Description |
|---|---|---|
| img | <full url (http://...)> | Set the image source |
| <path relative to the project's img/ path> | ||
| <empty string> | Empty picture | |
| resize | stretch | Image will be stretched to cover the whole object's area (default value) |
| fit | Image will be resized to fit inside the object's area | |
| crop | Image will be resized and cropped to cover the whole object's area | |
| none | Image won't be resized, but will be cropped depending on the object's area size | |
| 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'); |
| legacymode | true | To use with the draw attribute. Enables a compatibility mode that allows draw instructions on old browsers. It works by sending instructions to the HSYCO server that generates an image. For this reason it is slower than standard, client-side, drawing. |
