Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>          // ESP32 Wi-Fi library
#include <WiFiClient.h>    // Wi-Fi client library
#include <WebServer.h>     // Web server library
 
// =====================
// ** Wi-Fi Credentials **
// =====================
const char* ssid     = "Wokwi-GUEST";     // Replace with your Wi-Fi SSID
const char* password = "";   // Replace with your Wi-Fi Password
 
// =====================
// ** LED Configuration **
// =====================
#define LED_PIN 5                   // GPIO5 connected to LED (change to 2 if using GPIO2)
WebServer server(80);               // Create a web server object that listens on port 80
 
// =====================
// ** HTML Content **
// =====================
const char* htmlPage = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <title>ESP32 LED Control</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
    .button { 
      display: inline-block; padding: 15px 25px; font-size: 24px;
      cursor: pointer; text-align: center; text-decoration: none;
      outline: none; color: #fff; background-color: #4CAF50; border: none;
      border-radius: 15px; box-shadow: 0 9px #999;
    }
    .button:hover {background-color: #3e8e41}
    .button:active {
      background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px);
    }
    .off { background-color: #f44336; }
    .off:hover {background-color: #da190b}
  </style>
</head>
<body>
  <h1>ESP32 LED Control</h1>
  <p>Click the buttons below to control the LED.</p>
  <a href="/H"><button class="button">Turn LED ON</button></a>
  <a href="/L"><button class="button off">Turn LED OFF</button></a>
</body>
</html>
)rawliteral";
 
// =====================
// ** Function Prototypes **
// =====================
void handleRoot();
void handleOn();
void handleOff();
 
// =====================
// ** Setup Function **
// =====================
void setup(){
  // Initialize Serial Communication
  Serial.begin(115200);
  delay(1000); // Allow time for Serial Monitor to initialize
  
  // Configure LED Pin as OUTPUT
  pinMode(LED_PIN, OUTPUT);
  digitalWrite(LED_PIN, LOW); // Ensure LED is OFF at startup
  
  // Connect to Wi-Fi
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  
  WiFi.begin(ssid, password);
  
  // Wait until connected
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  
  // Define routes
  server.on("/", handleRoot); // When accessing the root, call handleRoot()
  server.on("/H", handleOn);  // When accessing /H, call handleOn()
  server.on("/L", handleOff); // When accessing /L, call handleOff()
  
  // Start the server
  server.begin();
  Serial.println("HTTP server started.");
}
 
// =====================
// ** Loop Function **
// =====================
void loop(){
  server.handleClient(); // Listen for client connections
}
 
// =====================
// ** Handler Functions **
// =====================
 
// Handle root URL
void handleRoot(){
  server.send(200, "text/html", htmlPage); // Send the HTML page
}
 
// Handle /H URL to turn LED ON
void handleOn(){
  digitalWrite(LED_PIN, HIGH); // Turn LED ON
  Serial.println("LED turned ON");
  server.sendHeader("Location", "/"); // Redirect to root
  server.send(303); // HTTP status code for redirection
}
 
// Handle /L URL to turn LED OFF
void handleOff(){
  digitalWrite(LED_PIN, LOW); // Turn LED OFF
  Serial.println("LED turned OFF");
  server.sendHeader("Location", "/"); // Redirect to root
  server.send(303); // HTTP status code for redirection
}