HMI Overview
The HMI (Human-Machine Interface) editor lets an admin draw custom process mimic screens for a plant: tanks, pipes, valves, switches, gauges, and live data readouts, all placed freely on a canvas and wired up to real OpSee Tags. Once saved, any operator can open that same screen in a read-only viewer, watch the live values update, and interact with the controls the admin chose to make live.
Two sides of the same feature
| Role | Where | What you do |
|---|---|---|
| Admin | Admin > HMI | Draw and edit Screens: place Shapes, style them, wire them to live data, configure notifications |
| Operator | Production > HMI Screens | Browse saved Screens, open one, watch live values, operate any Switch/Slider/Pushbutton the admin made live |
Both sides render the exact same Screen content. The editor just adds the drawing tools; the viewer strips them away and leaves only the live behavior. See Operator Viewer for the operator-facing side in detail. This page and the following ones cover the editor.
Core concepts
- Screen: one saved mimic diagram (a named collection of Shapes, its own canvas size and background color, plus a few view/snapping preferences). See Organizing and Reusing Screens for how Screens are saved, opened, and managed.
- Shape: anything placed on the canvas, from a plain rectangle to a Switch, a Pipe, or an embedded dashboard Widget. Every Shape has a position, size, and rotation, and can be moved, resized, rotated, and deleted the same way regardless of its type.
- Group: two or more Shapes combined into one unit (see Organizing and Reusing Screens). A Group's own members are called its children; a child's position is relative to the Group, so moving or resizing the Group carries every child along with it.
- Depends on: the mechanism that binds a Shape's own look (or a Pipe's liquid) to a live value instead of a fixed one. Covered in full in Dynamic Bindings and Notifications.
Mouse mode and Hand mode
The canvas always sits in one of two modes, switched from the toolbar's own mode buttons (or the V / H keyboard shortcuts):
- Mouse mode (also called Select mode): the editing mode. Click a Shape to select it, drag to move it, drag a handle to resize or rotate it, right-click for its style menu. This is the only mode where the canvas can actually be edited.
- Hand mode: the operating mode. Dragging pans the canvas instead of moving Shapes, the mouse wheel zooms, and any live control (Switch, Slider, Pushbutton, a "Go to Screen" style Widget) responds to clicks the same way it will for an operator. Use Hand mode in the editor to test a Screen's live behavior before saving it; it is the only mode available in the operator viewer.
The toolbar
A ribbon of dropdown menus sits across the top of the editor:
| Menu | Contents |
|---|---|
| Project | New empty screen, Open screen, Export/Import screen, Export/Import palette, Import SVG, Save screen, Notification list, Notification historic |
| Add | Every Shape/Control/Indicator/Machine/Connexion/Text category, plus Picture and Widget |
| Edition | Group, Ungroup, Keep outline, Merge shapes, Copy, Cut, Paste |
| Vue | Grid/Dots background, Show groups/links/names/dynamic values/cursor position/rulers, and the whole Snapping section |
| Preferences | Favorite colors, Auto-save, Canvas size, Canvas background |
Next to the ribbon: the Undo/Redo buttons, the Mouse/Hand mode toggle, and the zoom control (in/out plus a Clear board button — deliberately not given a keyboard shortcut, since it wipes the whole canvas and cannot be undone through Undo once the confirmation is accepted).
The "Unsaved" / "Saved" status chip at the far left of the toolbar shows the current Screen's save state; click it while unsaved to save immediately with no prompt. See Organizing and Reusing Screens for the full save/auto-save workflow.
Keyboard shortcuts
All shortcuts below are ignored while typing in a text field, so they never hijack normal typing (renaming a Shape, entering a numeric value, and so on).
| Shortcut | Action |
|---|---|
V | Switch to Mouse (Select) mode |
H | Toggle Mouse mode / Hand mode |
Ctrl+Z | Undo |
Ctrl+Y or Ctrl+Shift+Z | Redo |
Ctrl+C / Ctrl+X / Ctrl+V | Copy / Cut / Paste |
Ctrl+D | Duplicate the current selection |
Ctrl+A | Select every top-level Shape |
Delete or Backspace | Delete the current selection |
| Arrow keys | Nudge the selection by 1px (10px with Shift held) |
Escape | Deselect everything, close the style menu |
Ctrl+G | Group the current selection |
Ctrl+Shift+G | Ungroup the selected Group |
Ctrl+S | Quick-save (no prompt) |
Ctrl+Shift+S | Save screen (opens the name/overwrite dialog) |
Ctrl+Plus / Ctrl+Minus / Ctrl+0 | Zoom in / out / reset to 100% |
Ctrl+' | Toggle the Grid background |
| Mouse wheel | Zoom in/out, centered on the cursor |
Undo/Redo has no fixed depth limit within a single editing session, but it resets whenever a different Screen is loaded. Save often if you are experimenting with a large change.
Next steps
- Shapes and Styling: every drawing primitive, text item, and picture you can place, plus how to style them
- Controls, Indicators, and Machines: live interactive controls, gauges, tanks, and piping
- Dynamic Bindings and Notifications: wiring a Shape's look to live data, and alerting on thresholds
- Organizing and Reusing Screens: grouping, saving reusable templates, and managing saved Screens
- Operator Viewer: what an operator sees and can do with a finished Screen