IPDL - 10: HTTP Server Using ESP32 for Actuator Control

IPDL - 10: Introduction to HTTP and ESP32 Web Server for LED and Servo Motor Control

Objective

To understand the basics of HTTP and create a simple web server on the ESP32 to control an LED and a servo motor through a web page, with the servo motor angle controlled using an interactive seek bar ranging from 0° to 180°.

Required Components

ESP32 development board
LED
Servo motor
External 5 V power supply for servo motor
Wi-Fi network
Computer or smartphone with a web browser

Circuit Diagram

Board Connections

Pin Connections

Component	Connection
LED Anode (+)	ESP32 GPIO 25
LED Cathode (-)	GND
Servo Signal	ESP32 GPIO 26
Servo VCC	External 5 V supply
Servo GND	NodeMCU GND
External GND	NodeMCU GND

Introduction to HTTP

HTTP (HyperText Transfer Protocol) is a communication protocol used to transfer information between a client and a server over a network.

In this experiment:

The ESP32 acts as the HTTP server.
A web browser acts as the client.
The browser sends HTTP requests to the ESP32.
The ESP32 processes the requests.
The ESP32 controls the LED and servo motor.
The ESP32 sends an HTML web page back to the browser.

The basic communication is:

Web Browser
     ↓
 HTTP Request
     ↓
   ESP32
     ↓
Process Request
     ↓
LED / Servo Motor
     ↓
 HTTP Response
     ↓
Web Browser

For example, when the user clicks the LED ON button, the browser sends an HTTP request to the ESP32. The ESP32 receives the request and switches the LED ON.

Similarly, when the user moves the servo seek bar, the browser sends the selected angle to the ESP32. The ESP32 receives the angle and rotates the servo motor to the requested position.

Web Server Operation

The ESP32 connects to a Wi-Fi network and starts an HTTP server.

The web server provides different routes for controlling the LED and servo motor.

The servo angle is selected using an HTML range input (seek bar).

The seek bar operates as follows: Moving the slider towards the left moves the servo towards 0°, while moving it towards the right moves the servo towards 180°.

Experiment Code

⇩ Download the Program File

Required Arduino Library

The program uses the ESP32Servo library to control the servo motor.

Install the following library through the Arduino IDE:

ESP32Servo

In Arduino IDE:

Open Tools → Manage Libraries.
Search for ESP32Servo.
Install the ESP32Servo library.
Compile and upload the program to the ESP32.

- How to Run the Experiment

Connect the ESP32 to the computer using a USB cable.
Connect the LED and servo motor according to the pin connection table.
Provide an appropriate 5 V supply to the servo motor.
Connect the external servo supply GND to ESP32 GND.
Replace `YOUR_WIFI_NAME` with the name of the Wi-Fi network.
Replace `YOUR_WIFI_PASSWORD` with the Wi-Fi password.
Select the appropriate ESP32 board in Arduino IDE.
Select the correct COM port.
Upload the program.
Open the Serial Monitor at 115200 baud.
Wait for the ESP32 to connect to Wi-Fi.
The Serial Monitor will display the IP address of the ESP32.

For example: *may change for each user - you need to check the serial monitor for ours

ESP32 IP Address: 192.168.1.105

Connect the smartphone or computer to the same Wi-Fi network.
Open a web browser.
Enter the IP address displayed by the ESP32.

The ESP32 actuator control web page will appear in the browser.

Controlling the LED

The web page contains two buttons for LED control:

Click LED ON to turn the LED ON.
Click LED OFF to turn the LED OFF.

The LED ON button sends the following HTTP request:

http://192.168.1.105/led/on

The LED OFF button sends:

http://192.168.1.105/led/off

The ESP32 processes these requests and changes the state of GPIO 25.

Controlling the Servo Motor

The servo motor is controlled using an interactive seek bar displayed on the web page.

The seek bar has a range of:

0° ------------------------------------ 180°

Moving the slider to the left sets the servo angle close to 0°.
Moving the slider to the centre sets the servo angle close to 90°.
Moving the slider to the right sets the servo angle close to 180°.

The currently selected angle is displayed above the seek bar.

For example, if the slider is moved to 120°, the browser sends a request similar to:

http://192.168.1.105/servo?angle=120

The ESP32 receives the angle value and executes:

myServo.write(120);

The servo motor then moves to approximately 120°.

Working of the Servo Seek Bar

The web page uses an HTML `<input type="range">` element.

The important parameters are:

Parameter	Value	Purpose
min	0	Minimum servo angle
max	180	Maximum servo angle
value	Current angle	Initial slider position
oninput	updateServo(this.value)	Sends the selected angle to the ESP32

Whenever the slider is moved, JavaScript sends the selected angle to the ESP32 using an HTTP request.

Thus:

Move Seek Bar
      ↓
Read Angle
      ↓
JavaScript
      ↓
HTTP Request
      ↓
ESP32
      ↓
Servo.write(angle)
      ↓
Servo Motor Rotates

Observation

ESP32 successfully connects to the configured Wi-Fi network.
ESP32 hosts a web page using an HTTP server.
The web page can be accessed from a device connected to the same Wi-Fi network.
LED can be switched ON and OFF through the web page.
Servo motor can be controlled through the web page.
The servo angle can be selected between 0° and 180° using the seek bar.
The selected servo angle is displayed on the web page.
Moving the seek bar generates an HTTP request containing the selected angle.
The ESP32 processes the HTTP request and positions the servo motor accordingly.

Result

A basic HTTP web server was successfully hosted on the ESP32. The LED was controlled using web buttons, and the servo motor angle was controlled from 0° to 180° using an interactive seek bar on the web page.

Conclusion

This experiment demonstrates the basic working of HTTP communication, an ESP32 web server, HTML, JavaScript, and actuator control. The ESP32 acts as both the IoT controller and HTTP server, while a smartphone or computer acts as the client.

The experiment also demonstrates how an interactive web interface can be used to send real-time control values to an ESP32. The servo motor seek bar provides a practical example of sending a variable parameter, such as an angle, from a web browser to an embedded device.