![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-NodeMCU-Web-Server-Control-Outputs-with-Timer-Pulse.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThe ESP32\/ESP8266 boards will be programmed using Arduino IDE. So make sure you have these boards installed:<\/p>\n\n\n\n
- \n
- Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, and Linux)<\/a><\/li>\n\n\n\n
- Installing ESP8266 Board in Arduino IDE (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n
Project Overview<\/h2>\n\n\n\n
The following image shows an overview of how this project works.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-Control-Outputs-with-Timer-Web-Server-Project-Overview-How-it-Works.png?resize=885%2C696&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n- \n
- The ESP32\/ESP8266 hosts a web server that allows you to control an output with a pulse;<\/li>\n\n\n\n
- The web server contains a slider that allows you to define the pulse width (how many seconds the output should be HIGH);<\/li>\n\n\n\n
- There’s an ON\/OFF button. Set it to ON to send the pulse. After that, you’ll see a timer decreasing for the duration of the pulse width;<\/li>\n\n\n\n
- When the timer is over, the output is set to LOW, and the web server button goes back to OFF state;<\/li>\n\n\n\n
- This web server can be useful to control devices that need a pulse to activate like garage door openers, for example.<\/li>\n<\/ul>\n\n\n\n
Installing Libraries \u2013 Async Web Server<\/h2>\n\n\n\n
To build the web server you need to install the following libraries:<\/p>\n\n\n\n
- \n
- ESP32:<\/strong>\u00a0install the\u00a0ESPAsyncWebServer<\/a> and the\u00a0AsyncTCP\u00a0<\/a>libraries\u00a0(by ESP32Async).<\/li>\n\n\n\n
- ESP8266:<\/strong>\u00a0install the\u00a0ESPAsyncWebServer<\/a>\u00a0and the\u00a0ESPAsyncTCP<\/a>\u00a0libraries (by ESP32Async).<\/li>\n<\/ul>\n\n\n\n
You can install those libraries in the Arduino IDE Library Manager. Go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong> and search for the libraries’ names.<\/p>\n\n\n\n
Code<\/h2>\n\n\n\n
Copy the following code to your Arduino IDE.<\/p>\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-esp8266-web-server-timer-pulse\/\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*********\/\n\n\/\/ Import required libraries\n#ifdef ESP32\n #include <WiFi.h>\n #include <AsyncTCP.h>\n#else\n #include <ESP8266WiFi.h>\n #include <ESPAsyncTCP.h>\n#endif\n#include <ESPAsyncWebServer.h>\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\nconst char* PARAM_INPUT_1 = "state";\nconst char* PARAM_INPUT_2 = "value";\n\nconst int output = 2;\n\nString timerSliderValue = "10";\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html>\n<head>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <title>ESP Web Server<\/title>\n <style>\n html {font-family: Arial; display: inline-block; text-align: center;}\n h2 {font-size: 2.4rem;}\n p {font-size: 2.2rem;}\n body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}\n .switch {position: relative; display: inline-block; width: 120px; height: 68px} \n .switch input {display: none}\n .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px}\n .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}\n input:checked+.slider {background-color: #2196F3}\n input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}\n .slider2 { -webkit-appearance: none; margin: 14px; width: 300px; height: 20px; background: #ccc;\n outline: none; -webkit-transition: .2s; transition: opacity .2s;}\n .slider2::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 30px; height: 30px; background: #2f4468; cursor: pointer;}\n .slider2::-moz-range-thumb { width: 30px; height: 30px; background: #2f4468; cursor: pointer; } \n <\/style>\n<\/head>\n<body>\n <h2>ESP Web Server<\/h2>\n <p><span id="timerValue">%TIMERVALUE%<\/span> s<\/p>\n <p><input type="range" onchange="updateSliderTimer(this)" id="timerSlider" min="1" max="20" value="%TIMERVALUE%" step="1" class="slider2"><\/p>\n %BUTTONPLACEHOLDER%\n<script>\nfunction toggleCheckbox(element) {\n var sliderValue = document.getElementById("timerSlider").value;\n var xhr = new XMLHttpRequest();\n if(element.checked){ xhr.open("GET", "\/update?state=1", true); xhr.send();\n var count = sliderValue, timer = setInterval(function() {\n count--; document.getElementById("timerValue").innerHTML = count;\n if(count == 0){ clearInterval(timer); document.getElementById("timerValue").innerHTML = document.getElementById("timerSlider").value; }\n }, 1000);\n sliderValue = sliderValue*1000;\n setTimeout(function(){ xhr.open("GET", "\/update?state=0", true); \n document.getElementById(element.id).checked = false; xhr.send(); }, sliderValue);\n }\n}\nfunction updateSliderTimer(element) {\n var sliderValue = document.getElementById("timerSlider").value;\n document.getElementById("timerValue").innerHTML = sliderValue;\n var xhr = new XMLHttpRequest();\n xhr.open("GET", "\/slider?value="+sliderValue, true);\n xhr.send();\n}\n<\/script>\n<\/body>\n<\/html>\n)rawliteral";\n\n\/\/ Replaces placeholder with button section in your web page\nString processor(const String& var){\n \/\/Serial.println(var);\n if(var == "BUTTONPLACEHOLDER"){\n String buttons = "";\n String outputStateValue = outputState();\n buttons+= "<p><label class=\\"switch\\"><input type=\\"checkbox\\" onchange=\\"toggleCheckbox(this)\\" id=\\"output\\" " + outputStateValue + "><span class=\\"slider\\"><\/span><\/label><\/p>";\n return buttons;\n }\n else if(var == "TIMERVALUE"){\n return timerSliderValue;\n }\n return String();\n}\n\nString outputState(){\n if(digitalRead(output)){\n return "checked";\n }\n else {\n return "";\n }\n return "";\n}\n\nvoid setup(){\n \/\/ Serial port for debugging purposes\n Serial.begin(115200);\n\n pinMode(output, OUTPUT);\n digitalWrite(output, LOW);\n\n \/\/ Connect to Wi-Fi\n WiFi.begin(ssid, password);\n while (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println("Connecting to WiFi..");\n }\n\n \/\/ Print ESP Local IP Address\n Serial.println(WiFi.localIP());\n\n \/\/ Route for root \/ web page\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html, processor);\n });\n\n \/\/ Send a GET request to <ESP_IP>\/update?state=<inputMessage>\n server.on("\/update", HTTP_GET, [] (AsyncWebServerRequest *request) {\n String inputMessage;\n \/\/ GET input1 value on <ESP_IP>\/update?state=<inputMessage>\n if (request->hasParam(PARAM_INPUT_1)) {\n inputMessage = request->getParam(PARAM_INPUT_1)->value();\n digitalWrite(output, inputMessage.toInt());\n }\n else {\n inputMessage = "No message sent";\n }\n Serial.println(inputMessage);\n request->send(200, "text\/plain", "OK");\n });\n \n \/\/ Send a GET request to <ESP_IP>\/slider?value=<inputMessage>\n server.on("\/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {\n String inputMessage;\n \/\/ GET input1 value on <ESP_IP>\/slider?value=<inputMessage>\n if (request->hasParam(PARAM_INPUT_2)) {\n inputMessage = request->getParam(PARAM_INPUT_2)->value();\n timerSliderValue = inputMessage;\n }\n else {\n inputMessage = "No message sent";\n }\n Serial.println(inputMessage);\n request->send(200, "text\/plain", "OK");\n });\n \n \/\/ Start server\n server.begin();\n}\n \nvoid loop() {\n \n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
You just need to enter your network credentials (SSID and password) and the web server will work straight away. The code is compatible with both the ESP32<\/a> and ESP8266<\/a> boards and controls the on-board LED GPIO 2<\/span> \u2013 you can change the code to control any other GPIO.<\/p>\n\n\n\n
How the Code Works<\/h2>\n\n\n\n
We\u2019ve already explained in great details how web servers like this work in previous tutorials (DHT Temperature Web Server<\/a> or Relay Web Server<\/a>), so we\u2019ll just take a look at the relevant parts for this project.<\/p>\n\n\n\n
Network Credentials<\/h3>\n\n\n\n
As said previously, insert your network credentials in the following lines:<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nSlider Label<\/h3>\n\n\n\n
Above the slider, there’s a number showing the current slider value.<\/p>\n\n\n\n
<p><span id=\"timerValue\">%TIMERVALUE%<\/span> s<\/p><\/code><\/pre>\n\n\n\nBy default, the slider value is set to the %TIMERVALUE%<\/span> placeholder.<\/p>\n\n\n\n
The %TIMERVALUE%<\/span> is a placeholder that will be replaced with the value stored in the timerSliderValue<\/span> variable which is set to 10 by default. But you can change that in the following line:<\/p>\n\n\n\n
String timerSliderValue = \"10\";<\/code><\/pre>\n\n\n\nThis will also be changed when you move the slider. When the slider is moved, it calls a JavaScript function that updates the slider value.<\/p>\n\n\n\n
Slider<\/h3>\n\n\n\n
The following line creates the slider. <\/p>\n\n\n\n
<input type=\"range\" onchange=\"updateSliderTimer(this)\" id=\"timerSlider\" min=\"1\" max=\"20\" value=\"%TIMERVALUE%\" step=\"1\" class=\"slider2\"><\/code><\/pre>\n\n\n\nLet\u2019s break this down into smaller sections.<\/p>\n\n\n\n
In HTML, a slider is an input type. The <input><\/span> tag specifies an input field where the user can enter data. The slider is an input field of type range<\/span>. There are many other input field types.<\/p>\n\n\n\n
<input type=\"range\"><\/code><\/pre>\n\n\n\nThe default range of the slider is 0 to 100. You can use the following attributes to customize the slider settings:<\/p>\n\n\n\n
- max<\/span>: specifies the maximum value allowed. In our example, we’re setting it to 20, but you can change that value.<\/li>
- min<\/span>: specifies the minimum value. In this case, we’re setting it to 1.<\/li>
- step<\/span>: specifies the number interval. It’s set to 1.<\/li>
- value<\/span>: specifies the default value of the slider. In this case, it is equal to %TIMERVALUE%<\/span>. <\/li><\/ul>\n\n\n\n
<input type=\"range\" onchange=\"updateSliderTimer(this)\" id=\"timerSlider\" min=\"1\" max=\"20\" value=\"%TIMERVALUE%\" step=\"1\" class=\"slider2\"><\/code><\/pre>\n\n\n\nThe %TIMERVALUE%<\/span> is a placeholder that will be replaced with an actual value. In the code, it will be replaced with the value of the timerSliderValue<\/span> variable that is set to 10 by default. But you can change that in the following line:<\/p>\n\n\n\n
String timerSliderValue = \"10\";<\/code><\/pre>\n\n\n\nThe slider has two more attributes: id<\/span> and onchange<\/span>.<\/p>\n\n\n\n
- \n
- id<\/span>: specifies a unique id for an HTML element (slider). The id allows us to manipulate the element using CSS or JavaScript.<\/li>\n\n\n\n
- onchange<\/span>: is an event attribute that occurs when we change the value of the element (the slider). When you move the slider, it calls the updateSliderTimer()<\/span> function. <\/li>\n<\/ul>\n\n\n\n
Update Slider Value (JavaScript)<\/h3>\n\n\n\n
When you move the slider, the updateSliderTimer()<\/span> function is executed. <\/p>\n\n\n\n
It gets the current slider value by referring to its id timerSlider<\/span>:<\/p>\n\n\n\n
var sliderValue = document.getElementById(\"timerSlider\").value;<\/code><\/pre>\n\n\n\nUpdates the slider label to the current slider value by referring to its id timerValue<\/span>:<\/p>\n\n\n\n
document.getElementById(\"timerValue\").innerHTML = sliderValue;<\/code><\/pre>\n\n\n\nThen, it makes a request on the \/slider?value=sliderValue<\/em> URL. Where the sliderValue<\/span> is equal to the current slider value.<\/p>\n\n\n\n
Then, the ESP32\/ESP8266 handles what happens when it receives a request on that URL.<\/p>\n\n\n\n
Control the Output with Timer (JavaScript)<\/h3>\n\n\n\n
When you click the ON\/OFF button to control the output, it calls the toogleCheckbox()<\/span> JavaScript function.<\/p>\n\n\n\n
This function gets the current value of the slider label:<\/p>\n\n\n\n
var sliderValue = document.getElementById(\"timerSlider\").value;<\/code><\/pre>\n\n\n\nMakes a request on the \/update?state=1<\/strong><\/em> URL so that the ESP knows it needs to set the output to HIGH<\/span>.<\/p>\n\n\n\n
if(element.checked){ xhr.open(\"GET\", \"\/update?state=1\", true); xhr.send();<\/code><\/pre>\n\n\n\nThe following lines decrease the slider label value every second creating the countdown timer. <\/p>\n\n\n\n
var count = sliderValue, timer = setInterval(function() {\n count--; document.getElementById(\"timerValue\").innerHTML = count;\n if(count == 0){ clearInterval(timer); document.getElementById(\"timerValue\").innerHTML = document.getElementById(\"timerSlider\").value; }\n}, 1000);<\/code><\/pre>\n\n\n\nWhen the timer hits zero, the label value gets back to its original value and a request is made on the \/update?state=0<\/strong><\/em> URL, so that the ESP knows it is time to set the output to LOW<\/span>. The button on the web server gets back to the off state.<\/p>\n\n\n\n
setTimeout(function(){ xhr.open(\"GET\", \"\/update?state=0\", true); \ndocument.getElementById(element.id).checked = false; xhr.send(); }, sliderValue);<\/code><\/pre>\n\n\n\nHandle Requests<\/h3>\n\n\n\n
The ESP32\/ESP8266 needs to handle what happens when it receives a request on a certain URL.<\/p>\n\n\n\n
Root URL<\/h4>\n\n\n\n
When you access the root URL \/<\/strong><\/span>, send the HTML text saved on the index_html<\/span> variable. All placeholders are replaced with the actual values by the processor()<\/span> function.<\/p>\n\n\n\n
server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send_P(200, \"text\/html\", index_html, processor);\n});<\/code><\/pre>\n\n\n\nControl Output State<\/h4>\n\n\n\n
The following lines handle what happens when you receive a request on the \/update?state=1<\/strong><\/em> and \/update?state=0<\/strong><\/em> URLs. It sets the output state to HIGH<\/span> or LOW<\/span> accordingly.<\/p>\n\n\n\n
server.on(\"\/update\", HTTP_GET, [] (AsyncWebServerRequest *request) {\n String inputMessage;\n \/\/ GET input1 value on <ESP_IP>\/update?state=<inputMessage>\n if (request->hasParam(PARAM_INPUT_1)) {\n inputMessage = request->getParam(PARAM_INPUT_1)->value();\n digitalWrite(output, inputMessage.toInt());\n }\n else {\n inputMessage = \"No message sent\";\n }\n Serial.println(inputMessage);\n request->send(200, \"text\/plain\", \"OK\");\n});<\/code><\/pre>\n\n\n\nThe output state is updated in the following line:<\/p>\n\n\n\n
digitalWrite(output, inputMessage.toInt());<\/code><\/pre>\n\n\n\nUpdate Slider Value<\/h3>\n\n\n\n
Every time you drag the slider, the ESP receives a request with the new value. We store the new slider value and print it in the Serial Monitor.<\/p>\n\n\n\n
\/\/ Send a GET request to <ESP_IP>\/slider?value=<inputMessage>\nserver.on(\"\/slider\", HTTP_GET, [] (AsyncWebServerRequest *request) {\n String inputMessage;\n \/\/ GET input1 value on <ESP_IP>\/slider?value=<inputMessage>\n if (request->hasParam(PARAM_INPUT_2)) {\n inputMessage = request->getParam(PARAM_INPUT_2)->value();\n timerSliderValue = inputMessage;\n }\n else {\n inputMessage = \"No message sent\";\n }\n Serial.println(inputMessage);\n request->send(200, \"text\/plain\", \"OK\");\n});<\/code><\/pre>\n\n\n\nDemonstration<\/h2>\n\n\n\n
Upload the code to your ESP32 or ESP8266 NodeMCU board. Then, open the Serial Monitor and press the on-board RST\/EN button to get is IP address.<\/p>\n\n\n\n
Open a browser in your local network and type the ESP IP address. The following page should load.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-Control-Outputs-with-Timer-Web-Server.png?resize=786%2C532&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nDrag the slider to adjust the pulse width, and then, click the ON\/OFF button. The output (in this case GPIO 2<\/span> – built-in LED) will stay on for the period of time you’ve set on the slider.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-board-Built_in-LED-turned-on-HIGH.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWatch the next quick video for a live demonstration:<\/p>\n\n\n
- onchange<\/span>: is an event attribute that occurs when we change the value of the element (the slider). When you move the slider, it calls the updateSliderTimer()<\/span> function. <\/li>\n<\/ul>\n\n\n\n
- min<\/span>: specifies the minimum value. In this case, we’re setting it to 1.<\/li>
- ESP8266:<\/strong>\u00a0install the\u00a0ESPAsyncWebServer<\/a>\u00a0and the\u00a0ESPAsyncTCP<\/a>\u00a0libraries (by ESP32Async).<\/li>\n<\/ul>\n\n\n\n
- ESP32:<\/strong>\u00a0install the\u00a0ESPAsyncWebServer<\/a> and the\u00a0AsyncTCP\u00a0<\/a>libraries\u00a0(by ESP32Async).<\/li>\n\n\n\n
- Installing ESP8266 Board in Arduino IDE (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n