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

Or take a look to this tutorial about the project attributes:

Project Attributes

Attributes

General

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.

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.

Attribute Values

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

Locale

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

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

The default value is: =language.

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.

The default value is: 1.

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.

Min Scale

Specifies the minimum scale value.

The default value is: 0.5.

Attribute Values

Value	Description
<decimal positive number>	Minimum scale value.

Frame Margin

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

The default value is: 0.

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
<number>	Margin in pixels.

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.

The default value is: true.

Attribute Values

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

Portrait Width

Specifies the width of the portrait 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.

Portrait Height

Specifies the height of the portrait 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.

Portrait Scale

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

The default value is: =scale.

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.

Portrait Min Scale

Specifies the minimum scale value when in portrait orientation.

The default value is: 0.5.

Attribute Values

Value	Description
<decimal positive number>	Minimum scale value.

Portrait Frame Margin

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

The default value is: 0.

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
<number>	Margin in pixels.

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.

The default value is: graphite.

Attribute Values

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

Theme Mode

Defines the mode of the theme.

The default value is: default.

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.

Theme Style

Defines the style of the theme.

The default value is: flat.

Attribute Values

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

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.

The default value is: false.

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.

Animated Background

Specifies an animated background for the whole viewport.

The default value is: none.

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.

Animated Background Options

Specifies the options for the animated background.

For the full item reference, see Background Animation Options.

Attribute Values

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

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.

The default value is: cover.

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.

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

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.

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.

Options

Autoreload

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

The default value is: true.

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.

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.

The default value is: false.

Attribute Values

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

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

The default value is: true.

Attribute Values

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

Gestures

Specifies if gestures are enabled.

The default value is: true.

Attribute Values

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

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.

note

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

Attribute Values

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

Defaults

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

note

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

Attribute Values

Value	Description
<list>	List of default attribute values.

Style

note

This attribute has been deprecated since ver. 4.0

Legacy Mode

Enables legacy mode to support deprecated features of a specific 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.

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.

Page Transitions

Specifies if page transitions are 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.

Attribute Values

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

Cameras

Camera Config

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

note

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

For the full item reference, see Project Camera Config.

Attribute Values

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

Toast

Toast Position

Specifies the position of the toast messages.

The default value is: top-right.

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.

Toast Position Portrait

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

The default value is: top-center.

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.

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> }, ... ]

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
<json>	Toast message.	{ "message": "hello!" }

Screensaver

Screensaver

Enables a screensaver mode triggered by inactivity.

Minimum value is 0.

The default value is: 0.

Attribute Values

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

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.

The default value is: fit.

Attribute Values

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

Debug

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.

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
true	Debug mode enabled.
false	Debug mode disabled.
<timestamp>	Debug mode enabled until the specified timestamp.

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.

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.

Attribute Values

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