Following on from setting up a basic web server with web page functionality. Using the AutoConnet Library created for the esp wifi chip. Here is a modified version of the basic connection script provided previously with added Stepper Motor speed and direction controls. Using .js command from range sliders as well as a set of buttons. To set the direction and rotate the stepper motor at varying speeds

Stepper motors are brushless dc motors that divides a full rotation into a number of equal steps. Which makes it easy to move and hold the position at any given step or just rotate it like a standard dc motor.

Driving a stepper motor is a bit more complicated than driving a regular brushed DC motor. Stepper motors require a stepper controller to energize the phases in a timely sequence to make the motor turn. The L293D is one of the most popular and economical chips. These can be found at the heart of most first-generation motor shields,

#include <Stepper.h> // include Stepper library
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <AutoConnect.h>
ESP8266WebServer Server;
AutoConnect Portal(Server);
AutoConnectConfig config;

const int stepsPerRevolution = 512; // change this to fit the number of steps per revolution
// for your motor

// initialize the stepper library on pins 8 through 11:
Stepper myStepper(stepsPerRevolution, 14, 12, 13, 15);

const char htmlPage[] PROGMEM = R”=====(
<html> <! –– Below is where you construted the webpage — >
<head>
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> 
<title>WebPageDemo</title>
</head>
<body>
<h1>Stepper Controls</h1>

<div>
<form id=”myform”>
<button type=”submit” value=”button1″ class=”btn” id=”btn1″>Stop</button>
<button type=”submit” value=”button2″ class=”btn”>Ford Half Speed</button>
<button type=”submit” value=”button3″ class=”btn”>Ford Full Speed</button>
<button type=”submit” value=”button4″ class=”btn”>Reverse Half Speed</button>
<button type=”submit” value=”button5″ class=”btn”>Reverse Full Speed</button>
</form>
<script>
$(document).ready(function(){
$(“#myform button”).click(function (ev) {
ev.preventDefault()
if ($(this).attr(“value”) == “button1”) {
slider.value = “0”; stepS.innerHTML = “0”; stepS2.innerHTML = “0”; slider2.value =”0″;
$.get(“/?value1=0”);
}
if ($(this).attr(“value”) == “button2”) {
slider.value = “0”; stepS.innerHTML = “0”; stepS2.innerHTML = “0”; slider2.value =”0″;
$.get(“/?value1=30”);
}
if ($(this).attr(“value”) == “button3”) {
slider.value = “0”; stepS.innerHTML = “0”; stepS2.innerHTML = “0”; slider2.value =”0″;
$.get(“/?value1=70”);
}
if ($(this).attr(“value”) == “button4”) {
slider.value = “0”; stepS.innerHTML = “0”; stepS2.innerHTML = “0”; slider2.value =”0″;
$.get(“/?value2=30”);
}
if ($(this).attr(“value”) == “button5”) {
slider.value = “0”; stepS.innerHTML = “0”; stepS2.innerHTML = “0”; slider2.value =”0″;
$.get(“/?value2=70”);
}
});
});
</script>
</div>

<div class=”slidecontainer”>
<p>Ford Speed: <span id=”stepSpeedD1″></span></p>
<input type=”range” min=”0″ max=”70″ class=”slider” id=”stepSpeed1″ onchange=”steps1(this.value)” value=”0″+valueString+”\”/>

<script>
var slider = document.getElementById(“stepSpeed1”);
var stepS = document.getElementById(“stepSpeedD1”); stepS.innerHTML = slider.value;
slider.oninput = function() { slider.value = this.value; stepS.innerHTML = this.value; stepS2.innerHTML = “0”; slider2.value =”0″;}
$.ajaxSetup({timeout:1000}); function steps1(pos1) {
$.get(“/?value1=” + pos1 + “&”); {Connection: close};}
</script>
</div>
<div class=”slidecontainer”>
<p>Reverse Speed: <span id=”stepSpeedD2″></span></p>
<input type=”range” min=”0″ max=”70″ class=”slider” id=”stepSpeed2″ onchange=”steps2(this.value)” value=”0″+valueString+”\”/>

<script>
var slider2 = document.getElementById(“stepSpeed2”);
var stepS2 = document.getElementById(“stepSpeedD2”); stepS2.innerHTML = slider2.value;
slider2.oninput = function() { slider2.value = this.value; stepS2.innerHTML = this.value; stepS.innerHTML = “0”; slider.value =”0″; }
$.ajaxSetup({timeout:1000}); function steps2(pos1) {
$.get(“/?value2=” + pos1 + “&”); {Connection: close};}
</script>
</div>

</body>
</html>
)=====”;

void rootPage() {

Server.send(200, “text/html”, htmlPage);
}
void setup() {
config.apid = “WebPageDemo”; // Change to suit what you want for the AP Name…
config.psk = “12345678”; // Change to suit what you want as your password or remove num for no password..
Portal.config(config);
delay(1000);
Serial.begin(115200);
Serial.println();

Server.on(“/”, rootPage);

if (Portal.begin()) {
Serial.println(“HTTP server:” + WiFi.localIP().toString());
MDNS.begin(“WebPageDemo”); // Change to suit what you want as your local address..
MDNS.addService(“http”, “tcp”, 80); // WebPageDemo.Local/ will be active after your first restart on conneted network
}
}

void loop() {
MDNS.update();
Portal.handleClient();

String sval = Server.arg(“value1”); // the part that loops step at different speeds
int ival = sval.toInt();
Serial.print(“FordSteps: “);
Serial.println(ival);
if (ival > 0) {
myStepper.setSpeed(ival);
myStepper.step(stepsPerRevolution / 100);
}
String sval2 = Server.arg(“value2”);
int ival2 = sval2.toInt();
Serial.print(“ReveSteps: “);
Serial.println(ival2);
if (ival2 > 0) {
myStepper.setSpeed(ival2);
myStepper.step(-stepsPerRevolution / 100);
}
}

Share on facebook
Share on google
Share on twitter
Share on linkedin

Email Away