Skip to main content
Version: 4.0

Nav Item

Nav item, placed inside a nav object.

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

Attributes​

Type​

Type​

Specifies the nav item type.

The default value is: button.

Attribute Values​
ValueDescription
buttonDefault value. A button.
groupA Group contains more items.
headerA header used to Used to categorize or separate other items.
drawer-buttonA drawer button, used to open/close the nav. It's available only for drawer mode.
dividerA divider.
spacerA spacer that takes all the space available. Space is divided equally among multiple spacers.
breadcrumbsBreadcrumbs.
imageAn image.
sectionSection: 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​
ValueDescription
popup-menuDefault value. Popup Menu: shows the group content in a popup.
scrollerScroller: encloses the group content in a scrollable area that takes as much space as available.
accordionAccordion: expands/collapses the group content when selected.

Button​

Label​

Specifies the button's label.

Attribute Values​
ValueDescription
<string>Button's label.

Description​

Specifies a description displayed below the label.

Attribute Values​
ValueDescription
<string>Button's description.

Icon​

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

Attribute Values​
ValueDescription
<icon>An icon or image.

Icon Color​

Specifies the icon's color.

Attribute Values​
ValueDescriptionExample
<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​
ValueDescription
<icon>An icon or image.

Secondary Icon Color​

Specifies the secondary icon's color.

Attribute Values​
ValueDescriptionExample
<html color>Color in any html accepted format.#ff0000

Image​

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​
ValueDescription
<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​
ValueDescription
fillThe image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.
containDefault value. The image keeps its aspect ratio, but is resized to fit within the given dimension.
coverThe image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
noneThe image is not resized.
scale-downThe 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​

Size​

Specifies the item's size.

The default value is: auto.

Attribute Values​
ValueDescription
autoDefault value. Auto.
<int>Size in pixels.

Action​

Action​

Specifies the action performed when clicked/tapped.

Attribute Values​
ValueDescription
[empty]Default value. No action.
linkChanges page, shows a popup or opens a URL.
commandSends a command to the server, with the specified name and parameter.
datapointToggles a datapoint.
downloadFires 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":"&amp;<Base64-encoded data&amp;>", "filename":"filename"} where data is a Base64-encoded string of the binary data to be downloaded.
uploadShows 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.
submitSends 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.
timerOpens a timer's details.
tabShows a specified container and hides the other of the same group.
camera-linkOpens a page with the specified camera address.
docs-linkOpens the documentation page with the specified root and path.
sliderOpens a slider popup.
logoutImmediately logs out the user.
coordinatesSends a command to the server, with the specified name and the cursor position as parameter (x,y).

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

Attribute Values​
ValueDescriptionExample
<Page ID>The page ID.
<URL>A url starting with "http://", "https://", "ftp://" or "www.".
backNavigate backward in browsing history.
forwardNavigate forward in browsing history.
closeCloses the last opened popup.
close-allCloses all open popups.
logoutOpens the logout popup.
adminclockOpens the admin clock page, where the user can set the system time.
adminpwdOpens the admin password page, where the user can change its puk or password.
adminusersOpens the admin users page, where the user can manage users and groups.
<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

Specifies where to open the linked URL. Available only for URL links.

The default value is: _self.

