Rozdział 7.2. – Visualization

The Visualization tab contains an editor for creating the visualization displayed in DOMIQ control apps.
Visualization mode is a hallmark feature of the DOMIQ system. We were the first to implement this type of interface in a mobile app for building automation control.
Each visualization consists of a background – usually a graphic showing a floor plan – and controls, which can operate devices and display their current status. A visualization can consist of multiple screens, making it possible to create even very complex user interfaces. This is a very convenient way of controlling your home, since the user has access to all the most frequently used system functions on a single screen. Creating a visualization is very simple and requires no programming knowledge. You can control your home using the visualization in two ways:

• Using the DOMIQ/Remote app – after rotating the device to a horizontal position.
• From any computer via a web browser. To do this, enter the IP address or friendly name (mDNS) for the DOMIQ/Base 2.0 module in the browser’s address bar. Then log in using the Visualization button. With this method, the current state of the controls will only be visible when the computer is connected to the same local network as the Base module.
  For remote connections, use a VPN tunnel. As a last resort, you can forward TCP port 4225. However, this is a solution we strongly discourage, since it allows unauthorized persons to take control of the installation – port 4225 has no encryption, yet it allows control of every device in the installation.

Important information about saving the configuration
#

The browser configurator remembers the changes you make, but it does NOT automatically save them to the Base module. All modifications are stored temporarily only in your browser’s local memory and have no effect on the system’s operation until they are manually confirmed.

Please familiarize yourself with the key configuration management rules:

• Local browser memory: All changes made in the tabs (such as Settings, Expanders, Remote, or Visualization) are temporarily remembered by the browser, but they have no effect on the system’s current operation until they are confirmed.
• Manual save required: For the changes and associations you’ve made to become active and be permanently stored in the DOMIQ/Base module’s non-volatile memory, you must use the Save button found in the tab you’re editing, every time.
• Restore option: Most tabs have a Restore button. Clicking it discards all unsaved changes and reloads the last stable configuration directly from the module.
• Safety recommendation: Since there is no autosave feature to protect against a browser crash or a sudden loss of network connection, it’s always recommended to create a backup file in the Settings tab before making major configuration changes.
  

1. Button Bar #

At the top of the window, there is a bar with buttons.

1. + Screen – Click to add a new screen to the visualization structure.
2. + Layer – Click to add a new layer to the screen.
3. Copy – Copies the currently selected visualization element (can be a control or a structure element) to the clipboard.
4. Paste – Pastes the copied visualization element.
5. Delete – Click to remove the selected visualization elements.
6. Import – Allows importing an .xml configuration file.
7. Export – Allows saving the current interface structure to an .xml file.
8. Export Selected – Allows saving only those elements to a file that have their checkbox selected. A common scenario is duplicating a given functionality in subsequent installations. In this way, you can export only a part of the interface and use it in another location.
   
9. Save – Saves the current configuration in the memory of the Base module.
10. Restore – Loads the last saved configuration into the structure tree.

2. Attributes Table #

In the lower-left part of the window, there is the Attributes Table, which contains information about the selected visualization element along with its editing options.

3. Structure #

The Structure window displays the visualization structure tree. The tree has a hierarchical structure, just like in the Remote tab.

1. New elements are added in two ways:
   • Using the buttons – only Screen and Layer.
   • Using the drag-and-drop method – all controls. You can read about how to add controls later in this chapter.
2. To change the position of an element in the structure, drag the selected element and drop it in the new location.
3. If an element cannot be added in the selected place, you will see a red indicator. For correct operations, the indicator is green.
4. Several rules regarding the hierarchy of elements apply in the structure tree:
   • Only Screen type elements can be added at the main level.
   • A screen with the ID assigned as main will be displayed as the default in the control application.
   • If no screen has the identifier main, the first screen in the list will be displayed by default.
   • Directly inside Screens, all available visualization elements can be placed, except for other Screen-type elements.
   • Inside Layers, all available controls can be placed, except for another Layer or Screens.
5. To change the properties of a selected element, click on it – its attributes will be displayed in the Attributes Table.
6. To delete element(s), select them by clicking the checkbox on the right side of the label, and then click the Delete button or the Backspace key on the keyboard. If the interface element being deleted has nested elements, they will also be deleted.
7. To copy an element, click on it (a blue rectangle marker will appear to the right of the label), then click the Copy button or use the keyboard shortcut Ctrl+C. The element is now copied and stored on the clipboard.
8. To paste the copied element, use the Paste button or the Ctrl + V keyboard shortcut. The copied control will be placed in the following location:
   • Below the currently selected control;
   • At the end of the list if a Screen or Layer element is selected;
