Embedded Files
Now we will see how to make the Esp32 serve up our beautiful web pages full of CSS and javascript.
First of all we need to add some libraries to your Arduino Libraries folder on your computer.
METHOD
You can download the necessary files from Github
here: https://github.com/me-no-dev/AsyncTCP
and here: https://github.com/me-no-dev/ESPAsyncWebServer
After downloading, unzip the files. Unzipping the first file will create a directory called AsyncTCP-master with a subdirectory with the same name. Rename the subdirectory AsyncTCP. Do the same with the second file, removing -master from the ESPAsyncWebServer subdirectory. Put the resulting renamed subdirectories into your Documents - Arduino - Libraries directory on your computer.
The full program is listed below but we are going to look at it a piece at a time.
We need these 3 libraries.
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
You need to replace the *s with your own SSID and password.
const char* ssid = "*******************"; // put your own home WiFi SSID here
const char* password = "*************"; // put your own home WiFi password here
AsyncWebServer server(80);
// Create AsyncWebServer object on port 80
A synchronous web server posts web pages with and HTTP request. Changes in the page only show up with a refresh of the whole page.
An Asynchronous web server uses XmlHttpRequest and Ajax to give more fine-grained control and allow elements of the page to change without needing to refresh the entire page. An AsyncWebServer allows more fulsome 2-way communication with the ESP32.
This code loads your html web page into a character array called index_html.
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
You can put your own web page here. Think about using an always on ESP32 as a personal web server for your family. You could load the page with all the links to the web sites people in your family use all the time. Like a custom home page.
</html>
)rawliteral";
AsyncWebServer server(80);
Create AsyncWebServer object on port 80. An asynchronous we server allows elements of a web page to change and send data without refreshing the entire page.
The program hangs in this while loop until the Esp32 is able to connect to your home WiFi network. If you have the serial monitor open you will see it print this line once every second until it is able to connect.
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
This line prints out the ip address used by your Esp32 in the serial monitor.
Open a web browser on any computer in your house and type this ip address into the address bar at the top. You should see your web page served up from the Esp32 over your WiFi.
Serial.println(WiFi.localIP());
Once you have completed uploading this code to the ESP32
(wait for the message "Leaving . . . Hard resetting via RTS pin . . .")
you may need to manually reset the ESP32 yourself using the EN button.
Wait a couple seconds and make note of your server's ip address in the serial monitor (set to 115200).
Type the ip address into your browser address bar. You should see your web page at this address.
The complete code is listed below.
/********
Adapted by M Druiven, https://sites.google.com/view/sparboticsesp32
Basic Web Server
Feb 19, 2021
Adapted from Rui Santos
Project details at https://RandomNerdTutorials.com/esp32-web-server-slider-pwm/
*********/
// Import required libraries
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
const char* ssid = "*******************"; // put your own home WiFi SSID here
const char* password = "*************"; // put your own home WiFi password here
AsyncWebServer server(80); // Create AsyncWebServer object on port 80
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP Web Server</title>
</head>
<body>
<h1>My Great Esp32 Web Server</h1>
<p><a href="http://4992.ca">Sparbotics</a></p>
<p> <a href="https://sites.google.com/view/sparboticsesp32">Sparbotics ESP32</a></p>
<hr>
</body>
</html>
)rawliteral";
void setup(){
Serial.begin(115200); // Serial port for debugging purposes
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});
// Start server
server.begin();
}
void loop() {
}
Page updated
Google Sites
Report abuse