![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-Web-Server-Control-Outpus-with-Momentary-Switch-Arduino-IDE.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 diagram shows a simple overview of the project we’ll build.<\/p>\n\n\n
\n![\"Momentary](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/Momentary-switch-web-server-esp32-esp8266-project-overview.png?resize=800%2C558&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n- \n
- The ESP32 or ESP8266 hosts a web server that you can access to control an output;<\/li>\n\n\n\n
- The output’s default state is LOW, but you can change it depending on your project application;<\/li>\n\n\n\n
- There’s a button that acts like a momentary switch:\n
- \n
- if you press the button, the output changes its state to HIGH as long as you keep holding the button;<\/li>\n\n\n\n
- once the button is released, the output state goes back to LOW.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
Installing Libraries – 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> install the ESPAsyncWebServer<\/a> and the AsyncTCP <\/a>libraries (by ESP32Async).<\/li>\n\n\n\n
- ESP8266:<\/strong> install the ESPAsyncWebServer<\/a> and the ESPAsyncTCP<\/a> libraries (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-outputs-momentary-switch\/\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\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 int output = 2;\n\n\/\/ HTML web page\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html>\n <head>\n <title>ESP Pushbutton Web Server<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <style>\n body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}\n .button {\n padding: 10px 20px;\n font-size: 24px;\n text-align: center;\n outline: none;\n color: #fff;\n background-color: #2f4468;\n border: none;\n border-radius: 5px;\n box-shadow: 0 6px #999;\n cursor: pointer;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n } \n .button:hover {background-color: #1f2e45}\n .button:active {\n background-color: #1f2e45;\n box-shadow: 0 4px #666;\n transform: translateY(2px);\n }\n <\/style>\n <\/head>\n <body>\n <h1>ESP Pushbutton Web Server<\/h1>\n <button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">LED PUSHBUTTON<\/button>\n <script>\n function toggleCheckbox(x) {\n var xhr = new XMLHttpRequest();\n xhr.open("GET", "\/" + x, true);\n xhr.send();\n }\n <\/script>\n <\/body>\n<\/html>)rawliteral";\n\nvoid notFound(AsyncWebServerRequest *request) {\n request->send(404, "text\/plain", "Not found");\n}\n\nAsyncWebServer server(80);\n\nvoid setup() {\n Serial.begin(115200);\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n if (WiFi.waitForConnectResult() != WL_CONNECTED) {\n Serial.println("WiFi Failed!");\n return;\n }\n Serial.println();\n Serial.print("ESP IP Address: http:\/\/");\n Serial.println(WiFi.localIP());\n \n pinMode(output, OUTPUT);\n digitalWrite(output, LOW);\n \n \/\/ Send web page to client\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html);\n });\n\n \/\/ Receive an HTTP GET request\n server.on("\/on", HTTP_GET, [] (AsyncWebServerRequest *request) {\n digitalWrite(output, HIGH);\n request->send(200, "text\/plain", "ok");\n });\n\n \/\/ Receive an HTTP GET request\n server.on("\/off", HTTP_GET, [] (AsyncWebServerRequest *request) {\n digitalWrite(output, LOW);\n request->send(200, "text\/plain", "ok");\n });\n \n server.onNotFound(notFound);\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> – you can change the code to control any other GPIO.<\/p>\n\n\n\n
How the Code Works<\/h2>\n\n\n\n
- ESP8266:<\/strong> install the ESPAsyncWebServer<\/a> and the ESPAsyncTCP<\/a> libraries (by ESP32Async).<\/li>\n<\/ul>\n\n\n\n
- ESP32:<\/strong> install the ESPAsyncWebServer<\/a> and the AsyncTCP <\/a>libraries (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
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-IP-Address-Serial-Monitor.png?resize=711%2C255&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Momentary](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/Momentary-switch-web-server-esp32-esp8266.png?resize=662%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\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\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-board-Built_in-LED-turned-off-LOW.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n