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 single View module consists of a pair: a design (.xmd) holding the screen layout and a script (.xms) handling the events raised on that screen. The design is handled in this designer, and the event functions are handled in the same module's Functions node.
Main Areas
The screen centers on a single canvas for placing controls. It is used together with the main window toolbar to switch the editing state and tidy the layout.
| Area | Description |
|---|---|
| Design canvas | XMachineEditorControl. The work area where controls are placed, moved, and resized. |
| Lock Design toggle | A 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 buttons | The alignment functions on the main window toolbar align selected controls left, right, top, and bottom, and equalize their spacing. |
The full list of placeable controls and the properties of each control are 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 variable value is true, and binding a numeric display control to a coordinate 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. Please refer to the relevant chapter for Run Module variable declaration and binding examples.
Event Connection
Controls that require interaction, such as buttons, connect their events to functions. For a button, first set the Action property to RunEvent in the Property Editor. The default value of Action is None, and the function specified in OnClickEvent runs on click only when it is RunEvent. Then specify the function to run in the OnClickEvent property under the XMachineEvent group. With Action set to RunEvent, double-clicking the button automatically creates the function if it does not exist and opens its editing tab so you can write the behavior. The created function is added as a node under the Functions of the same View module. A step-by-step example is covered in the First Project.
Workflow
- Turn off Lock Design on the main window toolbar to enter edit mode.
- Place the required controls on the canvas and adjust their position and size.
- Select multiple controls and line them up with the align buttons.
- Assign a Run Module variable to each control's data binding.
- For buttons that need events, set
ActiontoRunEvent, then connect a function inOnClickEventand write the behavior. - When finished editing, turn Lock Design back on to fix the layout.