Project

The project object is the root of the project, that defines the main properties of the interface.

Each project has one or more pages that contain objects.

Follow this tutorial for more detailed info:

Create your first project with HSYCO

For an example of project layout and navigation, see:

Project layout and navigation recipe

Attributes

Common

Title

Specifies the title of the browser's tab that also normally appears in bookmarks.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Language

Defines the language used for all standard text messages of the Web interface.

Attribute Values

Value	Description
zh	Chinese.
da	Danish.
en	Default value. English.
es	Spanish.
fr	French.
de	German.
it	Italian.
pl	Polish.
sl	Slovenian.

The default value is: en.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Locale

Specifies the locale to be used, or a list of locales.

If a list is provided, the runtime picks the best one available.

By default, this attribute uses the language attribute.

Home Page

Specifies the ID of the page (without the "page:" prefix) that's displayed when the project is opened the first time or always, if history is disabled.

The default value is: home.

Size

Width

Specifies the width of the page area in pixels.

Minimum value is 50.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Height

Specifies the height of the page area in pixels.

Minimum value is 50.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Scale

Sets a scaling value to resize the UI frame.

Attribute Values

Value	Description
1	Default value. 1:1 scale - the UI frame retains its original size.
fit	The UI frame is scaled to fill the available browser area, both vertically and horizontally.
<decimal positive number>	Scale factor - the UI frame size is adjusted by a specified factor. Numbers greater than 1.0 enlarge the frame, while numbers smaller than 1.0 shrink it.

The default value is: 1.

Min Scale

Specifies the minimum scale value.

Attribute Values

Value	Description
<decimal positive number>	Minimum scale value.

This attribute is available when scale is one of "fit", "fit-width", or "fit-height".

When scale is one of "fit", "fit-width", or "fit-height", this attribute defaults to 0.5.

Frame Margin

Specifies the distance in pixels between the UI frame from the browser's edges when scaled to fit the browser area.

Attribute Values

Value	Description
<number>	Margin in pixels.

This attribute is available when scale is "fit".

When scale is "fit", this attribute defaults to 0.

note

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

Portrait Size

Orientation Mode

Specifies how the project's UI responds to device rotation.

When set to "true," the UI will adjust to a portrait page when the device is held upright in portrait orientation.

Conversely, if set to "false," the UI will show landscape pages regardless of the device's orientation.

Attribute Values

Value	Description
true	Default value. Orientation mode enabled.
false	Orientation mode disabled.

The default value is: true.

Portrait Width

Specifies the width of the portrait page area in pixels.

Minimum value is 50.

This attribute is available when orientationmode is "true".

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Portrait Height

Specifies the height of the portrait page area in pixels.

Minimum value is 50.

This attribute is available when orientationmode is "true".

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Portrait Scale

Sets a scaling value to resize the UI frame when in portrait orientation.

Attribute Values

Value	Description
1	1:1 scale - the UI frame retains its original size.
fit	The UI frame is scaled to fill the available browser area, both vertically and horizontally.
<decimal positive number>	Scale factor - the UI frame size is adjusted by a specified factor. Numbers greater than 1.0 enlarge the frame, while numbers smaller than 1.0 shrink it.

This attribute is available when orientationmode is "true".

When orientationmode is "true", this attribute defaults to the scale attribute.

Portrait Min Scale

Specifies the minimum scale value when in portrait orientation.

Attribute Values

Value	Description
<decimal positive number>	Minimum scale value.

This attribute is available when orientationmode is "true" and portraitscale is one of "fit", "fit-width", or "fit-height".

When orientationmode is "true" and portraitscale is one of "fit", "fit-width", or "fit-height", this attribute defaults to 0.5.

Portrait Frame Margin

Specifies the distance in pixels between the UI frame from the browser's edges when scaled to fit the browser area.

Attribute Values

Value	Description
<number>	Margin in pixels.

This attribute is available when orientationmode is "true" and portraitscale is "fit".

When orientationmode is "true" and portraitscale is "fit", this attribute defaults to 0.

note

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

Appearance

Skin

Defines the graphical appearance of the project.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Theme

Defines the theme, which changes the appearance of the UI.

Attribute Values

Value	Description
graphite	Default value. Graphite.
baltic	Baltic.
bright	Bright.
bootsyco	Bootsyco.

This attribute is available when skin is "default".

The default value is: graphite.

Theme Mode

Defines the mode of the theme.

Attribute Values

Value	Description
default	Default value. Defaults to light or dark, depending on the theme.
light	Light mode.
dark	Dark mode.
auto	Auto mode, based on the time of the day.
system	System mode, based on the system settings.

This attribute is available when skin is "default".

The default value is: default.

Theme Style

Defines the style of the theme.

Attribute Values

Value	Description
flat	Default value. Flat style.
raised	Raised style.
outlined	Outlined style.

This attribute is available when skin is "default".

The default value is: flat.

Icon Set

Defines the default icon set that applies to all icons.

The default value is: mdi.

Kiosk

The kiosk mode removes the header and footer. It can be used for digital signage or kiosks applications to have a full-screen display of the pages. "lock" also disables the navigation functions.

