+48 800 003 098
info@domiq.pl
EUR
PLN
Contact
View Categories

DOMIQ/Remote – Visualization Interface Description

Spis treści

The Visualization tab contains an editor for creating the visualization displayed in DOMIQ control applications. The visualization mode is a hallmark of the DOMIQ system. We were the first to implement this type of interface in a mobile application for building automation control. Each visualization consists of a background – usually a graphic representing a floor plan – and controls that can operate devices and display their current status. A visualization can consist of multiple screens, making it possible to create even highly complex user interfaces. This is a very convenient control method, as the user has access to all the most frequently used system functions on a single screen. Creating a visualization is very simple and does not require any programming knowledge. Home control using the visualization can be performed in three ways:

  1. Using the DOMIQ/Remote application – after rotating the device to a horizontal position.
  2. From any computer via a web browser. To do this, enter the IP address of the module in the browser’s address field, then log in using the Visualization button. With this method, the current status of the controls will only be visible when the computer is connected to the same local network as the Base module. For remote connections, a VPN tunnel must be used. As a last resort, TCP port 4225 can be forwarded. However, this is strictly discouraged by us, as unauthorized persons can take control of the installation this way – port 4225 does not have encryption and allows control over all devices in the installation.

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 is the Attribute Table, which contains information about the selected visualization element along with editing options for that element.

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 main ID, the first screen from the list will be displayed by default.
    • All available visualization elements, except for other Screen type elements, can be located directly inside Screens.
    • All available controls, except for other Layers and Screens, can be located inside Layers.
  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 light blue rectangle indicator will appear on the right side of the label), and then click the Copy button or the Ctrl + C key combination. The element has been copied and is in 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 allows for quick searching of elements in the structure. It is possible to search based on the label and the type of control.
    By typing “light” in the search bar, all controls of this type occurring throughout the entire configuration will be displayed.
  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 element of the visualization structure, corresponding to a single view displayed in the application. To add a new screen, click + Screen. A new screen is always added at the end of the tree.
IMPORTANT! Each screen must have a unique identifier in the visualization structure. After being added, the screen is assigned a random identifier, which we recommend changing to a more readable one for the user.

3.1.1. Control Editing #

  1. Identifier (ID) – Unique identifier of the screen. The identifier is used, among other things, to navigate 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 – URL address to a graphic hosted on external servers. This is particularly useful when you want to use graphics with higher resolutions and larger file sizes.
  4. Locked – Setting a lock for the screen means that moving visualization elements in the Visualization Editor window is disabled. It is still possible to edit their parameters. The lock can also be enabled/disabled by clicking the padlock icon located on the right side of the screen identifier. Enabling the screen lock does not lock the layers added to the screen.
  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.

3.1.2. 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 application. This is particularly useful when a tablet is mounted on the 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 as a result of pressing a button on the intercom. Another scenario could be displaying a screen for managing the alarm system as a result of an alarm event occurring. The DISPLAY.screen command used to change the screen 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.

3.2.1. 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 – Setting a lock for the layer means that moving visualization elements in the Visualization Editor window is disabled. It is still possible to edit their parameters. The lock can also be enabled/disabled by clicking the padlock icon located on the right side of the screen identifier. Enabling the screen lock does not lock the layers added to the screen.

The order of layers in the structure can be freely changed, identically to screens. However, the order affects the display of layers on the visualization according to the rule: the lower the layer is in the structure, the more on top it is displayed in the application.

3.2.2. 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 application. 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

4.1. Adding/Removing Controls #

At the top of the editor is a bar with the available controls. New elements are added using drag and drop. An added element will automatically also appear in the Structure tree.
To copy an element, select it and click Copy or use the Ctrl + C keyboard shortcut.
Pasting an element – click the Paste button, or use the keyboard shortcut Ctrl+V.
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.

4.2. Arranging Controls #

