s# HMI Component
npm install vue-hmis# HMI Component
A customizable HMI (Human Machine Interface) component for Vue.js applications that allows you to create interactive diagrams and control panels.
The basic implementation requires importing the component and setting up the necessary configuration:
The HMI component accepts a config prop with the following properties:
- images: Array of background images that can be used in the interface
{
name: string; // Unique identifier for the image
url: string; // URL or path to the image
}
- data: Array of initial data for the interface
- editMode: Boolean to enable/disable edit mode
The component can be customized using named slots. Here are the available slots:
Custom sidebar items can be added using the following slots:
- #sidebar-item-example: Add custom example items
- #sidebar-item-electrical: Add electrical components
Example:
Custom nodes can be added using the following slots:
- #node-example: Add custom example nodes
Nodes can be wrapped with WrapperNode component to add size constraints:
:max-width="200"
:min-height="10"
:max-height="200"
>
... a node here ...
You can customize the background image interface using:
- #bg-image-sidebar-item: Customize the background image sidebar
- #bg-image-node-form: Customize the background image form
See Test.vue for a complete example of component customization.
The HMI Component (HmiComponent.vue) is built on top of Vue Flow and provides the following functionality:
1. Drag and Drop System
- Nodes can be dragged from the sidebar onto the canvas
- Supports parent-child relationships between nodes
- Automatically handles node positioning within background images
2. Connection System
- Nodes can be connected when editMode is true
- Connections are created with unique IDs based on source and target nodes
- Supports multiple connection points (handles) per node
3. State Management
- Schema is automatically saved on node/edge changes
- State can be restored from a saved schema
The component consists of several key parts:
1. Main Canvas (VueFlow)
- Handles zoom and pan interactions
- Manages node and edge rendering
- Controls edit mode restrictions
2. Sidebar
- Only visible in edit mode
- Contains default items:
- Fit View control
- Background Image manager
- Supports custom items through slots
3. Node System
- Background Image nodes serve as containers
- Child nodes automatically position relative to parent
- Supports size constraints through WrapperNode
1. Node Dragging
- Detects intersections with background nodes
- Automatically handles parent-child relationships
- Maintains relative positioning when nested
2. Connection Handling
- Handles connections between nodes
3. Edges
- Handles edges between nodes and allow to customize the edge style
4. Schema Management
- Auto-saves on node/edge changes
- Provides restore functionality
#### WrapperNode
A utility component that wraps nodes to provide:
- Resizing capabilities through NodeResizer
- Configurable size constraints:
``ts`
minWidth?: number
maxWidth?: number
minHeight?: number
maxHeight?: number
handlesNumber
- Dynamic connection handles:
- Configurable number of handles via propnodesConnectable
- Automatic positioning around node perimeter
- Handles visibility tied to state
- Handles are distributed evenly on each side (top, right, bottom, left)
#### Sidebar
Manages the sidebar interface:
- Automatically renders all slots starting with sidebar-item-WrapperSidebarItem
- Uses for consistent item styling`
- Slot naming convention:
ts`
'sidebar-item-example' // For users items
'sidebar-item-background' // For background images (default)
'sidebar-item-fitview' // For view controls (default)
#### LinesSettings
Provides edge customization interface with:
- Default edge settings:
- Line color, type, and width
- Animation toggle
- Start/end markers with size control
- Label management (static/dynamic)
- Conditional styling rules:
- Value-based conditions (>, <, ===, etc.)
- Multiple properties (color, type, width, etc.)
- Real-time preview
- Rule priority system
#### BackgroundImageNode
Handles background image containers:
- Image selection and display
- Customizable form interface via slots:
`vue`
- Automatic image scaling and containment
- Parent container for other nodes
The HMI component includes a powerful edge customization system through the LinesSettings component that allows:
- Default edge styling:
- Color, type, and width
- Animation toggle
- Start/end markers with size control
- Static or dynamic labels
- Conditional styling rules based on:
- Value comparisons (>, <, ===, etc.)
- Multiple properties (color, type, width, markers)
- Real-time preview
- Priority-based rule system
The WrapperNode component accepts the following props:
- minWidth: Minimum width constraintmaxWidth
- : Maximum width constraintminHeight
- : Minimum height constraintmaxHeight
- : Maximum height constrainthandlesNumber`: Number of connection points (handles) to distribute around the node
-