9. The search field lets you quickly find elements in the structure. You can search by label and by control type. Typing “light” in the search bar, for example, will display all controls of that type found throughout the entire configuration.
   
10. The Select All checkbox allows for quick selection of all elements in the structure. This is particularly useful when you want to quickly delete the entire structure.

3.1. Screen #

A Screen is the basic building block of the visualization structure, corresponding to a single view displayed in the app. To add a new screen, click +Screen. A new screen is always added at the end of the tree.

IMPORTANT! Every screen must have a unique identifier within the visualization structure. Once added, a screen is assigned a random identifier, which we recommend changing to something more readable for the user.

CONTROL EDITING

1. Identifier – The screen’s unique identifier. The identifier is used, among other things, for navigating between screens.
2. Background Image – Here you can select a graphic stored in the memory of the Base module to be displayed as the screen background. Images with a maximum size of 250kB are supported. Recommended resolution is 800×600 px.
3. URL – A URL to a graphic hosted on external servers. This is especially useful if you want to use graphics with larger resolutions and file sizes.
4. Locked – Locking a screen disables the ability to move visualization elements within the Visualization Editor window. Their parameters can still be edited. Locking can also be toggled by clicking the padlock icon to the right of the screen’s identifier. Locking a screen does not lock the layers added to it.
5. Grid – The grid parameter creates an invisible grid against which visualization elements are aligned. Entering the number 5 in the grid field means that the minimum displacement of an element on the visualization screen is 5 pixels.
6. Color – Allows choosing a background color for the screen if a graphic background is not used.

Changing the Displayed Screen

The currently displayed screen can be changed in two ways:

1. Using the navigation functions of the Button controls, as described later in this chapter.
2. Using commands. Commands are only supported in the DOMIQ/Remote app. This is especially useful when a tablet is mounted on a wall as a control panel. The visualization screen can be dynamically changed based on an event that occurred in the system. For example, displaying a screen with a camera preview in response to pressing a button on the intercom. Another scenario could be displaying an alarm system management screen when an alarm event occurs. The DISPLAY.screen command used to change screens is described in Chapter 12, Identifiers.

3.2. Layer #

A layer can only be used as a sub-element of a page. Layers allow for convenient grouping of elements of the same type, e.g., light switches, temperature indications, etc. Layers are particularly useful where many controls are displayed simultaneously on the visualization, as they have a visibility toggling function. Thanks to this, you can periodically turn off the display of some elements to improve the readability of the visualization. To add a new layer, select a screen and then click the + Layer button. Just like with the Screen element, a Layer must also have its unique identifier. Each added layer is assigned a random identifier, which we recommend changing to a more user-friendly one.

CONTROL EDITING

1. Identifier (ID) – Unique identifier of the layer. The identifier is used to control the visibility of the layer.
2. Visible – An option allowing control of the layer’s visibility from the Attributes Table. Visibility can be turned on/off by clicking the “eye” icon located on the right side of the screen identifier.
3. Locked – Locking a layer disables the ability to move visualization elements within the Visualization Editor window. Their parameters can still be edited. Locking can also be toggled by clicking the padlock icon to the right of the screen’s identifier.
   

The order of layers in the structure can be freely changed, just as with screens. However, the order affects how layers are displayed in the visualization, according to the following rule: the lower a layer is in the structure, the more it is displayed on top in the app.

Toggling Layer Visibility

The visibility of a layer can be changed in two ways:

1. Using the navigation functions of the Button controls, as described later in this chapter.
2. Using commands. Commands are only supported in the DOMIQ/Remote app. The DISPLAY.layer command used to toggle layer visibility is described in Chapter 12, Identifiers.

4. Visualization Editor #

The Visualization Editor is the graphical part of the Visualization tab, where the appearance of the visualization is created by adding controls, setting their attributes, and arranging them.

Example visualization

HOW TO PREPARE FILES?

For information on how to prepare files in Resources, which you’ll use in individual elements, see Chapter 6 – Resources.

ADDING/REMOVING CONTROLS

