ESP32 Web-LED Steuerung — ESP32 simulation

ESP32 Webserver mit LED-AN/AUS-Buttons und Helligkeits-Slider (synchrones WebServer-Klasse, keine AsyncTCP/WDT-Fehler).

An interactive ESP32 circuit simulation you can run free in your browser on Velxio, by bmw550i.

Components

Sketch code

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

// Onboard-LED Pin beim ESP32 DevKit V1
const int ledPin = 2;

// PWM-Einstellungen für die Helligkeit
const int pwmFreq = 5000;
const int pwmResolution = 8; // 8-Bit = Werte von 0 bis 255

// WLAN-Zugangsdaten (Gastnetz ohne Passwort)
const char* ssid = "Wokwi-GUEST";
const char* password = "";

WebServer server(80);

// --- HTML, CSS und JavaScript ---
const char index_html[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ESP32 LED Steuerung</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; background-color: #f4f4f9; color: #333; }
    .container { max-width: 400px; margin: auto; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    button { padding: 15px 30px; font-size: 18px; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; color: white; margin: 10px; width: 80%; }
    .btn-on { background-color: #2ecc71; }
    .btn-off { background-color: #e74c3c; }
    .slider-box { margin-top: 30px; }
    input[type=range] { width: 80%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; }
    h2 { margin-bottom: 5px; }
    span { font-weight: bold; color: #3498db; }
  </style>
</head>
<body>

<div class="container">
  <h1>ESP32 DevKit V1</h1>

  <!-- Buttons für An/Aus -->
  <button class="btn-on" onclick="sendRequest('/led?state=1')">LED AN (100%)</button>
  <button class="btn-off" onclick="sendRequest('/led?state=0')">LED AUS</button>

  <!-- Slider für Helligkeit -->
  <div class="slider-box">
    <h2>Helligkeit: <span id="sliderVal">128</span></h2>
    <input type="range" min="0" max="255" value="128" oninput="updateSlider(this.value)">
  </div>
</div>

<script>
  // Funktion zum Senden der HTTP-Requests (Fetch-API)
  function sendRequest(url) {
    fetch(url)
      .then(response => console.log('Erfolgreich:', url))
      .catch(error => {
        console.warn('ESP32 nicht erreichbar (Offline-Test).');
      });
  }

  // Wird aufgerufen, wenn der Slider bewegt wird
  function updateSlider(val) {
    document.getElementById('sliderVal').innerText = val;
    sendRequest('/slider?value=' + val);
  }
</script>

</body>
</html>
)=====";

// --- Handler für die einzelnen Routen ---

void handleRoot() {
  server.send_P(200, "text/html", index_html);
}

void handleLed() {
  if (server.hasArg("state")) {
    String state = server.arg("state");
    if (state == "1") {
      ledcWrite(ledPin, 255); // Volle Helligkeit
      Serial.println("LED manuell eingeschaltet (100%)");
    } else {
      ledcWrite(ledPin, 0);   // Aus
      Serial.println("LED manuell ausgeschaltet");
    }
  }
  server.send(200, "text/plain", "OK");
}

void handleSlider() {
  if (server.hasArg("value")) {
    String value = server.arg("value");
    int pwmValue = value.toInt();
    ledcWrite(ledPin, pwmValu

More projects by bmw550i