Attribute Values​
ValueDescription
_selfDefault value. Opens the linked URL in the same window or tab.
_blankOpens 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​
ValueDescriptionExample
[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​
ValueDescriptionExample
<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​
ValueDescription
<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​
ValueDescription
falseDefault value. Repeat mode is disabled.
trueRepeat 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​
ValueDescriptionExample
<string>Path..tmp

Multiple​

Specifies wether multiple files can be selected.

The default value is: false.

Attribute Values​
ValueDescription
falseDefault value. Single file selection.
trueMultiple file selection.

Accept​

Specifies the types of files that the server accepts.

The default value is: [any].

Attribute Values​
ValueDescriptionExample
[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​
ValueDescription
falseDefault value. No preview.
truePreview.

Camera​

Specifies a camera, to display its live video stream.

Attribute Values​
ValueDescriptionExample
<camera address>The camera address.dummy.camera.1

Target Camera​

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

Attribute Values​
ValueDescriptionExample
<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​
ValueDescriptionExample
defaultDefault 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​
ValueDescription
projectDefault value. Project documentation.
hsycoHSYCO documentation.
projectsAll projects documentation.
objectsCustom 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​
ValueDescriptionExample
<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​
ValueDescriptionExample
<string>Path.projects/home

Index​

Specifies wether the index is displayed.

The default value is: toggle.

Attribute Values​
ValueDescription
trueVisible.
falseHidden.
toggleDefault value. User can toggle visibility.
toggle-falseUser can toggle visibility, but it's hidden by default.

TOC​

Specifies wether the table of contents is displayed.

The default value is: toggle.

Attribute Values​
ValueDescription
trueVisible.
falseHidden.
toggleDefault value. User can toggle visibility.
toggle-falseUser can toggle visibility, but it's hidden by default.

Specifies wether the breadcrumbs are displayed.

The default value is: true.

Attribute Values​
ValueDescription
falseHidden.
trueDefault value. Visible.

Timer​

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

Attribute Values​
ValueDescriptionExample
<timer address>The timer address.dummy.timer.1

Target Container​

Specifies a target container, to display its content.

Attribute Values​
ValueDescriptionExample
<container ID>The container ID.dummy.container.1

Tab Group​

Specifies the tab group to which the tab belongs.

Attribute Values​
ValueDescription
<string>The tab group name.

Slider Action​

Specifies the action to perform when the slider is moved.

The default value is: none.

Attribute Values​
ValueDescription
noneDefault value. No action.
commandSends a command.
datapointSets a datapoint value.
dmxSets 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​
ValueDescription
flipDefault value. Toggles the datapoint value.
<string>The value to set.

On Value​

Specifies the value sent when toggling the datapoint on. Use flip to restore the last value when turning on. Use a number to always set a fixed value when turning on.

The default value is: flip.

Attribute Values​
ValueDescription
flipDefault value. Toggles between off (0) and the previous on value.
<number>Toggles between off (0) and this specific value.

Slider Name​

Specifies the name of the command.

The default value is: =id.

Attribute Values​
ValueDescription
<string>Command name.

Slider Value​

Specifies the value of the datapoint.

The default value is: 0.

Attribute Values​
ValueDescription
<string>Value.

Slider DMX Address​

Specifies the DMX address.

Attribute Values​
ValueDescription
<string>DMX address.

Slider Datapoint​

Specifies the datapoint.

Attribute Values​
ValueDescription
<datapoint>Datapoint.

Slider Range​

Specifies the range of the slider.

The default value is: 0,100.

Attribute Values​
ValueDescription
<min,max>Min, max values.

Slider Unit​

Unit displayed on value label, or % for percentage.

Attribute Values​
ValueDescription
<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​
ValueDescription
<number>Delay in milliseconds.

Slider Orientation​

Specifies the orientation of the slider.

The default value is: auto.

Attribute Values​
ValueDescription
autoDefault value. Auto.
horizontalHorizontal.
verticalVertical.

Slider Display Value​

Specifies wether the value is displayed.

The default value is: false.

Attribute Values​
ValueDescription
falseDefault value. Hides the value.
trueShows 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​
ValueDescription
falseDefault value. Hides the pending value.
trueShows the pending value.

Slider Button Layout​

Specifies the button layout.

The default value is: none.

Attribute Values​
ValueDescription
noneDefault value. No buttons.
toggleToggle button.
bothOn/off buttons.

Slider Off Value​

Specifies the value to be sent when the off button is pressed. It also acts as a threshold to determine the state: any value above it is considered on. If a value is specified, the On Value will default to the maximum value of the range.

The default value is: off.

Attribute Values​
ValueDescription
<string>Value.

Specifies the menu items.

For the full item reference, see Nav Item.

Attribute Values​
ValueDescription
<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​
ValueDescription
falseDefault value. Feedback is disabled.
trueFeedback is enabled.

Confirm​

Requires a confirmation before performing the action.

The default value is: false.

Attribute Values​
ValueDescription
falseDefault value. No confirmation, the action is performed right away.
doubleclickA second click (or touch or enter key) is required to confirm the action.
popupA 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​
ValueDescriptionExample
<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​
ValueDescription
trueDefault value. Visible.
falseHidden.

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​
ValueDescription
trueDefault value. Enabled.
falseDisabled.

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​
ValueDescription
0The object is fully transparent.
>0.0, <1.0The object is translucent (content behind the element can be seen).
1.0Default value. The object is fully opaque.

Common​