Spangroup

Widget name. We reference the Widget within the project by its name, for example in the LVGL action. For each Widget, we must choose a unique name within the entire project. This field is optional and does not need to be set if we do not need to reference the Widget.

The name of the input group this widget belongs to.

Defines the order of widgets within group. This is similar to tabindex in HTML:

• if “Group index” is 0 then group order is the same as in Widgets Structure
• if “Group index” is > 0 then widget is added to the group before any widget with “Group index” 0 and before any widget with the greater “Group index” value. That is, “Group index”=4 is added before “Group index”=5 and “Group index”=0, but after “Group index”=3. If multiple widgets share the same “Group index” value, their order relative to each other follows their position in the Widgets Structure.

X position of the component in relation to the page or parent widget. It is set in pixels.

Hint: when setting the value of this property (as well as the Top, Width and Height properties), simple mathematical expressions can be used. When we enter an expression and press enter, the expression will be evaluated and the result set as the value of this property. It is allowed to use +, -, * and / operators in expressions. Brackets can also be used.

Examples of such mathematical expressions: 18 + 36, 50 + 32 * 6, (100 - 32) / 2.

The following options are available:

• px – Left is default in pixels.
• % – Left is set as a percentage in relation to the parent width.

Y position of the component in relation to the page or parent widget. It is set in pixels.

The following options are available:

• px – Top is set in pixels.
• % – The top is set as a percentage in relation to the parent height.

The width of the component. It is set in pixels.

The following options are available:

• px – Width is given in pixels.
• % – Width is given as a percentage in relation to the parent width.
• content – Width is automatically set to fit the entire content in width.

The height of the component. It is set in pixels.

The following options are available:

• px – Height is given in pixels.
• % – Height is given as a percentage in relation to the parent height.
• content – Height is automatically set to fit the entire content in height.

The absolute position of the component in relation to the page. This property is read-only.

Alignment icons and component distribution. Alignment icons appear when two or more components are selected, and distribution icons appear when three or more components are selected.

Icons for horizontal and vertical centering of widgets within a page or parent widget.

If this widget is a child of a container with layout set to Docking Manager, use this property to set the title of the tab that contains this widget.

Here we can select one of the globally defined Styles so that the Widget uses that Style.

Make the object hidden.

Here we can choose whether the Hidden flag state will be calculated from the Expression or not.

Make the object clickable by input devices.

Here we can choose whether the Clickable flag state will be calculated from the Expression or not.

Add focused state to the object when clicked.

Toggle checked state when the object is clicked.

Make the object scrollable.

Allow scrolling inside but with slower speed.

Make the object scroll further when “thrown”.

Allow scrolling only one snappable children.

Allow propagating the horizontal scroll to a parent.

Allow propagating the vertical scroll to a parent.

Automatically scroll object to make it visible when focused.

Allow scrolling the focused object with arrow keys.

If scroll snap is enabled on the parent it can snap to this object.

Keep the object pressed even if the press slid from the object.

Propagate the events to the parent too.

Propagate the gestures to the parent.

Allow performing more accurate hit (click) test. E.g. accounting for rounded corners.

Make the object positionable by the layouts.

Do not scroll the object when the parent scrolls and ignore layout.

Do not clip the children’s content to the parent’s boundary.

Scrollbars are displayed according to a configured mode. The following mode(s) exist:

• OFF: Never show the scrollbars
• ON: Always show the scrollbars
• ACTIVE: Show scroll bars while an object is being scrolled
• AUTO: Show scroll bars when the content is large enough to be scrolled

Controls the direction in which scrolling happens. The following mode(s) exist:

• NONE: no scroll
• TOP: only scroll up
• LEFT: only scroll left
• BOTTOM: only scroll down
• RIGHT: only scroll right
• HOR: only scroll horizontally
• VER: only scroll vertically
• ALL: scroll any directions

The children of an object can be snapped according to specific rules when scrolling ends.

An object can align snapped children in four ways:

• NONE: Snapping is disabled. (default)
• START: Align the children to the left side of a scrolled object
• END: Align the children to the right side of a scrolled object
• CENTER: Align the children to the center of a scrolled object

The children of an object can be snapped according to specific rules when scrolling ends.

An object can align snapped children in four ways:

• NONE: Snapping is disabled. (default)
• START: Align the children to the top side of a scrolled object
• END: Align the children to the bottom side of a scrolled object
• CENTER: Align the children to the center of a scrolled object

Toggled or checked state.

Here we can choose whether the Checked state will be calculated from the Expression or not.

Disabled state

Here we can choose whether the Disabled state will be calculated from the Expression or not.

Focused via keypad or encoder or clicked via touchpad/mouse.

Focused via keypad or encoder but not via touchpad/mouse

Being pressed.

Hover over Widget.

List of event handler definitions. During execution, the widget can generate certain events (e.g. the CLICKED event is generated when the touchscreen is pressed and released within the Widget) and through this list we can specify the method of event processing. We must define these properties for each event handler:

• Event – Event that is processed, e.g. CLICKED.
• Handler type – There are two options: Flow or Action. If Flow is selected, a flow output will be added through which the event is processed, and if Action is selected, then it is necessary to specify which User action will be performed during event processing.
• Action – If the Handler type is set to Action, then here we need to enter the name of the User action that will be performed during the processing of the selected event.

Additional component inputs that the user can add as desired in order to use them to receive additional data needed when evaluating expressions in properties. Each input is given a name and type. Name is used when referencing an input within an expression. A type is used to project Check to check whether a data line that transmits data of that type is connected to the input or not.

Additional component outputs that the user can add to send data through. Each output is assigned a name and type. An example of using this output is e.g. in the Loop component, where we can put the output name for the Variable property instead of e.g. variable name. In that case, the Loop component will not change the content of the variable in each step, but will send the current value through that output.

If this checkbox is enabled then an @Error output will be added to the component and if an error occurs in this component during the execution of the Flow, the Flow will continue through that output. The data that will be passed through that output is the textual description of the error.