The Concept
Draw a path on your screen. Watch the robot drive it on the floor.
It sounds simple, but it feels like magic.
This was our final group project for the Embedded Systems module at university. We wanted to build something that bridged the gap between the clean, abstract world of web software and the messy, physical reality of hardware. We didn't just want a remote-controlled car; we wanted a robot that could translate digital intent into physical action.
How It Works
The system is a symphony of three distinct parts talking to each other in real-time.
1. The Interface (React)
It starts on the web. We built a React application where you have a blank grid. You draw a path—a square, a zigzag, a circle. The app captures these vector coordinates and mathematically simplifies them into a set of precise instructions: "Forward 50cm. Turn 90 degrees right. Forward 30cm."
2. The Bridge (WebSockets)
These instructions are beamed wirelessly. We established a WebSocket connection between the browser and the robot's brain—an ESP32 microcontroller. This allows for low-latency, two-way communication.
3. The Execution (Hardware)
The robot receives the command packet. But driving straight is harder than it looks. Motors are imperfect; one side always spins slightly faster than the other.
To solve this, we used speed sensors (encoders) on the wheels. The robot constantly measures exactly how far each wheel has turned. If it drifts left, it micro-adjusts the power to the right motor. It creates a closed feedback loop, ensuring the physical path matches the digital drawing perfectly.
Our path-following robot, powered by an ESP32 and precise motor control logic.
The Team
Hardware projects are rarely solitary endeavors. This was a collaborative effort, combining skills in circuit design, embedded C++, and modern web networking.
We spent countless nights debugging why the robot would spin in circles instead of driving straight (it was usually a loose wire) and fine-tuning the WebSocket latency.
The team presenting the final system.
The Tech Stack
| Component | Technology |
|---|---|
| Brain | ESP32 Microcontroller |
| Firmware | C++ / Arduino Framework |
| Frontend | React, HTML5 Canvas |
| Protocol | WebSockets (Real-time) |
| Motors | L298N Driver + DC Motors with Encoders |