IIoT Conveyor Interface
A browser-based conveyor HMI connecting MQTT machine data, operator controls, diagnostics, and persisted application state.
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.
System architecture
- 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.
Engineering decisions
Separate operational modes
The interface distinguishes routine control from diagnostic actions to keep risky controls contextual.
Tools and technologies
- Next.js
- MQTT
- Zustand
- React Query
- Drizzle
- Zod
- Live controls
- Diagnostics
- Broker companion