This is a walkthrough on how to control Nema17 Stepper motors using an ESP32 Webserver.

In the example above I am using the local ESP32 webserver to control InMoov's neck screw via a Nema17 stepper motor and 3D printed Gearbox.

Controlling Stepper motors via a Wifi enabled webserver opens up an easy way to control remote devices. The information here shows how this can be done easily and at low cost.

Requirements :-

(1) Espressiff's ESP-WROOM-32 (plus some neat usb/button/pinout extender)

(2) Arduino IDE installed with the latest version of https://github.com/espressif/arduino-esp32

(3) The Circuit :-

To drive the Nema17 Stepper motors I am using cost effective A4899 Ramps modules

Gareth Cad :-

 

The full circuit :-

I think its correct (Citation needed)

(4) Code :-

This is set up for my application which means GPIO16 controls the direction of the steppers, and the GPIO17,18,19 controls the individual Steppers.

/*
 #ESP32 Web Server with graphic buttons downloaded from web cache
 Gareth aka chiprobot 21/3/2016
*/
#include <WiFi.h>

const char* ssid     = "Place Wifi name here";
const char* password = "Place your Wifi password here";
int stepper=15; // stepper delay
WiFiServer server(80);

void setup()
{
 Serial.begin(115200);
 pinMode(16, OUTPUT);      // set Stepper direction pin mode  
 pinMode(17, OUTPUT);      // set Stepper1 pin mode
 pinMode(18, OUTPUT);      // set Stepper2 pin mode
 pinMode(19, OUTPUT);      // set Stepper3 pin mode

    // We start by connecting to a WiFi network
    Serial.println();
    Serial.print("Connecting to ");
    Serial.println(ssid);
    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
    Serial.println("");
    Serial.println("WiFi connected");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());
    Serial.println("Place this IP address into a browser window");
    server.begin();
}

int value = 0;

void loop(){
 WiFiClient client = server.available();   // listen for incoming clients

  if (client) {                             
    Serial.println("new client");          
    String currentLine = "";                   // make a String to hold incoming data from the client
    while (client.connected()) {            
      if (client.available()) {                // if there's client data
        char c = client.read();                // read a byte
          if (c == '\n') {                     // check for newline character, 
          if (currentLine.length() == 0) {     // if line is blank it means its the end of the client HTTP request
            client.println("<!DOCTYPE html>"); // open wrap the web page
            client.print("<html><head><meta name='viewport' content='initial-scale=1.0'><meta charset='utf-8'><style>#map {height: 100%;}html, body {height: 100%;margin: 0;padding: 0;}</style></head>");
            client.print("<body><h1>ESP32 WebServer Stepper Motor's</h1>");
        // Gui buttons start here
client.print("<input type=image style=width:33%;height:20% src='http://myrobotlab.org/sites/default/files/users/user25images/ButtonBlueLong.png'onmousedown=location.href='/dec1' >");
                client.print("<input type=image style=width:33%;height:20% src='http://myrobotlab.org/sites/default/files/users/user25images/nixiesmall1.png'>");
                client.print("<input type=image style=width:33%;height:20% src='http://myrobotlab.org/sites/default/files/users/user25images/ButtonOrangeLong.png'onmousedown=location.href='/inc1' >");
                   
                client.print("<input type=image style=width:33%;height:20% src='http://myrobotlab.org/sites/default/files/users/user25images/ButtonPinkLong.png'onmousedown=location.href='/dec2' >");
                client.print("<input type=image style=width:33%;height:20% src='http://myrobotlab.org/sites/default/files/users/user25images/nixiesmall2.png'>");
                client.print("<input type=image style=width:33%;height:20% src='http://myrobotlab.org/sites/default/files/users/user25images/ButtonGreenLong.png'onmousedown=location.href='/inc2' >"); 

                client.print("<input type=image style=width:33%;height:20% src='http://myrobotlab.org/sites/default/files/users/user25images/ButtonTurqLong.png'onmousedown=location.href='/dec3' >");
                client.print("<input type=image style=width:33%;height:20% src='http://myrobotlab.org/sites/default/files/users/user25images/nixiesmall3.png'>");
                client.print("<input type=image style=width:33%;height:20% src='http://myrobotlab.org/sites/default/files/users/user25images/ButtonPurpleLong.png'onmousedown=location.href='/inc3' >"); 
                
                client.print("<input type=image style=width:100%;height:20% src='http://myrobotlab.org/sites/default/files/users/user25images/ButtonRedLong.png'onmousedown=location.href='/stopall' >");
                client.print("</body></html>"); // close wrap the web page
            
            client.println(); // The HTTP response ends with an extra blank line:
          
            break;  // break out of the while loop:
          } else {    // if you got a newline, then clear currentLine:
            currentLine = "";
          }
         } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;       // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /dec1")) {digitalWrite(16, HIGH);
              for (int i=0; i <= 43; i++){ digitalWrite(17, HIGH);delay(10);digitalWrite(17,LOW );delay(10); }
        }
         if (currentLine.endsWith("GET /inc1")) {digitalWrite(16, LOW);
              for (int i=0; i <= 43; i++){ digitalWrite(17, HIGH);delay(10);digitalWrite(17,LOW );delay(10); }
        }
         if (currentLine.endsWith("GET /dec2")) {digitalWrite(16, HIGH);
              for (int i=0; i <= 43; i++){ digitalWrite(18, HIGH);delay(10);digitalWrite(18,LOW );delay(10); }
        }
         if (currentLine.endsWith("GET /inc2")) {digitalWrite(16, LOW);
              for (int i=0; i <= 43; i++){ digitalWrite(18, HIGH);delay(10);digitalWrite(18,LOW );delay(10); }
        }
         if (currentLine.endsWith("GET /dec3")) {digitalWrite(16, HIGH);
              for (int i=0; i <= 43; i++){ digitalWrite(19, HIGH);delay(10);digitalWrite(19,LOW );delay(10); }
        }
         if (currentLine.endsWith("GET /inc3")) {digitalWrite(16, LOW);
              for (int i=0; i <= 43; i++){ digitalWrite(19, HIGH);delay(10);digitalWrite(19,LOW );delay(10); }
        }
         if (currentLine.endsWith("GET /stopall")) {digitalWrite(16, HIGH);
          }
        }
      }
    }
  }

Download the code to the ESP32
Start up a Serial monitor @115200 Baud and press reset on the ESP32 board.
The serial monitor will show an IP address when the ESP32 connects to your Wifi network.

Place this IP address into a web browser and the ESP32's web Gui will fire up.
Press the buttons to control the steppers.