Navi

Nav item, placed inside a nav object.

It can be a button, a group, a divider, a spacer, or a breadcrumbs item.

Attributes

Type

Specifies the nav item type.

The default value is: button.

Attribute Values

Value	Description
button	Default value. A button.
group	A Group contains more items.
header	A header used to Used to categorize or separate other items.
drawer-button	A drawer button, used to open/close the nav. It's available only for drawer mode.
divider	A divider.
spacer	A spacer that takes all the space available. Space is divided equally among multiple spacers.
breadcrumbs	Breadcrumbs.
image	An image.
section	Section: for multi-level menus. Shows as a separate column or row, depending on the nav orientation. Can only be used in the root level.

Group Type

Specifies the group type.

The default value is: popup-menu.

Attribute Values

Value	Description
popup-menu	Default value. Popup Menu: shows the group content in a popup.
scroller	Scroller: encloses the group content in a scrollable area that takes as much space as available.
accordion	Accordion: expands/collapses the group content when selected.

Button

Label

Specifies the button's label.

Attribute Values

Value	Description
<string>	Button's label.

Description

Specifies a description displayed below the label.

Attribute Values

Value	Description
<string>	Button's description.

Icon

Specifies an icon to display. Its position is set with the "Icon Position" attribute.

Attribute Values

Value	Description
<icon>	An icon or image.

Icon Color

Specifies the icon's color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	`#ff0000`

Secondary Icon

Specifies a secondary icon to display. Its position depends on the "Icon Position" attribute.

Attribute Values

Value	Description
<icon>	An icon or image.

Secondary Icon Color

Specifies the secondary icon's color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	`#ff0000`

Image

Specifies the relative path of the image file to show.

The path is relative to one of the following folders:

Common images folder, for images shared among projects (www/img)
Project images folder, for project-specific images (www/projects/<project>/img) If an image with the same relative path is found in both folders, the project image is used.

Attribute Values

Value	Description
<image>	Relative path to the image file.

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.

Width

Sets the object's width in pixels.

Minimum value is 1.

The default value is: 80.

Height

Sets the object's height in pixels.

Minimum value is 1.

The default value is: 80.

Text

Specifies the text.

Size

Specifies the item's size.

The default value is: auto.

Attribute Values

Value	Description
auto	Default value. Auto.
<int>	Size in pixels.

Action

Specifies the action performed when clicked/tapped.

Attribute Values

Value	Description
[empty]	Default value. 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.
coordinates	Sends a command to the server, with the specified name and the cursor position as parameter (x,y).

Link

Specifies a page, navigation command or external URL to follow.

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.

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.

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.

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.

Attribute Values

Value	Description
<string>	A command parameter.

Repeat

If enabled, the command will be repeated every second. Instead of a single command on the button press event, multiple commands are sent with the following suffixes:

<command name>/down: on mouse down or touch down events
<command name>/repeat: if the button is still pressed, a repeat command is sent every second
<command name>/up: on mouse up or touch up events, for a short press (less than a second, so no repeat commands have been sent yet)
<command name>/stop: on mouse up or touch up events, for a long press (more than a second, so at least a repeat command has been sent)

The default value is: false.

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.

note

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.

Attribute Values

Value	Description
false	Default value. Single file selection.
true	Multiple file selection.

Accept

Specifies the types of files that the server accepts.

The default value is: [any].

Attribute Values

Value	Description	Example
[empty]	No restrictions.
<comma-separated list>	File extensions.	`.jpg,.png,.gif`

Preview

Specifies wether a preview step is displayed.

The default value is: false.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values

Value	Description
false	Default value. No preview.
true	Preview.

Camera

Specifies a camera, to display its live video stream.

Attribute Values

Value	Description	Example
<camera address>	The camera address.	`dummy.camera.1`

Target Camera

Specifies a target camera object, to display the camera live video stream.

If not specified, a default camera object is displayed in a popup.

Attribute Values

Value	Description	Example
[empty string]	The camera is displayed in a popup.
<Container ID>	The container object's ID.	`mycontainer`

Docs Target

Specifies a target docs object, to display the documentation.

