Overzicht

Het idee hier was simpel: een LED bedienen vanaf mijn telefoon. Geen Bluetooth, geen app; gewoon een webpagina die door de ESP32 zelf wordt geserveerd en bereikbaar is vanaf alles op mijn WiFi thuis. Ik zou een schuifregelaar in de browser krijgen en de LED zou in realtime reageren. Het bleek een leuke kleine oefening in het combineren van WiFi, HTTP en PWM; drie dingen die in vrijwel elk IoT-project terugkomen.

Systeemarchitectuur

De ESP32 fungeert zowel als WiFi-client als als webserver.

Hardware

ESP32-WROOM-32-ontwikkelbord
Ingebouwde LED (GPIO 2)
USB-kabel

Begonnen met de ingebouwde LED voor de eenvoud. Geen breadboard, geen externe componenten; alleen het ontwikkelbord en een USB-kabel. De LED op het bord zit op GPIO 2, wat handig is omdat die al is aangesloten en je niet hoeft na te denken over stroombegrenzingsweerstanden.

Software

Omgeving: Arduino IDE met de ESP32 Arduino Core

Bibliotheken:

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

Beide bibliotheken worden meegeleverd met de ESP32 Arduino Core, dus er is niets extra’s te installeren. WiFi.h verzorgt de verbinding en WebServer.h geeft je een lichtgewicht HTTP-server; perfect voor dit soort dingen.

Implementatie

WiFi-webserver

De ESP32 maakt verbinding met je lokale WiFi en serveert een bedieningspagina.
Apparaten op hetzelfde netwerk kunnen het toegewezen IP-adres openen, bijvoorbeeld http://192.168.x.x/.

Dit is wat ik het leukst vind aan de ESP32: je draait een webserver op in een handvol regels en ineens is je microcontroller bereikbaar vanaf elk apparaat op het netwerk. Geen routerconfiguratie, geen port forwarding, gewoon een lokaal IP-adres.

PWM-helderheidsregeling

De helderheid gebruikt PWM met een 8-bits resolutie (0–255 komt overeen met 0%–100%).
De webschuifregelaar stuurt een HTTP-verzoek om de dutycycle te wijzigen:

Browser → /set?value=brightness → PWM-uitgang van de ESP32

Ik koos voor 8-bits PWM (0–255) omdat dat mooi aansluit op het bereik van ledcWrite en op de min/max-attributen van de schuifregelaar. De webpagina gebruikt fetch() om bij elke beweging van de schuifregelaar een GET-verzoek naar /set?value=128 te sturen, en de ESP32 parseert de waarde en schrijft die naar het PWM-kanaal. Op 5000 Hz is er geen zichtbare flikkering.

Testen

Upload de sketch.
Open de Serial Monitor en noteer het IP-adres dat na het verbinden wordt getoond.
Ga in een browser naar dat IP-adres.
Beweeg de schuifregelaar om de LED-helderheid te wijzigen.

Resultaat

De ESP32 maakt verbinding, serveert de interface, ontvangt HTTP-helderheidswaarden en stuurt de LED aan via PWM. De hele keten (hardware, netwerk, interface, fysieke uitvoer) werkt zoals verwacht en vormt een basis voor meer interactieve IoT-projecten.

Dit is een van die bouwprojecten waar de verhouding tussen opbrengst en inspanning erg bevredigend is. Met ongeveer 160 regels code krijg je een werkend, webgestuurd licht. Hetzelfde patroon (WiFi + webserver + PWM) breidt zich vanzelf uit naar zaken als motortoerentalregeling, servopositionering of het aansturen van een LED-strip via een MOSFET.

Volledige code

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

// Replace with your WiFi name and password
const char* ssid = "YOUR_WIFI_USERNAME_HERE";
const char* password = "YOUR_WIFI_PASSWORD_HERE";

WebServer server(80);

// LED pin
#define LED_PIN 2

// PWM settings
#define PWM_CHANNEL 0
#define PWM_FREQ 5000
#define PWM_RESOLUTION 8   // 8-bit = 0–255

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

  // Configure PWM
  ledcAttach(LED_PIN, PWM_FREQ, PWM_RESOLUTION);

  // Start at 50% brightness
  ledcWrite(PWM_CHANNEL, 128);

  // Connect to WiFi
  WiFi.begin(ssid, password);
  Serial.print("Connecting WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println();
  Serial.println("WiFi connected");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  // Home page
  server.on("/", []() {
    String html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ESP32 LED Control</title>
<style>
body { text-align: center; font-family: Arial; }
input { width: 80%; }
</style>
</head>
<body>
<h1>ESP32 LED Control</h1>
<h2>Brightness Control</h2>
<input type="range" min="0" max="255" value="128" id="brightness"
       oninput="changeBrightness(this.value)">
<p>Current Brightness: <span id="value">128</span></p>
<script>
function changeBrightness(value) {
  document.getElementById("value").innerHTML = value;
  fetch("/set?value=" + value);
}
</script>
</body>
</html>
    )rawliteral";
    server.send(200, "text/html;charset=utf-8", html);
  });

  // Receive brightness data from web page
  server.on("/set", []() {
    if (server.hasArg("value")) {
      int brightness = server.arg("value").toInt();
      // Output PWM signal
      ledcWrite(LED_PIN, brightness);
      Serial.print("Brightness: ");
      Serial.println(brightness);
    }
    server.send(200, "text/plain", "OK");
  });

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

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

ESP32 WiFi LED-helderheidsregeling

Jaar

Type

Categorie

Gereedschap