To change the position of a control, you can use one of the available methods. Select the control by clicking on it, and then:

  1. Hold down the left mouse button and change the position of the control.
  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 above methods (except for editing the x and y attributes) can also be used to change the position of multiple controls simultaneously. To select several controls, click on them while holding down the Ctrl or Command (Mac) key on the keyboard.
Furthermore, above the visualization window, there are buttons that facilitate the arrangement of multiple controls:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Distribute Vertical Spacing – Sets even vertical spacing between the selected controls.
  6. 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.
The rest of this subsection describes all the available controls.

4.3. Light #

This is the most universal control. You can use it to control lighting, blinds, alarm zones, and to visualize the state of any identifier, e.g. the state of alarm sensors, motion sensors, etc.

4.3.1. 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 that this element will control and whose status will be displayed on the visualization. If both the On and Off fields are filled out, the identifier entered here will be used exclusively for displaying 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: Use this option only with dimmable outputs. It allows smooth brightness adjustment — to do this, touch and hold the control. Pressing and holding again starts a smooth brightness change, but in the opposite direction. When you release, the brightness change stops. A short tap sends an on/off command.
    • On/Off: A traditional two-state switch. Each press alternately sends on/off commands.
  7. Parameter – A field for entering additional parameters that will be sent along with the command.
    • ramp:3 – The ramp parameter with a value of 3 will be appended to the command.
    • pin:12345 – The pin parameter with a value of 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 in the off state.
    • 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 remains empty, pressing the control sends the oncommand to the identifier entered in the Channel cell.
  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 remains empty, pressing the control sends the off command to the identifier entered in the Channel cell.
    • On: LCN.output.0.10.1=100;ramp:5
       (Turn on output No. 1 to 100% in the LCN module with address 10 with a ramp equal to 5).
    • Off: LCN.output.0.10.1=0;ramp:5
      (Turn off output No. 1 in the LCN module with address 10 with a ramp equal to 5).
  10. Code – An option allowing the addition of a PIN/code to protect the execution of commands assigned to this control. When saving the configuration, the value entered here will be saved in an encrypted format and will subsequently be displayed in that encrypted form in the Code field.

NOTE! When using the On and Off properties, the Parameter field is ignored. To pass additional attributes to the command, they must be included within the command string. The general syntax is as follows: <identyfikator>;<atrybut_1>:<wartość_1>,<atrybut_n>:<wartość_n>

4.3.2. Example #

  1. Controlling an LCN dimmable output with a ramp of 3
    Channel: LCN.output.0.10.1
    Control Method: 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 roller shutter on LCN relays: For this purpose, two Light-type controls are required. One for upward movement and one for downward movement. We assume that we are controlling shutter No. 1 in the module with 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 – up/stop movement:
    Theme: A theme representing up/stop movement.
    On: LCN.relays.0.10=10——
    Other parameters are identical to those for the first control.

4.4. Button #

A Button is a stateless control – meaning it does not display the current status of an identifier. Each press of the button executes the exact same assigned command every time. Additionally, a button can perform a navigation function within the visualization structure: it can invoke another screen or toggle the visibility of a layer.

4.4.1. 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 allowing the introduction of a code to protect the execution of commands assigned to this control. When saving the configuration, the value entered here will be saved in an encrypted form and will also be displayed in that form in the Code field. The code can protect both navigation functions (preventing unauthorized access to selected screens/layers of the visualization) and the execution of commands entered in the Command field.

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

4.5.1. 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 on which the control is located.
  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.6. 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.7. Value #

The Value control is a universal interface element for displaying the value of any identifier.

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

FORMATRESULT
.00025.430°C
.0##25.43°C
0.##25.43°C
000.000025.430°C

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.8. 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.9 Text #

The Text element lets you display any text content.

4.9.1. 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.10. 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.

4.10.1. 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.11. Camera #

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

4.11.1 Editing the Control #

  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.12. Image #

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

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

Find out how to place the DATE and TIME on a visualization: HERE

Czy ten dokument był pomocny?

Powered by BetterDocs