DocsOpen the editorEditor
Built-in project · ESP32-C3-DevKitM-1

WiFi: a lamp on a web page, on an ESP32-C3

A WebServer with two buttons and a form. Press one in the Web panel and the LED on the breadboard follows; the network under it is simulated. The whole build, an ESP32-C3 and 2 more parts, runs here in your browser on the firmware below; open it in the editor to change the wiring or the code and run it again.

Open in the editorRead the code

IntermediateRuns in your browser. Free, and no account needed.

WiFi: a lamp on a web page · ESP32-C3-DevKitM-1live0.000 s 0.00x
Click to open it in the editor
The circuit itself, running here on the simulator. Press what can be pressed; click anything else to open it in the editor.

The code

The firmware exactly as the editor opens it. Change a line there and press Run: it compiles in the browser.

sketch.ino · ESP32-C3-DevKitM-1
/*
 * WiFi: a lamp on a web page.
 *
 * The server is your code, running on the board's core. The NETWORK under it is
 * SIMULATED: there is no 802.11, no TCP and no listening socket, and the only
 * thing in the world that can reach http://192.168.4.2/ is the Web tab in this
 * page. Nothing outside the browser can, ever.
 *
 * Press Run, open the Web tab, and press On. The LED on GPIO 8 (and any LED
 * you have wired to it) follows the page.
 */
#include <WebServer.h>
#include <WiFi.h>

const char *SSID = "Mokxi-Lab";
const char *PASSWORD = "breadboard";

WebServer server(80);
bool lampOn = false;

void sendPage() {
  String page("<!doctype html><html><head><meta charset=\"utf-8\">");
  page += "<title>Mokxi lamp</title></head><body>";
  page += "<h1>The lamp is ";
  page += lampOn ? "ON" : "OFF";
  page += "</h1><p><a href=\"/on\">On</a> &middot; <a href=\"/off\">Off</a></p>";
  page += "<p><form method=\"post\" action=\"/set\">";
  page += "<button name=\"lamp\" value=\"toggle\">Toggle</button></form></p>";
  page += "<p>Served by the sketch on a simulated network.</p>";
  page += "</body></html>";
  server.send(200, "text/html", page);
}

void applyLamp() {
  digitalWrite(LED_BUILTIN, lampOn ? HIGH : LOW);
  Serial.print("lamp ");
  Serial.println(lampOn ? "on" : "off");
}

void handleRoot() { sendPage(); }

void handleOn() {
  lampOn = true;
  applyLamp();
  sendPage();
}

void handleOff() {
  lampOn = false;
  applyLamp();
  sendPage();
}

void handleSet() {
  if (server.arg("lamp") == "toggle") {
    lampOn = !lampOn;
    applyLamp();
  }
  sendPage();
}

void setup() {
  Serial.begin(115200);
  pinMode(LED_BUILTIN, OUTPUT);
  digitalWrite(LED_BUILTIN, LOW);

  Serial.println("Simulated WiFi: only the Web panel can reach this server.");
  WiFi.begin(SSID, PASSWORD);
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(250);
  }
  Serial.println();
  Serial.print("open http://");
  Serial.print(WiFi.localIP());
  Serial.println("/ in the Web tab");

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

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

Parts list

4 parts, plus the jumper wires. Every one is in the editor's parts bin.

How it is wired

3 connections, pin by pin, read from the circuit itself. Each line is one set of pins joined together, by a jumper wire or a breadboard strip.

  • Ground: ESP32-C3-DevKitM-1 pin GND; LED, yellow pin C
  • ESP32-C3-DevKitM-1 pin 8; Resistor, 220 Ω pin 1
  • Resistor, 220 Ω pin 2; LED, yellow pin A

Change it and keep it

Open it in the editor, change the circuit or the code, and keep your version in a free account.

Create a free account
Open it in the editor