ESP32 Web-Controlled LED and Button Project

In this project, we will build a simple web-controlled LED using an ESP32-WROOM-32 board. The ESP32 hosts a small web page that lets you turn an LED on and off from a browser, while a physical push button provides local control. Along the way, we will use safer GPIO pins for the LED and button so the circuit avoids common ESP32 pinout problems.

Jun 18, 2026

•

4842 views

•

1 respects

•

CC BY-NC 4+

Embedded

Communication

Devices & Components

Arduino® Nano ESP32 with headers

Software & Tools

Arduino IDE

Project description

Code

Arduino ESP32 LED Control

cpp

Simple LED control via WebServer

1#include <WiFi.h>
2#include <WebServer.h>
3
4const char* ssid = "YOUR_WIFI_NAME";
5const char* password = "YOUR_WIFI_PASSWORD";
6
7const int ledPin = 23;
8const int buttonPin = 18;
9
10bool ledState = false;
11bool lastButtonState = LOW;
12
13WebServer server(80);
14
15String htmlPage() {
16  String ledText = ledState ? "ON" : "OFF";
17
18  String page = "<!DOCTYPE html><html>";
19  page += "<head>";
20  page += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
21  page += "<title>ESP32 LED Control</title>";
22  page += "<style>";
23  page += "body{font-family:Arial;text-align:center;background:#f4f4f4;padding-top:40px;}";
24  page += ".card{background:white;max-width:420px;margin:auto;padding:25px;border-radius:12px;";
25  page += "box-shadow:0 2px 8px rgba(0,0,0,0.15);}";
26  page += "a.button{display:inline-block;padding:14px 28px;margin:10px;font-size:18px;";
27  page += "background:#1976d2;color:white;text-decoration:none;border-radius:8px;}";
28  page += "</style>";
29  page += "</head>";
30  page += "<body>";
31  page += "<div class='card'>";
32  page += "<h1>ESP32 LED Control</h1>";
33  page += "<p>LED State: <strong>" + ledText + "</strong></p>";
34  page += "<a class='button' href='/on'>Turn ON</a>";
35  page += "<a class='button' href='/off'>Turn OFF</a>";
36  page += "<a class='button' href='/toggle'>Toggle</a>";
37  page += "<p>You can also press the physical button connected to GPIO 18.</p>";
38  page += "</div>";
39  page += "</body></html>";
40
41  return page;
42}
43
44void handleRoot() {
45  server.send(200, "text/html", htmlPage());
46}
47
48void handleOn() {
49  ledState = true;
50  digitalWrite(ledPin, HIGH);
51  server.send(200, "text/html", htmlPage());
52}
53
54void handleOff() {
55  ledState = false;
56  digitalWrite(ledPin, LOW);
57  server.send(200, "text/html", htmlPage());
58}
59
60void handleToggle() {
61  ledState = !ledState;
62  digitalWrite(ledPin, ledState ? HIGH : LOW);
63  server.send(200, "text/html", htmlPage());
64}
65
66void setup() {
67  Serial.begin(115200);
68
69  pinMode(ledPin, OUTPUT);
70  pinMode(buttonPin, INPUT);
71
72  digitalWrite(ledPin, LOW);
73
74  WiFi.begin(ssid, password);
75
76  Serial.println("Connecting to Wi-Fi...");
77  while (WiFi.status() != WL_CONNECTED) {
78    delay(500);
79    Serial.print(".");
80  }
81
82  Serial.println();
83  Serial.println("Connected to Wi-Fi");
84  Serial.print("ESP32 IP Address: ");
85  Serial.println(WiFi.localIP());
86
87  server.on("/", handleRoot);
88  server.on("/on", handleOn);
89  server.on("/off", handleOff);
90  server.on("/toggle", handleToggle);
91
92  server.begin();
93  Serial.println("Web server started");
94}
95
96void loop() {
97  server.handleClient();
98
99  bool currentButtonState = digitalRead(buttonPin);
100
101  if (currentButtonState == HIGH && lastButtonState == LOW) {
102    ledState = !ledState;
103    digitalWrite(ledPin, ledState ? HIGH : LOW);
104    delay(200);
105  }
106
107  lastButtonState = currentButtonState;
108}

#include <WiFi.h>
#include <WebServer.h>

const char* ssid = "YOUR_WIFI_NAME";
const char* password = "YOUR_WIFI_PASSWORD";

const int ledPin = 23;
const int buttonPin = 18;

bool ledState = false;
bool lastButtonState = LOW;

WebServer server(80);

String htmlPage() {
  String ledText = ledState ? "ON" : "OFF";

  String page = "<!DOCTYPE html><html>";
  page += "<head>";
  page += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
  page += "<title>ESP32 LED Control</title>";
  page += "<style>";
  page += "body{font-family:Arial;text-align:center;background:#f4f4f4;padding-top:40px;}";
  page += ".card{background:white;max-width:420px;margin:auto;padding:25px;border-radius:12px;";
  page += "box-shadow:0 2px 8px rgba(0,0,0,0.15);}";
  page += "a.button{display:inline-block;padding:14px 28px;margin:10px;font-size:18px;";
  page += "background:#1976d2;color:white;text-decoration:none;border-radius:8px;}";
  page += "</style>";
  page += "</head>";
  page += "<body>";
  page += "<div class='card'>";
  page += "<h1>ESP32 LED Control</h1>";
  page += "<p>LED State: <strong>" + ledText + "</strong></p>";
  page += "<a class='button' href='/on'>Turn ON</a>";
  page += "<a class='button' href='/off'>Turn OFF</a>";
  page += "<a class='button' href='/toggle'>Toggle</a>";
  page += "<p>You can also press the physical button connected to GPIO 18.</p>";
  page += "</div>";
  page += "</body></html>";

  return page;
}

void handleRoot() {
  server.send(200, "text/html", htmlPage());
}

void handleOn() {
  ledState = true;
  digitalWrite(ledPin, HIGH);
  server.send(200, "text/html", htmlPage());
}

void handleOff() {
  ledState = false;
  digitalWrite(ledPin, LOW);
  server.send(200, "text/html", htmlPage());
}

void handleToggle() {
  ledState = !ledState;
  digitalWrite(ledPin, ledState ? HIGH : LOW);
  server.send(200, "text/html", htmlPage());
}

void setup() {
  Serial.begin(115200);

  pinMode(ledPin, OUTPUT);
  pinMode(buttonPin, INPUT);

  digitalWrite(ledPin, LOW);

  WiFi.begin(ssid, password);

  Serial.println("Connecting to Wi-Fi...");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println();
  Serial.println("Connected to Wi-Fi");
  Serial.print("ESP32 IP Address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/on", handleOn);
  server.on("/off", handleOff);
  server.on("/toggle", handleToggle);

  server.begin();
  Serial.println("Web server started");
}

void loop() {
  server.handleClient();

  bool currentButtonState = digitalRead(buttonPin);

  if (currentButtonState == HIGH && lastButtonState == LOW) {
    ledState = !ledState;
    digitalWrite(ledPin, ledState ? HIGH : LOW);
    delay(200);
  }

  lastButtonState = currentButtonState;
}

Downloadable files

ESP32_LED_Control_Simple

Sketch for ESP32 LED Control project

ESP32_LED_Control_Simple.ino

Comments

Only logged in users can leave comments

RolandPelayo

0 Followers

•

0 Projects

Intro