Skip to main content

HMI Interface

Human-Machine Interface (HMI) providing real-time device monitoring, parameter control, water quality visualization, and PID (Proportional-Integral-Derivative) controller tuning for industrial water systems.

Overview​

The HMI Interface is a specialized operator dashboard designed for direct interaction with water treatment devices and control systems. It provides real-time parameter monitoring, live data visualization, device control capabilities, and PID tuning for automated control systems.

Location: libs/hmi/

Route: /hmi

Permission Required: HMI

Target Users: Plant operators, control engineers, supervisors

Key Features​

1. Water Quality Monitoring Panel​

  • Real-time quality parameters (pH, TDS, Turbidity, Temperature)
  • Color-coded status indicators (Green=Normal, Red=Alert)
  • Live value updates with refresh intervals
  • Min/Max range displays
  • Threshold violation alerts

2. Selection Parameter Control​

  • Device selection dropdown
  • Parameter selection (Flow, Pressure, Level, etc.)
  • Unit-specific data visualization
  • Multi-device support
  • Quick parameter switching

3. Toggle Button Controls​

  • Day/Week/Month/Year views for historical data
  • Custom date range selection
  • Real-time vs Historical toggle
  • Auto-refresh controls

4. Total Energy Graph​

  • Energy consumption trends over selected period
  • Pump-wise energy breakdown
  • Peak demand highlighting
  • Energy efficiency metrics
  • Cost correlation (if available)

5. Past Days Grid Graph​

  • Multi-day comparison grid view
  • Day-by-day parameter values
  • Color-coded heat map for quick insights
  • Trend identification

6. Device Graphs (1 & 2)​

  • Dual device monitoring
  • Side-by-side comparison
  • Real-time line charts
  • Parameter overlay
  • Synchron ized time axis

7. PID Controller Tuning​

  • Proportional (P) gain adjustment
  • Integral (I) time setting
  • Derivative (D) time configuration
  • Auto-tuning support (if enabled)
  • Manual fine-tuning controls
  • Real-time response preview

8. Lock/Unlock Controls​

  • Parameter protection to prevent accidental changes
  • Operator permissions for control actions
  • Lock status indicators
  • Unlock authentication (if required)

Architecture​

Data Flow:

Key Components:

  • HmiStoreContextProvider - Global state management
  • HmiHeader - Page header with device status
  • WaterQuality - Quality parameter cards
  • SelectionParameter - Device/parameter selectors
  • TotalEnergyGraph - Energy consumption chart
  • PastDaysGridGraph - Multi-day comparison grid
  • DeviceGraph1/2 - Dual device monitoring
  • PidComponent - PID controller interface
  • LockUnlockButton - Control protection

Usage Examples​

Access HMI Data​

import { useContext } from 'react';
import { HmiStoreContext } from '@aquagen-mf-webapp/hmi/store/HmiStore';

function HmiWidget() {
  const hmiStore = useContext(HmiStoreContext);

  if (hmiStore.initialLoading) return <Loader />;

  return <div>{hmiStore.deviceParamResponse?.value}</div>;
}

PID Tuning​

const updatePidParameters = async (p, i, d) => {
  await HmiController.setPidParameters({
    proportional: p,
    integral: i,
    derivative: d,
    deviceId: selectedDevice
  });
};

Last Updated: February 2026 Module Location: libs/hmi/