Overview Visualization Editor



The visualization is created with the visualization editor.






To add a new page, switch to Navigation in the right-hand view, click on the "+" symbol and select New Visu Page. Above there is also a search function to find blocks more easily.  Tip: The view can be enlarged with the zoom function in the toolbar or with Ctrl + mouse wheel.

For a new page, the following formats can be selected:

  1. Full screen scaling (tablet 4:3), this corresponds to the aspect ratio of iPads.
  2. Full screen scaling (Tablet 16:9)
  3. Height scaling (Smartphone)
A distinction is made here between two scaling options:

  1. Full screen scaling: In this scaling mode, the visualization page is scaled so that it fits into the screen without deformation. This scaling is suitable, for example, for tablets that are held horizontally.
  2. Height scaling: In this scaling mode, the entire available width of the screen is used and scaled in height. The height is then scrolled. This scaling is suitable for mobile phones if they are held vertically.
Both types can be used in parallel in one visualization. If the device is held vertically, the first page with height scaling is displayed; horizontally, the first page with full screen scaling. The first page is always the one at the top of the navigation. This should therefore always be the menu page from which you switch to the other pages.

In the page properties, the height and width can be set in pixels, but this is only used to determine the aspect ratio. If the target device has a higher or lower resolution, it will always scale to the available area without deformation.

If the target device has a different aspect ratio than the page, borders remain free - a page in 1024x768 format leaves a strip open on the left and right on a phone with 2048x768. With the page property "Expand page to full screen" the page uses the entire screen area instead. The controls remain proportional and centred, exactly as the page was created - the operation therefore looks the same on every device. Because the background image then reaches the edge of the screen, the borders are no longer visible. To do so, activate "Zoom to page" on the background image and switch off "Zoom proportional".

If one of the two page images contains a floor plan in which the controls are placed, the controls have to follow it. For this there is the additional page property "Stretch controls as well", which lets you select what they are aligned to: not at all, to the page, to the background image or to the overlay image. With an image the controls follow exactly its scaling and alignment - if "Zoom proportional" is active for that image, the controls also move proportionally only and stay over the same spot of the picture. All related settings are described under General parameters.


To add a control element, select the control element  in the left "Control element" window (2) and drag it onto the new page. Above there is also a search function to find blocks more easily (1).  Tip: The view can be enlarged with the zoom function in the toolbar or with Ctrl + mouse wheel.

The visualization can only be edited when the edit mode is switched off:



When the operating mode is activated, the control elements can be operated, but no new elements can be added or deleted. The visualization then behaves as on the target device, all functions can be operated without restriction.

Tip: If you click on the control element  for 30 seconds, the toolbar on the APP is shown or hidden. This also works if you click on a free area on the page.

Click on the control element to change the view:





The properties are displayed on the left, the variables and the connections for the control element on the right. Tip: Double-clicking on a control element Block selects the connected addresses in the address window. With a click on the page, the view switches back to the selection of the control elements.


The properties window is divided into two areas:



In the upper area the properties of the page are displayed, in the lower area those of the control element. See general parameters.



There are two ways to connect a variable to the control element:

  1. Drag the variable from the variable window onto the control element; this always connects the first variable.
  2. Drag the variable from the variable window into the Connections window



To delete a connection, click on the icon on the right:




Tip: Via the Connections window it is also possible to connect several inputs/outputs at the same time. To do this, select several variables in the variable window and drag them into the Connections window; the variables are then connected one after the other.