This comprehensive tutorial will guide you through creating a web-based control panel using an ESP32 module to adjust the brightness of multiple LEDs remotely. Enhance your IoT skills by integrating hardware and software in this exciting project.

What You'll Need

  • 1 × ESP32 Dev Board (38-pin, WROOM-32)
  • 1 × Breadboard
  • 3 × LEDs (Red, Green, Yellow)
  • 3 × 220Ω resistors
  • Jumper wires

Wiring Setup

Follow this straightforward wiring diagram to connect your LEDs:

  • GPIO13 → 220Ω → Red LED anode → cathode to GND
  • GPIO26 → 220Ω → Green LED anode → cathode to GND
  • GPIO33 → 220Ω → Yellow LED anode → cathode to GND

Ensure all connections are securely fitted onto your breadboard.

Software Implementation

Step 1: Set Up Your IDE

Use Arduino IDE to program your ESP32. Install the necessary libraries for WiFi and web server functionality if not already present.

Step 2: Code Explanation

The ESP32 will host a web server displaying sliders to control the brightness of each LED via PWM (Pulse Width Modulation). JavaScript sends user input from the web page to adjust the LEDs' brightness levels.

Step 3: Uploading the Code

Replace yourNetWork and Password with your Wi-Fi credentials in the provided code below:

 

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

const char* ssid     = "yourNetWork";
const char* password = "Password";

const int ledPins[] = {13, 26, 33};
int dutyCycles[]    = {128, 128, 128};

WebServer server(80);

// Generate HTML web page
String getHTML() {
  String html = R"rawliteral(
    <!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ESP32 LED Control</title>
    <style>
      body { font-family: sans-serif; text-align: center; background: #f0f0f0; }
      .card { background: #fff; padding: 20px; margin: 10px auto; width: 90%; max-width: 400px; box-shadow: 0 0 10px #ccc; border-radius: 8px; }
      input[type=range] { width: 100%; }
    </style>
    </head><body>
    <h2>ESP32 Multi-LED Brightness Control</h2>
  )rawliteral";

  for (int i = 0; i < 3; i++) {
    html += "<div class='card'><h3>LED on GPIO " + String(ledPins[i]) + "</h3>";
    html += "<input type='range' min='0' max='255' value='" + String(dutyCycles[i]) +
            "' oninput='updatePWM(" + String(i) + ", this.value)' />";
    html += "<p>Brightness: <span id='val" + String(i) + "'>" + String(dutyCycles[i]) + "</span></p></div>";
  }

  html += R"rawliteral(
    <script>
      function updatePWM(idx, val) {
        document.getElementById('val'+idx).innerText = val;
        fetch(`/set?idx=${idx}&value=${val}`);
      }
    </script>
    </body></html>
  )rawliteral";

  return html;
}

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

void handleSet() {
  if (server.hasArg("idx") && server.hasArg("value")) {
    int idx = server.arg("idx").toInt();
    int val = server.arg("value").toInt();
    if (idx >= 0 && idx < 3) {
      dutyCycles[idx] = val;
      analogWrite(ledPins[idx], val);
    }
  }
  server.send(200, "text/plain", "OK");
}

void setup() {
  Serial.begin(115200);
  for (int i = 0; i < 3; i++) {
    pinMode(ledPins[i], OUTPUT);
    analogWrite(ledPins[i], dutyCycles[i]);
  }

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) delay(500);

  server.on("/", handleRoot);
  server.on("/set", handleSet);
  server.begin();
}

void loop() { server.handleClient(); }

 

Testing the Setup

Upload the code to your ESP32 board and open the serial monitor to note the IP address. Enter this IP address in your web browser. Adjust the sliders to see your LEDs change brightness instantly!

 

Enjoy exploring the integration of IoT with your projects, and continue experimenting with ESP32 capabilities!