Skip to content

Instantly share code, notes, and snippets.

@ghtomcat

ghtomcat/motorPage.h

Created September 4, 2020 08:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ghtomcat/154756296e9ab5cfbccc7045cd87c3aa to your computer and use it in GitHub Desktop.
Save ghtomcat/154756296e9ab5cfbccc7045cd87c3aa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
motorPage.h
R"(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="col-xs-12" style="height: 100vh">
<div class="row" style="height: 33.33%; padding-top: 1em; padding-bottom:1em">
<div class="col-xs-8" ></div>
<div class="col-xs-4" style="text-align: center; height: 100%">
<button id="drive" type="button" class="btn btn-default" style="height: 100%; width: 100%" onmousedown='makeAjaxCall("forward")' onmouseup='makeAjaxCall("driveStop")' ontouchstart='makeAjaxCall("forward")' ontouchend='makeAjaxCall("driveStop")'>Drive</button>
</div>
</div>
<div class="row" style="height: 33.33%; padding-bottom:1em">
<div class="col-xs-4" style="height: 100%; text-align: center">
<button id="left" type="button" class="btn btn-default" style="height: 100%; width: 100%" onmousedown='makeAjaxCall("left")' onmouseup='makeAjaxCall("steerStop")' ontouchstart='makeAjaxCall("left")' ontouchend='makeAjaxCall("steerStop")'>Left</button>
</div>
<div class="col-xs-4" style="height: 100%; text-align: center">
<button id="right" type="button" class="btn btn-default" style="height: 100%; width: 100%" onmousedown='makeAjaxCall("right")' onmouseup='makeAjaxCall("steerStop")' ontouchstart='makeAjaxCall("right")' ontouchend='makeAjaxCall("steerStop")'>Right</button>
</div>
<div class="col-xs-4" ></div>
</div>
<div class="row" style="height: 33.33%; padding-bottom:1em">
<div class="col-xs-8" ></div>
<div class="col-xs-4" style="height: 100%; text-align: center">
<button id="back" type="button" class="btn btn-default" style="height: 100%; width: 100%" onmousedown='makeAjaxCall("back")' onmouseup='makeAjaxCall("driveStop")' ontouchstart='makeAjaxCall("back")' ontouchend='makeAjaxCall("driveStop")'>Back</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script> function makeAjaxCall(url){$.ajax({"url": url})}</script>
<!--<script>
document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
//Left Arrow
makeAjaxCall("left");
}
else if(event.keyCode == 39) {
//Right Arrow
makeAjaxCall("right");
} else if(event.keyCode == 38) {
//Up Arrow
makeAjaxCall("forward");
} else if(event.keyCode == 40) {
//Down Arrow
makeAjaxCall("back");
}
});
document.addEventListener('keyup', function(event) {
if(event.keyCode == 37 ||event.keyCode == 39 ) {
//Left or Right Arrow
makeAjaxCall("steerStop");
}
else if(event.keyCode == 38 ||event.keyCode == 40 ) {
//Up or Down Arrow
makeAjaxCall("driveStop");
}
});
</script>-->
</body>
</html>
)"
Raw
motorWeb.ino
/*******************************************************************
A sketch for controlling a robot with using a web page
hosted on a ESP32
based on: https://github.com/witnessmenow/simple-wifi-controlled-rc-car
********************************************************************/
// Load Wi-Fi library
#include <WiFi.h>
#include <WebServer.h>
// load motor library
// https://github.com/JoaoLopesF/ESP32MotorControl
#include "ESP32MotorControl.h"
// Replace with your network credentials
const char* ssid = "Your SSID";
const char* password = "your Password";
// motor instance
ESP32MotorControl MotorControl = ESP32MotorControl();
// Set web server port number to 80
WebServer server(80);
const char *webpage =
#include "motorPage.h"
;
void handleRoot() {
server.send(200, "text/html", webpage);
}
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){
Serial.begin(115200);
// Attach 2 motors
MotorControl.attachMotors(12, 14, 27, 26);
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
server.on("/", handleRoot);
server.on("/forward", [](){
Serial.println("forward");
MotorControl.motorForward(0, 100);
MotorControl.motorForward(1, 100);
server.send(200, "text/plain", "forward");
});
server.on("/driveStop", [](){
Serial.println("driveStop");
MotorControl.motorsStop();
server.send(200, "text/plain", "driveStop");
});
server.on("/back", [](){
Serial.println("back");
MotorControl.motorReverse(0, 100);
MotorControl.motorReverse(1, 100);
server.send(200, "text/plain", "back");
});
server.on("/right", [](){
Serial.println("right");
MotorControl.motorForward(0, 100);
MotorControl.motorReverse(1, 100);
server.send(200, "text/plain", "right");
});
server.on("/left", [](){
Serial.println("left");
MotorControl.motorForward(1, 100);
MotorControl.motorReverse(0, 100);
server.send(200, "text/plain", "left");
});
server.on("/steerStop", [](){
Serial.println("steerStop");
MotorControl.motorsStop();
server.send(200, "text/plain", "steerStop");
});
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP Server Started");
}
void loop(void){
server.handleClient();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment