![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/ESP8266-Stepper-Motor-Web-Server-Websocket.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nTo better understand how this project works, you can take a look at the following tutorials:<\/p>\n\n\n\n
- \n
- ESP8266 NodeMCU with Stepper Motor (28BYJ-48 and ULN2003 Motor Driver)<\/a><\/li>\n\n\n\n
- ESP8266 NodeMCU WebSocket Server: Control Outputs (Arduino IDE)<\/a><\/li>\n<\/ul>\n\n\n\n
Table of Contents<\/h2>\n\n\n\n
- \n
- Prerequisites<\/a><\/li>\n\n\n\n
- Project Overview<\/a><\/li>\n\n\n\n
- Organizing your files:<\/a>\n
- \n
- HTML File<\/a><\/li>\n\n\n\n
- CSS File<\/a><\/li>\n\n\n\n
- JavaScript File<\/a><\/li>\n\n\n\n
- Arduino Sketch<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n
- Upload Code and Files<\/a><\/li>\n\n\n\n
- Demonstration<\/a><\/li>\n<\/ol>\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
- ESP8266<\/a>\u00a0(read\u00a0Best ESP8266 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 ESP8266 Boards Add-on<\/h3>\n\n\n\n
We\u2019ll program the ESP8266 using Arduino IDE. So, you must have the ESP8266 add-on installed. Follow the next tutorial if you haven\u2019t already:<\/p>\n\n\n\n
- \n
- Installing ESP8266 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 ESP8266:<\/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 ESP8266 filesystem (LittleFS), we\u2019ll use a plugin for Arduino IDE: LittleFS Filesystem uploader<\/strong>. Follow the next tutorial to install the filesystem uploader plugin if you haven’t already:<\/p>\n\n\n\n
- \n
- Install ESP8266 NodeMCU LittleFS Filesystem Uploader in Arduino IDE<\/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
- ESP8266 NodeMCU with VS Code and PlatformIO: Upload Files to Filesystem (LittleFS)<\/a><\/li>\n<\/ul>\n\n\n\n
4) Libraries<\/h3>\n\n\n\n
There are different ways to control stepper motors with a microcontroller. To control the stepper motor with the ESP8266, we’ll use the AccelStepper <\/a>library. This library allows you to easily move the motor a defined number of steps, set its speed, acceleration, and much more. The library has great documentation explaining how to use its methods. You can check it here<\/a>.<\/p>\n\n\n\n
Follow the next steps to install the library in your Arduino IDE.<\/p>\n\n\n\n
- \n
- Go to Sketch<\/strong> > Include Library<\/strong> > Manage Libraries…<\/strong><\/li>\n\n\n\n
- Search for “accelstepper”.<\/li>\n\n\n\n
- Install the AccelStepper library by Mike McCauley. We’re using version 1.61.0.<\/li>\n<\/ol>\n\n\n\n
We’ll build the web server using the following libraries:<\/p>\n\n\n\n
- \n
- ESPAsyncWebServer by ESP32Async<\/a><\/li>\n\n\n\n
- ESPAsyncTCP by ESP32Async<\/a><\/li>\n<\/ul>\n\n\n\n
You can install these libraries using the Arduino Library Manager. Go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong> and search for the libraries’ names.<\/p>\n\n\n\n
5) Schematic Diagram<\/h3>\n\n\n\n
The following schematic diagram shows the connections between the stepper motor and the ESP8266.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/ESP8266-Stepper-Motor-Schematic-Diagram-Wiring.png?resize=1200%2C646&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nNote: <\/strong> You should power the ULN2003 motor driver using an external 5V power supply.<\/p>\n\n\n\n
- ESPAsyncTCP by ESP32Async<\/a><\/li>\n<\/ul>\n\n\n\n
- Go to Sketch<\/strong> > Include Library<\/strong> > Manage Libraries…<\/strong><\/li>\n\n\n\n
- ESP8266 NodeMCU with VS Code and PlatformIO: Upload Files to Filesystem (LittleFS)<\/a><\/li>\n<\/ul>\n\n\n\n
- Install ESP8266 NodeMCU LittleFS Filesystem Uploader in Arduino IDE<\/a><\/li>\n<\/ul>\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
- ESP8266<\/a>\u00a0(read\u00a0Best ESP8266 Development Boards<\/a>)<\/li>\n\n\n\n
- CSS File<\/a><\/li>\n\n\n\n
- Project Overview<\/a><\/li>\n\n\n\n
- ESP8266 NodeMCU WebSocket Server: Control Outputs (Arduino IDE)<\/a><\/li>\n<\/ul>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/ESP32-ESP8266-Stepper-Motor-Websocket-web-server-animation.png?resize=676%2C588&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/ESP32-Stepper-Motor-Web-Server-Websockets-How-it-Works-01.png?resize=750%2C455&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/ESP8266-Organizing-Folders_organizing-files.png?resize=601%2C358&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n