![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-Control-Outputs-with-Web-Server-and-Physical-Button-Simultaneously.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nRecommended reading:<\/strong> Input Data on HTML Form ESP32\/ESP8266 Web Server<\/a><\/p>\n\n\n\n The ESP32\/ESP8266 boards will be programmed using Arduino IDE. So make sure you have these boards installed:<\/p>\n\n\n\n Let’s take a quick look at how the project works.<\/p>\n\n\n In summary, this project allows you to control the same output using a web server and a push button simultaneously. Whenever the output state changes, the web server is updated.<\/p>\n\n\n\n Before proceeding, you need to assemble a circuit with an LED and a pushbutton. We\u2019ll connect the LED to GPIO 2<\/span> and the pushbutton to GPIO 4<\/span>.<\/p>\n\n\n\n Here\u2019s a list of the parts you need to build the circuit:<\/p>\n\n\n\n You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p> To build the web server you need to install the following libraries:<\/p>\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 Copy the following code to your Arduino IDE.<\/p>\n\n\n View 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 GPIO 2<\/span> – you can change the code to control any other GPIO.<\/p>\n\n\n\n\n
Project Overview<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-Web-Server-With-Physical-Button-Project-Overview.png?resize=900%2C717&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
Schematic Diagram<\/h2>\n\n\n\n
Parts Required<\/h3>\n\n\n\n
\n
![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\nESP32 Schematic<\/h3>\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-LED-Pushbutton.png?resize=1035%2C695&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nESP8266 NodeMCU Schematic<\/h3>\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP8266-LED-pushbutton_bb.png?resize=1011%2C582&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nInstalling Libraries – Async Web Server<\/h2>\n\n\n\n
\n
ESP Web Server Code<\/h2>\n\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-esp8266-web-server-physical-button\/\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";\n\nconst int output = 2;\nconst int buttonPin = 4;\n\n\/\/ Variables will change:\nint ledState = LOW; \/\/ the current state of the output pin\nint buttonState; \/\/ the current reading from the input pin\nint lastButtonState = LOW; \/\/ the previous reading from the input pin\n\n\/\/ the following variables are unsigned longs because the time, measured in\n\/\/ milliseconds, will quickly become a bigger number than can be stored in an int.\nunsigned long lastDebounceTime = 0; \/\/ the last time the output pin was toggled\nunsigned long debounceDelay = 50; \/\/ the debounce time; increase if the output flickers\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 <title>ESP Web Server<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <style>\n html {font-family: Arial; display: inline-block; text-align: center;}\n h2 {font-size: 3.0rem;}\n p {font-size: 3.0rem;}\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 <\/style>\n<\/head>\n<body>\n <h2>ESP Web Server<\/h2>\n %BUTTONPLACEHOLDER%\n<script>function toggleCheckbox(element) {\n var xhr = new XMLHttpRequest();\n if(element.checked){ xhr.open("GET", "\/update?state=1", true); }\n else { xhr.open("GET", "\/update?state=0", true); }\n xhr.send();\n}\n\nsetInterval(function ( ) {\n var xhttp = new XMLHttpRequest();\n xhttp.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n var inputChecked;\n var outputStateM;\n if( this.responseText == 1){ \n inputChecked = true;\n outputStateM = "On";\n }\n else { \n inputChecked = false;\n outputStateM = "Off";\n }\n document.getElementById("output").checked = inputChecked;\n document.getElementById("outputState").innerHTML = outputStateM;\n }\n };\n xhttp.open("GET", "\/state", true);\n xhttp.send();\n}, 1000 ) ;\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+= "<h4>Output - GPIO 2 - State <span id=\\"outputState\\"><\/span><\/h4><label class=\\"switch\\"><input type=\\"checkbox\\" onchange=\\"toggleCheckbox(this)\\" id=\\"output\\" " + outputStateValue + "><span class=\\"slider\\"><\/span><\/label>";\n return buttons;\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 pinMode(buttonPin, INPUT);\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 String inputParam;\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 inputParam = PARAM_INPUT_1;\n digitalWrite(output, inputMessage.toInt());\n ledState = !ledState;\n }\n else {\n inputMessage = "No message sent";\n inputParam = "none";\n }\n Serial.println(inputMessage);\n request->send(200, "text\/plain", "OK");\n });\n\n \/\/ Send a GET request to <ESP_IP>\/state\n server.on("\/state", HTTP_GET, [] (AsyncWebServerRequest *request) {\n request->send(200, "text\/plain", String(digitalRead(output)).c_str());\n });\n \/\/ Start server\n server.begin();\n}\n \nvoid loop() {\n \/\/ read the state of the switch into a local variable:\n int reading = digitalRead(buttonPin);\n\n \/\/ check to see if you just pressed the button\n \/\/ (i.e. the input went from LOW to HIGH), and you've waited long enough\n \/\/ since the last press to ignore any noise:\n\n \/\/ If the switch changed, due to noise or pressing:\n if (reading != lastButtonState) {\n \/\/ reset the debouncing timer\n lastDebounceTime = millis();\n }\n\n if ((millis() - lastDebounceTime) > debounceDelay) {\n \/\/ whatever the reading is at, it's been there for longer than the debounce\n \/\/ delay, so take it as the actual current state:\n\n \/\/ if the button state has changed:\n if (reading != buttonState) {\n buttonState = reading;\n\n \/\/ only toggle the LED if the new button state is HIGH\n if (buttonState == HIGH) {\n ledState = !ledState;\n }\n }\n }\n\n \/\/ set the LED:\n digitalWrite(output, ledState);\n\n \/\/ save the reading. Next time through the loop, it'll be the lastButtonState:\n lastButtonState = reading;\n}\n<\/code><\/pre>\n\tHow the Code Works<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-IP-Address.png?resize=647%2C445&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/Output-web-server-ESP8266-ESP32-physical-button.png?resize=595%2C457&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/Output-web-server-on-ESP8266-ESP32-physical-button.png?resize=595%2C457&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/03\/ESP32-Input-Output-Button-Pressed-LED-On-Arduino-IDE.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\n