Here DC motor control using ESP12E WiFi module is illustrated. The DC motor is controlled using PWM from ESP12E via web page. The web page contains a slider range which can be varied for PWM range. This makes it possible to control a dc motor from web page from anywhere in the world. It can useful in various Internet of Things(IoT) applications.
Recommended Prerequisite
- Simple ESP8266 Asynchronous Web Server Example with Code
- WiFi controlled LED using ESP8266
- Read & Display Switch State on Web Page with ESP8266 Web Server
Video Demonstration
The following video demonstrates how the DC motor control over WiFi works.
Schematic Diagram
The following is schematic wiring diagram of interfacing ESP12E with DC motor & L293D motor driver. 
ESP12E(ESP8266) as Asynchronous Web Server
Here the ESP12E WiFi module is configured as asynchronous web server. The web page uses slider range and contains Ajax JavaScript that reads the PWM value from the user input and sends to the ESP12E pin 13. How asynchronous web server and Ajax JavaScript code works with ESP8266 was explained in the previous tutorial ESP8266 PWM Example with Javascript and AJAX.
Program Code
The following are the program codes for DC motor control using ESP12E. There are two files. One is the PWMasyncWebserverJs.ino contains the code for WiFi access and logic for controlling the DC motor and the index_Html.h header file which contains the HTML user interface and AJAX code for interaction between client and server.
PWMasyncWebserverJs.ino
//ESP8266 PWM control of DC motor
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "indexHtml.h"
const int pwmMotorPin = 13;
const char ssid[]="yourSSID";
const char password[]="yourPASSWORD";
AsyncWebServer server(80);
void setup() {
pinMode(pwmMotorPin, OUTPUT);
pinMode(12, OUTPUT);
Serial.begin(115200);
Serial.printf("Connecting to %s....\n", ssid);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if(WiFi.waitForConnectResult() != WL_CONNECTED){
Serial.printf("WiFi connection failed!\n");
delay(1000);
ESP.restart();
}
Serial.printf("Connected to %s\n", ssid);
Serial.printf("IP address: %s\n", WiFi.localIP().toString().c_str());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
}
);
server.on("/ajaxPage", HTTP_POST, [](AsyncWebServerRequest *request){
AsyncWebParameter *p = request->getParam(0);
if(p->isPost()){
Serial.printf("PWM Value:%s\n",p->value().c_str());
}
analogWrite(pwmMotorPin, p->value().toInt());
request->send(303);
}
);
server.begin();
}
void loop() {
}
index_Html
const char index_html[] PROGMEM = R"=====(
<html>
<head>
<title>ESP12E PWM Control DC Motor with AJs</title>
<style>
body {
background: #000;
margin: 100px auto;
text-align: center;
}
h1 {
color: #fff;
margin-bottom: 20px;
font-family: helvetica;
font-size: 30px;
font-style: italic;
letter-spacing: 2px;
}
h2 {
color: #fff;
margin-bottom: 40px;
font-family: helvetica;
font-size: 24px;
font-style: italic;
letter-spacing: 2px;
}
p {
color: #fff;
margin-bottom: 60px;
font-family: helvetica;
font-size: 20px;
font-style: italic;
letter-spacing: 2px;
}
.slider {
-webkit-appearance: none;
width: 50%;
height: 15px;
background: #000;
outline: none;
border: 5px solid lawngreen;
border-radius: 8px;
}
/* for chrome/safari */
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 30px;
background: #000;
cursor: pointer;
border: 5px solid lawngreen;
border-radius: 4px;
}
/* for firefox */
.slider::-moz-range-thumb {
width: 20px;
height: 30px;
background: #000;
cursor: pointer;
border: 5px solid lawngreen;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>ESP12E WiFi</h1>
<h2>DC Motor Control</h2>
<div>
<form id="controlForm">
<input type="range" min="0" max="1023" value="0" class="slider" id="pwmSliderID">
<p><span id="pwmValue"></span></p>
</form>
</div>
<script>
document.getElementById("controlForm").oninput = function(){
var postPWMReq = "PWM_Value= " + document.getElementById("pwmSliderID").value;
var pwmxhttp = new XMLHttpRequest();
pwmxhttp.open("POST", "ajaxPage", true);
pwmxhttp.send(postPWMReq);
document.getElementById('pwmValue').innerHTML = postPWMReq;
};
</script>
</body>
</html>
)=====";
See related tutorials:
