{"id":149533,"date":"2024-07-17T10:25:51","date_gmt":"2024-07-17T10:25:51","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=149533"},"modified":"2025-03-14T12:11:04","modified_gmt":"2025-03-14T12:11:04","slug":"esp32-web-server-dc-motor-arduino","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-web-server-dc-motor-arduino\/","title":{"rendered":"ESP32 Web Server: Control a DC Motor (Arduino IDE)"},"content":{"rendered":"\n<p>In this guide, we&#8217;ll build a web server with the ESP32 to control a DC motor remotely. The web server will serve a web page with buttons to make the motor spin forward, backward, and stop. To control the motors we&#8217;ll use the L298N motor driver and the ESP32 will be programmed using Arduino IDE.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-DCMotor-Web-Server.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Web Server Control a DC Motor Arduino IDE\" class=\"wp-image-149677\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-DCMotor-Web-Server.jpg?w=1920&amp;quality=100&amp;strip=all&amp;ssl=1 1920w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-DCMotor-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\/03\/ESP32-DCMotor-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\/03\/ESP32-DCMotor-Web-Server.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-DCMotor-Web-Server.jpg?resize=1536%2C864&amp;quality=100&amp;strip=all&amp;ssl=1 1536w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p>To better understand how this project works, we recommend taking a look at our DC motor getting started guide 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\/\" title=\"\">ESP32 with DC Motor and L298N Motor Driver \u2013 Control Speed and Direction<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prerequisites\">Prerequisites<\/h2>\n\n\n\n<p>Before proceeding with the tutorial, make sure you check the following prerequisites.<\/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\/03\/ESP32-Control-DC-Motor-Circuit.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Control DC Motor Diagram\" class=\"wp-image-149609\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Control-DC-Motor-Circuit.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Control-DC-Motor-Circuit.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<h3 class=\"wp-block-heading\">1) Parts Required<\/h3>\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\/mini-dc-motor\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Mini DC Motor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/l298n-motor-driver\/\" target=\"_blank\" rel=\"noopener\" title=\"\">L298N Motor Driver<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP32&nbsp;<\/a>(read&nbsp;<a href=\"https:\/\/makeradvisor.com\/esp32-development-boards-review-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\">Best ESP32 Development Boards<\/a>)<\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Jumper Wires<\/a><\/li>\n\n\n\n<li>External power supply for the motors\u2014we&#8217;ll be using <a href=\"https:\/\/makeradvisor.com\/tools\/4x-aa-battery-holder\/\" target=\"_blank\" rel=\"noopener\" title=\"\">4xAA batteries<\/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<h3 class=\"wp-block-heading\">2) Arduino IDE and ESP32 Boards Add-on<\/h3>\n\n\n\n<p>We\u2019ll program the ESP32 using Arduino IDE. So, you must 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=\"\">Installing ESP32 Board in Arduino IDE 2<\/a><\/li>\n<\/ul>\n\n\n\n<p>If you want to use VS Code with the PlatformIO extension, follow the next tutorial instead to learn how to program the ESP32:<\/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 (Windows, Mac OS X, Linux Ubuntu)<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3) Install Libraries<\/h3>\n\n\n\n<p>We&#8217;ll build the web server using the following libraries:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncWebServer\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncWebServer&nbsp;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/ESP32Async\/AsyncTCP\" target=\"_blank\" rel=\"noopener\" title=\"\">AsyncTCP<\/a><\/li>\n<\/ul>\n\n\n\n<p>You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking the Library icon at the left sidebar.<\/p>\n\n\n\n<p>Search for <span class=\"rnthl rntliteral\">ESPAsyncWebServer<\/span> and install the <strong>ESPAsyncWebServer by ESP32Async<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"666\" height=\"586\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?resize=666%2C586&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Installing ESPAsyncWebServer ESP32 Arduino IDE\" class=\"wp-image-167890\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?w=666&amp;quality=100&amp;strip=all&amp;ssl=1 666w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?resize=300%2C264&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><\/figure><\/div>\n\n\n<p>Then, install the AsyncTCP library. Search for <span class=\"rnthl rntliteral\">AsyncTCP<\/span> and install the <strong>AsyncTCP by ESP32Async<\/strong>.<\/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=\"722\" height=\"586\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?resize=722%2C586&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Installing AsyncTCP ESP32 Arduino IDE\" class=\"wp-image-167886\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?w=722&amp;quality=100&amp;strip=all&amp;ssl=1 722w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?resize=300%2C243&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 722px) 100vw, 722px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">4) Schematic Diagram<\/h3>\n\n\n\n<p>The following schematic diagram shows how to connect a DC motor to the ESP32 using a L298N motor driver.<\/p>\n\n\n\n<p class=\"rntbox rntclgreen\">Not familiar with the L298N motor driver? Follow this tutorial first: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-servo-motor-web-server-arduino-ide\/\">ESP32 Servo Motor Web Server with Arduino IDE<\/a>.<\/p>\n\n\n\n<p>The motor we&#8217;ll control is connected to the motor A output pins, so we need to wire the ENABLEA, INPUT1, and INPUT2 pins of the motor driver to the ESP32. Follow the next schematic diagram to wire the DC motor and the L298N motor driver to the ESP32.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1113\" height=\"1458\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32_1_DC_Motor_bb.png?resize=1113%2C1458&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Wiring mini DC motor via L298N motor driver to ESP32\" class=\"wp-image-62008\" style=\"width:744px;height:auto\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32_1_DC_Motor_bb.png?w=1113&amp;quality=100&amp;strip=all&amp;ssl=1 1113w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32_1_DC_Motor_bb.png?resize=229%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 229w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32_1_DC_Motor_bb.png?resize=768%2C1006&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/ESP32_1_DC_Motor_bb.png?resize=782%2C1024&amp;quality=100&amp;strip=all&amp;ssl=1 782w\" sizes=\"(max-width: 1113px) 100vw, 1113px\" \/><\/figure><\/div>\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>LN298N Motor Driver<\/strong><\/td><td><strong>Input 1<\/strong><\/td><td><strong>Input 2<\/strong><\/td><td><strong>Enable<\/strong><\/td><td><strong>GND<\/strong><\/td><\/tr><tr><td><strong>ESP32<\/strong><\/td><td>GPIO 27<\/td><td>GPIO 26<\/td><td>GPIO 14<\/td><td>GND<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>We&#8217;re using the GPIOs on the previous table to connect to the motor driver. You can use any other suitable GPIOs as long as you modify the code accordingly. Learn more about the ESP32 GPIOs: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-pinout-reference-gpios\/\" title=\"\">ESP32 Pinout Reference Guide<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Powering the LN298N Motor Driver<\/h4>\n\n\n\n<p>The DC motor requires a big jump in current to move, so the motors should be powered using an external power source from the ESP32. As an example, we&#8217;re using 4AA batteries, but you can use any other suitable power supply. In this configuration, you can use a power supply with 6V to 12V.<\/p>\n\n\n\n<p>The switch between the battery holder and the motor driver is optional, but it is very handy to cut and apply power. This way you don&#8217;t need to connect and then disconnect the wires to save power constantly.<\/p>\n\n\n\n<p>We recommend soldering a 0.1uF ceramic capacitor to the positive and negative terminals of the DC motor, as shown in the diagram to help smooth out any voltage spikes. (Note: the motors also work without the capacitor.)<\/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\/02\/DC-Motor-with-capacitor.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Mini DC Motor with capacitor\" class=\"wp-image-148589\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/02\/DC-Motor-with-capacitor.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/02\/DC-Motor-with-capacitor.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\">Project Overview<\/h2>\n\n\n\n<p>The following image shows the web page you\u2019ll build for this project.<\/p>\n\n\n\n<p>The web page has three buttons to control the DC motor. Each button makes a request on a different URL so that the ESP32 knows which button was pressed and acts accordingly.<\/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=\"653\" height=\"530\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Web-Server-Control-DC-Motor.png?resize=653%2C530&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Control DC Motor\" class=\"wp-image-149538\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Web-Server-Control-DC-Motor.png?w=653&amp;quality=100&amp;strip=all&amp;ssl=1 653w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Web-Server-Control-DC-Motor.png?resize=300%2C243&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 653px) 100vw, 653px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Forward button: makes a request on the <span class=\"rnthl rntliteral\">\/forward<\/span> URL \u2014 the motor will spin forward<\/li>\n\n\n\n<li>Backward button: makes a request on the <span class=\"rnthl rntliteral\">\/backward<\/span> URL\u2014the motor will spin backward<\/li>\n\n\n\n<li>Stop button: makes a request on the <span class=\"rnthl rntliteral\">\/stop<\/span> URL\u2014the motor will stop<\/li>\n<\/ul>\n\n\n\n<p>For simplicity, we&#8217;ll save the HTML and CSS to build the web page on a variable on the Arduino sketch.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">ESP32 Web Server: Control a DC Motor &#8211; Arduino Sketch<\/h2>\n\n\n\n<p>The following code creates a web server that serves a web page with three different buttons that allows you to control a DC motor remotely via your web server.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\r\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\r\n  Complete instructions at https:\/\/RandomNerdTutorials.com\/esp32-web-server-dc-motor-arduino\/\r\n  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\r\n  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n*********\/\r\n\r\n#include &lt;Arduino.h&gt;\r\n#include &lt;WiFi.h&gt;\r\n#include &lt;AsyncTCP.h&gt;\r\n#include &lt;ESPAsyncWebServer.h&gt;\r\n\r\n\/\/ Motor A pins\r\nint motor1Pin1 = 27; \r\nint motor1Pin2 = 26; \r\nint enable1Pin = 14; \r\n\r\n\/\/ Replace with your network credentials\r\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\r\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\r\n\r\n\/\/ Create AsyncWebServer object on port 80\r\nAsyncWebServer server(80);\r\n\r\n\/\/HTML and CSS to build the web page\r\nconst char index_html[] PROGMEM = R&quot;rawliteral(\r\n  &lt;!DOCTYPE html&gt;\r\n  &lt;html&gt;\r\n    &lt;head&gt;\r\n      &lt;title&gt;ESP IOT DASHBOARD&lt;\/title&gt;\r\n      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\r\n      &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;style.css&quot;&gt;\r\n      &lt;link rel=&quot;icon&quot; type=&quot;image\/png&quot; href=&quot;favicon.png&quot;&gt;\r\n      &lt;script src=&quot;https:\/\/kit.fontawesome.com\/0294e3a09e.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;\r\n      &lt;style&gt;\r\n      html {\r\n      font-family: Arial, Helvetica, sans-serif;\r\n      text-align: center;\r\n      }\r\n      h1 {\r\n          font-size: 1.8rem;\r\n          color: white;\r\n      }\r\n\r\n      .topnav {\r\n          overflow: hidden;\r\n          background-color: #0A1128;\r\n      }\r\n      body {\r\n          margin: 0;\r\n      }\r\n      .content {\r\n          padding: 50px;\r\n      }\r\n      .card-grid {\r\n          max-width: 800px;\r\n          margin: 0 auto;\r\n          display: grid;\r\n          grid-gap: 2rem;\r\n          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n      }\r\n      .card {\r\n          background-color: white;\r\n          box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);\r\n      }\r\n      .card-title {\r\n          font-size: 1.2rem;\r\n          font-weight: bold;\r\n          color: #034078\r\n      }\r\n      .state {\r\n          font-size: 1.2rem;\r\n          color:#1282A2;\r\n      }\r\n      button {\r\n          border: none;\r\n          color: #FEFCFB;\r\n          padding: 15px 32px;\r\n          text-align: center;\r\n          font-size: 16px;\r\n          width: 150px;\r\n          border-radius: 4px;\r\n          transition-duration: 0.4s;\r\n      }\r\n      .button-on {\r\n          background-color:#034078;\r\n      }\r\n      .button-on:hover {\r\n          background-color: #1282A2;\r\n      }\r\n      .button-off {\r\n          background-color:#858585;\r\n      }\r\n      .button-off:hover {\r\n          background-color: #252524;\r\n      }\r\n      .button-stop {\r\n          background-color:#5e0f0f;\r\n          width: 100%;\r\n      }\r\n      .button-stop:hover {\r\n          background-color: #9b332c;\r\n      }\r\n      &lt;\/style&gt;\r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n      &lt;div class=&quot;topnav&quot;&gt;\r\n        &lt;h1&gt;CONTROL DC MOTOR&lt;\/h1&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=&quot;content&quot;&gt;\r\n        &lt;div class=&quot;card-grid&quot;&gt;\r\n          &lt;div class=&quot;card&quot;&gt;\r\n            &lt;p class=&quot;card-title&quot;&gt;&lt;i class=&quot;fa-solid fa-gear&quot;&gt;&lt;\/i&gt; DC Motor A&lt;\/p&gt;\r\n            &lt;p&gt;\r\n              &lt;a href=&quot;forward&quot;&gt;&lt;button class=&quot;button-on&quot;&gt;&lt;i class=&quot;fa-solid fa-arrow-up&quot;&gt;&lt;\/i&gt; FORWARD&lt;\/button&gt;&lt;\/a&gt;\r\n              &lt;a href=&quot;backward&quot;&gt;&lt;button class=&quot;button-off&quot;&gt;&lt;i class=&quot;fa-solid fa-arrow-down&quot;&gt;&lt;\/i&gt; BACKWARD&lt;\/button&gt;&lt;\/a&gt;\r\n            &lt;\/p&gt;\r\n            &lt;p&gt;\r\n              &lt;a href=&quot;stop&quot;&gt;&lt;button class=&quot;button-stop&quot;&gt;&lt;i class=&quot;fa-solid fa-stop&quot;&gt;&lt;\/i&gt; STOP&lt;\/button&gt;&lt;\/a&gt;\r\n            &lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n)rawliteral&quot;;\r\n\r\nvoid initWiFi() {\r\n  WiFi.mode(WIFI_STA);\r\n  WiFi.begin(ssid, password);\r\n  Serial.println(&quot;Connecting to WiFi ..&quot;);\r\n  while (WiFi.status() != WL_CONNECTED) {\r\n    Serial.print('.');\r\n    delay(1000);\r\n  }\r\n  Serial.println(WiFi.localIP());\r\n}\r\n\r\nvoid moveForward(){\r\n  Serial.println(&quot;Moving Forward&quot;);\r\n  digitalWrite(enable1Pin, HIGH);\r\n  digitalWrite(motor1Pin1, LOW);\r\n  digitalWrite(motor1Pin2, HIGH);\r\n}\r\n\r\nvoid moveBackward(){\r\n  Serial.println(&quot;Moving Backward&quot;);\r\n  digitalWrite(enable1Pin, HIGH);\r\n  digitalWrite(motor1Pin1, HIGH);\r\n  digitalWrite(motor1Pin2, LOW);\r\n}\r\n\r\nvoid stopMotor(){\r\n  Serial.print(&quot;Motor Stopped&quot;);\r\n  digitalWrite(enable1Pin, LOW);\r\n  digitalWrite(motor1Pin1, LOW);\r\n  digitalWrite(motor1Pin2, LOW);\r\n}\r\n\r\n\r\nvoid setup() {\r\n  Serial.begin(115200);\r\n\r\n  \/\/ Set motor pins as outputs\r\n  pinMode(motor1Pin1, OUTPUT);\r\n  pinMode(motor1Pin2, OUTPUT);\r\n  pinMode(enable1Pin, OUTPUT);\r\n\r\n  initWiFi();\r\n\r\n  server.on(&quot;\/&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\r\n    request-&gt;send(200, &quot;text\/html&quot;, index_html);\r\n  });\r\n\r\n  server.on(&quot;\/forward&quot;, HTTP_GET, [](AsyncWebServerRequest *request) {\r\n    moveForward();\r\n    request-&gt;send(200, &quot;text\/html&quot;, index_html);\r\n  }); \r\n\r\n  server.on(&quot;\/backward&quot;, HTTP_GET, [](AsyncWebServerRequest *request) {\r\n    moveBackward();\r\n    request-&gt;send(200, &quot;text\/html&quot;, index_html);\r\n  });\r\n\r\n  \/\/ Route to set GPIO state to LOW (inverted logic for ESP8266)\r\n  server.on(&quot;\/stop&quot;, HTTP_GET, [](AsyncWebServerRequest *request) {\r\n    stopMotor();\r\n    request-&gt;send(200, &quot;text\/html&quot;, index_html);\r\n  });\r\n\r\n  server.begin();\r\n}\r\n\r\nvoid loop() {\r\n  \r\n}\r\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_DC_Motor_Web_Server.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>You just need to insert your network credentials in the code and it will work straight away.<\/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_SSID\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How the Code Works<\/h3>\n\n\n\n<p>Continue reading to learn how the code works or skip to the <a href=\"#demonstration\" title=\"\">Demonstration <\/a>section.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Including Libraries<\/h4>\n\n\n\n<p>First, include the required libraries to connect to Wi-Fi and create the web server.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;Arduino.h&gt;\n#include &lt;WiFi.h&gt;\n#include &lt;AsyncTCP.h&gt;\n#include &lt;ESPAsyncWebServer.h&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Motor Pins<\/h4>\n\n\n\n<p>Define the GPIOs that will be controlling the motor.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Motor A pins\nint motor1Pin1 = 27; \nint motor1Pin2 = 26; \nint enable1Pin = 14; <\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Network Credentials<\/h4>\n\n\n\n<p>Insert your network credentials on the following variables so that the ESP32 connects to your network.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Replace with your network credentials\nconst char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_SSID\";<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Creating a Server Object<\/h4>\n\n\n\n<p>Create an <span class=\"rnthl rntliteral\">AsyncWebServer<\/span> object called <span class=\"rnthl rntliteral\">server<\/span> on port 80.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>AsyncWebServer server(80);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Web Page<\/h4>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">index_html<\/span> variable contains the text with the HTML and CSS to build the web page.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/HTML and CSS to build the web page\nconst char index_html&#091;] PROGMEM = R\"rawliteral(\n  &lt;!DOCTYPE html&gt;\n  &lt;html&gt;\n    &lt;head&gt;\n      &lt;title&gt;ESP IOT DASHBOARD&lt;\/title&gt;\n      &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n      &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"&gt;\n      &lt;link rel=\"icon\" type=\"image\/png\" href=\"favicon.png\"&gt;\n      &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"&gt;\n      &lt;style&gt;\n      html {\n      font-family: Arial, Helvetica, sans-serif;\n      text-align: center;\n      }\n      h1 {\n          font-size: 1.8rem;\n          color: white;\n      }\n\n      .topnav {\n          overflow: hidden;\n          background-color: #0A1128;\n      }\n      body {\n          margin: 0;\n      }\n      .content {\n          padding: 50px;\n      }\n      .card-grid {\n          max-width: 800px;\n          margin: 0 auto;\n          display: grid;\n          grid-gap: 2rem;\n          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n      .card {\n          background-color: white;\n          box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);\n      }\n      .card-title {\n          font-size: 1.2rem;\n          font-weight: bold;\n          color: #034078\n      }\n      .state {\n          font-size: 1.2rem;\n          color:#1282A2;\n      }\n      button {\n          border: none;\n          color: #FEFCFB;\n          padding: 15px 32px;\n          text-align: center;\n          font-size: 16px;\n          width: 150px;\n          border-radius: 4px;\n          transition-duration: 0.4s;\n      }\n      .button-on {\n          background-color:#034078;\n      }\n      .button-on:hover {\n          background-color: #1282A2;\n      }\n      .button-off {\n          background-color:#858585;\n      }\n      .button-off:hover {\n          background-color: #252524;\n      }\n      .button-stop {\n          background-color:#5e0f0f;\n          width: 100%;\n      }\n      .button-stop:hover {\n          background-color: #9b332c;\n      }\n      &lt;\/style&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n      &lt;div class=\"topnav\"&gt;\n        &lt;h1&gt;CONTROL DC MOTOR&lt;\/h1&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"content\"&gt;\n        &lt;div class=\"card-grid\"&gt;\n          &lt;div class=\"card\"&gt;\n            &lt;p class=\"card-title\"&gt;&lt;i class=\"fa-solid fa-gear\"&gt;&lt;\/i&gt; DC Motor A&lt;\/p&gt;\n            &lt;p&gt;\n              &lt;a href=\"forward\"&gt;&lt;button class=\"button-on\"&gt;&lt;i class=\"fa-solid fa-arrow-up\"&gt;&lt;\/i&gt; FORWARD&lt;\/button&gt;&lt;\/a&gt;\n              &lt;a href=\"backward\"&gt;&lt;button class=\"button-off\"&gt;&lt;i class=\"fa-solid fa-arrow-down\"&gt;&lt;\/i&gt; BACKWARD&lt;\/button&gt;&lt;\/a&gt;\n            &lt;\/p&gt;\n            &lt;p&gt;\n              &lt;a href=\"stop\"&gt;&lt;button class=\"button-stop\"&gt;&lt;i class=\"fa-solid fa-stop\"&gt;&lt;\/i&gt; STOP&lt;\/button&gt;&lt;\/a&gt;\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n)rawliteral\";<\/code><\/pre>\n\n\n\n<p>Here, we create three buttons that will make a request on the following URL paths:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>FORWARD: <span class=\"rnthl rntliteral\">\/forward<\/span><\/li>\n\n\n\n<li>BACKWARD: <span class=\"rnthl rntliteral\">\/backward<\/span><\/li>\n\n\n\n<li>STOP: <span class=\"rnthl rntliteral\">\/stop<\/span><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;p&gt;\n    &lt;a href=\"forward\"&gt;&lt;button class=\"button-on\"&gt;&lt;i class=\"fa-solid fa-arrow-up\"&gt;&lt;\/i&gt; FORWARD&lt;\/button&gt;&lt;\/a&gt;\n    &lt;a href=\"backward\"&gt;&lt;button class=\"button-off\"&gt;&lt;i class=\"fa-solid fa-arrow-down\"&gt;&lt;\/i&gt; BACKWARD&lt;\/button&gt;&lt;\/a&gt;\n&lt;\/p&gt;\n&lt;p&gt;\n    &lt;a href=\"stop\"&gt;&lt;button class=\"button-stop\"&gt;&lt;i class=\"fa-solid fa-stop\"&gt;&lt;\/i&gt; STOP&lt;\/button&gt;&lt;\/a&gt;\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Initialize Wi-Fi<\/h4>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">initWiFi()<\/span> function connects to wi-fi using the SSID and password you&#8217;ve defined previously.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void initWiFi() {\n  WiFi.mode(WIFI_STA);\n  WiFi.begin(ssid, password);\n  Serial.println(\"Connecting to WiFi ..\");\n  while (WiFi.status() != WL_CONNECTED) {\n    Serial.print('.');\n    delay(1000);\n  }\n  Serial.println(WiFi.localIP());\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Functions to Control the DC Motors<\/h4>\n\n\n\n<p>We create three functions to control the DC Motor.<\/p>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">moveForward()<\/span> function will move the motor forward.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void moveForward(){\n  Serial.println(\"Moving Forward\");\n  digitalWrite(enable1Pin, HIGH);\n  digitalWrite(motor1Pin1, LOW);\n  digitalWrite(motor1Pin2, HIGH);\n}<\/code><\/pre>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">moveBackward()<\/span> function moves the motor backward.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void moveBackward(){\n  Serial.println(\"Moving Backward\");\n  digitalWrite(enable1Pin, HIGH);\n  digitalWrite(motor1Pin1, HIGH);\n  digitalWrite(motor1Pin2, LOW);\n}<\/code><\/pre>\n\n\n\n<p>Finally, the <span class=\"rnthl rntliteral\">stopMotor()<\/span> function stops the motor by setting all motor pins to <span class=\"rnthl rntliteral\">LOW<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void stopMotor(){\n  Serial.print(\"Motor Stopped\")\n  digitalWrite(enable1Pin, LOW);\n  digitalWrite(motor1Pin1, LOW);\n  digitalWrite(motor1Pin2, LOW);\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">setup()<\/h4>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">setup()<\/span>, initialize the Serial Monitor for debugging purposes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>Serial.begin(115200);<\/code><\/pre>\n\n\n\n<p>Set the motor pins as outputs.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Set motor pins as outputs\npinMode(motor1Pin1, OUTPUT);\npinMode(motor1Pin2, OUTPUT);\npinMode(enable1Pin, OUTPUT);<\/code><\/pre>\n\n\n\n<p>Initialize Wi-Fi by calling the <span class=\"rnthl rntliteral\">initWiFi()<\/span> function.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>initWiFi();<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Handle Requests<\/h4>\n\n\n\n<p>Then, handle the web server. When you receive a request on the root (<span class=\"rnthl rntliteral\">\/<\/span>) URL\u2014this happens when you access the ESP IP address\u2014send the HTML text to build the web page:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send(200, \"text\/html\", index_html);\n});<\/code><\/pre>\n\n\n\n<p>When you click the <em>Forward <\/em>button, you make a request on the <span class=\"rnthl rntliteral\">\/forward<\/span> path. When the ESP32 receives that request, it will call the <span class=\"rnthl rntliteral\">moveForward()<\/span> function to make the motor move forward.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/forward\", HTTP_GET, &#091;](AsyncWebServerRequest *request) {\n  moveForward();\n  request-&gt;send(200, \"text\/html\", index_html);\n}); <\/code><\/pre>\n\n\n\n<p>Similarly, when you click the <em>Backward <\/em>button, the ESP32 receives a request on the <span class=\"rnthl rntliteral\">\/backward<\/span> path. When that happens, call the <span class=\"rnthl rntliteral\">moveBackward()<\/span> function to make the motor move in the other direction.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/backward\", HTTP_GET, &#091;](AsyncWebServerRequest *request) {\n  moveBackward();\n  request-&gt;send(200, \"text\/html\", index_html);\n});<\/code><\/pre>\n\n\n\n<p>When you click the <em>Stop<\/em> button, the ESP32 receives a request on the <span class=\"rnthl rntliteral\">\/stop<\/span> path and calls the <span class=\"rnthl rntliteral\">stopMotor()<\/span> function.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Route to set GPIO state to LOW (inverted logic for ESP8266)\nserver.on(\"\/stop\", HTTP_GET, &#091;](AsyncWebServerRequest *request) {\n  stopMotor();\n  request-&gt;send(200, \"text\/html\", index_html);\n});<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Initialize the Server<\/h4>\n\n\n\n<p>Finally, call the <span class=\"rnthl rntliteral\">begin()<\/span> method on the server object to initialize the server.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.begin();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"demonstration\">Demonstration<\/h2>\n\n\n\n<p>After inserting your network credentials, upload the code to the ESP32 board. After uploading open the Serial Monitor at a baud rate of 115200 and press the ESP32 RST button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"41\" height=\"39\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/02\/serial-monitor-logo-arduino-ide-2.png?resize=41%2C39&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Open Serial Monitor Arduino 2\" class=\"wp-image-148549\" style=\"width:41px;height:auto\"\/><\/figure><\/div>\n\n\n<p>The ESP32 IP address will be printed in 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=\"666\" height=\"378\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/print-ESP32-Web-Server-DC-Motor-IP-address.png?resize=666%2C378&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 DC Motor Web Server IP address printed on the Serial Monitor\" class=\"wp-image-149605\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/print-ESP32-Web-Server-DC-Motor-IP-address.png?w=666&amp;quality=100&amp;strip=all&amp;ssl=1 666w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/print-ESP32-Web-Server-DC-Motor-IP-address.png?resize=300%2C170&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><\/figure><\/div>\n\n\n<p>With the motor connected to the ESP32 via the L298N motor driver and powered up with an external power supply, open any browser on your local network and type the ESP32 IP address. The following web page will load.<\/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=\"653\" height=\"530\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Web-Server-Control-DC-Motor.png?resize=653%2C530&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Control DC Motor via Web Server\" class=\"wp-image-149538\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Web-Server-Control-DC-Motor.png?w=653&amp;quality=100&amp;strip=all&amp;ssl=1 653w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Web-Server-Control-DC-Motor.png?resize=300%2C243&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 653px) 100vw, 653px\" \/><\/figure><\/div>\n\n\n<p>Click on the buttons to control the DC 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\/2024\/03\/ESP-Control-DC-Motor.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Control DC Motor via Web Server\" class=\"wp-image-149607\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP-Control-DC-Motor.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP-Control-DC-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<p>The server can handle multiple clients simultaneously. You can also control the DC motor from your smartphone as long as it is connected to your local network.<\/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=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Control-DC-Motor-via-Web-Server.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Control DC Motor via Web Server Smartphone\" class=\"wp-image-149608\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Control-DC-Motor-via-Web-Server.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Control-DC-Motor-via-Web-Server.jpg?resize=300%2C168&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\">Wrapping Up<\/h2>\n\n\n\n<p>In this tutorial, you&#8217;ve learned how to create a simple asynchronous web server to control a DC motor remotely from your computer or smartphone. You can now extend this project to control more motors or control other outputs or even display sensor readings. You can take a look at the following tutorials:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-gauges\/\">ESP32 Web Server: Display Sensor Readings in Gauges<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/stepper-motor-esp32-websocket\/\">ESP32 Web Server: Control Stepper Motor (WebSocket)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-websocket-sliders\/\">ESP32 Web Server (WebSocket) with Multiple Sliders: Control LEDs Brightness (PWM)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-sent-events-sse\/\">ESP32 Web Server using Server-Sent Events (Update Sensor Readings Automatically)<\/a><\/li>\n<\/ul>\n\n\n\n<p>If you would like to learn more about building web servers with the ESP32 from scratch, we recommend taking a look at our exclusive eBook:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/build-web-servers-esp32-esp8266-ebook\/\" title=\"\">Build Web Servers with ESP32 and ESP8266 eBook<\/a><\/li>\n<\/ul>\n\n\n\n<p>Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this guide, we&#8217;ll build a web server with the ESP32 to control a DC motor remotely. The web server will serve a web page with buttons to make the &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32 Web Server: Control a DC Motor (Arduino IDE)\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-dc-motor-arduino\/#more-149533\" aria-label=\"Read more about ESP32 Web Server: Control a DC Motor (Arduino IDE)\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":149677,"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-149533","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\/03\/ESP32-DCMotor-Web-Server.jpg?fit=1920%2C1080&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/149533","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=149533"}],"version-history":[{"count":13,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/149533\/revisions"}],"predecessor-version":[{"id":167912,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/149533\/revisions\/167912"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/149677"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=149533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=149533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=149533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}