If not specified, a default docs object is displayed in a popup.

The default value is: default.

Attribute Values

Value	Description	Example
default	Default value. The documentation is displayed in a popup.
<Docs ID>	The docs object's ID.	`mydocs`

Doc Type

Specifies the type of documentation.

The default value is: project.

Attribute Values

Value	Description
project	Default value. Project documentation.
hsyco	HSYCO documentation.
projects	All projects documentation.
objects	Custom objects documentation.

Docs Root Path

Root path of the documentation.

If left empty it loads all the project documentation.

If a path is specified it loads the documentation from that path.

The path is relative to the project docs directory: www/projects/<project id>/docs.

The contents of the docs directory are merged with the common docs directory: www/docs.

The common docs should include documentation that is shared among multiple projects, while project-specific docs should be placed in the project's docs directory.

Attribute Values

Value	Description	Example
<string>	Path.	`my/sub/dir`

Docs Path

Current path of the docs file displayed, following the same directory structure as the root path.

Can contain an anchor to a specific section of the document, using the format path#anchor.

Each heading in the document has an anchor with an id equal to the heading text in lowercase, with no spaces. E.g. My Heading becomes #myheading.

Attribute Values

Value	Description	Example
<string>	Path.	`projects/home`

Index

Specifies wether the index is displayed.

The default value is: toggle.

Attribute Values

Value	Description
true	Visible.
false	Hidden.
toggle	Default value. User can toggle visibility.
toggle-false	User can toggle visibility, but it's hidden by default.

Breadcrumbs

Specifies wether the breadcrumbs are displayed.

The default value is: true.

Attribute Values

Value	Description
false	Hidden.
true	Default value. Visible.

Timer

Specifies a timer, to display its details and command it.

Attribute Values

Value	Description	Example
<timer address>	The timer address.	`dummy.timer.1`

Target Container

Specifies a target container, to display its content.

Attribute Values

Value	Description	Example
<container ID>	The container ID.	`dummy.container.1`

Tab Group

Specifies the tab group to which the tab belongs.

Attribute Values

Value	Description
<string>	The tab group name.

Slider Action

Specifies the action to perform when the slider is moved.

The default value is: none.

Attribute Values

Value	Description
none	Default value. No action.
command	Sends a command.
datapoint	Sets a datapoint value.
dmx	Sets a DMX value.

Set Value

Specifies the value to set the datapoint to.

The default value is: flip.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values

Value	Description
flip	Default value. Toggles the datapoint value.
<string>	The value to set.

Slider Name

Specifies the name of the command.

The default value is: =id.

Attribute Values

Value	Description
<string>	Command name.

Slider DMX Address

Specifies the DMX address.

Attribute Values

Value	Description
<string>	DMX address.

Slider Datapoint

Specifies the datapoint.

Attribute Values

Value	Description
<datapoint>	Datapoint.

Slider Range

Specifies the range of the slider.

The default value is: 0,100.

Attribute Values

Value	Description
<min,max>	Min, max values.

Slider Unit

Unit displayed on value label, or % for percentage.

Attribute Values

Value	Description
<string>	Displays the unit after the value.
%	Displays the value as percentage. If there's a custom range (different from 0-100) the percentage is calculated.

Slider Change Delay

Defines the time interval between value changes for sending values to the server.

The default value is: 50.

Attribute Values

Value	Description
<number>	Delay in milliseconds.

Slider Orientation

Specifies the orientation of the slider.

The default value is: horizontal.

Attribute Values

Value	Description
horizontal	Default value. Horizontal.
vertical	Vertical.

Slider Display Value

Specifies wether the value is displayed.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Hides the value.
true	Shows the value.

Slider Orientation

Specifies the orientation of the slider.

The default value is: auto.

Attribute Values

Value	Description
auto	Default value. Auto.
horizontal	Horizontal.
vertical	Vertical.

Slider Display Value

Specifies wether the value is displayed.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Hides the value.
true	Shows the value.

Slider Display Pending Value

Specifies wether the pending value is displayed. The pending value is the value that is being sent to the server.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Hides the pending value.
true	Shows the pending value.

