06 / 11Supporting / Mechatronics HMI
FESS Monitoring & Digital Twin
A monitoring interface for a flywheel energy-storage concept, combining MQTT telemetry, time-series views, and a Three.js digital twin.
01Context
The engineering problem
Give operators one legible view of machine state, vibration-oriented signals, and the physical assembly.
Combined typed web components, MQTT messaging, charting, a relational data layer, and React Three Fiber visualization.
A deployed technical HMI and public codebase that connect mechatronic context with modern web visualization patterns.
02System architecture
How the layers connect
The diagram is paired with a text alternative and remains readable without animation or WebGL.
- Machine: Flywheel assembly and instrumentation context.
- Messaging: MQTT carries telemetry into the browser experience.
- Interface: Charts and a 3D view provide complementary readings of system state.
03Engineering decisions
Choices that shaped the result
Use 3D only where it explains
The model is tied to the monitored machine rather than used as decorative WebGL.
04Technical footprint
Stack in context
- Next.js
- MQTT
- Three.js
- Recharts
- Drizzle
- MQTT telemetry
- 3D assembly
- Signal views