← index

hardware/ · 12

HIL System Simulator (Microcontroller + ProtoPie Bridge)

A Hardware-in-the-Loop testbed decoupling embedded firmware from UI prototyping using ProtoPie Connect, an Arduino/Grove sensor rig, and a React WebSocket gateway.

Fig. 1. Live temperature sensor streaming and synthetic signal injection in the HIL simulator dashboard linked to ProtoPie.
Fig. 1. Live temperature sensor streaming and synthetic signal injection in the HIL simulator dashboard linked to ProtoPie.

01 problem

In traditional embedded product workflows, UI logic and hardware drivers are coupled in the same microcontroller firmware. Modifying a single UI element requires recompiling the entire firmware binary (costing minutes per cycle and wearing flash memory), while testing extreme thermal or electrical edge cases forces engineers to write throwaway UART backdoor commands directly into production code.

02 approach

Configured an Arduino Uno and Grove Beginner Kit sensor rig to stream clean temperature telemetry over Web Serial.

Built a React / Vite gateway application to monitor live microcontroller serial streams and inject synthetic test parameters without touching device firmware.

Designed the high-fidelity product interface in ProtoPie Studio to handle temperature gauge states, critical thermal warnings, and peripheral hardware triggers.

Linked the React gateway to ProtoPie Connect over Socket.IO, establishing bi-directional communication between physical sensor data, virtual test injections, and digital UI states.

03 stack

prototype ProtoPie Studio · embedded product UI
gateway React · Vite + Web Serial API + Socket.IO
microcontroller Arduino Uno + Grove Beginner Kit (Temperature & OLED)
host ProtoPie Connect · WebSocket / Socket.IO relay
repo GitHub · jkuts/STM32-simulator

04 outcome

Decoupled UI iteration eliminating repetitive C++ compile and flash cycles for front-end visual adjustments
Replaced throwaway UART backdoor triggers with live middleware signal injection for simulating sensor edge cases

The simulator showed how a Hardware-in-the-Loop architecture decouples embedded software development from UI design. Production firmware stays clean and test-ready on the chip, UI designers can iterate without firmware flashing, and QA teams can inject extreme environmental thresholds directly through the browser middleware.

05 artifacts