07 / 11Supporting / Industrial Automation

IIoT Conveyor Interface

A browser-based conveyor HMI connecting MQTT machine data, operator controls, diagnostics, and persisted application state.

RoleFull-stack HMI engineer

Period2025 to 2026

StatusDeployed laboratory interface

EvidencePublic HMI and broker repositories, README architecture, and deployment

01Context

The engineering problem

Challenge

Translate sensor and actuator state into an interface that supports both normal operation and troubleshooting.

Response

Separated monitoring, control, and diagnostic concerns while using MQTT, React Query, Zustand, validation, and a Drizzle-backed data layer.

Outcome

A public deployed interface and broker companion that demonstrate hardware-to-web system integration.

02System architecture

The diagram is paired with a text alternative and remains readable without animation or WebGL.

Conveyor: Sensors, relays, and actuators expose machine state.
Broker: MQTT provides the real-time messaging boundary.
HMI: Monitoring, controls, and diagnostics are separated by operator intent.

03Engineering decisions

The interface distinguishes routine control from diagnostic actions to keep risky controls contextual.

04Technical footprint