GUI Manual · Chapter 17

View Module

The View Module is a GUI designer for visually building the machine operation screen (HMI). On the central XMachineEditorControl canvas you drag and place UI controls such as buttons, lamps, and text to compose the operation screen that operators actually see and use.

A View module consists of a pair: a design (.xdf) holding the screen layout and an event script (.xms) handling the events raised on that screen. The design is edited here in the designer, while the event script is edited in the same module's script editor.

Main Areas

The screen centers on a single canvas for placing controls. It is used together with the main window toolbar to switch edit state and tidy the layout.

AreaDescription
Design canvasXMachineEditorControl. The work area where controls are placed, moved, and resized.
Lock Design toggleA toggle on the main window toolbar that switches between edit mode and locked mode. When locked, controls are fixed so they cannot be moved by accident.
Align buttonsThe alignment functions on the main window toolbar align selected controls left, right, top, and bottom, and equalize spacing.

The full list of placeable controls and their properties is covered in UI Controls.

Data Binding

Each control is linked to a Run Module variable through data binding. For example, binding a lamp control to a bool variable lights the lamp when the value is true, and binding a numeric display control to a position variable shows the current position on screen in real time.

By tying the screen to runtime variables this way, the screen updates simply as the script updates the variable. See the Run Module chapter for variable declaration and binding examples.

Workflow

  1. Turn off Lock Design on the main window toolbar to enter edit mode.
  2. Place the required controls on the canvas and adjust their position and size.
  3. Select multiple controls and use the align buttons to line them up.
  4. Assign a Run Module variable to each control's data binding.
  5. For controls that need events, write the behavior in the module's event script (.xms).
  6. When finished editing, turn Lock Design back on to fix the layout.