Hardware components | ||||||
| × | 1 | ||||
| × | 1 | ||||
 |
| × | 1 | |||
Software apps and online services | ||||||
 |
| |||||
Now that you know WiFi Hosting on your BallyBot, let’s play with this idea! In this lesson, you’ll use the hotspot feature to make a website control your robot remotely. No more preset movements—just wireless freedom!
Prerequisites
- Complete Lesson 5
- Basic understanding of WiFi networks and web servers.
We can start by looking more at the example of last lesson:
Example Code: Basic Web Server
#include <WiFi.h>
#include <WebServer.h>
/* Put your SSID & Password */
const char* ssid = "BallyBot_AP"; /* Enter SSID here */
const char* password = "12345678"; /* Enter Password here */
/* Put IP Address settings */
IPAddress local_ip(192,168,1,1); /*type 192.168.1.1 into url once connected*/
IPAddress gateway(192,168,1,1); /* Wifi detail */
IPAddress subnet(255,255,255,0); /* Wifi detail */
WebServer server(80);
void setup() {
pinMode(14, OUTPUT); /* must set pin as it is on by default */
Serial.begin(115200);
WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
void handle_OnConnect() {
Serial.println("new Client Connected!");
server.send(200, "text/html", SendHTML());
}
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}
String SendHTML(){
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html><head>
<title>ESP Input Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
Hello World!
</body></html>
)rawliteral";
return index_html;
}We learned in the last lesson that the sendhtml() function can host whatever HTML code we want and the clients browser will run it.
Here are some examples of what could work for the send HTML command:
String SendHTML(){
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
This is bad practice but Vaild HTML!
</html>
)rawliteral";
return index_html;
}String SendHTML(){
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<style>body{font:48px Arial;text-align:center;margin-top:20vh;animation:color-change 5s infinite}@keyframes color-change{0%{color:red}20%{color:orange}40%{color:yellow}60%{color:green}80%{color:blue}100%{color:red}}</style>
<body>Hello from BallyBot!</body>
</html>
)rawliteral";
return index_html;
}Now we are going to go over how to make your ESP32 based BallyBot respond to inputs from your website.
For this is will use a website command called fetch. It will lets us get to a URL without actually opening it in the way you would click a link.
fetch('/' + 'forward'); // Send request to /forwardOnce the website calls a fetch() the BallyBot can receive the GET request it makes using server.on("/forward", h_forward);. Then the server.on() command calls what is in it second input in this example h_forward():
void h_forward(){
move(HIGH,HIGH,LOW,100);
move(LOW,LOW,LOW,0);
}Our goal is to create a web interface with buttons to control the BallyBot.
Example Code: Interactive HTML Page
Let's start by understanding the HTML of a control website here:
<!DOCTYPE HTML>
<html>
<head>
<title>BallyBot Controller</title>
<style>
button { padding: 20px; margin: 10px; }
</style>
</head>
<body>
<h1>BallyBot Controller</h1>
<button onclick="move('forward')">Forward</button><br>
<button onclick="move('left')">Left</button>
<button onclick="move('right')">Right</button><br>
<button onclick="move('backward')">Backward</button><br>
<script>
function move(direction) {
fetch('/' + direction); // Send request to /forward, /left, etc.
}
</script>
</body>
</html>- Four
buttonelements are created with onclick events that call themovefunction with different direction parameters: "forward", "left", "right", and "backward". - When a button is clicked, the
movefunction is called with the corresponding direction parameter. - The function uses the
fetchAPI to send a GET request to the server with the URL path set to the direction parameter (e.g.,/forward,/left, etc.). - This GET request will look like:
https://192.168.1.1/forwardto the server
Step 4: Handling HTTP Requests
Map button actions to BallyBot movements by defining URL handlers.
Example Code: Movement Handlers
#include <WiFi.h>
#include <WebServer.h>
/* Put your SSID & Password */
const char* ssid = "BallyBot_AP"; /* Enter SSID here */
const char* password = "12345678"; /* Enter Password here */
/* Put IP Address details */
IPAddress local_ip(192,168,1,1); /*type 192.168.1.1 into url once connected*/
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);
WebServer server(80);
void setup() {
pinMode(14, OUTPUT); /* must set pin as it is on by default */
pinMode(12, OUTPUT);
pinMode(2, OUTPUT);
Serial.begin(115200);
WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);
server.on("/", handle_OnConnect);
server.on("/forward", h_forward);
server.on("/left", h_left);
server.on("/right", h_right);
server.on("/backward", h_backward);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
void handle_OnConnect() {
Serial.println("new Client Connected!");
server.send(200, "text/html", SendHTML());
}
void h_forward(){
move(HIGH,HIGH,LOW,100);
move(LOW,LOW,LOW,0);
}
void h_left(){
move(HIGH,LOW,LOW,100);
move(LOW,LOW,LOW,0);
}
void h_right(){
move(LOW,HIGH,LOW,100);
move(LOW,LOW,LOW,0);
}
void h_backward(){
move(LOW,LOW,HIGH,100);
move(LOW,LOW,LOW,0);
}
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}
String SendHTML(){
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
<title>BallyBot Controller</title>
<style>
button { padding: 20px; margin: 10px; }
</style>
</head>
<body>
<h1>BallyBot Controller</h1>
<button onclick="move('forward')">Forward</button><br>
<button onclick="move('left')">Left</button>
<button onclick="move('right')">Right</button><br>
<button onclick="move('backward')">Backward</button><br>
<script>
function move(direction) {
fetch('/' + direction); // Send request to /forward, /left, etc.
}
</script>
</body>
</html>
)rawliteral";
return index_html;
}
void move(bool l, bool r, bool b, int time){
digitalWrite(2, l); /* left motor forward */
digitalWrite(12, r); /* right motor forward */
digitalWrite(14, b); /* both motors backward */
delay(time); /* time till next step */
}Conclusion
You’ve just transformed your BallyBot into a WiFi-enabled robot! Now you can control it from any device connected to its hotspot.
What’s Next? In Lesson 6, we’ll integrate a camera for real-time video streaming and object detection!
ResourcesPrevious Lesson: Lesson 5: Trick Routines
Next Lesson: Lesson 7: Customizing websites for your access point
Comments