At the top of the editor, there is a bar containing the available controls. New elements are added using the “drag and drop” method. Any added element will automatically appear in the Structure tree as well.
To copy an element, select it and click Copy or use the Ctrl + C keyboard shortcut.
To paste a copied element, click the Paste button or use the Ctrl + V keyboard shortcut.
To delete an element, select it and click Delete or press the Backspace key on the keyboard.
The above three rules can also be applied when multiple controls are selected simultaneously.

ARRANGING CONTROLS

You can use one of the available methods to change a control’s position. Select the control by clicking on it, then:

1. Hold down the left mouse button and drag the control to a new position.
2. Use the arrow keys on the keyboard. Each key press changes the position by 1 pixel in the given direction. Doing the same while holding down the Shift key changes the position by 10 pixels.
3. Change the x and y attributes in the Attributes Table. The point with coordinates (0,0) corresponds to the upper-left corner of the visualization window.

The methods above (except for editing the x and y attributes) can also be applied to simultaneously change the position of multiple controls. To select several controls, click on them while holding down Ctrl (or Command on Mac).

Additionally, above the visualization window there are buttons that make it easier to arrange multiple controls:

• Align Left – Aligns all selected controls in a line, aligning them to the left. The controls will be aligned to the leftmost control among those selected.
• Align Right – Aligns all selected controls in a line, aligning them to the right. The controls will be aligned to the rightmost control among those selected.
  
• Align Top – Aligns all selected controls in a line, aligning them to the top. The controls will be aligned to the highest control among those selected.
  
• Align Bottom – Aligns all selected controls in a line, aligning them to the bottom. The controls will be aligned to the lowest control among those selected.
• Distribute Vertical Spacing – Sets even vertical spacing between the selected controls.
• Distribute Horizontal Spacing – Sets even horizontal spacing between the selected controls.

To deselect the chosen controls, click on the visualization background.

The Edit mode checkbox toggles between visualization editing mode and testing mode. In testing mode, changing the configuration is not possible; instead, the visualization window simulates how the visualization behaves — clicking controls executes the commands assigned to them.

4.1. Light #

This is the most versatile control. It can be used to control lighting, roller shutters, alarm zones, and to visualize the state of any identifier, e.g., the status of alarm sensors, motion detectors, etc.

CONTROL EDITING

1. x and y – Coordinates of the control. The x and y values can be changed by entering them via the keyboard or simply by dragging the element in the visualization window while holding down the left mouse button.
2. Width and Height (read-only) – The control’s dimensions in pixels.
3. Layer (read-only) – The layer the control is placed on.
4. Channel – The identifier this element will control and whose state will be displayed in the visualization. If both the On and Off fields are filled in at the same time, the identifier entered here will be used only to display the current state.
   • LCN.relay.0.121.1
     Controls relay No. 1 in the LCN module with address 121 and displays its current status.
   • LCN.output.0.113.1
Controls dimmable output No. 1 in the LCN module with address 113 and displays its current status.
5. Theme – A set of icons used for the graphical representation of the control.
6. Control Method – Determines the operating mode of the control.
   • None: The control will only display the status of the identifier, but control operations will be impossible.
   • Dimmer: This option can only be used with dimmable outputs. It allows for smooth adjustment of light brightness – to do this, touch and hold the control. Another long press starts a smooth brightness change, but in the opposite direction. When you release it, the brightness adjustment stops. A short press sends an on/off command.
   • On/Off: A traditional two-state switch. Each tap alternately sends on/off commands.
7. Parameter – A field for entering additional parameters that will be sent along with the command.
   • ramp:3 – The parameter ramp with the value 3 will be appended to the command.
   • pin:12345 – The parameter pin with the value 12345 will be appended to the command.
8. On – The command that will be sent when the light element is pressed while it is currently off.
   • If you enter LCN.output.0.10.1=80 in the On field, pressing the control will drive dimmable output No. 1 to a value of 80% in the LCN module with address 10.
   • If the On field is left empty, pressing the control sends the command on to the identifier entered in the Channel field.
9. Off – The command that will be executed when the Light element is pressed while it is currently turned on.
   • If you enter LCN.output.0.10.1=0 in the Off field, pressing the control will drive dimmable output No. 1 to a value of 0% in the LCN module with address 10.
   • If the Off field is left empty, pressing the control sends the command off to the identifier entered in the Channel field.
10. Code – An option that lets you add a code that will protect the execution of commands assigned to this control. When the configuration is saved, the value entered here will be stored in encrypted form, and will also be displayed in encrypted form afterward in the Code field.
    

