s# HMI Component

A customizable HMI (Human Machine Interface) component for Vue.js applications that allows you to create interactive diagrams and control panels.

Basic Usage

The basic implementation requires importing the component and setting up the necessary configuration:

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

Customization

The component can be customized using named slots. Here are the available slots:

Sidebar Items

Custom sidebar items can be added using the following slots:

• #sidebar-item-example: Add custom example items
• #sidebar-item-electrical: Add electrical components

Example:

<template #sidebar-item-electrical>

Nodes

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:

<template #node-electrical> <WrapperNode :min-width="10" :max-width="200" :min-height="10" :max-height="200"

... a node here ...

Background Image Customization

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

Complete Example

See Test.vue for a complete example of component customization.

Technical Details

The HMI Component (HmiComponent.vue) is built on top of Vue Flow and provides the following functionality:

Core Features

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

Component Structure

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

Events and Interactions

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

Core Components

WrapperNode

A utility component that wraps nodes to provide:

• Resizing capabilities through NodeResizer
• Configurable size constraints:

  minWidth?: number
  maxWidth?: number
  minHeight?: number
  maxHeight?: number

• Dynamic connection handles:
  • Configurable number of handles via handlesNumber prop
  • Automatic positioning around node perimeter
  • Handles visibility tied to nodesConnectable 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-
• Uses WrapperSidebarItem for consistent item styling
• Slot naming convention:

  '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:

  <slot name="bg-image-form">
    <BackgroundImageNodeForm :images="props.images" />
  </slot>

• Automatic image scaling and containment
• Parent container for other nodes

Edge Customization

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

WrapperNode Configuration

The WrapperNode component accepts the following props:

• minWidth: Minimum width constraint
• maxWidth: Maximum width constraint
• minHeight: Minimum height constraint
• maxHeight: Maximum height constraint
• handlesNumber: Number of connection points (handles) to distribute around the node