ESP32 Servo Motor Web Server with Arduino IDE
Summary
TLDRThis 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
🚀 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.
💻 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.
Mindmap
Keywords
💡ESP32
💡Servo motor
💡PWM (Pulse Width Modulation)
💡GPIO (General Purpose Input Output)
💡Web server
💡Slider
💡HTTP request
💡JavaScript
💡Arduino Servo Library
💡Ajax
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
Посмотреть больше похожих видео
Arduino Self-Driving Car Lesson 3: Controlling Motor Speed
Camera Car With Pan Tilt Control | ESP32Cam
CANGGIH!!! Cara buat Kunci pintu Pakai PASSWORD
شرح طريقة تحكم step motor من خلال الاردوينو Arduino
SCARA Robot | How To Build Your Own Arduino Based Robot
Fire Fighting Robot, Fire Fighting Robotic Car, New Electronics Project #science #shorts
5.0 / 5 (0 votes)