![\"Control](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/Control-Stepper-Motor-ESP32-Web-Server-HTML-Forml.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nTable of Contents<\/h2>\n\n\n\n\n- Control Stepper Motor with HTML Form (minimal setup)<\/a><\/li>\n\n\n\n
- Control Stepper Motor with HTML Form + CSS (using LittleFS)<\/a><\/li>\n\n\n\n
- Control Stepper Motor with WebSockets (HTML, CSS, JavaScript)<\/a><\/li>\n<\/ol>\n\n\n\n
In the picture below, you can see the three web server projects we’ll build (number 3 is in this post<\/a>). <\/p>\n\n\n\n![\"Control](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/stepper-web-server-all-web-server-projects.jpg?resize=750%2C471&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThis is a didactic tutorial where you’ll learn more about creating web pages and interaction between the ESP32 and the client. We’ll show you how to create the web page step-by-step with HTML and send the form results to the ESP32 via HTTP POST to control the stepper motor.<\/p>\n\n\n\n
Later, you’ll add some CSS to style the web page to improve its look.<\/p>\n\n\n\n
Finally, we’ll show you how to use Websockets for bidirectional communication between the server and the client. This will allow us to know on the web interface whether the motor is spinning or stopped. This section will add some JavaScript to handle WebSocket communication and add some cool animations to the web page.<\/p>\n\n\n\n
The following articles might be useful to understand the concepts covered throughout this tutorial:<\/p>\n\n\n\n
\n- ESP32 with Stepper Motor (28BYJ-48 and ULN2003 Motor Driver)<\/a><\/li>\n\n\n\n
- Input Data on HTML Form ESP32\/ESP8266 Web Server using Arduino IDE<\/a><\/li>\n\n\n\n
- ESP32 WebSocket Server: Control Outputs (Arduino IDE)<\/a><\/li>\n<\/ul>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
Before proceeding with the tutorial, make sure you check the following prerequisites.<\/p>\n\n\n\n
1) Parts Required<\/h3>\n\n\n\n
To follow this tutorial, you need the following parts:<\/p>\n\n\n\n
\n- 28BYJ-48 Stepper Motor + ULN2003 Motor Driver<\/a><\/li>\n\n\n\n
- ESP32 <\/a>(read Best ESP32 Development Boards<\/a>)<\/li>\n\n\n\n
- Jumper Wires<\/a><\/li>\n\n\n\n
- 5V Power Supply<\/li>\n<\/ul>\n\n\n
You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p>![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\n2) Arduino IDE and ESP32 Boards Add-on<\/h3>\n\n\n\n
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
\n- Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n
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
\n- 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
3) Filesystem Uploader Plugin<\/h3>\n\n\n\n
To upload the HTML, CSS, and JavaScript files needed to build this project to the ESP32 filesystem (LittleFS), we\u2019ll use a plugin for Arduino IDE: LittleFS<\/strong> Filesystem uploader<\/strong>. Follow the next tutorial to install the filesystem uploader plugin if you haven’t already:<\/p>\n\n\n\n\n- Arduino IDE 2: Install ESP32 LittleFS Uploader (Upload Files to the Filesystem)<\/a><\/li>\n<\/ul>\n\n\n\n
If you\u2019re using VS Code with the PlatformIO extension, read the following tutorial to learn how to upload files to the filesystem:<\/p>\n\n\n\n
\n- ESP32 with VS Code and PlatformIO: Upload Files to LittleFS Filesystem<\/a><\/li>\n<\/ul>\n\n\n\n
4) Libraries<\/h3>\n\n\n\n
To build this project, you need to install the following libraries:<\/p>\n\n\n\n
\n- ESPAsyncWebServer\u00a0<\/a>by ESP32Async<\/li>\n\n\n\n
- AsyncTCP<\/a> by ESP32Async<\/li>\n<\/ul>\n\n\n\n
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
Search for ESPAsyncWebServer<\/span> and install the ESPAsyncWebServer by ESP32Async<\/strong>.<\/p>\n\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?resize=666%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThen, install the AsyncTCP library. Search for AsyncTCP<\/span> and install the AsyncTCP by ESP32Async<\/strong>.<\/p>\n\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?resize=722%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n5) Schematic Diagram<\/h3>\n\n\n\n
The following schematic diagram shows the connections between the stepper motor and the ESP32.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/ESP32-Stepper-Motor-Schematic-Diagram-Wiring_bb.png?resize=1200%2C631&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nNote: <\/strong> You should power the motor driver using an external 5V power supply.<\/p>\n\n\n\nMotor Driver<\/strong><\/td>ESP32<\/strong><\/td><\/tr>IN1<\/td> GPIO 19<\/span><\/td><\/tr>IN2<\/td> GPIO 18<\/span><\/td><\/tr>IN3<\/td> GPIO 5<\/span><\/td><\/tr>IN4<\/td> GPIO 17<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n1. Control Stepper Motor with HTML Form<\/h2>\n\n\n\n
In this section, you’ll learn how to create a simple HTML form to control the stepper motor. <\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/ESP32-ESP8266-Stepper-motor-web-server-HTML-form-simple.png?resize=640%2C351&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nHere’s how it works:<\/p>\n\n\n\n
\n- On the web page, you can select whether you want the motor to turn Clockwise <\/strong>or Counterclockwise<\/strong>. Those are radio buttons<\/em>. Radio buttons are usually displayed as small circles, which are filled or highlighted when selected. You can only select one radio button in a given group at a time. <\/li>\n<\/ul>\n\n\n\n
\n- There is an input field of type number <\/em>where the user can enter a number\u2014in this case, the number of steps.<\/li>\n<\/ul>\n\n\n\n
\n- Finally, a button called GO!<\/span> of type submit <\/em>sends the data to the server via an HTTP POST request.<\/li>\n<\/ul>\n\n\n\n
HTML Form and Input Fields<\/h3>\n\n\n\n
In this section, we’ll take a look at the HTML to build the form.<\/p>\n\n\n\n
In HTML, the <form><\/span><\/span> tag is used to create an HTML form to collect user input. The user input is then sent to the server (ESP32 or ESP8266) for processing. Based on the values collected on the form, your ESP board may perform different actions\u2014in this case, spin the motor a determined number of steps.<\/p>\n\n\n\nHere’s the HTML we’ll use for this project.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <title>Stepper Motor<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<\/head>\n<body>\n <h1>Stepper Motor Control<\/h1>\n <form action=\"\/\" method=\"POST\">\n\n <input type=\"radio\" name=\"direction\" value=\"CW\" checked>\n <label for=\"CW\">Clockwise<\/label>\n\n <input type=\"radio\" name=\"direction\" value=\"CCW\">\n <label for=\"CW\">Counterclockwise<\/label><br><br><br>\n\n <label for=\"steps\">Number of steps:<\/label>\n <input type=\"number\" name=\"steps\">\n\n <input type=\"submit\" value=\"GO!\">\n\n <\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nAn HTML form contains different form elements. All form elements are enclosed inside the <form><\/span><\/span> tag. It contains controls <input><\/span><\/span> (radio buttons and number input field) and labels for those controls (<label><\/span><\/span>).<\/p>\n\n\n\nAdditionally, the <form><\/span><\/span> tag must include the action<\/span> attribute that specifies what you want to do when the form is submitted. In our case, we want to send that data to the server (ESP32\/ESP8266) when the user clicks the submit<\/strong> button. The method<\/span> attribute specifies the HTTP method (GET or POST) used when submitting the form data.<\/p>\n\n\n\n<form action=\"\/\" method=\"POST\"><\/code><\/pre>\n\n\n\nPOST is used to send data to a server to create\/update a resource. The data sent to the server with POST is stored in the body of the HTTP request.<\/p>\n\n\n\n
Radio Buttons<\/h4>\n\n\n\n![\"HTML](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/html-radio-bottons-stepper-motor-control.png?resize=249%2C48&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nA radio button is defined as follows:<\/p>\n\n\n\n
<input type=\"radio\"><\/code><\/pre>\n\n\n\nFor our project, we need two radio buttons, and only one can be selected at a time. So, we can create a group of radio buttons. To do that, the radio buttons must share the same name (the value of the name<\/span> attribute\u2014in this case direction<\/span>).<\/p>\n\n\n\n<input type=\"radio\" name=\"direction\"><\/code><\/pre>\n\n\n\nFinally, we also need the value<\/span> attribute that specifies a unique value for each radio button. This value is not visible to the user, but it is sent to the server when you click on the submit button to identify which button was selected.<\/p>\n\n\n\nIn our example, we created one radio button with the value CW<\/span> (to select clockwise) and another CCW<\/span> (to select counterclockwise).<\/p>\n\n\n\n<input type=\"radio\" name=\"direction\" value=\"CW\"><\/code><\/pre>\n\n\n\n<input type=\"radio\" name=\"direction\" value=\"CCW\"><\/code><\/pre>\n\n\n\nFinally, if you want one radio button to be selected by default, you can add the keyword checked<\/span>. In our example, the clockwise direction is selected by default.<\/p>\n\n\n\n<input type=\"radio\" name=\"direction\" value=\"CW\" checked><\/code><\/pre>\n\n\n\nSo, this is how the radio buttons and corresponding labels look like:<\/p>\n\n\n\n
<input type=\"radio\" name=\"direction\" value=\"CW\" checked>\n<label for=\"CW\">Clockwise<\/label>\n\n<input type=\"radio\" name=\"direction\" value=\"CCW\">\n<label for=\"CW\">Counterclockwise<\/label><br><br><br><\/code><\/pre>\n\n\n\nInput Field<\/h4>\n\n\n\n![\"Number](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/Number-Input-Field-HTML-Form-Control-Stepper-Motor.png?resize=364%2C33&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nFinally, we also need an input field where the user enters the number of steps\u2014an input field of type number<\/span>. The name<\/span> attribute allows us to determine in which input field the user entered the data.<\/p>\n\n\n\n<input type=\"number\" name=\"steps\"><\/code><\/pre>\n\n\n\nSubmit Button<\/h4>\n\n\n\n
To complete the form, we need a submit button. A submit button is an input of type submit<\/span>. When you click this button, the form’s data is sent to the server (the ESP32 or ESP8266 boards). The value<\/span> attribute specifies the text to display on the button.<\/p>\n\n\n\n<input type=\"submit\" value=\"GO!\"><\/code><\/pre>\n\n\n\nFor example, if you select the clockwise direction and enter 2000 steps, the client will make the following request to the ESP:<\/p>\n\n\n\n
POST \/\nHost: localhost\ndirection<\/strong>=CW&steps<\/strong>=2000<\/code><\/pre>\n\n\n\nThe ESP receives this request and can get the direction and number of steps from the body of the request.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/ESP32-ESP8266-Web-Server-Control-Stepper-HTML-Form-How-it-Works.png?resize=869%2C363&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCode<\/h3>\n\n\n\n
Now that you know how to create the HTML form, let’s go through the Arduino code.<\/p>\n\n\n\n
The HTML text can be saved on an HTML file saved on the ESP32 filesystem (LittleFS)<\/a> or it can be saved in a variable in your Arduino sketch.<\/p>\n\n\n\nBecause the HTML text for this example is relatively simple and we don’t have CSS or JavaScript files, we’ll save the HTML text as a variable (index_html<\/span>).<\/p>\n\n\n\nHere’s the code to build the web server (insert your network credentials and the code will work straight away).<\/p>\n\n\n
\/*\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/stepper-motor-esp32-web-server\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n#include <Arduino.h>\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <Stepper.h>\n\n\/\/ Stepper Motor Settings\nconst int stepsPerRevolution = 2048; \/\/ change this to fit the number of steps per revolution\n#define IN1 19\n#define IN2 18\n#define IN3 5\n#define IN4 17\nStepper myStepper(stepsPerRevolution, IN1, IN3, IN2, IN4);\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\n\/\/ Search for parameters in HTTP POST request\nconst char* PARAM_INPUT_1 = "direction";\nconst char* PARAM_INPUT_2 = "steps";\n\n\/\/ Variables to save values from HTML form\nString direction;\nString steps;\n\n\/\/ Variable to detect whether a new request occurred\nbool newRequest = false;\n\n\/\/ HTML to build the web page\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE html>\n<html>\n<head>\n <title>Stepper Motor<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n<\/head>\n<body>\n <h1>Stepper Motor Control<\/h1>\n <form action="\/" method="POST">\n <input type="radio" name="direction" value="CW" checked>\n <label for="CW">Clockwise<\/label>\n <input type="radio" name="direction" value="CCW">\n <label for="CW">Counterclockwise<\/label><br><br><br>\n <label for="steps">Number of steps:<\/label>\n <input type="number" name="steps">\n <input type="submit" value="GO!">\n <\/form>\n<\/body>\n<\/html>\n)rawliteral";\n\n\/\/ Initialize WiFi\nvoid initWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n Serial.print("Connecting to WiFi ..");\n while (WiFi.status() != WL_CONNECTED) {\n Serial.print('.');\n delay(1000);\n }\n Serial.println(WiFi.localIP());\n}\n\n\nvoid setup() {\n Serial.begin(115200);\n\n initWiFi();\n\n myStepper.setSpeed(5);\n\n \/\/ Web Server Root URL\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html);\n });\n \n \/\/ Handle request (form)\n server.on("\/", HTTP_POST, [](AsyncWebServerRequest *request) {\n int params = request->params();\n for(int i=0;i<params;i++){\n const AsyncWebParameter* p = request->getParam(i);\n if(p->isPost()){\n \/\/ HTTP POST input1 value (direction)\n if (p->name() == PARAM_INPUT_1) {\n direction = p->value().c_str();\n Serial.print("Direction set to: ");\n Serial.println(direction);\n }\n \/\/ HTTP POST input2 value (steps)\n if (p->name() == PARAM_INPUT_2) {\n steps = p->value().c_str();\n Serial.print("Number of steps set to: ");\n Serial.println(steps);\n }\n }\n }\n request->send(200, "text\/html", index_html);\n newRequest = true;\n });\n\n server.begin();\n}\n\nvoid loop() {\n \/\/ Check if there was a new request and move the stepper accordingly\n if (newRequest){\n if (direction == "CW"){\n \/\/ Spin the stepper clockwise direction\n myStepper.step(steps.toInt());\n }\n else{\n \/\/ Spin the stepper counterclockwise direction\n myStepper.step(-steps.toInt());\n }\n newRequest = false;\n }\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\nHow the Code Works<\/h3>\n\n\n\n
In the picture below, you can see the three web server projects we’ll build (number 3 is in this post<\/a>). <\/p>\n\n\n This is a didactic tutorial where you’ll learn more about creating web pages and interaction between the ESP32 and the client. We’ll show you how to create the web page step-by-step with HTML and send the form results to the ESP32 via HTTP POST to control the stepper motor.<\/p>\n\n\n\n Later, you’ll add some CSS to style the web page to improve its look.<\/p>\n\n\n\n Finally, we’ll show you how to use Websockets for bidirectional communication between the server and the client. This will allow us to know on the web interface whether the motor is spinning or stopped. This section will add some JavaScript to handle WebSocket communication and add some cool animations to the web page.<\/p>\n\n\n\n The following articles might be useful to understand the concepts covered throughout this tutorial:<\/p>\n\n\n\n Before proceeding with the tutorial, make sure you check the following prerequisites.<\/p>\n\n\n\n To follow this tutorial, you need the following parts:<\/p>\n\n\n\n You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/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 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 To upload the HTML, CSS, and JavaScript files needed to build this project to the ESP32 filesystem (LittleFS), we\u2019ll use a plugin for Arduino IDE: LittleFS<\/strong> Filesystem uploader<\/strong>. Follow the next tutorial to install the filesystem uploader plugin if you haven’t already:<\/p>\n\n\n\n If you\u2019re using VS Code with the PlatformIO extension, read the following tutorial to learn how to upload files to the filesystem:<\/p>\n\n\n\n To build this project, you need to install the following libraries:<\/p>\n\n\n\n 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 Search for ESPAsyncWebServer<\/span> and install the ESPAsyncWebServer by ESP32Async<\/strong>.<\/p>\n\n\n Then, install the AsyncTCP library. Search for AsyncTCP<\/span> and install the AsyncTCP by ESP32Async<\/strong>.<\/p>\n\n\n The following schematic diagram shows the connections between the stepper motor and the ESP32.<\/p>\n\n\n Note: <\/strong> You should power the motor driver using an external 5V power supply.<\/p>\n\n\n\n In this section, you’ll learn how to create a simple HTML form to control the stepper motor. <\/p>\n\n\n Here’s how it works:<\/p>\n\n\n\n In this section, we’ll take a look at the HTML to build the form.<\/p>\n\n\n\n In HTML, the <form><\/span><\/span> tag is used to create an HTML form to collect user input. The user input is then sent to the server (ESP32 or ESP8266) for processing. Based on the values collected on the form, your ESP board may perform different actions\u2014in this case, spin the motor a determined number of steps.<\/p>\n\n\n\n Here’s the HTML we’ll use for this project.<\/p>\n\n\n\n An HTML form contains different form elements. All form elements are enclosed inside the <form><\/span><\/span> tag. It contains controls <input><\/span><\/span> (radio buttons and number input field) and labels for those controls (<label><\/span><\/span>).<\/p>\n\n\n\n Additionally, the <form><\/span><\/span> tag must include the action<\/span> attribute that specifies what you want to do when the form is submitted. In our case, we want to send that data to the server (ESP32\/ESP8266) when the user clicks the submit<\/strong> button. The method<\/span> attribute specifies the HTTP method (GET or POST) used when submitting the form data.<\/p>\n\n\n\n POST is used to send data to a server to create\/update a resource. The data sent to the server with POST is stored in the body of the HTTP request.<\/p>\n\n\n\n A radio button is defined as follows:<\/p>\n\n\n\n For our project, we need two radio buttons, and only one can be selected at a time. So, we can create a group of radio buttons. To do that, the radio buttons must share the same name (the value of the name<\/span> attribute\u2014in this case direction<\/span>).<\/p>\n\n\n\n Finally, we also need the value<\/span> attribute that specifies a unique value for each radio button. This value is not visible to the user, but it is sent to the server when you click on the submit button to identify which button was selected.<\/p>\n\n\n\n In our example, we created one radio button with the value CW<\/span> (to select clockwise) and another CCW<\/span> (to select counterclockwise).<\/p>\n\n\n\n Finally, if you want one radio button to be selected by default, you can add the keyword checked<\/span>. In our example, the clockwise direction is selected by default.<\/p>\n\n\n\n So, this is how the radio buttons and corresponding labels look like:<\/p>\n\n\n\n Finally, we also need an input field where the user enters the number of steps\u2014an input field of type number<\/span>. The name<\/span> attribute allows us to determine in which input field the user entered the data.<\/p>\n\n\n\n To complete the form, we need a submit button. A submit button is an input of type submit<\/span>. When you click this button, the form’s data is sent to the server (the ESP32 or ESP8266 boards). The value<\/span> attribute specifies the text to display on the button.<\/p>\n\n\n\n For example, if you select the clockwise direction and enter 2000 steps, the client will make the following request to the ESP:<\/p>\n\n\n\n The ESP receives this request and can get the direction and number of steps from the body of the request.<\/p>\n\n\n Now that you know how to create the HTML form, let’s go through the Arduino code.<\/p>\n\n\n\n The HTML text can be saved on an HTML file saved on the ESP32 filesystem (LittleFS)<\/a> or it can be saved in a variable in your Arduino sketch.<\/p>\n\n\n\n Because the HTML text for this example is relatively simple and we don’t have CSS or JavaScript files, we’ll save the HTML text as a variable (index_html<\/span>).<\/p>\n\n\n\n Here’s the code to build the web server (insert your network credentials and the code will work straight away).<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
1) Parts Required<\/h3>\n\n\n\n
\n
<\/a><\/p>\n\n\n\n2) Arduino IDE and ESP32 Boards Add-on<\/h3>\n\n\n\n
\n
\n
3) Filesystem Uploader Plugin<\/h3>\n\n\n\n
\n
\n
4) Libraries<\/h3>\n\n\n\n
\n
<\/figure><\/div>\n\n\n<\/figure><\/div>\n\n\n5) Schematic Diagram<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\nMotor Driver<\/strong><\/td> ESP32<\/strong><\/td><\/tr> IN1<\/td> GPIO 19<\/span><\/td><\/tr> IN2<\/td> GPIO 18<\/span><\/td><\/tr> IN3<\/td> GPIO 5<\/span><\/td><\/tr> IN4<\/td> GPIO 17<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n 1. Control Stepper Motor with HTML Form<\/h2>\n\n\n\n
<\/figure><\/div>\n\n\n\n
\n
\n
HTML Form and Input Fields<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <title>Stepper Motor<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<\/head>\n<body>\n <h1>Stepper Motor Control<\/h1>\n <form action=\"\/\" method=\"POST\">\n\n <input type=\"radio\" name=\"direction\" value=\"CW\" checked>\n <label for=\"CW\">Clockwise<\/label>\n\n <input type=\"radio\" name=\"direction\" value=\"CCW\">\n <label for=\"CW\">Counterclockwise<\/label><br><br><br>\n\n <label for=\"steps\">Number of steps:<\/label>\n <input type=\"number\" name=\"steps\">\n\n <input type=\"submit\" value=\"GO!\">\n\n <\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<form action=\"\/\" method=\"POST\"><\/code><\/pre>\n\n\n\nRadio Buttons<\/h4>\n\n\n
<\/figure><\/div>\n\n\n<input type=\"radio\"><\/code><\/pre>\n\n\n\n<input type=\"radio\" name=\"direction\"><\/code><\/pre>\n\n\n\n<input type=\"radio\" name=\"direction\" value=\"CW\"><\/code><\/pre>\n\n\n\n<input type=\"radio\" name=\"direction\" value=\"CCW\"><\/code><\/pre>\n\n\n\n<input type=\"radio\" name=\"direction\" value=\"CW\" checked><\/code><\/pre>\n\n\n\n<input type=\"radio\" name=\"direction\" value=\"CW\" checked>\n<label for=\"CW\">Clockwise<\/label>\n\n<input type=\"radio\" name=\"direction\" value=\"CCW\">\n<label for=\"CW\">Counterclockwise<\/label><br><br><br><\/code><\/pre>\n\n\n\nInput Field<\/h4>\n\n\n
<\/figure><\/div>\n\n\n<input type=\"number\" name=\"steps\"><\/code><\/pre>\n\n\n\nSubmit Button<\/h4>\n\n\n\n
<input type=\"submit\" value=\"GO!\"><\/code><\/pre>\n\n\n\nPOST \/\nHost: localhost\ndirection<\/strong>=CW&steps<\/strong>=2000<\/code><\/pre>\n\n\n\n<\/figure><\/div>\n\n\nCode<\/h3>\n\n\n\n
\/*\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/stepper-motor-esp32-web-server\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n#include <Arduino.h>\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <Stepper.h>\n\n\/\/ Stepper Motor Settings\nconst int stepsPerRevolution = 2048; \/\/ change this to fit the number of steps per revolution\n#define IN1 19\n#define IN2 18\n#define IN3 5\n#define IN4 17\nStepper myStepper(stepsPerRevolution, IN1, IN3, IN2, IN4);\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\n\/\/ Search for parameters in HTTP POST request\nconst char* PARAM_INPUT_1 = "direction";\nconst char* PARAM_INPUT_2 = "steps";\n\n\/\/ Variables to save values from HTML form\nString direction;\nString steps;\n\n\/\/ Variable to detect whether a new request occurred\nbool newRequest = false;\n\n\/\/ HTML to build the web page\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE html>\n<html>\n<head>\n <title>Stepper Motor<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n<\/head>\n<body>\n <h1>Stepper Motor Control<\/h1>\n <form action="\/" method="POST">\n <input type="radio" name="direction" value="CW" checked>\n <label for="CW">Clockwise<\/label>\n <input type="radio" name="direction" value="CCW">\n <label for="CW">Counterclockwise<\/label><br><br><br>\n <label for="steps">Number of steps:<\/label>\n <input type="number" name="steps">\n <input type="submit" value="GO!">\n <\/form>\n<\/body>\n<\/html>\n)rawliteral";\n\n\/\/ Initialize WiFi\nvoid initWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n Serial.print("Connecting to WiFi ..");\n while (WiFi.status() != WL_CONNECTED) {\n Serial.print('.');\n delay(1000);\n }\n Serial.println(WiFi.localIP());\n}\n\n\nvoid setup() {\n Serial.begin(115200);\n\n initWiFi();\n\n myStepper.setSpeed(5);\n\n \/\/ Web Server Root URL\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html);\n });\n \n \/\/ Handle request (form)\n server.on("\/", HTTP_POST, [](AsyncWebServerRequest *request) {\n int params = request->params();\n for(int i=0;i<params;i++){\n const AsyncWebParameter* p = request->getParam(i);\n if(p->isPost()){\n \/\/ HTTP POST input1 value (direction)\n if (p->name() == PARAM_INPUT_1) {\n direction = p->value().c_str();\n Serial.print("Direction set to: ");\n Serial.println(direction);\n }\n \/\/ HTTP POST input2 value (steps)\n if (p->name() == PARAM_INPUT_2) {\n steps = p->value().c_str();\n Serial.print("Number of steps set to: ");\n Serial.println(steps);\n }\n }\n }\n request->send(200, "text\/html", index_html);\n newRequest = true;\n });\n\n server.begin();\n}\n\nvoid loop() {\n \/\/ Check if there was a new request and move the stepper accordingly\n if (newRequest){\n if (direction == "CW"){\n \/\/ Spin the stepper clockwise direction\n myStepper.step(steps.toInt());\n }\n else{\n \/\/ Spin the stepper counterclockwise direction\n myStepper.step(-steps.toInt());\n }\n newRequest = false;\n }\n}\n<\/code><\/pre>\n\tHow the Code Works<\/h3>\n\n\n\n