ESP32 S3 - Control Car via Web
This guide shows you how to use the ESP32 S3 to wirelessly control a robot car from a web browser on your smartphone or PC using WiFi. The control is facilitated through a graphical web user interface using WebSocket, allowing for smooth and real-time control of the car from anywhere on your local network.
What you'll build:
- A web-based control interface hosted on the ESP32 S3 itself
- A WebSocket connection for real-time, low-latency command delivery
- A motor control system that drives a 2WD RC car forward, backward, left, and right
- A browser-accessible UI that works on both smartphones and PCs
Hardware Preparation
Or you can buy the following kits:
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Additionally, some of these links are for products from our own brand, DIYables .
Overview of 2WD RC Car and WebSocket
The 2WD RC Car is a popular robotics platform consisting of two independently driven wheels and a castor wheel for balance, making it simple to control direction through differential motor speeds. WebSocket is a communication protocol that establishes a persistent, two-way connection between the web browser and the ESP32 S3, eliminating the need to reload the page every time a command is sent. Together, these technologies allow you to build a responsive, real-time web-controlled car with minimal latency.
Key Specifications
We have specific tutorials about 2WD RC Car and WebSocket. Each tutorial contains detailed information and step-by-step instructions about hardware pinout, working principle, wiring connection to ESP32 S3, ESP32 S3 code... Learn more about them at the following links:
- ESP32 S3 - 2WD RC Car tutorial
- ESP32 S3 - WebSocket tutorial
How It Works
The ESP32 S3 code creates both a web server and a WebSocket server, enabling the browser to display the control UI and send real-time commands without page reloads. Here's how it works:
- When you enter the ESP32 S3's IP address in a web browser, it requests the webpage (User Interface) from the ESP32 S3.
- The ESP32 S3's web server responds by sending the webpage's content (HTML, CSS, JavaScript).
- Your web browser then displays the webpage.
- The JavaScript code within the webpage establishes a WebSocket connection to the WebSocket server on the ESP32 S3.
- Once this WebSocket connection is established, if you press/release the buttons on the webpage, the JavaScript code quietly sends the commands to the ESP32 S3 through this WebSocket connection in the background.
- The WebSocket server on the ESP32 S3, upon receiving the commands, controls the robot car accordingly.
The following table shows the command list that the webpage sends to the ESP32 S3 based on the user's actions:
| User's Action | Button | Command | Car Action |
|---|---|---|---|
| PRESS | UP | 1 | MOVE FORWARD |
| PRESS | DOWN | 2 | MOVE BACKWARD |
| PRESS | LEFT | 4 | TURN LEFT |
| PRESS | RIGHT | 8 | TURN RIGHT |
| PRESS | STOP | 0 | STOP |
| RELEASE | UP | 0 | STOP |
| RELEASE | DOWN | 0 | STOP |
| RELEASE | LEFT | 0 | STOP |
| RELEASE | RIGHT | 0 | STOP |
| RELEASE | STOP | 0 | STOP |
Wiring Diagram between 2WD RC Car and ESP32 S3
Connect the components by following the wiring diagram and notes below. The L9110S motor driver acts as the bridge between the ESP32 S3's logic-level signals and the higher-current motors in the 2WD car.
This image is created using Fritzing. Click to enlarge image
A screw terminal keeps each wire tight, even when the board shakes. Simply plug the ESP32 S3 into a Screw Terminal Block for ESP32 S3. This is how it looks with the screw terminal board:
This image is created using Fritzing. Click to enlarge image
Or plug the ESP32 S3 into a GPIO Breakout Board for ESP32 S3. The same wiring then looks like this:
This image is created using Fritzing. Click to enlarge image
Safety Notes
The L9110S module powers the motors directly from its VCC and GND pins and does not have an onboard 5V regulator. This means you can power everything from a single power source — four 1.5V AA batteries (totaling 6V). Here's how to do it:
- Connect the 6V battery to the VCC and GND pins of the L9110S module to power the motors.
- Connect the same 6V battery to the Vin and GND pins of the ESP32 S3 to power the board.
- Make sure the L9110S module and the ESP32 S3 share a common GND.
Unlike the L298N, the L9110S has no ENA/ENB enable jumpers and no 12V screw terminal, so the wiring is simpler.
Since the 2WD RC car has an on/off switch, you can optionally connect the battery via the switch to enable turning on/off power for the car. If you want to make it simple, just ignore the switch.
ESP32 S3 Code
The following code consists of two files. The webpage's content (HTML, CSS, JavaScript) is stored separately in an index.h file, which keeps the main sketch clean and maintainable. Together, these two files implement a web server, a WebSocket server, and the motor control logic.
- An .ino file that is ESP32 S3 code, which creates a web server and WebSocket Server, and controls the car
- An .h file, which contains the webpage's content
Detailed Instructions
- New to ESP32 S3? Complete our Getting Started with ESP32 S3 guide first.
- Do the wiring as above image.
- Connect the ESP32 S3 board to your PC via a USB Type-C cable
- Open Arduino IDE on your PC.
- Select the right ESP32 S3 board (e.g. ESP32S3 Dev Module) and COM port.
- Open the Library Manager by clicking on the Library Manager icon on the left navigation bar of Arduino IDE.
- Search "DIYables ESP32 WebServer", then find the Web Server library created by DIYables.
- Click Install button to install the Web Server library.
- Search for DIYables ESP32 WebServer created by DIYables.io and click the Install button.
- On Arduino IDE, create new sketch, Give it a name, for example, newbiely.com.ino
- Copy the below code and open with Arduino IDE
- Modify the WiFi information (SSID and password) in the code to match your own network credentials.
- Create the index.h file On Arduino IDE by:
- Either click on the button just below the serial monitor icon and choose New Tab, or use Ctrl+Shift+N keys.
- Give the file's name index.h and click OK button
- Copy the below code and paste it to the index.h.
- Now you have the code in two files: newbiely.com.ino and index.h
- Click Upload button on Arduino IDE to upload code to ESP32 S3
- Open the Serial Monitor
- Check out the result on Serial Monitor.
- Take note of the IP address displayed, and enter this address into the address bar of a web browser on your smartphone or PC.
- You will see the webpage as below:
- The JavaScript code of the webpage automatically creates the WebSocket connection to the ESP32 S3.
- Now you can control the car to turn left/right, move forward/backward via the web interface.
- If you modify the HTML content in the index.h and do not touch anything in newbiely.com.ino file, when you compile and upload code to ESP32 S3, Arduino IDE will not update the HTML content.
- To make Arduino IDE update the HTML content in this case, make a change in the newbiely.com.ino file (e.g. adding empty line, add a comment....)
To save the memory of ESP32 S3, the images of the control buttons are NOT stored on the ESP32 S3. Instead, they are stored on the internet, so your phone or PC needs to have an internet connection to load images for the web control page.
※ NOTE THAT:
Pro Tip: If the car does not move correctly after wiring, try swapping the motor wire connections on the L9110S module — reversing a motor's polarity changes its spin direction without requiring code changes.
Line-by-line Code Explanation
The above ESP32 S3 code contains line-by-line explanation. Please read the comments in the code!
Serial Monitor Output
After uploading the code and opening the Serial Monitor at 115200 baud, you should see output similar to the following readings as the ESP32 S3 connects to WiFi and handles incoming WebSocket commands.
Applications
Web-controlled robot cars built with the ESP32 S3 serve as a versatile foundation for countless real-world and educational applications.
- Home surveillance robot: Mount a camera on the car and stream video while navigating rooms remotely.
- Warehouse inspection bot: Drive through facility aisles to inspect inventory or detect hazards without physical presence.
- Educational robotics platform: Teach students web technologies, networking, and motor control in a hands-on, engaging format.
- Security patrol robot: Program the car to follow set patrol routes and alert users when motion is detected.
- Agricultural monitoring rover: Navigate greenhouse rows to monitor plant health or soil moisture sensor readings.
Video Tutorial
Watch the step-by-step video walkthrough for this ESP32 S3 project below.
Challenges
Once your ESP32 S3 web-controlled car is working, try extending the project with these progressive challenges to deepen your understanding of networking, motor control, and embedded web development.
- Beginner: Add a speed control slider to the web interface that adjusts the PWM duty cycle sent to the L9110S motor input pins.
- Intermediate: Display the car's current direction and speed status on the webpage in real time using WebSocket messages sent from the ESP32 S3 back to the browser.
- Advanced: Add an ultrasonic sensor to the car and implement automatic obstacle avoidance that overrides web commands when an object is detected within 20 cm.