Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <uri/UriBraces.h>

//-----------------------------------------------------------
#define WIFI_SSID "Wokwi-GUEST"
#define WIFI_PASSWORD ""
// Defining the WiFi channel speeds up the connection:
#define WIFI_CHANNEL 6

//-----------------------------------------------------------
WebServer server(80);

//-----------------------------------------------------------
const int LED1 = 26;
const int LED2 = 27;

bool led1State = false;
bool led2State = false;

//-----------------------------------------------------------
void setup(void) {
  //---
  Serial.begin(115200);
  pinMode(LED1, OUTPUT);
  pinMode(LED2, OUTPUT);

  //---
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD, WIFI_CHANNEL);
  Serial.print("Connecting to WiFi ");
  Serial.print(WIFI_SSID);
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(100);
    Serial.print(".");
  }
  Serial.println(" Connected!");

  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  //---
  server.on("/", sendHtml);

  server.on(UriBraces("/toggle/{}"), []() {
    String led = server.pathArg(0);
    Serial.print("Toggle LED #");
    Serial.println(led);

    switch (led.toInt()) {
      case 1:
        led1State = !led1State;
        digitalWrite(LED1, led1State);
        break;
      case 2:
        led2State = !led2State;
        digitalWrite(LED2, led2State);
        break;
    }

    sendHtml();
  });

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

//-----------------------------------------------------------
void loop(void) {
  server.handleClient();
  delay(10);
}

//-----------------------------------------------------------
void sendHtml() {
  //---
  String page = R"(
    <!DOCTYPE html>
    <html>
      <head>
        <title>ESP32 Web Server Demo</title>
      </head>
            
      <body>
        <h1>ESP32 Web Server</h1>

        <div>
          <h2>LED 1</h2>
          <a href="/toggle/1">*LED1_TEXT*</a>
          <h2>LED 2</h2>
          <a href="/toggle/2">*LED2_TEXT*</a>
        </div>
      </body>
    </html>
  )";

  //---
  if(led1State == true){
    page.replace("*LED1_TEXT*", "ON");
  }
  else {
    page.replace("*LED1_TEXT*", "OFF");
  }

  //---
  if(led2State == true){
    page.replace("*LED2_TEXT*", "ON");
  }
  else {
    page.replace("*LED2_TEXT*", "OFF");
  }

  //---
  server.send(200, "text/html", page);
}