Slider Button Layout

Specifies the button layout.

The default value is: none.

Attribute Values

Value	Description
none	Default value. No buttons.
toggle	Toggle button.
both	On/off buttons.

Slider Off Value

Specifies the off value when buttons are in toggle mode. When the slider is equal or less than the Off Value, the off button is displayed.

The default value is: =@min:range.

Attribute Values

Value	Description
<string>	Value.

Specifies the menu items.

Attribute Values

Value	Description
<json>	Menu item.

Feedback

If feedback is enabled, when the action is performed, a loader is displayed until the server responds.

Also the action can't be performed again until the server responds.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Feedback is disabled.
true	Feedback is enabled.

Confirm

Requires a confirmation before performing the action.

The default value is: false.

Attribute Values

Value	Description
false	Default value. No confirmation, the action is performed right away.
doubleclick	A second click (or touch or enter key) is required to confirm the action.
popup	A popup is displayed to ask for confirmation.

Confirm Message

The confirmation message to be displayed if the "confirm" attribute is set to "popup".

Attribute Values

Value	Description	Example
<string>	The message to be displayed in the confirm popup.	`Are you sure?`

View

Visible

Sets the object's visibility.

The default value is: true.

Attribute Values

Value	Description
true	Default value. Visible.
false	Hidden.

Enabled

Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.

The default value is: true.

Attribute Values

Value	Description
true	Default value. Enabled.
false	Disabled.

Opacity

Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.

The default value is: 1.0.

Attribute Values

Value	Description
0	The object is fully transparent.
>0.0, <1.0	The object is translucent (content behind the element can be seen).
1.0	Default value. The object is fully opaque.

Attributes​

Type​

Type​

Attribute Values​

Group Type​

Attribute Values​

Button​

Label​

Attribute Values​

Description​

Attribute Values​

Icon​

Attribute Values​

Icon Color​

Attribute Values​

Secondary Icon​

Attribute Values​

Secondary Icon Color​

Attribute Values​

Image​

Image​

Attribute Values​

Fit​

Attribute Values​

Icon Color​

Width​

Height​

Header​

Text​

Size​

Size​

Attribute Values​

Action​

Action​

Attribute Values​

Link​

Attribute Values​

Link Target​

Attribute Values​

Datapoint​

Attribute Values​

Name​

Attribute Values​

Parameter​

Attribute Values​

Repeat​

Attribute Values​

Path​

Attribute Values​

Multiple​

Attribute Values​

Accept​

Attribute Values​

Preview​

Attribute Values​

Camera​

Attribute Values​

Target Camera​

Attribute Values​

Docs Target​

Attribute Values​

Doc Type​

Attribute Values​

Docs Root Path​

Attribute Values​

Docs Path​

Attribute Values​

Index​

Attribute Values​

TOC​

Attribute Values​

Breadcrumbs​

Attribute Values​

Timer​

Attribute Values​

Target Container​

Attribute Values​

Tab Group​

Attribute Values​

Slider Action​

Attributes

Type

Type

Attribute Values

Group Type

Attribute Values

Button

Label

Attribute Values

Description

Attribute Values

Icon

Attribute Values

Icon Color

Attribute Values

Secondary Icon

Attribute Values

Secondary Icon Color

Attribute Values

Image

Image

Attribute Values

Fit

Attribute Values

Icon Color

Width

Height

Header

Text

Size

Size

Attribute Values

Action

Action

Attribute Values

Link

Attribute Values

Link Target

Attribute Values

Datapoint

Attribute Values

Name

Attribute Values

Parameter

Attribute Values

Repeat

Attribute Values

Path

Attribute Values

Multiple

Attribute Values

Accept

Attribute Values

Preview

Attribute Values

Camera

Attribute Values

Target Camera

Attribute Values

Docs Target

Attribute Values

Doc Type

Attribute Values

Docs Root Path

Attribute Values

Docs Path

Attribute Values

Index

Attribute Values

TOC

Attribute Values

Breadcrumbs

Attribute Values

Timer

Attribute Values

Target Container

Attribute Values

Tab Group

Attribute Values

Slider Action