ESP32 Servo Motor Web Server with Arduino IDE

Summary

This video explains how to control a servo motor using the ESP32 microcontroller. It covers wiring the servo motor, generating pulse-width modulation (PWM) signals, and using the ESP32 Arduino Servo library. Viewers learn to build a web server with a slider to adjust the servo's position remotely, using Ajax to send HTTP requests without refreshing the page. The tutorial demonstrates how to integrate HTML and JavaScript into the ESP32 sketch to control the motor and offers alternative input methods for various use cases.

Takeaways

• 🔧 Learn how to control a servo motor using the ESP32 with a web server.
• ⚡ Servo motors typically have three wires: power (red), ground (black/brown), and signal (yellow/orange/white).
• 🛠 Small servos can be powered directly by the ESP32, but larger or multiple servos require an external power supply.
• 📍 Connect the servo's signal wire to GPIO pin 13 for control via the ESP32.
• 📐 Servo motors can be positioned at angles between 0 and 180 degrees using Pulse Width Modulation (PWM) signals.
• 📚 The ESP32 Arduino Servo Library simplifies controlling the servo, similar to Arduino’s servo control.
• 💻 Create a web server with an HTML slider (range 0-180) to control the servo motor’s position remotely.
• 📡 The slider uses Ajax to update the servo's position in real-time without refreshing the web page.
• 🌐 The HTML input slider sends HTTP requests to the ESP32, which adjusts the servo based on the slider's value.
• 🚀 Uploading the code to the ESP32 allows you to access the web server via the ESP32’s IP address and control the servo from a browser.

Q & A

What is the main objective of the video?

The main objective of the video is to teach how to build a website with the ESP32 that controls the shaft position of a servo motor using a slider.

What are the three wires on a servo motor and what are their functions?

Servo motors have three wires: power (usually red), ground (black or brown), and signal (frequently yellow, orange, or white). The power wire provides the electrical supply, the ground wire is for grounding, and the signal wire receives the pulse width modulation (PWM) signal to control the motor.

How can the ESP32 power a servo motor, and when would you need an external power supply?

For small servos, the ESP32 can directly power them. However, if you're using more than one servo or different types of servos, an external power supply is required to avoid overloading the ESP32.

Which GPIO pin is used to control the servo motor in this project?

The servo motor is connected to GPIO 13 on the ESP32 to receive the PWM signal.

How does the ESP32 control the servo motor’s shaft position?

The ESP32 controls the servo motor’s shaft position using a pulse width modulation (PWM) signal. The duty cycle of the PWM signal determines the angle of the shaft, which can range from 0 to 180 degrees.

Which library is used to simplify controlling the servo motor with the ESP32?

The ESP32 Arduino Servo library is used, which has the same interface as the Arduino Servo library, simplifying servo control with familiar functions.

What is the purpose of the slider on the web server?

The slider on the web server allows users to control the position of the servo motor’s shaft by sending values between 0 and 180 degrees to the ESP32.

How is the current slider value updated on the webpage without refreshing it?

The current slider value is updated using Ajax, which sends an HTTP request to the ESP32 in the background, allowing real-time updates without refreshing the webpage.

What role does JavaScript play in the web server’s functionality?

JavaScript is used to dynamically update the slider position displayed on the webpage and to send HTTP requests to the ESP32 when the slider is moved, instructing the ESP32 to adjust the servo motor accordingly.

What should be modified in the sketch before uploading it to the ESP32?

Before uploading the sketch, you need to modify two lines in the code to include your network credentials (Wi-Fi SSID and password) so that the ESP32 can connect to your network.

Outlines

00:00

🚀 Introduction to Building a Website to Control a Servo with ESP 32

In this paragraph, the video introduces the process of building a website using the ESP 32 microcontroller to control a servo motor. The key steps include using a slider to control the servo's shaft position remotely. The basic wiring of servo motors and how they are powered is discussed, noting the use of pulse width modulation (PWM) signals to control the motor's angle, ranging from 0 to 180 degrees.

05:01

💻 Setting Up the Arduino IDE for Servo Control

This section explains how to use the Arduino IDE to control a servo with the ESP 32. It walks through installing the ESP 32 Arduino servo library, configuring it in the IDE, and setting up the GPIO pins for servo control. The sketch provided demonstrates rotating the servo from 0 to 180 degrees and back, utilizing the PWM capabilities of the ESP 32. Debugging and testing through serial communication is also discussed.

🌐 Creating a Web Server for Servo Control

In this part, the video covers how to build a web server to control the servo motor via a webpage. A slider ranging from 0 to 180 degrees is embedded in the web page, allowing the user to control the servo's position without refreshing the page, using AJAX. The paragraph explains how to use HTML input tags to create the slider and the necessary attributes such as range, ID, and event handling for servo control.

📜 Adding JavaScript for Real-Time Control

This paragraph explains the role of JavaScript in updating the web page with the slider position and making HTTP requests to the ESP 32 when the slider moves. The code is structured to send real-time updates to the servo motor, moving it according to the slider's position. It emphasizes how the ESP 32 retrieves the slider position from the URL and converts it to an integer for precise servo control.

