ESP32 as Web Server
A web server is a system that hosts websites or web applications and delivers web pages to users' browsers upon request. It can be hardware (a physical server machine) or software (a program that responds to web requests). When someone types a website's URL or clicks a link, their browser sends an HTTP (Hypertext Transfer Protocol) request to the web server. The web server then processes this request, retrieves the requested files (like HTML, CSS, JavaScript, or images), and sends them back to the browser for display.
In the context of embedded systems, such as an ESP32 microcontroller, a web server is a small program that allows the device to serve web pages or control interfaces over a local network. By connecting the ESP32 to Wi-Fi and programming it to act as a server, users can interact with the device via a web browser, enabling remote monitoring or control through a web-based interface. This is common in IoT (Internet of Things) projects, where sensors, home automation devices, or other smart devices are controlled and monitored over a network.
Code is for setting up a simple web server on an ESP32 module, allowing users to access a webpage hosted on the device. When powered on, the ESP32 connects to a Wi-Fi network using the specified SSID and password. Once connected, it creates a web server on port 80 and serves a static HTML page featuring a "Hello, World!" message and a styled "Subscribe" button linking to a YouTube channel. The page includes CSS animations for background gradients and text effects. This example demonstrates basic web server functionality, HTML content delivery, and CSS animations for ESP32 applications.
Code:
#include <WiFi.h>#include <WebServer.h>// Replace with your network credentialsconst char* ssid = "Your_SSID";const char* password = "Your_Password";// Set up the web server on port 80WebServer server(80);const char webpage[] PROGMEM = R"rawliteral(<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello World</title><a href="https://www.youtube.com/@chapter_b" class="subscribe-btn" target="_blank">Subscribe</a><style>.subscribe-btn {padding: 10px 20px;background-color: #FF0000;color: #fff;font-size: 18px;font-weight: bold;text-transform: uppercase;border-radius: 30px;text-decoration: none;transition: 0.3s;}.subscribe-btn:hover {background-color: #cc0000;}</style><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, sans-serif;}body {display: flex;align-items: center;justify-content: center;height: 100vh;background: linear-gradient(135deg, #ff6b6b, #f9c3ff, #6b8cff);background-size: 400% 400%;animation: gradient 15s ease infinite;}h1 {font-size: 4rem;color: #fff;text-transform: uppercase;text-align: center;position: relative;overflow: hidden;animation: fadeIn 3s ease-in-out;}h1::before {content: "Hello, World!";position: absolute;top: 0;left: 0;right: 0;bottom: 0;color: #fff;clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);animation: wave 3s infinite ease-in-out;}h1::after {content: "Hello, World!";position: absolute;top: 0;left: 0;right: 0;bottom: 0;color: #000;clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);animation: wave 3s infinite ease-in-out;animation-delay: 1.5s;}@keyframes gradient {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}@keyframes fadeIn {from { opacity: 0; transform: translateY(-30px); }to { opacity: 1; transform: translateY(0); }}@keyframes wave {0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%); }50% { clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%); }}</style></head><body><h1>Hello, World!</h1></body></html>)rawliteral";void handleRoot() {server.send(200, "text/html", webpage);}void setup() {Serial.begin(115200);// Connect to Wi-FiWiFi.begin(ssid, password);Serial.print("Connecting to Wi-Fi");while (WiFi.status() != WL_CONNECTED) {delay(500);Serial.print(".");}// Print local IP addressSerial.println();Serial.print("Connected to Wi-Fi. IP address: ");Serial.println(WiFi.localIP());// Route for the root pageserver.on("/", handleRoot);// Start the serverserver.begin();Serial.println("Web server started!");}void loop() {// Handle client requestsserver.handleClient();}
This program sets up a simple web server on an ESP32 microcontroller that displays a styled "Hello, World!" webpage when accessed. The ESP32 connects to a specified Wi-Fi network using credentials provided in the `ssid` and `password` variables. Once connected, it starts a web server on port 80 and listens for client requests. When a user accesses the ESP32's IP address, it serves an HTML page with animated text and a "Subscribe" button that links to a YouTube channel. The `handleClient()` function in the `loop` continuously listens for and processes requests, while `handleRoot()` sends the HTML content to the client.