Here is the code (.ino):
#include "htmlpage1.h"
int ena = D8;
int in1 = D6;
int in2 = D7;
int in3 = D2;
int in4 = D3;
int enb = D4;
int sto = 1;
int speed1 = 0;
String accessName ="robot";
const int changeStep = 20;// 20 is 20% every time button is pushed
int outPutValue = 40;// variable holding the light output vlaue (initial value) 40 means 40%
const int motorMinimumSpeed=20;
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#ifndef STASSID
#define STASSID "my ssid"
#define STAPSK "my ssid password"
#endif
const char *ssid = STASSID;
const char *password = STAPSK;
ESP8266WebServer server(80);
void handleRoot() {
String HTML_page = speed_control_page_part1;
HTML_page.concat(outPutValue);
HTML_page.concat(speed_control_page_part2);
HTML_page.concat(outPutValue);
HTML_page.concat(speed_control_page_part3);
server.send(200, "text/html", HTML_page);
}
void handleNotFound() {
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
}
void setup(void) {
pinMode(ena, OUTPUT);
pinMode(in1, OUTPUT);
pinMode(in2, OUTPUT);
pinMode(enb, OUTPUT);
pinMode(in3, OUTPUT);
pinMode(in4, OUTPUT);
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
if (MDNS.begin(accessName)) {
Serial.println("MDNS responder started");
}
server.on("/", handleRoot);
server.on("/speed", HTTP_GET, handleMotorSpeed);
server.on("/stop", HTTP_GET, handleMotorBrake);
server.on("/direction", HTTP_GET, handleMotorDirection);
server.on("/right", HTTP_GET, handleMotorRight);
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
server.handleClient();
MDNS.update();
speed1 = (outPutValue * 2.5);
if((sto == 1)) {
analogWrite(ena, speed1);
analogWrite(enb, speed1);
Serial.print(speed1);
}
delay(100);
}
void handleMotorSpeed() {
if(server.arg("do") == "slower")
{
outPutValue -=changeStep;
if(outPutValue < motorMinimumSpeed)
{
outPutValue = motorMinimumSpeed;
}
}else{
outPutValue +=changeStep;
if(outPutValue > 100)
{
outPutValue =100;
}
}
handleRoot();
}//
void handleMotorBrake() {
if(server.arg("do") == "START")
{
sto = 1;
}else{
sto = 0;
digitalWrite(in1,LOW);
digitalWrite(in2,LOW);
digitalWrite(in3,LOW);
digitalWrite(in4,LOW);
}
handleRoot();
}//
void handleMotorDirection() {
if(server.arg("dir") == "CW")
{
digitalWrite(in1,HIGH);
digitalWrite(in2,LOW);
digitalWrite(in3,HIGH);
digitalWrite(in4,LOW);
}else{
digitalWrite(in1,LOW);
digitalWrite(in2,HIGH);
digitalWrite(in3,LOW);
digitalWrite(in4,HIGH);
}
handleRoot();
}//
void handleMotorRight() {
if(server.arg("move") == "right")
{
digitalWrite(in1,HIGH);
digitalWrite(in2,LOW);
digitalWrite(in3,LOW);
digitalWrite(in4,HIGH);
}else{
digitalWrite(in1,LOW);
digitalWrite(in2,HIGH);
digitalWrite(in3,HIGH);
digitalWrite(in4,LOW);
}
handleRoot();
}//
Here is the (.h file) that contatins the html coding:
const char speed_control_page_part1[] PROGMEM = R"robojaxSpeed1(
<!DOCTYPE html>
<html>
<head>
<title>Robot Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
.html {width: )robojaxSpeed1";
const char speed_control_page_part2[] PROGMEM = R"robojaxSpeed2(%;
background-color: #f44336;}
.nextprev a.rj-right, .nextprev a.rj-left {
background-color: #f44336;
color: #ffffff;
border-color: #f44336;
}
.nextprev a {
font-size: 22px;
border: 1px solid #cccccc;
}
.rj-right {
float: right!important;
}
.rj-btn, .rj-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
</style>
</head>
<body>
<h1>Speed Control</h1>
<div class="container">
<div class="skills html">)robojaxSpeed2";
const char speed_control_page_part3[] PROGMEM = R"robojaxSpeed3(%</div>
</div>
<hr>
<div class="nextprev">
<a class="rj-left rj-btn" href="/speed?do=slower">< Slower</a>
<a class="rj-right rj-btn" href="/speed?do=faster">Faster ></a>
</div>
<hr>
<h2>Start/Stop</h2>
<div class="nextprev">
<a class="rj-left rj-btn" href="/stop?do=START">START</a>
<a class="rj-right rj-btn" href="/stop?do=STOP">STOP</a>
</div>
<hr>
<h2>Direction</h2>
<div class="nextprev">
<a class="rj-left rj-btn" href="/direction?dir=CW">BACKWARD</a>
<a class="rj-right rj-btn" href="/direction?dir=CCW">FORWARD</a>
</div>
<hr>
<h2>Right/left</h2>
<div class="nextprev">
<a class="rj-left rj-btn" href="/right?move=right">Right</a>
<a class="rj-right rj-btn" href="/right?move=left">Left</a>
</div>
</body>
</html>)robojaxSpeed3";
(i didn't do the code all by myself)