🔌 Integrating the Web Server and Uploading the Code

Here, the focus shifts to integrating the HTML and JavaScript code into the Arduino sketch and uploading it to the ESP 32. The steps involve attaching the servo to the GPIO pin, configuring network credentials, and handling HTTP GET requests to update the servo position based on slider movement. Debugging through the serial monitor and obtaining the ESP 32’s IP address for web access is also covered.

⚙️ Testing and Final Thoughts on Servo Control via Web Server

The final paragraph summarizes the process, encouraging viewers to test their web server and slider controls. The servo's position can be dynamically updated through the web interface, and viewers are reminded of alternate control inputs, such as buttons or text fields, that can replace the slider. The example serves as a foundation for more complex servo control applications using the ESP 32.

Keywords

💡ESP32

The ESP32 is a low-cost microcontroller with built-in Wi-Fi and Bluetooth capabilities. In the video, it is used to control a servo motor by sending signals to it. The ESP32 also hosts a web server that allows users to adjust the servo motor's position remotely through a browser interface.

💡Servo motor

A servo motor is a small device with a rotary actuator that allows precise control of angular position. In the video, the servo motor is connected to the ESP32 and its shaft is controlled by sending PWM signals, allowing it to rotate between 0 and 180 degrees based on user input.

💡PWM (Pulse Width Modulation)

PWM stands for Pulse Width Modulation, a technique used to control the amount of power delivered to an electronic device by varying the width of the pulses in a signal. In this context, PWM is used by the ESP32 to control the position of the servo motor's shaft, determining its angular position.

💡GPIO (General Purpose Input Output)

GPIO pins are the interface through which microcontrollers like the ESP32 communicate with external devices. In the video, the GPIO pin 13 is used to send the PWM signal to the servo motor, controlling its movement. The ability to assign different tasks to these pins makes GPIO vital for hardware projects.

💡Web server

A web server is software that handles requests and delivers web pages to users over a network. The ESP32 in the video runs a web server, enabling the user to control the servo motor via a web browser interface. This web server provides a slider to adjust the motor’s shaft position from 0 to 180 degrees.

💡Slider

In this context, the slider is an input element on a webpage that allows the user to adjust a value within a defined range. In the video, the slider is used to control the position of the servo motor's shaft, sending an HTTP request to the ESP32 when moved, which then translates this position into motor movement.

💡HTTP request

An HTTP request is a communication between a client (browser) and a server (ESP32) to request data or send commands. In the video, the browser sends an HTTP request to the ESP32 each time the slider is adjusted, containing the new position value for the servo motor, which the ESP32 uses to update the motor's position.

💡JavaScript

JavaScript is a programming language used to create dynamic content on webpages. In the video, JavaScript is used to handle the slider input on the webpage, update the current slider value without refreshing the page, and send HTTP requests to the ESP32 to control the servo motor based on the slider position.

💡Arduino Servo Library

The Arduino Servo Library is a collection of code functions that simplify controlling servo motors with Arduino-based devices like the ESP32. In the video, this library is used to simplify the control of the servo motor, allowing the user to easily adjust the motor’s position by sending commands through code.

💡Ajax

Ajax is a web development technique that allows web pages to update asynchronously by exchanging data with a server behind the scenes. In the video, Ajax is used to send HTTP requests to the ESP32 without refreshing the webpage, allowing for a smooth and interactive control experience when adjusting the servo motor's position using the slider.

Highlights

Introduction to building a web server with ESP32 to control a servo motor using a slider.

Explanation of servo motors, including their three wires: power, ground, and signal.

Servo motors can be powered directly from ESP32 for small servos, but larger setups may require an external power supply.

Connecting the servo: power to V-in pin, ground to ESP32 ground pin, and signal wire to a PWM pin (GPIO 13).

Servos are controlled using pulse width modulation (PWM), which sets the shaft's position.

The ESP32 Arduino Servo library simplifies the process of controlling servos.

In the Arduino IDE, select the ESP32 board and use the Servo library to control servo movement.

The example sketch rotates the servo between 0 and 180 degrees using the .write() method in the Servo object.

Explanation of building a web server with ESP32 to control the servo remotely.

Using a slider in HTML with min/max attributes to control the servo's position between 0 and 180 degrees.

Implementing JavaScript in the web page to send an HTTP request to the ESP32 to adjust the servo's position based on slider value.

AJAX is used to send the slider value to the ESP32 without refreshing the web page.

Code demonstration: retrieving the slider position from the HTTP GET request and adjusting the servo accordingly.

Converting the slider value from a string to an integer and using the .write() method to update the servo position.

Final implementation: Upload the code, open the web page, and control the servo's position via the slider in real-time.

Transcripts

in this video you'll learn how to build

a website word with the ESP 32 that

controls the shaft position of a servo

motor using a slider first we'll take a

quick look our now to control a servo

with the ESP 32 and then we'll build a

web server to control it remotely servo

motors have three wires power ground and

signal the power is usually read the

ground is black or brown and the signal

wire is frequently yellow orange or

white

when using a small servo like this one

you can power it directly from the ESP

32 but if you're using more than one

servo or other types you'll probably

need to power up your servos using an

external power supply if you're using a

similar servo connect the ground pin to

the ESP 32 ground pin the power to the

ESP 32 V in pin and the signal should be

connect to pwm pin in our examples we'll

connect the signal wire to GPIO 13 so

you can follow this schematic diagram to

wire your servo motor the selfhood shaft

can be positioned in various angles from

0 to 180 degrees servos are controlled

using a pulse width modulation signal

this means that the PWM signal sent to

the motor will determine the shafts

position to control the motor you can

simply use the PWM capabilities of the

ESP 32 by sending a 50-yard signal with

the appropriate pulse width or you can

use a library to make our life much

simpler we'll use the ESP 32 arduino

servo library this library uses the same

interface as the arduino servo library

so if you've controlled a servo motor

with an Arduino before this is not new

for you download the e SP 32 arduino

servo library and zip the file

rename the folder by removing all the

dashes and then move the folder to your

Arduino IV installation libraries folder

after installing the library go to your

arduino ide make sure you have the ESP

32 board selected and then go to file

examples servo ESB 32 and opened the

simple servo sketch this sketch rotates

the servo 180 degrees to one side and

180 degrees to the other let's see how

it works

first you need to include the self

library then you need to assign a PWM

signal to your servo motor for our test

we'll be using GPIO 13 so change this

variable from 4 to 13 next you need to

create a servo object in this case it's

called silver one in the setup you

initialize the serial communication for

debugging purposes and attach the GPI

we've defined earlier to the servo

object in the loop we change the motor

shaft position from 0 to 180 degrees and

then from 180 degrees to 0 to set the

shaft to a particular position you just

need to use the dot right method in the

servo object you pass as an argument an

ink number with the position in degrees

a protocol to RESP 32 after uploading

the code you should see the motor shaft

rotating to one side and then to the

other now that you know how to control a

server with the ESP 32 let's create the

web server to control it the server will

build contains a slider from 0 to 180

that you can adjust to control the servo

shaft position the current slider value

is automatically updated in the web page

as well as the shaft position without a

need to refresh the web page for this we

use Ajax to send an HTTP request to the

ESP 32 on the background let's start by

taking a look at the HTML text the ESP

32

need to send your browser each tml page

for this project involves creating a

slider to create a slider in HTML you

use the input tag the input tag

specifies a field where the user can

enter data there are a wide variety of

input types to define a slider use the

type attribute with a range value in a

slider you also need to define the

minimum and the maximum range using the

min and Max attributes you also need to

define other attributes like the class

to style the slider the ID to update the

current position displayed on the

webpage and finally the unchanged

attribute to call the servo function to

send an HTTP request to the ESP 32 when

the slider moves next add some

JavaScript code to your HTML file using

the script tags this part of the code

plates the web page with a current

slider position and these lines make an

HTTP request on the ESP IP address in

this specific URL path for example when

the slider is at 0 you make an HTTP

request on this URL and when the slider

is at 180 degrees you left something

like this this way when the ESB 32

receives the get request it can retrieve

the value parameter in the URL and move

the servo motor to the right position

now we need to include this HTML text in

the sketch and rotate the servo

accordingly this code does precisely

that copy to your Arduino IDE but don't

upload it yet first we'll take a quick

look on how it works we've covered how

to build a web server in great detail in

previous videos so I'll just take a look

at the parts that are relevant for this

example we start by including the server

library and create a servo object called

my servo we also create a variable to

all the GPIO number the service connect

to in this case GPIO 13 don't forget

that you need to modify

two lines to include your network

credentials then create a couple of

variables that will be used to extract

the slider position from the HTTP GET

request in the setup you need to attach

the servo to GPIO 13 with a my server

data touch in this part of the loop you

need to create the web server and send

the HTML text to display the web page

then this part of the code retrieves the

slider value from the HTTP request when

you move the slider you make an HTTP

request on this URL that contains the

slider position between the equal and a

percent signs we save the slider

position value in the value string

variable then we set the serval to that

specific position using the my servo dot

right with a value string variable as an

argument the value string variable is a

string so use the - int method to

convert it to an int now you can upload

the culture ESP 30 to make sure you have

the right world and comport selected

after uploading the code open the serial

monitor at the body 8 of 11 5200 press

the ESP 30 to enable button to restart

the board and copy the ESP IP address

open your browser pass the ESP IP

address and you should see this webpage

move the slider to control the servo

motor in the serial monitor you can also

see the HTTP request you're sending to

the ESP 32 when you move the slider

experiment with your web server for a

while to see if it's working as you can

see it works as expected in summary in

this video of learn how to control a

servo motor with the ESP 32 and now to

create a web server with a slider to

control its position this is just an

example or now to control a servo motor

instead of a slider you can use a text

input field several buttons with

predefined angles

or any other suitable input fields