Web LED Control Panel

ESP32 DevKit (WROOM-32)·Arduino C++·Updated Jul 27, 2026·by FluxBench TeamIncludes Lab + Schematic

A web form served straight from the ESP32 controls an LED on the breadboard: type a brightness (0-255), pick steady / blink / off and press Apply — the values travel to the sketch through server.arg(). In the simulator a virtual browser opens the page about 2.5 seconds after server.begin(); submit the form or click the quick-pick links right in the browser panel and watch the LED on GPIO4 dim, blink or switch off. On real hardware, fill in your WiFi details and open the printed IP address on your phone.

sketch.ino

// Web LED Control Panel - control an LED from a web form served by the ESP32 itself.
// In the FluxBench simulator a virtual browser opens your pages about 2.5 s after
// server.begin(). Type a brightness, pick a mode and press Apply right in the browser
// panel - the values reach the sketch through server.arg(). On real hardware, fill in
// your WiFi name and password and open the printed IP address on your phone.

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

#define LED_PIN 4   // external LED on the breadboard (330 ohm resistor to GND)

WebServer server(80);
int level = 128;          // brightness 0..255
String mode = "steady";   // steady | blink | off
bool blinkOn = true;
unsigned long lastBlink = 0;

void applyLed() {
  if (mode == "off") { analogWrite(LED_PIN, 0); return; }
  if (mode == "blink" && !blinkOn) { analogWrite(LED_PIN, 0); return; }
  analogWrite(LED_PIN, level);
}

void handleRoot() {
  String html = "<html><body><h1>LED Control Panel</h1>";
  html += "<p>Now: mode <b>" + mode + "</b>, brightness <b>" + String(level) + "</b>/255</p>";
  html += "<form action='/set'>";
  html += "Brightness <input type='number' name='level' min='0' max='255' value='" + String(level) + "'> ";
  html += "Mode <select name='mode'>";
  html += "<option value='steady'>steady</option>";
  html += "<option value='blink'>blink</option>";
  html += "<option value='off'>off</option>";
  html += "</select> ";
  html += "<input type='submit' value='Apply'></form>";
  html += "<p>Quick picks: <a href='/set?level=255&mode=steady'>full</a> | ";
  html += "<a href='/set?level=40&mode=steady'>dim</a> | ";
  html += "<a href='/set?mode=blink'>blink</a> | ";
  html += "<a href='/set?mode=off'>off</a></p>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

void handleSet() {
  if (server.hasArg("level")) {
    int v = server.arg("level").toInt();
    if (v < 0) v = 0;
    if (v > 255) v = 255;
    level = v;
  }
  if (server.hasArg("mode")) mode = server.arg("mode");
  applyLed();
  Serial.println("set: mode=" + mode + " level=" + String(level));
  String html = "<p>OK - mode " + mode + ", brightness " + String(level) + "</p>";
  html += "<p><a href='/'>back to the panel</a></p>";
  server.send(200, "text/html", html);
}

void setup() {
  Serial.begin(115200);
  pinMode(LED_PIN, OUTPUT);

  WiFi.begin("your-wifi", "your-password");
  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) { delay(250); Serial.print("."); }
  Serial.println();
  Serial.print("Connected! Open http://");
  Serial.println(WiFi.localIP());

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

void loop() {
  server.handleClient();
  if (mode == "blink" && millis() - lastBlink > 400) {
    lastBlink = millis();
    blinkOn = !blinkOn;
    applyLed();
  }
  delay(10);
}

Built with FluxBench.AI — the AI workbench for embedded projects.