Attribute Values

Value	Description
false	Default value. Header and footer can be displayed.
nolock	Header and footer are hidden.
lock	Header and footer are hidden, navigation is disabled.

The default value is: false.

Animated Background

Specifies an animated background for the whole viewport.

Attribute Values

Value	Description
none	Default value. No animation.
birds	Birds animation.
waves	Wave animation.
net	Net animation.
dots	Dots animation.
rings	Rings animation.
halo	Halo animation.

The default value is: none.

Animated Background Options

Specifies the options for the animated background.

Attribute Values

Value	Description	Example
<JSON object>	Animation options object.	{"color":"#38bdf8","waveheight":10,"wavespeed":0.7}

This attribute is available when animatedbackground is not "none".

Custom Styling

Background Image

Specifies a background image for the whole viewport.

Attribute Values

Value	Description
<image path>	Path to the image file. Files are searched inside the project's directory first, then inside the www/img directory.

Background Fit

Specifies how the image should be resized to fit its container.

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	The image keeps its aspect ratio, but is resized to fit within the given dimension.
cover	Default value. The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
none	The image is not resized.

This attribute is available when backgroundimage is neither "" nor "icon:%".

When backgroundimage is neither "" nor "icon:%", this attribute defaults to cover.

Background Color

Specifies a background color for the whole viewport.

Header Background Color

Specifies a background color for the header.

Footer Background Color

Specifies a background color for the footer.

Page Background Color

Specifies a background color that covers the area behind pages.

Popup Background Color

Specifies a background color that covers the area behind popups.

Typography

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).

Attribute Values

Value	Description	Example
<integer>	Font size in pixels.
<percentage>%	Relative font size in percentage.	90%

The default value is: 14.

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.

Attribute Values

Value	Description
normal	Default value. Normal.
bold	Bold.
bolder	Bolder.
lighter	Lighter.

The default value is: normal.

Italic

Show the text in italics.

Attribute Values

Value	Description
false	Default value. Normal.
true	Italics.

The default value is: false.

Small Caps

Sets the font to small caps.

Attribute Values

Value	Description
false	Default value. Normal.
true	Small caps.

The default value is: false.

Decoration

Specifies the text decoration.

Attribute Values

Value	Description
none	Default value. No decoration.
underline	Underline.
overline	Overline.
line-through	Line through.

The default value is: none.

Line Height

Sets the line height of the text.

Attribute Values

Value	Description
<float>	Specify the line height as a multiple of the font size.

The default value is: 1.0.

Options

Autoreload

Specifies if the browser automatically reloads the page when the project changes.

Attribute Values

Value	Description
true	Default value. The page is automatically reloaded when the project changes.
false	The browser won't automatically reload the page when the project changes.

The default value is: true.

Locked

Disables any user command for this project. Users will be able to navigate between pages and see the current status, but all commands will be locked.

Attribute Values

Value	Description
false	Default value. Lock disabled.
true	Lock enabled.

The default value is: false.

History

Specifies if history features are enabled.

If enabled, the navigation history will be stored locally (in the localStorage of the browser), back/forward links in the header toolbar will be enabled and navigation will be resumed when the browser/tab is reopened or refreshed.

If not enabled, back/forward navigation will still be available from custom buttons, but the navigation history won't be stored locally and navigation won't be resumed when the browser/tab is reopened or refreshed.

To completely exclude a page from the history, set the "History" attribute of the page to "false".

Attribute Values

Value	Description
true	Default value. History enabled.
false	History disabled.

The default value is: true.

Gestures

Specifies if gestures are enabled.

Attribute Values

Value	Description
true	Gestures enabled.
false	Default value. Gestures disabled.

The default value is: false.

Audio Channel

Audio channel to use with Audio and Public Announcement. If set, audio from a different channel won't be played. The default value is the name of the project.

Attribute Values

Value	Description
<string>	The name of an audio channel.

Scope

Specifies a scope.

If set, uiSets with the same scope will be enabled.

The scope is defined by the project's scope, plus the scope of the current page.

Attribute Values

Value	Description
<string>	The name of a scope.
<list>	A comma-separated list of scopes.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Defaults

Specifies a list of default attributes shared among objects of the same type.

Attribute Values

Value	Description
<list>	List of default attribute values.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Style

note

This attribute has been deprecated since ver. 4.0

Legacy Mode

Enables legacy mode to support deprecated features of a specific version.

Attribute Values

Value	Description
false	Default value. Legacy mode disabled.
3.x	Legacy mode enabled for version 3.x. Templates have a different format: %1 instead of %1;. Buttons support the value attribute, as an alias of label. Object IDs can contain uppercase letters and other characters that are not allowed in the current version.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Page Transitions

Specifies if page transitions are enabled.

Attribute Values

Value	Description
false	Default value. Page transitions disabled.
true	Page transitions enabled.

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.

Cameras

Camera Config

Specifies the camera configuration for the whole project, including labels and overlays.

Attribute Values

