Scribd
Upload
7 views

ESP32WebServerStepByStep 26

The document describes how to set up a web server on an ESP32 development board to control LEDs through web requests. It provides code to turn on/off GPIO pins connected to green and red LEDs when URLs with specific paths are received and generates an HTML page with ON/OFF buttons to control the LEDs.

Uploaded by

andika putra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

ESP32WebServerStepByStep 26

The document describes how to set up a web server on an ESP32 development board to control LEDs through web requests. It provides code to turn on/off GPIO pins connected to green and red LEDs when URLs with specific paths are received and generates an HTML page with ON/OFF buttons to control the LEDs.

Uploaded by

andika putra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

ESP32 Web Server Step by Step

Serial.println("Green LED is ON");


Gpio26State = "ON";
digitalWrite(gpio26, HIGH);
} else if (header.indexOf("GET /greenLED/OFF") >= 0) {
Serial.println("Green LED is OFF");
Gpio26State = "OFF";
digitalWrite(gpio26, LOW);
} else if (header.indexOf("GET /redLED/ON") >= 0) {
Serial.println("Red LED is ON");
Gpio27State = "ON";
digitalWrite(gpio27, HIGH);
} else if (header.indexOf("GET /redLED/OFF") >= 0) {
Serial.println("Red LED is OFF");
Gpio27State = "OFF";
digitalWrite(gpio27, LOW);
}
/*For example, if you have pressed the green LED ON button, the URL changes to
the ESP32 development board IP address followed by /greenLED/ON, and we receive
that information on the HTTP header. If it contains GET /greenLED/ON, the code
prints a message in the Serial Monitor, changes the gpio26State variable to ON,
and turns the LED ON. It is the same for the other buttons. If you want to add
more outputs, you should modify this part of the code to include them*/
//Then we make the HTML web page
client.println("<!DOCTYPE html><html>"); //Indicates that we are sending HTML
client.println("<head><meta name=\"viewport\" content=\"width=device-width,
initial-scale=1\">");//It makes the web page responsive in any web browser
client.println("<link rel=\"icon\" href=\"data:,\">"); //We prevent
requests related to the favicon
//CSS style for ON/OFF buttons
//You can change the background-color, font-size, make border, change
font color if you want so
client.println("<style>html { font-family: Helvetica; display: inline-
block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #2E7C4F; border: none;
color: white; padding: 16px 40px;"); //ON button CSS style
client.println("text-decoration: none; font-size: 30px; margin:
2px;}");
client.println(".button1 {background-color: #FF4C4F; border: none;
color: white; padding: 16px 33px;"); //OFF button CSS style
client.println("text-decoration: none; font-size: 30px; margin:
2px;}</style></head>");
client.println("<body><h1>ESP32 Web Server</h1>");

Page 26
Do you want to find more projects - go to ACOPTEX.COM

You might also like