UI Components

Click any component or widget on the top bar to add it to the page, then drag and arrange them as desired.

Select a component to view its Properties on the right:

Properties > Appearance includes size, appearance, and formatting options.
In Properties > Behaviour, click the + and - symbols to add and remove functions for interactive components.

Component Types

Button

Buttons can perform a variety of functions:

Activate preset - Triggers a lighting preset scene.
Stop Fade - Pauses the current fade between presets.
Send Channel Level - Sends the selected channel level command to a single lighting channel.
Temperature Control - Increment (raise) or decrement (lower) the temperature setpoint.
Go to page - Opens the selected UI page.
Navigate to Home - Opens the Home page.
Previous Page / Next Page - Opens the previous/next page in the Pages list on the left.
Clean Screen - Locks the screen for 30 seconds to avoid accidental input while cleaning.
Task Control - Start, stop, pause, or resume a task.
One Touch - Toggles between the selected On/Off preset scenes.
- Enable Ramping - Holding the button ramps the light level towards the target preset until released.
- Enable Program - Releasing the button while ramping saves the current light level as the new On preset.
Log out - Logs the current user out and returns to the Landing page.
Open schedule - Navigates to the Schedules page.
Open settings menu - Opens the Settings page.

Each button can perform up to two press functions and/or two release functions in sequence. For example, you can pair Activate preset or Task Control with Go to page to initiate the command and immediately load a new page with specific buttons or indicators related to that preset/task.

Previous/Next Page follows the displayed order of the Pages list on the left. To adjust the navigation order, drag each page up or down the list to the required position.

This is not related to the page number, which acts as a target ID for the Go to page function and DyNet Page Flip command.

You can also use functionless buttons as a static design element to display text with a custom background and border color.

Slider

The Slider displays and controls the channel level for a specific area/channel.

To enable Tunable White or RGB control for compatible fixtures, toggle Properties > Behaviour > Slider Type.

ClickableArea

This is an invisible button that can be positioned over a custom background or Image.

You can position ClickableAreas over a floorplan background image for intuitive access to each room’s control page, or over your own button graphics to completely customize the UI to any aesthetic.

Image

Inserts a static JPEG or PNG graphic for branding, decoration, or as a custom control when placed under a ClickableArea.

Text

Inserts a configurable text element:

Static - Displays the contents of Properties > Appearance > Text label.
Area name - The name of the selected area.
Channel name - The name of the selected channel.
Active preset - The currently active preset scene in the selected area.
Channel level - The current level of the selected lighting channel.
User defined text - Displays the Active text if one of the selected presets is currently active. Otherwise, the Inactive text is shown.
Setpoint temperature - The temperature setpoint for the selected area.
Current temperature - The current actual temperature for the selected area.
Logged in user - Displays the username of the currently logged-in user, otherwise 'guest'.

Only the Properties > Appearance > Text label is shown in UI Creator, so ensure that dynamic text components are helpfully labelled.
You can view the dynamically generated text in Preview, or after uploading the UI to the PDTS.

StatusIndicator

This is a colored shape that displays its Active color if one of the selected presets is currently active. Otherwise, the Inactive color is shown.

Widgets

Temperature control - Current temperature and/or temperature setpoint with optional ramp up/down controls
Date & Time - Current date and/or time
Humidity - Current relative humidity % detected by the onboard sensor
Frame - A colored rectangle with a title bar. Right-click the frame and select Send Back to place it behind a group of buttons or other controls for easy identification.

Copying and Pasting Components

Right-click a component to Copy, Bring front/Send back (display over/under other overlapping components), or Delete it.

You can also select a component and use keyboard shortcuts - Ctrl+C/Ctrl+V to copy/paste and Del/Delete to remove it from the page.

Copied components can be pasted from one page to another.

Border Radius

The Border radius property rounds each corner of a UI component, drawing a quarter-circle with a radius of X pixels from the adjacent sides.

The maximum radius is half the shortest side of the component, resulting in a semicircle; larger values do not have any further effect.

Examples
H x W (px)	Radius (px)	Result
50 x 100	0
50 x 100	10
50 x 100	25
50 x 50	25