Value	Description	Example
<JSON array>	Array of camera configuration objects.	[{"name":"cam_front","label":"Front Door","cycle":false}]

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Locations

Location Config

Specifies the location configuration for the whole project, including labels and map providers.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Toast

Toast Position

Specifies the position of the toast messages.

Attribute Values

Value	Description
top-left	Top left.
top-center	Top center.
top-right	Default value. Top right.
bottom-left	Bottom left.
bottom-center	Bottom center.
bottom-right	Bottom right.

The default value is: top-right.

Toast Position Portrait

Specifies the position of the toast messages when in portrait orientation.

Attribute Values

Value	Description
top-left	Top left.
top-center	Default value. Top center.
top-right	Top right.
bottom-left	Bottom left.
bottom-center	Bottom center.
bottom-right	Bottom right.

This attribute is available when orientationmode is "true".

When orientationmode is "true", this attribute defaults to top-center.

Toast

Displays a toast message. Value is a JSON object with the following properties:

• message: the message to display
• type: the type of the message (optional) - can be "info", "warning", "error", "success"
• duration: the duration of the message in milliseconds (optional) - default is 4000. 0 means no timeout, needs to be dismissed by the user
• close: if true, removes a toast with the same message before displaying the new one (optional) - default is false
• duplicate: if true, allows multiple toasts with the same message (optional) - default is false

{ "message": "<message>", "type": "<type>", "duration": <duration>, "duplicate": true }

{ "message": "<message>", "close": true }

Value can also be a JSON array of toast messages, to display multiple toasts at the same time.

[ { "message": "<message1>", "type": "<type1>", "duration": <duration1> }, { "message": "<message2>", "type": "<type2>", "duration": <duration2> }, ... ]

Attribute Values

Value	Description	Example
<json>	Toast message.	{ "message": "hello!" }

note

This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.

Screensaver

Screensaver

Enables a screensaver mode triggered by inactivity.

Minimum value is 0.

Attribute Values

Value	Description
0	Default value. Disables screensaver mode.
[seconds]	Enters screensaver mode after the specified seconds of inactivity.

The default value is: 0.

Screensaver Image

Specifies a screensaver image.

Attribute Values

Value	Description
[full url (http://...)]	Set the image source.
[path relative to the project's img/ path]	.
[empty string]	No screensaver image.

Screensaver Image Size

Specifies the resize mode of the screensaver image.

Attribute Values

Value	Description
fit	Default value. The image is fully contained in the interface.
crop	The image covers the interface.

The default value is: fit.

Live Controls

Page

Navigates dynamically.

This live update works only after the project is already open in the browser. The first persisted value restored when the project opens is ignored.

Set the value to the page ID, without the page: prefix, to display that page.

Set the value to logout to log out the current user.

Set the value to an empty string to clear the current live page value. If that page or popup is still the current one, the interface navigates back.

Use back, forward, close, and close-all for explicit navigation commands.

Attribute Values

Value	Description
<Page ID>	The page ID.
back	Navigate backward in browsing history.
forward	Navigate forward in browsing history.
close	Closes the last opened popup.
close-all	Closes all open popups.
logout	Logs out the current user.
[empty string]	Clears the current live page value; if that page or popup is still current, navigates back.

note

This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.

Url

Opens a URL dynamically.

This live update works only after the project is already open in the browser. The first persisted value restored when the project opens is ignored.

Set the value to a full URL to open it.

Prefix the URL with ! to open it in a new tab.

To specify the URL of another project, you can use a relative path such as ../projectid.

Attribute Values

Value	Description	Example
<URL>	Full URL.
<relative project path>	Relative path to another project.	../office

note

This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.

Lock

Locks the interface on a page dynamically.

Set the value to the page ID, without the page: prefix, to navigate to that page and prevent normal page navigation away from it.

Set the value to an empty string to remove the lock and navigate back.

Attribute Values

Value	Description
<string>	Page ID or an empty string.

note

This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.

Page Back

Navigates back dynamically.

If a popup is currently visible, it closes the popup instead of navigating back.

If a non-empty value is specified, the action is performed only when it matches the current Page attribute value.

Attribute Values

Value	Description
<string>	Current page ID or an empty string.

note

This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.

Go Home

Sets the inactivity timeout before returning to the Home Page.

Set the value to the number of seconds of inactivity after which the interface navigates automatically to the Home Page.

Set the value to false or an empty string to disable the timeout.

Attribute Values

Value	Description
<string>	Number of seconds, false, or an empty string.

note

This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.

Blink

Controls blinking animations globally.

Set the value to false to stop all blinking animations currently active in the interface.

Attribute Values

Value	Description
false	Stop all blinking animations.

note

This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.

Debug

Sets the debug mode for the project.

In debug a mode, a debug popup will be displayed.

Value can be either true/false or a timestamp of the time until the debug mode is active.

This attribute is automatically set from the Project Editor options.

Otherwise it works only if it's received from the server, not if set locally on the client.

Attribute Values

Value	Description
true	Debug mode enabled.
false	Debug mode disabled.
<timestamp>	Debug mode enabled until the specified timestamp.

note

This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.