NOTE! When the On and Off properties are used, the Parameter field is ignored. To pass additional attributes with the command, they must be included directly in the command itself. The general syntax is: < >

• On: LCN.output.0.10.1=100;ramp:5 — Turns output No. 1 in the LCN module at address 10 on to 100%, with a ramp of 5.
• Off: LCN.output.0.10.1=0;ramp:5 — Turns output No. 1 in the LCN module at address 10 off, with a ramp of 5.

EXAMPLES

1. Controlling an LCN dimmable output with a ramp of 3
   
   Channel: LCN.output.0.10.1
   Control mode: Dimmer
   Parameter: ramp:3
2. Arming/disarming Satel alarm zone No. 1.
   Channel: IDS.armed.1
   Control Method: Switch
   Parameter: pin:12345
   The pin code should be replaced with the actual PIN for the alarm zone.
3. Controlling a blind using LCN relays.
   This requires two Light-type controls: one for upward movement and one for downward movement. Let’s assume we’re controlling blind No. 1 in the module at address 10.
   Light No. 1 – down/stop movement:
   Channel: LCN.relay.0.10.1 – the first relay of the pair is responsible for powering the shutter.
   Control Method: Switch
   Theme: The theme must consist of two icons: one displaying an arrow with the direction of movement, and the second containing half of the word “STOP”, which will be displayed when the shutter is in motion.
   On: LCN.relays.0.10=11——
   Off: LCN.relays.0.10=0——-
   Light No. 2 – move up/stop
   Theme: A theme representing up/stop movement.
   On: LCN.relays.0.10=10——
   Other parameters are identical to those for the first control.

4.2. Button #

A Button is a stateless control — meaning it does not display an identifier’s current state. Each press of the button always executes the same assigned command.
In addition, a button can perform a navigation function within the visualization structure: calling up another screen or toggling a layer’s visibility.

CONTROL EDITING

1. x and y – Coordinates of the control. The x and y values can be changed by entering them via the keyboard or simply by dragging the element in the visualization window while holding down the left mouse button.
2. Width and Height (read-only) – The control’s dimensions in pixels.
3. Layer (read-only) – The layer the control is placed on.
4. Label – The value entered here will be displayed as the button text.
5. Screen – Contains a list of available screens. If a screen is selected from the list, pressing the button will switch the view to the selected screen.
6. Layer – Contains a list of available layers. If a layer is selected from the list, pressing the button controls the visibility of the selected layer.
   
7. Command – The command to be executed every time the button is pressed. The command will also be executed if a navigation function (screen change or layer visibility toggling) has been assigned to the button.
8. Theme – A set of icons used for the graphical representation of the button.
9. Color – The color of the button label.
10. Size – The font size of the button label.
11. Code – An option that lets you enter a code that will protect the execution of commands assigned to this control. When the configuration is saved, the value entered here will be stored in encrypted form, and will also be displayed in encrypted form in the Code field.
    The code can protect both navigation functions (protecting against unauthorized access to selected visualization screens/layers) and against the execution of commands entered in the Command field.

4.3. Switch #

This is a two-state button. It can be used to control any identifier on an on/off basis, e.g., to turn lighting, ventilation, etc., on and off. The current state of the controlled device is displayed on the button.

CONTROL EDITING

1. x and y – Coordinates of the control. The x and y values can be changed by entering them via the keyboard or simply by dragging the element in the visualization window while holding down the left mouse button.
2. Width and Height (read-only) – Dimensions of the control in pixels.
3. Layer (read-only) – The layer the control is placed on.
4. Channel – The identifier this element will control and whose state will be displayed on the visualization screen. If both the On and Off fields are filled in at the same time, the identifier entered here will be used only to display the current state.
   • LCN.relay.0.121.1
     LCN.relay.0.121.1 — controls relay No. 1 in the device at address 121 and displays its current state.
   • LCN.output.0.113.1
LCN.output.0.113.1 — controls dimmable output No. 1 in the device at address 113 and displays its current state.
5. Parameter – A field for entering additional parameters that will be sent along with the command.
6. On and Off – see the description of these parameters under the Light control.
7. Theme – The graphical representation of the switch.
8. Color – The color of the button label.
9. Size – The font size of the button’s label.
10. Code – see the description of this parameter under the Light control.

4.4. Dimmer #

A control for operating dimmable outputs. A short press sends an on/off command. A long press (over one second) starts a smooth brightness change. When you release the button, the brightness change stops. Pressing and holding again starts a smooth brightness change, but in the opposite direction.
The button displays the dimmable output’s current value as a percentage. The Dimmer has an identical set of properties to the Switch button.

