Controls

The Controls panel is a column of control types, such as layout controls, graphics and actions controls and signal controls. The available controls are listed in the tables below.

Table 1. Page
Page Depending on screen size, different information can be shown and have different layout. A certain screen size may have its own setting. Settings on Page are default and used when no other conditions are fulfilled.
Page variation A Page variation is added as a child to Page.

On each Page variation a Screen Type is added. Possible to enter values for Orientation and Minimum Width.

Table 2. Layout controls
Stack layout

The Stack layout control places its sub controls one after the other, either from top to bottom or from left to right.

The children will be placed in the order they appear in the UI tree, meaning the Stack layout will start by placing the first child, then second child, and so on.

Grid layout The Grid layout control places its sub controls in a rectangular grid formation.
Table 3. Graphics and action controls
Image

Displays an image.

Recommended usage is to specify dimensions and wrap_content. In this case, the image will take all available space on the axis with the specified dimension, and scale on the other one according to the internal aspect ratio. When explicit width and height is provided, the image will be scaled to fit into the box.

Label

Displays a text.

Typically used for shorter texts like names and headers for signal controls. It has the same height as signal controls, so it aligns well horizontally. Another property of labels is that it never wraps text to a second line. Labels can be aligned to either left, center, or right.

Text

Displays a text.

Typically used for longer, multi-line texts.

Hint

Displays an informative message to the user.

When the user clicks on the question mark, a pop-up is displayed with the defined message.

Button

Triggers an action when clicked.

Available actions are:
  • Write pending signals, such as write multiple signal values at once. Only relevant when there is more than one signal control on the page.
  • Set pulse. To be used with set pulse signals.
  • Navigate to a page. Use the button to create a shortcut to another page.
Header Displays a text.

Used to give better structure to the pages in service applications.

Table 4. Signal controls
Numeric signal

Displays a parameter value.

Possible to edit for writable parameters (optional).

Boolean signal

Displays On or Off for Boolean parameters.

Possible to edit for writable parameters (optional).

Enum signal

Displays a text that is mapped to the parameter value.

Possible to edit for writable parameters (optional).

String signal

Displays a text string.

Possible to make read-only and stand-alone.

Gauge

Displays a gauge to visualize the parameter value.

Possible to specify colored areas to indicate normal and potential dangerous value ranges.

Bar chart Displays multiple parameter values as bars.
Line chart Displays multiple parameter values as lines over time.