Image

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
• 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

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.