{"id":61334,"date":"2024-06-13T10:51:00","date_gmt":"2024-06-13T10:51:00","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=61334"},"modified":"2024-06-13T14:13:06","modified_gmt":"2024-06-13T14:13:06","slug":"esp32-servo-motor-web-server-arduino-ide","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-servo-motor-web-server-arduino-ide\/","title":{"rendered":"ESP32 Servo Motor Web Server with Arduino IDE"},"content":{"rendered":"\n<p>In this tutorial, you&#8217;ll learn how to build a web server with the ESP32 that controls the shaft\u2019s position of a servo motor using a slider. First, we\u2019ll take a quick look at how to control a servo with the ESP32, and then we\u2019ll build the web server.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/ESP32-Servo-Motor-Web-Server.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Servo Motor Web Server with Arduino IDE\" class=\"wp-image-146306\" style=\"width:812px;height:auto\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/ESP32-Servo-Motor-Web-Server.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/ESP32-Servo-Motor-Web-Server.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/ESP32-Servo-Motor-Web-Server.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/ESP32-Servo-Motor-Web-Server.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclgray\"><em>Updated 13 June, 2024<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Parts Required<\/h2>\n\n\n\n<p>To follow this tutorial, you need the following parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP32 DOIT DEVKIT V1 Board<\/a>&nbsp;&#8211; read <a href=\"https:\/\/makeradvisor.com\/esp32-development-boards-review-comparison\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP32 Development Boards Review and Comparison<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/micro-servo-motor-tool\/\" target=\"_blank\" rel=\"noopener noreferrer\">Micro Servo Motor &#8211; S0009\/S90<\/a>&nbsp;or <a href=\"https:\/\/makeradvisor.com\/tools\/servo-motor-tool\/\" target=\"_blank\" rel=\"noopener noreferrer\">Servo Motor &#8211; S0003<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jumper wires<\/a><\/li>\n<\/ul>\n\n\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Connecting the Servo Motor to the ESP32<\/h2>\n\n\n\n<p>Servo motors have three wires: power, ground, and signal. The power is usually red, the GND is black or brown, and the signal wire is usually yellow, orange, or white.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/servo-motor-pinout.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Servo motor pinout\" class=\"wp-image-146288\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/servo-motor-pinout.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/servo-motor-pinout.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><span style=\"font-weight: 400;\"><strong>Wire<\/strong><\/span><\/td><td><strong>Color<\/strong><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Power<\/span><\/td><td><span style=\"font-weight: 400;\">Red<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">GND<\/span><\/td><td><span style=\"font-weight: 400;\">Black, or brown<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Signal<\/span><\/td><td><span style=\"font-weight: 400;\">Yellow, orange, or white<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>When using a small servo like the S0009 as shown in the figure below, you can power it directly from the ESP32.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/hobby-servo-motors.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Hobby servo motoros s0009\" class=\"wp-image-146287\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/hobby-servo-motors.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/hobby-servo-motors.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>But if you\u2019re using more than one servo or a different model, you\u2019ll probably need to power up your servos using an external power supply.<\/p>\n\n\n\n<p>If you\u2019re using a small servo like the S0009, you need to connect:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GND -&gt; ESP32 <span class=\"rnthl rntcblack\">GND<\/span> pin;<\/li>\n\n\n\n<li>Power -&gt; ESP32 <span class=\"rnthl rntcred\">VIN<\/span> pin;<\/li>\n\n\n\n<li>Signal -&gt; <span class=\"rnthl rntcorange\">GPIO 13<\/span> (or any PWM pin).<\/li>\n<\/ul>\n\n\n\n<p><strong>Note: <\/strong> in this case, you can use any ESP32 GPIO, because any GPIO can produce a PWM signal. However, we don\u2019t recommend using GPIOs 9, 10, and 11 which are connected to the integrated SPI flash and are not recommended for other uses.<\/p>\n\n\n\n<p><strong>Recommended reading:<\/strong><a href=\"https:\/\/randomnerdtutorials.com\/esp32-pinout-reference-gpios\/\"> ESP32 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schematic<\/h2>\n\n\n\n<p>In our examples, we\u2019ll connect the signal wire to <span class=\"rnthl rntcorange\">GPIO 13<\/span>. So, you can follow the next schematic diagram to wire your servo motor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/esp32-servo-wiring_bb.png?resize=1024%2C487&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Wiring ESP32 to Servo Motor SG90\" class=\"wp-image-146297\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/esp32-servo-wiring_bb.png?resize=1024%2C487&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/esp32-servo-wiring_bb.png?resize=300%2C143&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/esp32-servo-wiring_bb.png?resize=768%2C365&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/esp32-servo-wiring_bb.png?w=1353&amp;quality=100&amp;strip=all&amp;ssl=1 1353w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><em>(This schematic uses the <a href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP32 DEVKIT V1<\/a> module version with 36 GPIOs \u2013 if you\u2019re using another model, please check the pinout for the board you\u2019re using.)<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Control a Servo Motor?<\/h2>\n\n\n\n<p>You can position the servo\u2019s shaft at different angles from 0 to 180\u00ba. Servos are controlled using a pulse width modulation (PWM) signal. The duty cycle of the PWM signal sent to the motor will determine the shaft\u2019s position.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"199\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/0-180-degrees.png?resize=500%2C199&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-61336\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/0-180-degrees.png?w=500&amp;quality=100&amp;strip=all&amp;ssl=1 500w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/0-180-degrees.png?resize=300%2C119&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/0-180-degrees.png?resize=250%2C100&amp;quality=100&amp;strip=all&amp;ssl=1 250w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p>To control the motor you can simply use the PWM capabilities of the ESP32 by sending a 50Hz signal with the appropriate pulse width. Or you can use a library to make this task much simpler.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/ESP32-Servo-Motor.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 with Servo Motor\" class=\"wp-image-146291\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/ESP32-Servo-Motor.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/ESP32-Servo-Motor.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Preparing the Arduino IDE<\/h2>\n\n\n\n<p>Before proceeding make sure you have installed the ESP32 boards in your Arduino IDE and the ServoESP32 Library.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">ESP32 with Arduino IDE<\/h3>\n\n\n\n<p>We\u2019ll program the ESP32 using Arduino IDE. So, make sure you have the ESP32 add-on installed. Follow the next tutorial if you haven\u2019t already:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-esp32-arduino-ide-2-0\/\" title=\"\">Install the ESP32 Board in Arduino IDE 2<\/a><\/li>\n<\/ul>\n\n\n\n<p>Alternatively, you may also want to program the ESP32 using VS Code and the platformIO extension:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/vs-code-platformio-ide-esp32-esp8266-arduino\/\">Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Installing the ESP32Servo Library<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/madhephaestus.github.io\/ESP32Servo\/\" target=\"_blank\" rel=\"noopener\" title=\"\">ESP32Servo <\/a>Library makes it easier to control a servo motor with your ESP32 using the Arduino IDE.&nbsp;Follow the next steps to install the library in the Arduino IDE:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Sketch &gt; Include Library &gt; Manage Libraries&#8230;<\/li>\n\n\n\n<li>Search for <strong>ESP32Servo<\/strong>.<\/li>\n\n\n\n<li>Install the library.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"815\" height=\"433\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/install-esp32-servo-library-arduino-ide.png?resize=815%2C433&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install ESP32 Servo library arduino ide\" class=\"wp-image-158928\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/install-esp32-servo-library-arduino-ide.png?w=815&amp;quality=100&amp;strip=all&amp;ssl=1 815w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/install-esp32-servo-library-arduino-ide.png?resize=300%2C159&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/install-esp32-servo-library-arduino-ide.png?resize=768%2C408&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 815px) 100vw, 815px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Testing an Example<\/h2>\n\n\n\n<p>After installing the library, go to your Arduino IDE and copy the following code.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-servo-motor-web-server-arduino-ide\/\n  Based on the ESP32Servo Sweep Example\n*********\/\n\n#include &lt;ESP32Servo.h&gt;\n\nstatic const int servoPin = 13;\n\nServo servo1;\n\nvoid setup() {\n\n  Serial.begin(115200);\n  servo1.attach(servoPin);\n}\n\nvoid loop() {\n  for(int posDegrees = 0; posDegrees &lt;= 180; posDegrees++) {\n    servo1.write(posDegrees);\n    Serial.println(posDegrees);\n    delay(20);\n  }\n\n  for(int posDegrees = 180; posDegrees &gt;= 0; posDegrees--) {\n    servo1.write(posDegrees);\n    Serial.println(posDegrees);\n    delay(20);\n  }\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_Servo_Sweep.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Understanding the code<\/h3>\n\n\n\n<p>This sketch rotates the servo 180 degrees to one side, and 180 degrees to the other. Let\u2019s see how it works.<\/p>\n\n\n\n<p>First, you need to include the Servo library:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;ESP32Servo.h&gt;<\/code><\/pre>\n\n\n\n<p>Define the pin connected to the servo data pin. In this case, we&#8217;re connecting to GPIO 13, but you can use any other suitable pins.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>static const int servoPin = 13;<\/code><\/pre>\n\n\n\n<p><br>Learn more about the ESP32 GPIOs: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-pinout-reference-gpios\/\" title=\"\">ESP32 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\n<p>Then, you need to create a <span class=\"rnthl rntliteral\">Servo<\/span> object. In this case, it is called <span class=\"rnthl rntliteral\">servo1<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>Servo servo1;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">setup()<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">setup()<\/span>, you initialize a serial communication for debugging purposes and attach <span class=\"rnthl rntcorange\">GPIO 13<\/span> to the servo object.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void setup() {\n  Serial.begin(115200);\n  servo1.attach(servoPin);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">loop()<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">loop()<\/span>, we change the motor\u2019s shaft position from 0 to 180 degrees, and then from 180 to 0 degrees. To set the shaft to a particular position, you just need to use the <span class=\"rnthl rntliteral\">write()<\/span> method on the <span class=\"rnthl rntliteral\">Servo<\/span>&nbsp;object. You pass as an argument, an integer number with the position in degrees.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>myservo.write(pos);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Testing the Sketch<\/h3>\n\n\n\n<p>Upload the code to your ESP32. After uploading the code, you should see the motor\u2019s shaft rotating to one side and then, to the other.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-3.jpg?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" data-id=\"146294\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-3.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"servo motor\" class=\"wp-image-146294\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-3.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-3.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-2.jpg?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" data-id=\"146293\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-2.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"servo motor\" class=\"wp-image-146293\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-2.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-2.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-1.jpg?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" data-id=\"146292\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-1.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"servo motor\" class=\"wp-image-146292\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-1.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/servo-motor-1.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating the ESP32 Web Server<\/h2>\n\n\n\n<p>Now that you know how to control a servo with the ESP32, let\u2019s create the web server to control it.&nbsp;The web server we\u2019ll build:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It contains a slider from 0 to 180, that you can adjust to control the servo&#8217;s shaft position;<\/li>\n\n\n\n<li>The current slider value is automatically updated on the web page without the need to refresh it. For this, we use AJAX to send HTTP requests to the ESP32 in the background;<\/li>\n\n\n\n<li>Refreshing the web page doesn\u2019t change the slider value, or the shaft position.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"477\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32-Web-Server-Servo-Motor.png?resize=786%2C477&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Control Servo Motor with Web Server\" class=\"wp-image-146295\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32-Web-Server-Servo-Motor.png?w=786&amp;quality=100&amp;strip=all&amp;ssl=1 786w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32-Web-Server-Servo-Motor.png?resize=300%2C182&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32-Web-Server-Servo-Motor.png?resize=768%2C466&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 786px) 100vw, 786px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclgreen\"><strong><a href=\"https:\/\/randomnerdtutorials.com\/build-web-servers-esp32-esp8266-ebook\/\">You may also like<\/a><\/strong>: <a href=\"https:\/\/randomnerdtutorials.com\/build-web-servers-esp32-esp8266-ebook\/\" title=\"\">Build Web Servers with ESP32 and ESP8266 eBook<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating the HTML Page<\/h2>\n\n\n\n<p>Let\u2019s start by taking a look at the HTML text the ESP32 needs to send to your browser.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n  &lt;link rel=&quot;icon&quot; href=&quot;data:,&quot;&gt;\n  &lt;style&gt;\n    body {\n      text-align: center;\n      font-family: &quot;Trebuchet MS&quot;, Arial;\n      margin-left:auto;\n      margin-right:auto;\n    }\n    .slider {\n      width: 300px;\n    }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1&gt;ESP32 with Servo&lt;\/h1&gt;\n  &lt;p&gt;Position: &lt;span id=&quot;servoPos&quot;&gt;&lt;\/span&gt;&lt;\/p&gt;\n  &lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;180&quot; class=&quot;slider&quot; id=&quot;servoSlider&quot; onchange=&quot;servo(this.value)&quot;\/&gt;\n  &lt;script&gt;\n    var slider = document.getElementById(&quot;servoSlider&quot;);\n    var servoP = document.getElementById(&quot;servoPos&quot;);\n    servoP.innerHTML = slider.value;\n    slider.oninput = function() {\n      slider.value = this.value;\n      servoP.innerHTML = this.value;\n    }\n    $.ajaxSetup({timeout:1000});\n    function servo(pos) {\n      $.get(&quot;\/?value=&quot; + pos + &quot;&amp;&quot;);\n      {Connection: close};\n    }\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Course\/raw\/master\/code\/Servo\/slider.html\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Slider<\/h3>\n\n\n\n<p>The HTML page for this project involves creating a slider. To create a slider in HTML you use the <span style=\"color: #333399;\">&lt;input&gt;<\/span> tag. The <span style=\"color: #333399;\">&lt;input&gt;<\/span> tag specifies a field where the user can enter data.<\/p>\n\n\n\n<p>There are a wide variety of input types. To define a slider, use the \u201c<strong>type<\/strong>\u201d attribute with the \u201c<strong>range<\/strong>\u201d value. In a slider, you also need to define the minimum and the maximum range using the \u201c<strong>min<\/strong>\u201d and \u201c<strong>max<\/strong>\u201d attributes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;input type=\"range\" min=\"0\" max=\"180\" class=\"slider\" id=\"servoSlider\" onchange=\"servo(this.value)\"\/&gt;<\/code><\/pre>\n\n\n\n<p>You also need to define other attributes like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the <strong>class<\/strong> to style the slider<\/li>\n\n\n\n<li>the <strong>id<\/strong> to update the current position displayed on the web page<\/li>\n\n\n\n<li>And finally, the <strong>onchange<\/strong> attribute to call the servo function to send an HTTP request to the ESP32 when the slider moves.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Adding JavaScript to the HTML File<\/h3>\n\n\n\n<p>Next, you need to add some JavaScript code to your HTML file using the <span style=\"color: #333399;\">&lt;script><\/span> and <span style=\"color: #333399;\">&lt;\/script<\/span>> tags. This snippet of the code updates the web page with the current slider position:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>var slider = document.getElementById(\"servoSlider\");\nvar servoP = document.getElementById(\"servoPos\");\nservoP.innerHTML = slider.value;\nslider.oninput = function() {\n \u00a0slider.value = this.value;\n\u00a0 servoP.innerHTML = this.value;\n}<\/code><\/pre>\n\n\n\n<p>And the next lines make an HTTP GET request on the ESP IP address in this specific URL path <span class=\"rnthl rntliteral\">\/?value=[SLIDER_POSITION]&amp;<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>$.ajaxSetup({timeout:1000});\nfunction servo(pos) {\n  $.get(\"\/?value=\" + pos + \"&amp;\");\n}<\/code><\/pre>\n\n\n\n<p>For example, when the slider is at <strong>0<\/strong>, you make an HTTP GET request on the following URL:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted language-html\">http:\/\/192.168.1.135\/?value=<strong>0<\/strong>&amp;<\/pre>\n\n\n\n<p>And when the slider is at <strong>180<\/strong> degrees, you\u2019ll have something as follows:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted language-html\">http:\/\/192.168.1.135\/?value=<strong>180<\/strong>&amp;<\/pre>\n\n\n\n<p>This way, when the ESP32 receives the GET request, it can get the <span class=\"rnthl rntliteral\">value<\/span> parameter in the URL and move the servo motor accordingly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Code<\/h2>\n\n\n\n<p>Now, we need to include the previous HTML text in the sketch and rotate the servo accordingly. This next sketch does precisely that.<\/p>\n\n\n\n<p>Copy the following code to your Arduino IDE, but don\u2019t upload it yet. First, we\u2019ll take a quick look at how it works.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-servo-motor-web-server-arduino-ide\/ \n*********\/\n\n#include &lt;WiFi.h&gt;\n#include &lt;ESP32Servo.h&gt;\n\nServo myservo;  \/\/ create servo object to control a servo\n\/\/ twelve servo objects can be created on most boards\n\n\/\/ GPIO the servo is attached to\nstatic const int servoPin = 13;\n\n\/\/ Replace with your network credentials\nconst char* ssid     = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ Set web server port number to 80\nWiFiServer server(80);\n\n\/\/ Variable to store the HTTP request\nString header;\n\n\/\/ Decode HTTP GET value\nString valueString = String(5);\nint pos1 = 0;\nint pos2 = 0;\n\n\/\/ Current time\nunsigned long currentTime = millis();\n\/\/ Previous time\nunsigned long previousTime = 0; \n\/\/ Define timeout time in milliseconds (example: 2000ms = 2s)\nconst long timeoutTime = 2000;\n\nvoid setup() {\n  Serial.begin(115200);\n\n  myservo.attach(servoPin);  \/\/ attaches the servo on the servoPin to the servo object\n\n  \/\/ Connect to Wi-Fi network with SSID and password\n  Serial.print(&quot;Connecting to &quot;);\n  Serial.println(ssid);\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(500);\n    Serial.print(&quot;.&quot;);\n  }\n  \/\/ Print local IP address and start web server\n  Serial.println(&quot;&quot;);\n  Serial.println(&quot;WiFi connected.&quot;);\n  Serial.println(&quot;IP address: &quot;);\n  Serial.println(WiFi.localIP());\n  server.begin();\n}\n\nvoid loop(){\n  WiFiClient client = server.available();   \/\/ Listen for incoming clients\n\n  if (client) {                             \/\/ If a new client connects,\n    currentTime = millis();\n    previousTime = currentTime;\n    Serial.println(&quot;New Client.&quot;);          \/\/ print a message out in the serial port\n    String currentLine = &quot;&quot;;                \/\/ make a String to hold incoming data from the client\n    while (client.connected() &amp;&amp; currentTime - previousTime &lt;= timeoutTime) { \/\/ loop while the client's connected\n      currentTime = millis();\n      if (client.available()) {             \/\/ if there's bytes to read from the client,\n        char c = client.read();             \/\/ read a byte, then\n        Serial.write(c);                    \/\/ print it out the serial monitor\n        header += c;\n        if (c == '\\n') {                    \/\/ if the byte is a newline character\n          \/\/ if the current line is blank, you got two newline characters in a row.\n          \/\/ that's the end of the client HTTP request, so send a response:\n          if (currentLine.length() == 0) {\n            \/\/ HTTP headers always start with a response code (e.g. HTTP\/1.1 200 OK)\n            \/\/ and a content-type so the client knows what's coming, then a blank line:\n            client.println(&quot;HTTP\/1.1 200 OK&quot;);\n            client.println(&quot;Content-type:text\/html&quot;);\n            client.println(&quot;Connection: close&quot;);\n            client.println();\n\n            \/\/ Display the HTML web page\n            client.println(&quot;&lt;!DOCTYPE html&gt;&lt;html&gt;&quot;);\n            client.println(&quot;&lt;head&gt;&lt;meta name=\\&quot;viewport\\&quot; content=\\&quot;width=device-width, initial-scale=1\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;link rel=\\&quot;icon\\&quot; href=\\&quot;data:,\\&quot;&gt;&quot;);\n            \/\/ CSS to style the on\/off buttons \n            \/\/ Feel free to change the background-color and font-size attributes to fit your preferences\n            client.println(&quot;&lt;style&gt;body { text-align: center; font-family: \\&quot;Trebuchet MS\\&quot;, Arial; margin-left:auto; margin-right:auto;}&quot;);\n            client.println(&quot;.slider { width: 300px; }&lt;\/style&gt;&quot;);\n            client.println(&quot;&lt;script src=\\&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\\&quot;&gt;&lt;\/script&gt;&quot;);\n                     \n            \/\/ Web Page\n            client.println(&quot;&lt;\/head&gt;&lt;body&gt;&lt;h1&gt;ESP32 with Servo&lt;\/h1&gt;&quot;);\n            client.println(&quot;&lt;p&gt;Position: &lt;span id=\\&quot;servoPos\\&quot;&gt;&lt;\/span&gt;&lt;\/p&gt;&quot;);          \n            client.println(&quot;&lt;input type=\\&quot;range\\&quot; min=\\&quot;0\\&quot; max=\\&quot;180\\&quot; class=\\&quot;slider\\&quot; id=\\&quot;servoSlider\\&quot; onchange=\\&quot;servo(this.value)\\&quot; value=\\&quot;&quot;+valueString+&quot;\\&quot;\/&gt;&quot;);\n            \n            client.println(&quot;&lt;script&gt;var slider = document.getElementById(\\&quot;servoSlider\\&quot;);&quot;);\n            client.println(&quot;var servoP = document.getElementById(\\&quot;servoPos\\&quot;); servoP.innerHTML = slider.value;&quot;);\n            client.println(&quot;slider.oninput = function() { slider.value = this.value; servoP.innerHTML = this.value; }&quot;);\n            client.println(&quot;$.ajaxSetup({timeout:1000}); function servo(pos) { &quot;);\n            client.println(&quot;$.get(\\&quot;\/?value=\\&quot; + pos + \\&quot;&amp;\\&quot;); {Connection: close};}&lt;\/script&gt;&quot;);\n           \n            client.println(&quot;&lt;\/body&gt;&lt;\/html&gt;&quot;);     \n            \n            \/\/GET \/?value=180&amp; HTTP\/1.1\n            if(header.indexOf(&quot;GET \/?value=&quot;)&gt;=0) {\n              pos1 = header.indexOf('=');\n              pos2 = header.indexOf('&amp;');\n              valueString = header.substring(pos1+1, pos2);\n              \n              \/\/Rotate the servo\n              myservo.write(valueString.toInt());\n              Serial.println(valueString); \n            }         \n            \/\/ The HTTP response ends with another blank line\n            client.println();\n            \/\/ Break out of the while loop\n            break;\n          } else { \/\/ if you got a newline, then clear currentLine\n            currentLine = &quot;&quot;;\n          }\n        } else if (c != '\\r') {  \/\/ if you got anything else but a carriage return character,\n          currentLine += c;      \/\/ add it to the end of the currentLine\n        }\n      }\n    }\n    \/\/ Clear the header variable\n    header = &quot;&quot;;\n    \/\/ Close the connection\n    client.stop();\n    Serial.println(&quot;Client disconnected.&quot;);\n    Serial.println(&quot;&quot;);\n  }\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_WiFi_Web_Server_Servo.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How the Code Works<\/h2>\n\n\n\n<p>First, we include the <span class=\"rnthl rntliteral\">Servo<\/span> library and create a <span class=\"rnthl rntliteral\">Servo<\/span> object called <span class=\"rnthl rntliteral\">myservo<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;ESP32Servo.h&gt; \nServo myservo; \/\/ create servo object to control a servo<\/code><\/pre>\n\n\n\n<p>We also create a variable to hold the GPIO number the servo is connected to. In this case, <span class=\"rnthl rntcorange\">GPIO13<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const int servoPin = 13;<\/code><\/pre>\n\n\n\n<p>Don\u2019t forget that you need to modify the following two lines to include your network credentials.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* ssid     = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<p>Then, create variables that will be used to extract the slider position from the HTTP request.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Decode HTTP GET value \nString valueString = String(5); \nint pos1 = 0; \nint pos2 = 0;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">setup()<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">setup()<\/span>, you need to attach the servo to the GPIO it is connected to, with <span class=\"rnthl rntliteral\">myservo.attach()<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>myservo.attach(servoPin); \/\/ attaches the servo on the servoPin to the servo object<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">loop()<\/h3>\n\n\n\n<p>The first part of the <span class=\"rnthl rntliteral\">loop()<\/span>&nbsp;creates the web server and sends the HTML text to display the web page. We use the same method we&#8217;ve used <a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-arduino-ide\/\" title=\"\">in this web server project<\/a>.<\/p>\n\n\n\n<p>The following part of the code retrieves the slider value from the HTTP request.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted language-c\">\/\/GET \/?value=180&amp; HTTP\/1.1\nif(header.indexOf(\"GET \/?value=\")&gt;=0) {\n  pos1 = header.indexOf('=');\n  pos2 = header.indexOf('&amp;');\n  valueString = header.substring(pos1+1, pos2);<\/pre>\n\n\n\n<p>When you move the slider, you make an HTTP request on the following URL, that contains the slider position between the <span class=\"rnthl rntliteral\">=<\/span> and <span class=\"rnthl rntliteral\">&amp;<\/span> signs.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted language-c\">http:\/\/your-esp-ip-address\/?value=<strong>[SLIDER_POSITION]<\/strong>&amp;<\/pre>\n\n\n\n<p>The slider position value is saved in the <span class=\"rnthl rntliteral\">valueString<\/span> variable.<\/p>\n\n\n\n<p>Then, we set the servo to that specific position using <span class=\"rnthl rntliteral\">myservo.write()<\/span> with the <span class=\"rnthl rntliteral\">valueString<\/span> variable as an argument. The <span class=\"rnthl rntliteral\">valueString<\/span> variable is a string, so we need to use the <span class=\"rnthl rntliteral\">toInt()<\/span> method to convert it into an integer number &#8211; the data type accepted by the <span class=\"rnthl rntliteral\">write()<\/span> method.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>myservo.write(valueString.toInt());<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Testing the Web Server<\/h3>\n\n\n\n<p>Now you can upload the code to your ESP32 &#8211; make sure you have the right board and COM port selected. Also don&#8217;t forget to modify the code to include your network credentials.<\/p>\n\n\n\n<p>After uploading the code, open the Serial Monitor at a baud rate of 115200. Press the ESP32 EN\/RST button to restart the board, and copy the ESP32 IP address that shows up on the Serial Monitor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"723\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/serial-monitor-servo-ip-address.png?resize=706%2C723&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Servo Web Server IP Address Serial Monitor\" class=\"wp-image-146279\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/serial-monitor-servo-ip-address.png?w=706&amp;quality=100&amp;strip=all&amp;ssl=1 706w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/serial-monitor-servo-ip-address.png?resize=293%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 293w\" sizes=\"(max-width: 706px) 100vw, 706px\" \/><\/figure><\/div>\n\n\n<p>Open your browser, paste the ESP IP address, and you should see the web page you created previously. Move the slider to control the servo motor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32-Servo-Motor-Web-Server-Demonstration.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Servo Web Server Demonstration\" class=\"wp-image-146296\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32-Servo-Motor-Web-Server-Demonstration.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32-Servo-Motor-Web-Server-Demonstration.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>In the Serial Monitor, you can also see the HTTP requests you\u2019re sending to the ESP32 when you move the slider.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"380\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/get-slider-value-serial-monitor.png?resize=706%2C380&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Servo Web Server - Get Slider Value Serial Monitor\" class=\"wp-image-146280\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/get-slider-value-serial-monitor.png?w=706&amp;quality=100&amp;strip=all&amp;ssl=1 706w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/get-slider-value-serial-monitor.png?resize=300%2C161&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 706px) 100vw, 706px\" \/><\/figure><\/div>\n\n\n<p>Experiment with your web server for a while to see if it\u2019s working properly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Watch the Video Tutorial and Project Demo<\/h2>\n\n\n\n<p><em>This guide is available in video format (watch below) and in written format (continue reading).<\/em><\/p>\n\n\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/_WqfNyE_pt8?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In summary, in this tutorial, you\u2019ve learned how to control a servo motor with the ESP32 and how to create a web server with a slider to control its position.<\/p>\n\n\n\n<p>This is just an example of how 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.<\/p>\n\n\n\n<p><em>This is an excerpt from our course: <a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE<\/a>. If you like ESP32 and want to learn more about it, we recommend enrolling in <a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE course<\/a>.<\/em><\/p>\n\n\n\n<p>We have tutorials on how to interface other motors with the ESP32:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-dc-motor-l298n-motor-driver-control-speed-direction\/\">ESP32 with <strong>DC Motor<\/strong> and L298N Motor Driver \u2013 Control Speed and Direction<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-stepper-motor-28byj-48-uln2003\/\">ESP32 with <strong>Stepper Motor<\/strong> (28BYJ-48 and ULN2003 Motor Driver)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/stepper-motor-esp32-web-server\/\">ESP32 Web Server: Control <strong>Stepper Motor<\/strong> (HTML Form)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/stepper-motor-esp32-websocket\/\">ESP32 Web Server: Control <strong>Stepper Motor<\/strong> (WebSocket)<\/a><\/li>\n<\/ul>\n\n\n\n<p>Learn more about the ESP32 and about building web servers with our resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE (eBook)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/build-web-servers-esp32-esp8266-ebook\/\">Build Web Servers with ESP32 and ESP8266 (eBook)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32\/\">Free ESP32 Projects and Tutorials\u2026<\/a><\/li>\n<\/ul>\n\n\n\n<p>We hope you&#8217;ve found this tutorial useful.<\/p>\n\n\n\n<p>Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you&#8217;ll learn how to build a web server with the ESP32 that controls the shaft\u2019s position of a servo motor using a slider. First, we\u2019ll take a &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32 Servo Motor Web Server with Arduino IDE\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-servo-motor-web-server-arduino-ide\/#more-61334\" aria-label=\"Read more about ESP32 Servo Motor Web Server with Arduino IDE\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":5,"featured_media":146306,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[281,276,277,299,264],"tags":[],"class_list":["post-61334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32-project","category-esp32","category-esp32-arduino-ide","category-0-esp32","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/ESP32-Servo-Motor-Web-Server.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/61334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=61334"}],"version-history":[{"count":8,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/61334\/revisions"}],"predecessor-version":[{"id":158937,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/61334\/revisions\/158937"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/146306"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=61334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=61334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=61334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}