Image
The image object displays an image.
The image can be specified in the Image
attribute as an image file or as an icon from an icon set.
The appearance can be customized with the Fit
attribute.
A label can be added with the Label
attribute.
Attributes
Common
ID
Sets the object's ID.
The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.
The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.
IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.
E.g. the following Value Binding switches the ID of the object between mybutton1
and mybutton2
based on the value of the UISet button.address
:
Value binding:
="mybutton" + ui('button', 'address')
UISet:
UISet('button', 'address', '1')
switches the ID to mybutton1
UISet('button', 'address', '2')
switches the ID to mybutton2
Position and Size
Position
Sets the object's position.
The default
value is: x0y0
.
Attribute Values
Value | Description | Example |
---|---|---|
x<left>y<top> | Specify left/top coordinates in pixels. | x10y20 |
Flex Grow
Specifies if the objects should grow to fill the available space.
The default
value is: true
.
Attribute Values
Value | Description |
---|---|
true | Default value. Objects expand to fill the available space. |
false | Objects do not grow to fill the available space. |
Flex Shrink
Specifies if the objects should shrink to fit the available space.
The default
value is: true
.
Attribute Values
Value | Description |
---|---|
true | Default value. Objects shrink to fit the available space. |
false | Objects do not shrink to fit the available space. |
Width
Sets the object's width in pixels.
Minimum value is 1.
Height
Sets the object's height in pixels.
Minimum value is 1.
Image
Image
Specifies an image to show.
Attribute Values
Value | Description |
---|---|
<image> | Path to the image file. Files are searched inside the project's directory first, then inside the www/img directory. |
Fit
Specifies how the image should be resized to fit its container.
The default
value is: contain
.
Attribute Values
Value | Description |
---|---|
fill | The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit. |
contain | Default value. The image keeps its aspect ratio, but is resized to fit within the given dimension. |
cover | The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit. |
none | The image is not resized. |
scale-down | The image is scaled down to the smallest version of none or contain. |
Icon Color
Specifies the icon color.
Label
Label
Specifies a label.
Attribute Values
Value | Description |
---|---|
<string> | Label. |
Font Family
Specifies the font family.
The default
value is: default
.
Font Size
Specifies the font size in pixels or percentage (relative to the project's font size).
The default
value is: 14
.
Attribute Values
Value | Description | Example |
---|---|---|
<integer> | Font size in pixels. | |
<percentage>% | Relative font size in percentage. | 90% |
Font Color
Specifies the text CSS color.
Attribute Values
Value | Description | Example |
---|---|---|
<html color> | Color in any html accepted format. | #ff0000 |
Font Weight
Specifies the weight of the font.
The default
value is: normal
.
Attribute Values
Value | Description |
---|---|
normal | Default value. Normal. |
bold | Bold. |
bolder | Bolder. |
lighter | Lighter. |
Italic
Show the text in italics.
The default
value is: false
.
Attribute Values
Value | Description |
---|---|
false | Default value. Normal. |
true | Italics. |
Small Caps
Sets the font to small caps.
The default
value is: false
.
Attribute Values
Value | Description |
---|---|
false | Default value. Normal. |
true | Small caps. |
Decoration
Specifies the text decoration.
The default
value is: none
.
Attribute Values
Value | Description |
---|---|
none | Default value. No decoration. |
underline | Underline. |
overline | Overline. |
line-through | Line through. |
Text Align
Sets the horizontal alignment of the text.
The default
value is: none
.
Attribute Values
Value | Description |
---|---|
none | Default value. No alignment. |
left | Left alignment. |
right | Right alignment. |
center | Center alignment. |
justify | Justified alignment. |
Line Height
Sets the line height of the text.
The default
value is: 1.0
.
Attribute Values
Value | Description |
---|---|
<float> | Specify the line height as a multiple of the font size. |
Label CSS
This attribute has been deprecated
since ver. 4.0
Tooltip
Specifies a tooltip text that appears on mouseover, after a small delay.
Attribute Values
Value | Description |
---|---|
<string> | Tooltip text. |
Action
Action
Specifies the action performed when clicked/tapped.
This attribute has been deprecated
since ver. 4.0
Attribute Values
Value | Description |
---|---|
none | No action. |
link | Changes page, shows a popup or opens a URL. |
command | Sends a command to the server, with the specified name and parameter. |
datapoint | Toggles a datapoint. |
download | Fires a download file request that generates a specific command. A server-side userCommand script must intercept the command. If the content to be downloaded is an existing file, it should return a full pathname of the file to be downloaded, or a JSON object such as {"path":"pathname", "filename":"filename", "delete":true} , where path is the full pathname of the file to be downloaded and filename is the name of the file to be saved on the client. Delete is optional. When present and set to true, the file is deleted as soon as the download is initiated from the client.If the returned pathname is a valid and accessible file under the HSYCO main directory, the download will be initiated. It is also possible to generate the binary content to be downloaded directly from the userCommand script. In this case userCommand should return a JSON object like {"data":"&<Base64-encoded data&>", "filename":"filename"} where data is a Base64-encoded string of the binary data to be downloaded. |
upload | Shows the upload file popup. A server-side uiSet (not a scope uiSet) must be executed to allow the upload and specify the upload path: uiSet("<object ID>", "path", "<upload path>") * name: the object ID * upload path: the path where the uploaded files are saved, relative to the HSYCO main directory When the upload is completed, a command is generated with: * name: the object ID * parameter: the uploaded file name, including the extension. |
submit | Sends the values of all the fields within the button's container to the server. If not in a container, it submits all fields from the page. In overlay pages, if the button is not inside a container, it submits fields from the current page as well. Fields inside nested containers are included in the submissions. When submitting, if a field is not valid, it will be focused and the action will be canceled. |
timer | Opens a timer's details. |
tab | Shows a specified container and hides the other of the same group. |
camera-link | Opens a page with the specified camera address. |
docs-link | Opens the documentation page with the specified root and path. |
slider | Opens a slider popup. |
menu | Opens a popup menu. |
logout | Immediately logs out the user. |
Link
Specifies a page, navigation command or external URL to follow.
This attribute has been deprecated
since ver. 4.0
Attribute Values
Value | Description | Example |
---|---|---|
<Page ID> | The page ID. | |
<URL> | A url starting with "http://", "https://", "ftp://" or "www.". | |
back | Navigate backward in browsing history. | |
forward | Navigate forward in browsing history. | |
close | Closes the last opened popup. | |
close-all | Closes all open popups. | |
<comma-separated list> | Consequently opens a list of links. Useful for example to open multiple modals in sequence, or to open a page and then a popup. | close-all,mymodal |
Link Target
Specifies where to open the linked URL. Available only for URL links.
The default
value is: _self
.
This attribute has been deprecated
since ver. 4.0
Attribute Values
Value | Description |
---|---|
_self | Default value. Opens the linked URL in the same window or tab. |
_blank | Opens the linked URL in a new window or tab. |
<string> | Opens the linked URL in a named window or tab. Use this to open multiple links in the same window or tab. |
Datapoint
Specifies a datapoint, to display and control its status.
This attribute has been deprecated
since ver. 4.0
Attribute Values
Value | Description | Example |
---|---|---|
[datapoint address] | The datapoint address. | dummy.dimmer.1 |
Name
Specifies the command name that is sent to the server.
If the name starts with $, then the server will automatically set a variable with the same name as the command, containing the command's parameter.
The default
value is: =id
.
This attribute has been deprecated
since ver. 4.0
Attribute Values
Value | Description | Example |
---|---|---|
<string> | A command name. | |
$[variable name] | A command name that sets a variable. | $myvar |
$[variable name]! | A command name that sets a persistent variable. | $myvar! |
Parameter
Specifies the command parameter that is sent to the server.
This attribute has been deprecated
since ver. 4.0
Attribute Values
Value | Description |
---|---|
<string> | A command parameter. |
Repeat
If enabled, the command will be repeated every second. Down/Repeat/Up/Stop commands are sent.
The default
value is: false
.
This attribute has been deprecated
since ver. 4.0
Attribute Values
Value | Description |
---|---|
false | Default value. Repeat mode is disabled. |
true | Repeat mode is enabled. |
Path
Specifies the path where uploaded files are saved. If this attribute is not set, the upload has no effect (no files saved on the server).
For security reasons, this UISET must be executed on the server-side code (EVENTS, JavaScript or Java). A client-side UISET would be ignored.
This attribute has been deprecated
since ver. 4.0
This attribute is live
. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.
Attribute Values
Value | Description | Example |
---|---|---|
<string> | Path. | .tmp |
Multiple
Specifies wether multiple files can be selected.
The default
value is: false
.
This attribute has been deprecated
since ver. 4.0
Attribute Values
Value | Description |
---|---|
false | Default value. Single file selection. |
true | Multiple file selection. |