3.1UI objects overview

A UI object is anything you place on a page in the Configurator: a light switch, a temperature readout, a camera view, a button that opens another page. Each object has a position and size on the page, a set of properties in the right-hand Properties panel, and (for most) a binding to a device or value on the gateway. When you deploy the project, the apps draw every object on the page and send or receive values for it.

This section has one page for every object type. Start here for the overview, then read Common properties, which covers the fields that almost every object shares.

#Adding, placing and deleting objects

Objects live on pages, and pages live under a panel (a navigation tile). You cannot put an object directly on a panel: if you try, the Configurator shows Create a Page first, then add widgets inside that Page.

To add an object:

• Click Add in the top toolbar, search or pick a tab (All objects, Controls, Values & Panels, Communication & Media, Actions, Layout) and click the object. It is dropped near the middle of the page; or
• Right-click the page and choose Add object, then pick a group and an object. It is dropped where you clicked.

New objects are named after their type (for example Switch), use the KNX protocol, and start at 56 x 56 for single-icon controls or 96 x 64 for most other objects. Adding a Page object opens a dialog to create a new page instead.

To place and arrange objects:

• Drag an object to move it, or select it and use the arrow keys (1 pixel per press, or one grid step of 16 pixels with Shift held).
• Hold Ctrl or Shift while clicking to select several objects.
• Some objects (Picture, Clock, Camera, Intercom, Graph and Energy Flow Line) show resize handles when selected. For any object you can set Width, Height or Size % in the Properties panel.
• The top toolbar's Arrange button opens the Arrange panel (see below).
• The canvas toolbar has Grid and Snap switches (the grid step is 16 pixels). Turn Snap off to place objects exactly.
• The canvas toolbar also has a Theme list. The theme is one setting for the whole project: choosing it changes every panel, and a panel you add later gets the same one: Dark (default), White and Custom. With Custom, three colour boxes appear: Canvas (the background of the pages), Task bar (the bar at the top of the app) and Font (the default text colour). The apps show them after the next deploy. An object keeps its own Text Color when you have set one; a text colour that is still the default white follows the panel's Font colour. Panels with their own look (Irrigation, Genset, Solar and similar) and objects such as Weather, Clock and Graph keep their own colours.

To copy and delete:

• Right-click an object for Cut, Copy, Duplicate, Paste, Paste w/out suffix and Remove object. Delete (toolbar or keyboard) removes the selected objects.
• Cut, Copy, Duplicate and Paste work on every selected object, not only the last one you clicked. The objects keep their positions relative to each other. A paste puts the top-left corner of the group where you right-clicked; from the toolbar or the keyboard it lands a little down and to the right of the original (32 pixels with Snap on, 24 with Snap off). It is kept inside the page, all the pasted objects end up selected, and the whole paste is one Undo step.
• A pasted or duplicated object gets a number added to its label (Switch_1) so the names stay unique. Paste w/out suffix, and pasting what you just cut, keep the label as it was.
• Keyboard shortcuts: Ctrl+C copy, Ctrl+X cut, Ctrl+V paste and Ctrl+D duplicate (Cmd instead of Ctrl on a Mac). They work while the page canvas has focus, not while you are typing in a field.
• Undo and Redo are in the toolbar.

#The Arrange panel

Select objects, then press Arrange in the top toolbar.

Center on canvas moves the selection as one group, so the spacing between the objects is kept, until the middle of the group is on the middle of the page. It changes one direction only, so use both buttons to centre fully. It can be undone.

#Clip art

The Clip Art button in the top toolbar opens the clip art library, where you add and delete your own images without selecting an object. See Common properties.

#Position and size basics

Positions and sizes are in pixels on the page canvas, measured from its top-left corner. The canvas size follows the display profile you choose for the page (Standard 4:3, Wide 16:9 or Balanced) and its orientation. The apps scale the page to fill the screen they run on, so a layout drawn at one size still fits a larger or smaller screen.

Details and the remaining transform fields (Rotation, Mirror, Image Fitting, Image Display) are on Common properties.

#How objects bind to devices and values

Most objects have a Protocol field that decides where the object reads and writes:

Controls such as Switch, Dimmer Light, Ceiling Fan, Roller Shutter and HVAC send commands to a control address and read the real state from a separate status (feedback) address, so the dashboard shows what the device actually did.

#The palette groups

#Controls

#Values & Panels

#Communication & Media

#Actions

#Layout

#See also

• Common properties
• KNX basics for installers
• Quick guide
• Deploying a project