Hardware components | ||||||
| × | 1 | ||||
| × | 1 | ||||
 |
| × | 1 | |||
Software apps and online services | ||||||
 |
| |||||
Story
In this lesson, you’ll turn your BallyBot into a portable WiFi hotspot and host a website of HTML code. The BallyBot's WiFi capabilities will be the theme today, and going over it will help in every future lesson.
Prerequisites
- Complete Lessons 1-4 (optional)
- Basic understanding of WiFi networks and web servers.
The ESP32 chip in your BallyBot can act as an Access Point (AP), creating its own WiFi network.
Here’s code to initialize it:
Example Code: Start the Hotspot
#include <WiFi.h>
const char* ssid = "BallyBot_AP"; /* Hotspot name */
const char* password = "12345678"; /* Hotspot password (8+ chars) */
void setup() {
pinMode(14, OUTPUT); /* must set pin as it is on by default */
Serial.begin(115200);
WiFi.softAP(ssid, password); /* Start the AP */
Serial.print("Hotspot IP: ");
Serial.println(WiFi.softAPIP()); /* Print the AP's IP address */
}
void loop() {}Explanation
We Start off with #include <WiFi.h> to import the ability to use WiFi commands.
Next create 2 strings of text ssid & password to use when setting up the WiFi network
After is the WiFi Command: WiFi.softAP() which actually creates the WiFi network named "BallyBot_AP" and password "12345678".
Upload this code, then check your Serial Monitor for the IP address (e.g., 192.168.1.1).
Access points VS Hotspots:
Access points and hotspots are essentially the same thing, providing wireless internet connections. The terms are often used the same way, with access point meaning the device that provides the connection and hotspot meaning the area or spot where you can get online.
Step 2: Creating a Web ServerWe’ll use the WebServer library to handle HTTP requests and serve a webpage.
Note: This example is the most important and I need you to understand it for the next lessons
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;
}Explanation
- A vital command to understand is
server.on("/", handle_OnConnect)insetup().
server.on("/", handle_OnConnect)calls the functionhandle_OnConnect()when someone visits the root URL ("/") of your website. For example, if your website's name is http://192.168.1.1, then "/" refers to that exact name. When someone visits that address,handle_OnConnectis triggered.
- The next core command is
server.send(200, "text/html", SendHTML())
This is what handle_OnConnect() returns and it is what sends the connected computer your HTML website after it connects to the robots URL.Bonus:
Change HTML the SendHTML() function, you can host almost any website by just putting custom HTML code in here. You can even use ChatGPT to create an HTML website and paste it in the HTML section!
Upload the complete code (Steps 1 || 2)
Connect your phone/computer to the "BallyBot_AP" network.
Open a browser and navigate to 192.168.1.1
Troubleshooting Tips
Can’t connect to the access point?
- Ensure the ESP32 is powered and the password is 8+ characters.
- Make Sure that there is no other Ballybot hosting with same SSID(wifi name) as you, it can confuse the laptop/phone you are connecting with.
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!
Previous Lesson: Lesson 4: Trick Routines
Next Lesson: Lesson 6: Customizing websites for your access point
Comments