![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/04\/ESP32-Web-Server-Set-Timer-Schedule-Arduino-IDE-Core.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nYou might like reading:<\/strong> Building an ESP32 Web Server: The Complete Guide for Beginners (Arduino IDE)<\/a>.<\/p>\n\n\n\n The following image shows the web page you\u2019ll build for this project.<\/p>\n\n\n Here are the key features of this web server:<\/strong><\/p>\n\n\n\n For simplicity, we’ll save the HTML and CSS to build the web page in a variable on the Arduino sketch, but you could use the LittleFS Filesystem<\/a>.<\/p>\n\n\n\n Before following this guide, you need to install the ESP32 Core add-on in your Arduino IDE. Follow the next guide to install it, if you haven\u2019t already:<\/p>\n\n\n\n You will also need an ESP32 development board<\/a> model of your choice.<\/p>\n\n\n\n We’ll build the web server using the following libraries:<\/p>\n\n\n\n You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking the Library icon in the left sidebar.<\/p>\n\n\n\n Search for ESPAsyncWebServer<\/span> and install the ESPAsyncWebServer by ESP32Async<\/strong>.<\/p>\n\n\n Then, install the AsyncTCP library. Search for AsyncTCP<\/span> and install the AsyncTCP by ESP32Async<\/strong>.<\/p>\n\n\n The following code creates a web server that serves a web page that lets you schedule a timer to turn an LED ON\/OFF for a selected time duration.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n You just need to insert your network credentials in the code and it will work straight away.<\/p>\n\n\n\n Continue reading to learn how the code works or skip to the Demonstration <\/a>section.<\/p>\n\n\n\n First, include the required libraries to connect to Wi-Fi, create the web server, and use FreeRTOS timers<\/a>.<\/p>\n\n\n\n Insert your network credentials in the following variables so that the ESP32 connects to your network.<\/p>\n\n\n\n Define the GPIO that will be used to control the LED. You can modify the ledPin<\/span> variable to control any other GPIO<\/a>.<\/p>\n\n\n\n Create an AsyncWebServer<\/span> object called server<\/span> on port 80.<\/p>\n\n\n\n Create auxiliary variables to run the timers.<\/p>\n\n\n\n Learn more about FreeRTOS timers: ESP32 with FreeRTOS: Software Timers\/Timer Interrupts (Arduino IDE)<\/a>.<\/p>\n\n\n\n The index_html<\/span> variable contains the text with the HTML, CSS, and JavaScript to build the web page.<\/p>\n\n\n\n In the web page, we create two buttons that make requests on the following URL paths to control the LED on\/off:<\/p>\n\n\n\n The other main section of the web page is the HTML web form where you can select the timer action, unit and duration. It also shows the current state of the timer, time remaining and a button to cancel the timer.<\/p>\n\n\n\n The timerCallback()<\/span> function is the FreeRTOS one-shot timer handler that, when it expired, sets the GPIO ON\/OFF based on the previously selected action in the web server.<\/p>\n\n\n\n In the setup()<\/span>, we start by initializing the Serial Monitor and preparing the GPIO.<\/p>\n\n\n\n Then, create the gpioTimer<\/span> and assign the timerCallback<\/span> function described earlier that runs when the timer expires.<\/p>\n\n\n\n Start the Wi-Fi connection and print the ESP32 IP address in the Serial Monitor.<\/p>\n\n\n\n Root URL \/<\/strong><\/p>\n\n\n\n Then, handle the web server. When you receive a request on the root (\/<\/span>) URL (this happens when you access the ESP IP address), send the HTML text stored in PROGMEM<\/span> to display the web page:<\/p>\n\n\n\n LED Control Route \/control<\/strong><\/p>\n\n\n\n This GET route controls the LED ON\/OFF based on the state<\/span> parameter (1 = HIGH and 0 = LOW).<\/p>\n\n\n\n GET LED State Route \/led-state<\/strong><\/p>\n\n\n\n This GET route reads the current state of the LED and returns it as a simple JSON object containing the state<\/span> value.<\/p>\n\n\n\n Set Timer Route \/set-timer<\/strong><\/p>\n\n\n\n This HTTP POST route receives the data from the web page with the selected action, duration, and time unit. It converts the duration into seconds and then FreeRTOS ticks to start the one-shot timer. When the timer expires, the action runs.<\/p>\n\n\n\n Cancel Timer Route \/cancel-timer<\/strong><\/p>\n\n\n\n This route stops any active FreeRTOS timer and resets the timer global variables (timerStartTick<\/span>, totalDurationTicks<\/span>) to their idle state.<\/p>\n\n\n\n Timer Status Route \/timer-status<\/strong><\/p>\n\n\n\n This route checks if a timer is running, calculates the exact remaining time in seconds, and returns a JSON object with the current status message.<\/p>\n\n\n\n Initialize the Server<\/strong><\/p>\n\n\n\n Finally, call the begin()<\/span> method on the server<\/span> object to initialize the server.<\/p>\n\n\n\n After inserting your network credentials, upload the code to the ESP32 board. After uploading, open the Serial Monitor at a baud rate of 115200 and press the ESP32 RST button.<\/p>\n\n\n The ESP32 IP address will be printed in the Serial Monitor.<\/p>\n\n\n With an ESP32 that has an LED connected to GPIO 5, open any browser on your local network and type the ESP32 IP address. The following web page will load.<\/p>\n\n\n Click on the TURN ON or TURN OFF buttons to control the LED. You can also check the current LED state on the text label.<\/p>\n\n\n Next, you have an HTML form where you can select the action, time unit and timer duration. After selecting your desired timer settings, press the “START TIMER<\/strong>” button.<\/p>\n\n\n In the bottom of the web page, the time status will show the current pending action and remaining time. There’s also a button to cancel the timer.<\/p>\n\n\n In the Arduino IDE Serial Monitor, you can check all the actions that were performed in the web server.<\/p>\n\n\n In this tutorial, you learned how to create a simple web server to create a timer to control your ESP32 GPIOs. You can now extend this project to control more outputs. You can take a look at other tutorials:<\/p>\n\n\n\n If you would like to learn more about building web servers with the ESP32 from scratch, we recommend taking a look at our eBook dedicated to this subject:<\/p>\n\n\n\nProject Overview<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/04\/ESP32-Web-Server-Set-Timer-Schedule-Arduino-IDE-Core-Project-Overview.png?resize=896%2C1024&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
\n
Install Required Libraries in Arduino IDE<\/h3>\n\n\n\n
\n
![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?resize=666%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?resize=722%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nESP32 Web Server: Timer Schedule – Arduino Sketch<\/h2>\n\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-web-server-timer-schedule-arduino\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*********\/\n#include <Arduino.h>\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <freertos\/timers.h>\n\n\/\/ REPLACE WITH YOUR NETWORK CREDENTIALS\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/ LED connected to GPIO 5\nconst int ledPin = 5;\n\n\/\/ Global variables\nAsyncWebServer server(80);\n\nTimerHandle_t gpioTimer = NULL;\n\/\/ Timer action: 1 = ON, 0 = OFF\nint targetAction = -1;\n\nTickType_t timerStartTick = 0;\nuint64_t totalDurationTicks = 0;\n\n\/\/ HTML Web Page\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML>\n<html>\n<head>\n <title>ESP32 Web Server - Timer Schedule<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <style>\n body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 20px; background: #f4f4f4; }\n h1 { color: #333; }\n .card { max-width: 440px; margin: 20px auto; padding: 25px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }\n button { width: 100%; padding: 14px; margin: 8px 0; font-size: 18px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }\n .onButton { background: #28a745; color: white; }\n .offButton { background: #999999; color: white; }\n button:hover { opacity: 0.95; }\n .state { font-size: 22px; font-weight: bold; margin: 15px 0; }\n .ledOn { color: #28a745; }\n .ledOff { color: #999999; }\n label { display: block; margin: 12px 0 6px; font-weight: bold; text-align: left; }\n select, input[type="number"] { width: 100%; padding: 12px; margin: 8px 0; font-size: 16px; border-radius: 6px; border: 1px solid #ccc; box-sizing: border-box;}\n .startButton { background:#1a73e8; color:white; }\n #cancelButton { display:none; background:#dc3545; color:white; padding:10px 20px; border:none; border-radius:6px; cursor:pointer; margin-top:10px; }\n <\/style>\n<\/head>\n<body>\n <h1>ESP32 - Timer Schedule<\/h1>\n <div class="card">\n <div class="state">GPIO is <span id="ledState">Loading...<\/span><\/div>\n <button class="onButton" onclick="controlLED(1)">TURN ON<\/button>\n <button class="offButton" onclick="controlLED(0)">TURN OFF<\/button>\n <\/div>\n <div class="card">\n <h2>Set Timer<\/h2>\n <form id="timerForm" action="\/set-timer" method="POST">\n <label for="action">Action<\/label>\n <select name="action" id="action">\n <option value="" disabled selected hidden>--- Select Action ---<\/option>\n <option value="1">TURN ON (HIGH)<\/option>\n <option value="0">TURN OFF(LOW)<\/option>\n <\/select>\n <label for="unit">Time Unit<\/label>\n <select name="unit" id="unit">\n <option value="s">Seconds<\/option>\n <option value="m">Minutes<\/option>\n <option value="h">Hours<\/option>\n <\/select>\n <label for="duration">Duration<\/label>\n <input type="number" name="duration" id="duration" min="1" value="30" required>\n <button type="submit" class="startButton">START TIMER<\/button>\n <\/form>\n <div style="margin-top:20px; padding:15px; background:#f8f9fa; border-radius:8px;">\n <strong>Timer Status:<\/strong> <span id="status">No active timers<\/span><br><br>\n <span id="remaining" style="font-size:18px;"><\/span><br>\n <button id="cancelButton" onclick="cancelTimer()">\n CANCEL TIMER\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Update LED State\n function updateLEDState() {\n fetch('\/led-state')\n .then(r => r.json())\n .then(data => {\n const stateEl = document.getElementById('ledState');\n if (data.state === 1) {\n stateEl.innerHTML = '<span class="ledOn">ON<\/span>';\n } else {\n stateEl.innerHTML = '<span class="ledOff">OFF<\/span>';\n }\n })\n .catch(() => {\n document.getElementById('ledState').innerHTML = 'Error';\n });\n }\n \/\/ Control LED\n function controlLED(state) {\n fetch('\/control?state=' + state)\n .then(() => updateLEDState());\n }\n\n \/\/ Timer functions\n let countdownInterval = null;\n let remainingSeconds = 0;\n \/\/ Format time to hours, minutes and seconds \n function formatTime(seconds) {\n if (seconds <= 0) return "0s";\n let h = Math.floor(seconds \/ 3600);\n let m = Math.floor((seconds % 3600) \/ 60);\n let s = seconds % 60;\n if (h > 0) return h + "h " + m + "m " + s + "s";\n if (m > 0) return m + "m " + s + "s";\n return s + "s";\n }\n \/\/ Check the remaining time for the timer to end\n function updateTimerStatus() {\n fetch('\/timer-status')\n .then(r => r.json())\n .then(data => {\n document.getElementById('status').innerText = data.status;\n\n const cancelButton = document.getElementById('cancelButton');\n const remainingEl = document.getElementById('remaining');\n\n if (data.active) {\n remainingSeconds = data.remaining_seconds;\n cancelButton.style.display = 'inline-block';\n\n if (!countdownInterval) {\n countdownInterval = setInterval(() => {\n if (remainingSeconds > 0) {\n remainingSeconds--;\n remainingEl.innerText = "Remaining: " + formatTime(remainingSeconds);\n } else {\n clearInterval(countdownInterval);\n countdownInterval = null;\n }\n }, 1000);\n }\n remainingEl.innerText = "Remaining: " + formatTime(remainingSeconds);\n } else {\n cancelButton.style.display = 'none';\n remainingEl.innerText = "";\n if (countdownInterval) {\n clearInterval(countdownInterval);\n countdownInterval = null;\n }\n }\n });\n }\n \/\/ Cancel timer button\n function cancelTimer() {\n if (confirm("Cancel the current timer?")) {\n fetch('\/cancel-timer', { method: 'POST' })\n .then(() => updateTimerStatus());\n }\n }\n\n \/\/ Update every 10 seconds\n setInterval(() => {\n updateLEDState();\n updateTimerStatus();\n }, 10000);\n window.onload = () => {\n updateLEDState();\n updateTimerStatus();\n };\n <\/script>\n<\/body>\n<\/html>\n)rawliteral";\n\n\/\/ Timer Callback - Turns the LED on or off depending on the action selected\nvoid IRAM_ATTR timerCallback(TimerHandle_t xTimer) {\n if (targetAction != -1) {\n digitalWrite(ledPin, targetAction ? HIGH : LOW);\n Serial.printf("Timer finished: GPIO %d set to %s\\n", ledPin, targetAction ? "HIGH (ON)" : "LOW (OFF)");\n }\n targetAction = -1;\n timerStartTick = 0;\n totalDurationTicks = 0;\n}\n\nvoid setup() {\n Serial.begin(115200);\n delay(1000);\n\n \/\/ Define ledPin as an OUTPUT and initialize it off (LOW)\n pinMode(ledPin, OUTPUT);\n digitalWrite(ledPin, LOW);\n\n \/\/ Create a timer and assign the timerCallback function\n gpioTimer = xTimerCreate("GPIO_Timer", pdMS_TO_TICKS(1000), pdFALSE, 0, timerCallback);\n\n \/\/ Start the Wi-Fi connection\n WiFi.begin(ssid, password);\n Serial.print("Connecting to Wi-Fi");\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(".");\n }\n Serial.println("\\nWi-Fi Connected!");\n \/\/ Print the ESP32 IP Address\n Serial.print("Access ESP32 IP Address: http:\/\/");\n Serial.println(WiFi.localIP());\n\n \/\/ Root URL handler\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send_P(200, "text\/html", index_html);\n });\n\n \/\/ Instant LED control\n server.on("\/control", HTTP_GET, [](AsyncWebServerRequest *request) {\n if (request->hasParam("state")) {\n int state = request->getParam("state")->value().toInt();\n digitalWrite(ledPin, state ? HIGH : LOW);\n Serial.printf("LED set to %s\\n", state ? "ON" : "OFF");\n }\n request->send(200, "text\/plain", "OK");\n });\n\n \/\/ Get current LED state\n server.on("\/led-state", HTTP_GET, [](AsyncWebServerRequest *request) {\n int state = digitalRead(ledPin);\n request->send(200, "application\/json", "{\\"state\\":" + String(state) + "}");\n });\n\n \/\/ Set the timer duration to perform the action selected\n server.on("\/set-timer", HTTP_POST, [](AsyncWebServerRequest *request) {\n if (request->hasParam("action", true) && request->hasParam("duration", true) && request->hasParam("unit", true)) {\n\n targetAction = request->getParam("action", true)->value().toInt();\n int dur = request->getParam("duration", true)->value().toInt();\n String unit = request->getParam("unit", true)->value();\n\n uint64_t durationSeconds = 0;\n if (unit == "s") durationSeconds = (uint64_t)dur;\n else if (unit == "m") durationSeconds = (uint64_t)dur * 60ULL;\n else if (unit == "h") durationSeconds = (uint64_t)dur * 3600ULL;\n\n if (durationSeconds > 0) {\n if (xTimerIsTimerActive(gpioTimer)) xTimerStop(gpioTimer, 0);\n\n uint64_t tempTicks = durationSeconds * (uint64_t)configTICK_RATE_HZ;\n TickType_t timerTicks = (tempTicks > 0xFFFFFFFFULL) ? 0xFFFFFFFFULL : (TickType_t)tempTicks;\n\n timerStartTick = xTaskGetTickCount();\n totalDurationTicks = tempTicks;\n\n xTimerChangePeriod(gpioTimer, timerTicks, 0);\n xTimerStart(gpioTimer, 0);\n\n Serial.printf("Timer scheduled: GPIO %d will be set to %s in %llu seconds\\n", ledPin,\n targetAction ? "ON" : "OFF", durationSeconds);\n }\n }\n request->redirect("\/");\n });\n\n \/\/ Cancel Timer\n server.on("\/cancel-timer", HTTP_POST, [](AsyncWebServerRequest *request) {\n \/\/ Stop the active timer\n if (xTimerIsTimerActive(gpioTimer)) {\n xTimerStop(gpioTimer, 0);\n Serial.println("Timer cancelled");\n }\n targetAction = -1;\n timerStartTick = 0; \n totalDurationTicks = 0;\n request->send(200, "text\/plain", "OK");\n });\n\n \/\/ Timer Status - Returns the remaining time in seconds\n server.on("\/timer-status", HTTP_GET, [](AsyncWebServerRequest *request) {\n if (targetAction != -1 && xTimerIsTimerActive(gpioTimer) && totalDurationTicks > 0) {\n \/\/ Calculate how many seconds are left for the timer to end\n TickType_t now = xTaskGetTickCount();\n uint64_t elapsedTicks = 0;\n\n if (now >= timerStartTick) {\n elapsedTicks = now - timerStartTick;\n } else {\n elapsedTicks = (0xFFFFFFFFULL - timerStartTick) + now + 1;\n }\n\n uint64_t remainingTicks = (totalDurationTicks > elapsedTicks) ? totalDurationTicks - elapsedTicks : 0;\n uint64_t remainingSeconds = remainingTicks \/ (uint64_t)configTICK_RATE_HZ;\n\n \/\/ Return the amount of seconds left and action that will execute when the timer ends\n String json = "{\\"status\\":\\"Setting GPIO "+ String(ledPin) +" to " + \n String(targetAction ? "ON" : "OFF") + "\\",";\n json += "\\"active\\":true,";\n json += "\\"remaining_seconds\\":" + String((unsigned long)remainingSeconds) + "}";\n request->send(200, "application\/json", json);\n } else {\n request->send(200, "application\/json", "{\\"status\\":\\"No active timers\\",\\"active\\":false,\\"remaining_seconds\\":0}");\n }\n });\n\n server.begin();\n Serial.println("ESP32 Web Server Timer Schedule is Ready!");\n}\n\nvoid loop() {\n vTaskDelay(pdMS_TO_TICKS(100));\n}\n<\/code><\/pre>\n\tconst char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_SSID\";<\/code><\/pre>\n\n\n\nHow the Code Works<\/h3>\n\n\n\n
Including Libraries<\/h4>\n\n\n\n
#include <Arduino.h>\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <freertos\/timers.h><\/code><\/pre>\n\n\n\nNetwork Credentials<\/h4>\n\n\n\n
\/\/ REPLACE WITH YOUR NETWORK CREDENTIALS\nconst char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_SSID\";<\/code><\/pre>\n\n\n\nLED Pin<\/h4>\n\n\n\n
const int ledPin = 5;<\/code><\/pre>\n\n\n\nCreating a Server Object<\/h4>\n\n\n\n
AsyncWebServer server(80);<\/code><\/pre>\n\n\n\nTimers<\/h4>\n\n\n\n
TimerHandle_t gpioTimer = NULL;\n\/\/ Timer action: 1 = ON, 0 = OFF\nint targetAction = -1;\n\nTickType_t timerStartTick = 0;\nuint64_t totalDurationTicks = 0;<\/code><\/pre>\n\n\n\nWeb Page<\/h4>\n\n\n\n
const char index_html[] PROGMEM = R\"rawliteral(\n<!DOCTYPE HTML>\n<html>\n<head>\n <title>ESP32 Web Server - Timer Schedule<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <style>\n body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 20px; background: #f4f4f4; }\n h1 { color: #333; }\n .card { max-width: 440px; margin: 20px auto; padding: 25px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }\n button { width: 100%; padding: 14px; margin: 8px 0; font-size: 18px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }\n .onButton { background: #28a745; color: white; }\n .offButton { background: #999999; color: white; }\n button:hover { opacity: 0.95; }\n .state { font-size: 22px; font-weight: bold; margin: 15px 0; }\n .ledOn { color: #28a745; }\n .ledOff { color: #999999; }\n label { display: block; margin: 12px 0 6px; font-weight: bold; text-align: left; }\n select, input[type=\"number\"] { width: 100%; padding: 12px; margin: 8px 0; font-size: 16px; border-radius: 6px; border: 1px solid #ccc; box-sizing: border-box;}\n .startButton { background:#1a73e8; color:white; }\n #cancelButton { display:none; background:#dc3545; color:white; padding:10px 20px; border:none; border-radius:6px; cursor:pointer; margin-top:10px; }\n <\/style>\n<\/head>\n<body>\n <h1>ESP32 - Timer Schedule<\/h1>\n <div class=\"card\">\n <div class=\"state\">GPIO is <span id=\"ledState\">Loading...<\/span><\/div>\n <button class=\"onButton\" onclick=\"controlLED(1)\">TURN ON<\/button>\n <button class=\"offButton\" onclick=\"controlLED(0)\">TURN OFF<\/button>\n <\/div>\n <div class=\"card\">\n <h2>Set Timer<\/h2>\n <form id=\"timerForm\" action=\"\/set-timer\" method=\"POST\">\n <label for=\"action\">Action<\/label>\n <select name=\"action\" id=\"action\">\n <option value=\"\" disabled selected hidden>--- Select Action ---<\/option>\n <option value=\"1\">TURN ON (HIGH)<\/option>\n <option value=\"0\">TURN OFF(LOW)<\/option>\n <\/select>\n <label for=\"unit\">Time Unit<\/label>\n <select name=\"unit\" id=\"unit\">\n <option value=\"s\">Seconds<\/option>\n <option value=\"m\">Minutes<\/option>\n <option value=\"h\">Hours<\/option>\n <\/select>\n <label for=\"duration\">Duration<\/label>\n <input type=\"number\" name=\"duration\" id=\"duration\" min=\"1\" value=\"30\" required>\n <button type=\"submit\" class=\"startButton\">START TIMER<\/button>\n <\/form>\n\n <div style=\"margin-top:20px; padding:15px; background:#f8f9fa; border-radius:8px;\">\n <strong>Timer Status:<\/strong> <span id=\"status\">No active timers<\/span><br><br>\n <span id=\"remaining\" style=\"font-size:18px;\"><\/span><br>\n <button id=\"cancelButton\" onclick=\"cancelTimer()\">\n CANCEL TIMER\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Update LED State\n function updateLEDState() {\n fetch('\/led-state')\n .then(r => r.json())\n .then(data => {\n const stateEl = document.getElementById('ledState');\n if (data.state === 1) {\n stateEl.innerHTML = '<span class=\"ledOn\">ON<\/span>';\n } else {\n stateEl.innerHTML = '<span class=\"ledOff\">OFF<\/span>';\n }\n })\n .catch(() => {\n document.getElementById('ledState').innerHTML = 'Error';\n });\n }\n \/\/ Control LED\n function controlLED(state) {\n fetch('\/control?state=' + state)\n .then(() => updateLEDState());\n }\n\n \/\/ Timer functions\n let countdownInterval = null;\n let remainingSeconds = 0;\n \/\/ Format time to hours, minutes and seconds \n function formatTime(seconds) {\n if (seconds <= 0) return \"0s\";\n let h = Math.floor(seconds \/ 3600);\n let m = Math.floor((seconds % 3600) \/ 60);\n let s = seconds % 60;\n if (h > 0) return h + \"h \" + m + \"m \" + s + \"s\";\n if (m > 0) return m + \"m \" + s + \"s\";\n return s + \"s\";\n }\n \/\/ Check the remaining time for the timer to end\n function updateTimerStatus() {\n fetch('\/timer-status')\n .then(r => r.json())\n .then(data => {\n document.getElementById('status').innerText = data.status;\n\n const cancelButton = document.getElementById('cancelButton');\n const remainingEl = document.getElementById('remaining');\n\n if (data.active) {\n remainingSeconds = data.remaining_seconds;\n cancelButton.style.display = 'inline-block';\n\n if (!countdownInterval) {\n countdownInterval = setInterval(() => {\n if (remainingSeconds > 0) {\n remainingSeconds--;\n remainingEl.innerText = \"Remaining: \" + formatTime(remainingSeconds);\n } else {\n clearInterval(countdownInterval);\n countdownInterval = null;\n }\n }, 1000);\n }\n remainingEl.innerText = \"Remaining: \" + formatTime(remainingSeconds);\n } else {\n cancelButton.style.display = 'none';\n remainingEl.innerText = \"\";\n if (countdownInterval) {\n clearInterval(countdownInterval);\n countdownInterval = null;\n }\n }\n });\n }\n \/\/ Cancel timer button\n function cancelTimer() {\n if (confirm(\"Cancel the current timer?\")) {\n fetch('\/cancel-timer', { method: 'POST' })\n .then(() => updateTimerStatus());\n }\n }\n\n \/\/ Update every 10 seconds\n setInterval(() => {\n updateLEDState();\n updateTimerStatus();\n }, 10000);\n window.onload = () => {\n updateLEDState();\n updateTimerStatus();\n };\n <\/script>\n<\/body>\n<\/html>\n)rawliteral\";<\/code><\/pre>\n\n\n\n\n
<button class=\"onButton\" onclick=\"controlLED(1)\">TURN ON<\/button>\n<button class=\"offButton\" onclick=\"controlLED(0)\">TURN OFF<\/button><\/code><\/pre>\n\n\n\n<div class=\"card\">\n <h2>Set Timer<\/h2>\n <form id=\"timerForm\" action=\"\/set-timer\" method=\"POST\">\n <label for=\"action\">Action<\/label>\n <select name=\"action\" id=\"action\">\n <option value=\"\" disabled selected hidden>--- Select Action ---<\/option>\n <option value=\"1\">TURN ON (HIGH)<\/option>\n <option value=\"0\">TURN OFF(LOW)<\/option>\n <\/select>\n <label for=\"unit\">Time Unit<\/label>\n <select name=\"unit\" id=\"unit\">\n <option value=\"s\">Seconds<\/option>\n <option value=\"m\">Minutes<\/option>\n <option value=\"h\">Hours<\/option>\n <\/select>\n <label for=\"duration\">Duration<\/label>\n <input type=\"number\" name=\"duration\" id=\"duration\" min=\"1\" value=\"30\" required>\n <button type=\"submit\" class=\"startButton\">START TIMER<\/button>\n <\/form>\n <div style=\"margin-top:20px; padding:15px; background:#f8f9fa; border-radius:8px;\">\n <strong>Timer Status:<\/strong> <span id=\"status\">No active timers<\/span><br><br>\n <span id=\"remaining\" style=\"font-size:18px;\"><\/span><br>\n <button id=\"cancelButton\" onclick=\"cancelTimer()\">\n CANCEL TIMER\n <\/button>\n <\/div>\n<\/div><\/code><\/pre>\n\n\n\nTimer Callback Function<\/h4>\n\n\n\n
void IRAM_ATTR timerCallback(TimerHandle_t xTimer) {\n if (targetAction != -1) {\n digitalWrite(ledPin, targetAction ? HIGH : LOW);\n Serial.printf(\"Timer finished: GPIO %d set to %s\\n\", ledPin, targetAction ? \"HIGH (ON)\" : \"LOW (OFF)\");\n }\n targetAction = -1;\n timerStartTick = 0;\n totalDurationTicks = 0;\n}<\/code><\/pre>\n\n\n\nsetup()<\/h4>\n\n\n\n
Serial.begin(115200);\ndelay(1000);\n\npinMode(ledPin, OUTPUT);\ndigitalWrite(ledPin, LOW);<\/code><\/pre>\n\n\n\ngpioTimer = xTimerCreate(\"GPIO_Timer\", pdMS_TO_TICKS(1000), pdFALSE, 0, timerCallback);<\/code><\/pre>\n\n\n\nWiFi.begin(ssid, password);\nSerial.print(\"Connecting to Wi-Fi\");\nwhile (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(\".\");\n}\nSerial.println(\"\\nWi-Fi Connected!\");\n\/\/ Print the ESP32 IP Address\nSerial.print(\"Access ESP32 IP Address: http:\/\/\");\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\nserver.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send_P(200, \"text\/html\", index_html);\n});<\/code><\/pre>\n\n\n\nserver.on(\"\/control\", HTTP_GET, [](AsyncWebServerRequest *request) {\n if (request->hasParam(\"state\")) {\n int state = request->getParam(\"state\")->value().toInt();\n digitalWrite(ledPin, state ? HIGH : LOW);\n Serial.printf(\"LED set to %s\\n\", state ? \"ON\" : \"OFF\");\n }\n request->send(200, \"text\/plain\", \"OK\");\n});<\/code><\/pre>\n\n\n\nserver.on(\"\/led-state\", HTTP_GET, [](AsyncWebServerRequest *request) {\n int state = digitalRead(ledPin);\n request->send(200, \"application\/json\", \"{\\\"state\\\":\" + String(state) + \"}\");\n});<\/code><\/pre>\n\n\n\nserver.on(\"\/set-timer\", HTTP_POST, [](AsyncWebServerRequest *request) {\n if (request->hasParam(\"action\", true) && request->hasParam(\"duration\", true) && request->hasParam(\"unit\", true)) {\n\n targetAction = request->getParam(\"action\", true)->value().toInt();\n int dur = request->getParam(\"duration\", true)->value().toInt();\n String unit = request->getParam(\"unit\", true)->value();\n\n uint64_t durationSeconds = 0;\n if (unit == \"s\") durationSeconds = (uint64_t)dur;\n else if (unit == \"m\") durationSeconds = (uint64_t)dur * 60ULL;\n else if (unit == \"h\") durationSeconds = (uint64_t)dur * 3600ULL;\n\n if (durationSeconds > 0) {\n if (xTimerIsTimerActive(gpioTimer)) xTimerStop(gpioTimer, 0);\n\n uint64_t tempTicks = durationSeconds * (uint64_t)configTICK_RATE_HZ;\n TickType_t timerTicks = (tempTicks > 0xFFFFFFFFULL) ? 0xFFFFFFFFULL : (TickType_t)tempTicks;\n\n timerStartTick = xTaskGetTickCount();\n totalDurationTicks = tempTicks;\n\n xTimerChangePeriod(gpioTimer, timerTicks, 0);\n xTimerStart(gpioTimer, 0);\n\n Serial.printf(\"Timer scheduled: GPIO %d will be set to %s in %llu seconds\\n\", ledPin,\n targetAction ? \"ON\" : \"OFF\", durationSeconds);\n }\n }\n request->redirect(\"\/\");\n});<\/code><\/pre>\n\n\n\nserver.on(\"\/cancel-timer\", HTTP_POST, [](AsyncWebServerRequest *request) {\n \/\/ Stop the active timer\n if (xTimerIsTimerActive(gpioTimer)) {\n xTimerStop(gpioTimer, 0);\n Serial.println(\"Timer cancelled\");\n }\n targetAction = -1;\n timerStartTick = 0; \n totalDurationTicks = 0;\n request->send(200, \"text\/plain\", \"OK\");\n});<\/code><\/pre>\n\n\n\nserver.on(\"\/timer-status\", HTTP_GET, [](AsyncWebServerRequest *request) {\n if (targetAction != -1 && xTimerIsTimerActive(gpioTimer) && totalDurationTicks > 0) {\n \/\/ Calculate how many seconds are left for the timer to end\n TickType_t now = xTaskGetTickCount();\n uint64_t elapsedTicks = 0;\n\n if (now >= timerStartTick) {\n elapsedTicks = now - timerStartTick;\n } else {\n elapsedTicks = (0xFFFFFFFFULL - timerStartTick) + now + 1;\n }\n\n uint64_t remainingTicks = (totalDurationTicks > elapsedTicks) ? totalDurationTicks - elapsedTicks : 0;\n uint64_t remainingSeconds = remainingTicks \/ (uint64_t)configTICK_RATE_HZ;\n\n \/\/ Return the amount of seconds left and action that will execute when the timer ends\n String json = \"{\\\"status\\\":\\\"Setting GPIO \"+ String(ledPin) +\" to \" + \n String(targetAction ? \"ON\" : \"OFF\") + \"\\\",\";\n json += \"\\\"active\\\":true,\";\n json += \"\\\"remaining_seconds\\\":\" + String((unsigned long)remainingSeconds) + \"}\";\n request->send(200, \"application\/json\", json);\n } else {\n request->send(200, \"application\/json\", \"{\\\"status\\\":\\\"No active timers\\\",\\\"active\\\":false,\\\"remaining_seconds\\\":0}\");\n }\n});<\/code><\/pre>\n\n\n\nserver.begin();<\/code><\/pre>\n\n\n\nDemonstration<\/h2>\n\n\n\n
![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/02\/serial-monitor-logo-arduino-ide-2.png?resize=41%2C39&quality=100&strip=all&ssl=1\"){kind=logo}
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/04\/ESP32-Web-Server-Set-Timer-Schedule-Arduino-IDE-Serial-Monitor-IP-Address.png?resize=814%2C248&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/04\/ESP32-Web-Server-Set-Timer-Schedule-Web-Page.png?resize=772%2C859&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/04\/ESP32-Web-Server-Timer-Schedule-Arduino-IDE-Turn-LED-On-Off-Buttons.png?resize=551%2C322&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/04\/ESP32-Web-Server-Timer-Schedule-Arduino-IDE-Set-Timer-HTML-Web-Form.png?resize=515%2C588&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/04\/ESP32-Web-Server-Timer-Schedule-Arduino-IDE-Time-Remaining-Cancel-Timer-Button.png?resize=463%2C162&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/04\/ESP32-Web-Server-Set-Timer-Schedule-Arduino-IDE-Serial-Monitor-Demonstration.png?resize=835%2C410&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWrapping Up<\/h2>\n\n\n\n
\n