4.5. Value #

CONTROL EDITING

1. x and y – Coordinates of the control. The x and y values can be changed by entering them via the keyboard or simply by dragging the element in the visualization window while holding down the left mouse button.
2. Width and Height (read-only) – The control’s dimensions in pixels.
3. Layer (read-only) – The layer the control is placed on.
4. Channel – The identifier this element will control and whose state will be displayed on the visualization screen.
5. Prefix – Text that will be displayed before the value.
6. Suffix – Text that will be displayed after the value, e.g. a unit of measurement.
7. Multiplier – A value by which the identifier’s current value will be multiplied.
8. Offset – The value entered here will be added to the identifier’s current value.
9. Color – Font color.
10. Format – An option used to format the displayed value.

Formatting example:

Let’s assume the identifier’s current value is 25.43.

In summary: a 0 in the formatting means the digit at that position in the number will always be displayed. If there is no value, it will be filled in with a zero.

The # character means the digit at that position will only be displayed if its value is non-zero. The # character can only be placed after the decimal point.
If the Format field is left empty, the temperature value will be displayed without formatting.

1. Size – Font size.
2. Minimum – The minimum value that can be set.
3. Maximum – The maximum value that can be set.

If the Minimum and Maximum fields are filled in, the control can also be used for entering values — clicking on the control will bring up a numeric keypad. The Minimum and Maximum values then define the range of allowed values. This lets the Value control be used for both setting and displaying temperature, changing VAR/MEM variable values, etc.

4.6. Temperature #

An element dedicated to displaying and controlling temperature in the LCN system. This control has the same set of parameters as the Value element.

4.7. Tekst #

The Text element lets you display any text content.

CONTROL EDITING

1. x and y – Coordinates of the control. The x and y values can be changed by entering them via the keyboard or simply by dragging the element in the visualization window while holding down the left mouse button.
2. Width and Height (read-only) – The control’s dimensions in pixels.
3. Layer (read-only) – The layer the control is placed on.
4. Text – The value entered here will be displayed in the visualization.
5. Channel – The name of the identifier whose state you want to display. If this field is filled in, the contents of the Text field are ignored.
6. Color – Text color.
7. Size – Font size.

4.8. RGBW #

This control is designed for controlling RGBW lighting. By default, it displays the current light color along with a label showing the current brightness. Clicking on the control brings up a view for setting the color, brightness, and saturation — this is the same view described for the RGBW Light control in the Remote tab.

CONTROL EDITING

1. x and y – Coordinates of the control. The x and y values can be changed by entering them via the keyboard or simply by dragging the element in the visualization window while holding down the left mouse button.
2. Width and Height (read-only) – The control’s dimensions in pixels.
3. Layer (read-only) – The layer the control is placed on.
4. Red – The identifier responsible for controlling the red component.
5. Green – The identifier responsible for controlling the green component.
6. Blue – The identifier responsible for controlling the blue component.
7. White – The identifier responsible for controlling the white component.
8. Label – The control’s label, displayed in the structure tree.
9. Color – The color used to display the current lighting brightness.

4.9. Camera #

The Camera element is used to display a video feed from cameras.

CONTROL EDITING

1. x and y – Coordinates of the control. The x and y values can be changed by entering them via the keyboard or simply by dragging the element in the visualization window while holding down the left mouse button.
2. Layer (read-only) – The layer the control is placed on.
3. Width and Height – The element’s size in pixels.
4. URL – The address of the MJPEG video stream. This field should include the login and password for accessing the camera (if required).

Example URL:
http://username:password@192.168.10.20/video.mjpeg

4.10. Image #

The Image element is used to add graphics to the visualization screen.
NOTE! This is not the way to add a visualization background!

CONTROL EDITING

1. x and y – Coordinates of the control. The x and y values can be changed by entering them via the keyboard or simply by dragging the element in the visualization window while holding down the left mouse button.
2. Width and Height (read-only) – The control’s dimensions in pixels.
3. Layer (read-only) – The layer the control is placed on.
4. Source – A list of available graphics. The list displays the contents of the Images folder in the Resources tab.
5. URL – A URL to a graphic hosted on external servers. This attribute takes priority over Source.
   However, it’s a good idea to also specify a local graphic (the Source attribute) in case retrieving the graphic from the external server fails.