#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "Wokwi-GUEST";
const char* password = "";
#define LED1 25
#define LED2 27
#define LED3 14
#define LED4 18
#define LED5 2
WebServer server(80);
bool ledState = false;
// ---------- Web Page ----------
String webpage() {
return R"rawliteral(
<html>
<head>
<title>ESP32 LED CONTROL</title>
<style>
body{
text-align: center;
text-box-trim: ;
}
h1{
color: red;
font-family: Times New Roman;
}
h2{
color: blue ;
font-family: Arial;
}
h3{
color: purple;
font-family: Verdana;
}
h4{
color: black;
font-family: Georgia;
}
h5{
color: brown;
font-family: Roman;
}
button{
width: 100px;
height: 60px;
font-size: fit;
color: white;
border-radius:10px ;
}
.On{
background-color: green;
}
.Off{
background-color: red;
}
</style>
</head>
<body>
<h1>LED1 CONTROL</h1>
<form action="/on1"> <button class="On">LEDON</button> </form>
<form action="/off1"> <button class= "Off">LEDOFF</button> </form>
<h2>LED2 CONTROL</h2>
<form action="/on2"> <button class="On">LEDON</button> </form>
<form action="/off2"> <button class= "Off">LEDOFF</button> </form>
<h3>LED3 CONTROL</h3>
<form action="/on3"> <button class="On">LEDON</button> </form>
<form action="/off3"> <button class= "Off">LEDOFF</button> </form>
<h4>LED4 CONTROL</h4>
<form action="/on4"> <button class="On">LEDON</button> </form>
<form action="/off4"> <button class= "Off">LEDOFF</button> </form>
<h5>LED5 CONTROL</h5>
<form action="/on5"> <button class="On">LEDON</button> </form>
<form action="/off5"> <button class= "Off">LEDOFF</button> </form>
</body>
</html>
)rawliteral";
}
// ---------- Page Handlers ----------
void handleRoot() {
server.send(200, "text/html", webpage());
}
void handleOn1() {
ledState = true;
digitalWrite(LED1, HIGH);
server.send(200, "text/html", webpage());
}
void handleOff1() {
ledState = false;
digitalWrite(LED1, LOW);
server.send(200, "text/html", webpage());
}
void handleOn2()
{
digitalWrite(LED2, HIGH);
server.send(200, "text/html", webpage());
}
void handleOff2()
{
digitalWrite(LED2, LOW);
server.send(200, "text/html", webpage());
}
void handleOn3()
{
digitalWrite(LED3, HIGH);
server.send(200, "text/html", webpage());
}
void handleOff3()
{
digitalWrite(LED3, LOW);
server.send(200, "text/html", webpage());
}
void handleOn4()
{
digitalWrite(LED4, HIGH);
server.send(200, "text/html", webpage());
}
void handleOff4()
{
digitalWrite(LED4, LOW);
server.send(200, "text/html", webpage());
}
void handleOn5()
{
digitalWrite(LED5, HIGH);
server.send(200, "text/html", webpage());
}
void handleOff5()
{
digitalWrite(LED5, LOW);
server.send(200, "text/html", webpage());
}
void setup() {
Serial.begin(115200);
pinMode(LED1, OUTPUT);
digitalWrite(LED1, LOW);
pinMode(LED2, OUTPUT);
digitalWrite(LED2, LOW);
pinMode(LED3, OUTPUT);
digitalWrite(LED3, LOW);
pinMode(LED4, OUTPUT);
digitalWrite(LED4, LOW);
pinMode(LED5, OUTPUT);
digitalWrite(LED5, LOW);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
}
Serial.print("ESP32 IP Address: ");
Serial.println(WiFi.localIP());
// LED 1
server.on("/", handleRoot);
server.on("/on1", handleOn1);
server.on("/off1", handleOff1);
//LED2
server.on("/on2", handleOn2);
server.on("/off2", handleOff2);
//LED3
server.on("/on3", handleOn3);
server.on("/off3", handleOff3);
//LED4
server.on("/on4", handleOn4);
server.on("/off4", handleOff4);
//LED5
server.on("/on5", handleOn5);
server.on("/off5", handleOff5);
server.begin();
}
void loop() {
server.handleClient();
}