![\"ESP32:](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/12\/ESP32-Wi-Fi-Manager-Web-Server.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nTo better understand how this project works, we recommend taking a look at the following tutorials:<\/p>\n\n\n\n
- \n
- Input Data on HTML Form ESP32\/ESP8266 Web Server using Arduino IDE<\/a><\/li>\n\n\n\n
- How to Set an ESP32 Access Point (AP) for Web Server<\/a><\/li>\n\n\n\n
- ESP32 Static\/Fixed IP Address<\/a><\/li>\n<\/ul>\n\n\n\n
We also use this Wi-Fi Manager approach on the following project:<\/p>\n\n\n\n
- \n
- ESP32 Neopixel Status Indicator and Sensor PCB Shield with Wi-Fi Manager<\/a><\/li>\n<\/ul>\n\n\n\n
How it Works<\/h2>\n\n\n\n
Take a look at the following diagram to understand how the Wi-Fi Manager we’ll create works.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/ESP32-ESP8266-wi-fi-manager-web-server-how-it-works.png?resize=735%2C827&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n- \n
- When the ESP first starts, it tries to read the ssid.txt<\/span>, pass.txt<\/span> and ip.txt<\/span> files* (1<\/strong>);<\/li>\n\n\n\n
- If the files are empty (2<\/strong>) (the first time you run the board, the files are empty), your board is set as an access point (3<\/strong>);<\/li>\n\n\n\n
- Using any Wi-Fi enabled device with a browser, you can connect to the newly created Access Point (default name ESP-WIFI-MANAGER<\/span>);<\/li>\n\n\n\n
- After establishing a connection with the ESP-WIFI-MANAGER, you can go to the default IP address 192.168.4.1<\/span> to open a web page that allows you to configure your SSID and password (4<\/strong>);<\/li>\n\n\n\n
- The SSID, password, and IP address inserted in the form are saved in the corresponding files: ssid.txt<\/span>, pass.txt<\/span>, and ip.txt<\/span> (5<\/strong>);<\/li>\n\n\n\n
- After that, the ESP board restarts (6<\/strong>);<\/li>\n\n\n\n
- This time, after restarting, the files are not empty, so the ESP will try to connect to the network in station mode using the settings you\u2019ve inserted in the form (7<\/strong>);<\/li>\n\n\n\n
- If it establishes a connection, the process is completed successfully, and you can access the main web server page that can do whatever you want (control sensor readings, control outputs, display some text, etc.) (9<\/strong>). Otherwise, it will set the Access Point (3<\/strong>), and you can access the default IP address (192.168.4.1<\/span>) to add another SSID\/password combination.<\/li>\n<\/ul>\n\n\n\n
*<\/strong> we also created a gateway<\/em> field and a gateway.txt<\/span> file to save the IP address gateway (this is not shown in the diagram).<\/p>\n\n\n\n
To show you how to set the Wi-Fi Manager, we’ll set up a web server that controls one output (GPIO2\u2014the built-in LED). You can apply the Wi-Fi Manager to any web server project built with the ESPAsyncWebServer library or to any project that requires the ESP to be connected to a wi-fi network.<\/p>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
We’ll program the ESP32 board using Arduino IDE. So make sure you have the ESP32 board add-on installed.<\/p>\n\n\n\n
- \n
- Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, and Linux)<\/a><\/li>\n<\/ul>\n\n\n\n
If you want to program the ESP32 using VS Code + PlatformIO, follow the next tutorial:<\/p>\n\n\n\n
- \n
- Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266 (Windows, Mac OS X, Linux Ubuntu)<\/a><\/li>\n<\/ul>\n\n\n\n
Installing Libraries (Arduino IDE)<\/h3>\n\n\n\n
We’ll build the web server using the following libraries:<\/p>\n\n\n\n
- \n
- ESPAsyncWebServer <\/a><\/li>\n\n\n\n
- AsyncTCP<\/a><\/li>\n<\/ul>\n\n\n\n
You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking the Library icon at the left sidebar.<\/p>\n\n\n\n
Search for ESPAsyncWebServer<\/span> and install the ESPAsyncWebServer by ESP32Async<\/strong>.<\/p>\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\nThen, install the AsyncTCP library. Search for AsyncTCP<\/span> and install the AsyncTCP by ESP32Async<\/strong>.<\/p>\n\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\nFilesystem Uploader<\/h3>\n\n\n\n
Before proceeding, you need to have the ESP32 Uploader Plugin installed in your Arduino IDE.<\/p>\n\n\n\n
- \n
- Arduino IDE 2: Install ESP32 LittleFS Uploader (Upload Files to the Filesystem)<\/a><\/li>\n<\/ul>\n\n\n\n
Organizing your Files<\/h2>\n\n\n\n
To keep the project organized and make it easier to understand, we’ll create four different files to build the web server:<\/p>\n\n\n\n
- \n
- Arduino sketch <\/strong>that handles the web server;<\/li>\n\n\n\n
- index.html<\/strong>: to define the content of the web page in station mode to control the output (or any other web page you want to build);<\/li>\n\n\n\n
- style.css<\/strong>: to style the web pages;<\/li>\n\n\n\n
- wifimanager.html<\/strong>: to define the web page’s content to display the Wi-Fi Manager when the ESP is in access point mode.<\/li>\n<\/ul>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/ESP32-ESP8266-Web-Server-Wi-Fi-Manager-Files.png?resize=613%2C346&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nYou should save the HTML and CSS files inside a folder called data<\/strong> <\/em>inside the Arduino sketch folder, as shown in the previous diagram. We’ll upload these files to the ESP32 filesystem (LittleFS).<\/p>\n\n\n\n
You can download all project files:<\/strong><\/p>\n\n\n\n
- \n
- Download All the Arduino Project Files<\/a><\/li>\n<\/ul>\n\n\n\n
Creating the HTML Files<\/h2>\n\n\n\n
For this project, you need two HTML files. One to build the main page that controls the output (index.html<\/span>) and another to build the Wi-Fi Manager page (wifimanager.html<\/span>).<\/p>\n\n\n\n
index.html<\/h3>\n\n\n\n
Here’s the text you should copy to your index.html<\/span> file.<\/p>\n\n\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>ESP WEB SERVER<\/title>\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="stylesheet" type="text\/css" href="style.css">\r\n <link rel="icon" type="image\/png" href="favicon.png">\r\n <link rel="stylesheet" href="https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">\r\n <\/head>\r\n <body>\r\n <div class="topnav">\r\n <h1>ESP WEB SERVER<\/h1>\r\n <\/div>\r\n <div class="content">\r\n <div class="card-grid">\r\n <div class="card">\r\n <p class="card-title"><i class="fas fa-lightbulb"><\/i> GPIO 2<\/p>\r\n <p>\r\n <a href="on"><button class="button-on">ON<\/button><\/a>\r\n <a href="off"><button class="button-off">OFF<\/button><\/a>\r\n <\/p>\r\n <p class="state">State: %STATE%<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/body>\r\n<\/html><\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
We won’t explain how this HTML file works because that’s not the purpose of this tutorial. The purpose of this tutorial is to explain the parts related to the Wi-Fi Manager.<\/p>\n\n\n\n
wifimanager.html<\/h3>\n\n\n\n
The Wi-Fi Manager web page looks like this:<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/02\/ESP32-ESP8266-Wi-Fi-Manager-Fields.png?resize=714%2C643&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCopy the following to the wifimanager.html<\/span> file. This creates a web page with a form with three input fields and a Submit<\/strong> button.<\/p>\n\n\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>ESP Wi-Fi Manager<\/title>\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="icon" href="data:,">\r\n <link rel="stylesheet" type="text\/css" href="style.css">\r\n<\/head>\r\n<body>\r\n <div class="topnav">\r\n <h1>ESP Wi-Fi Manager<\/h1>\r\n <\/div>\r\n <div class="content">\r\n <div class="card-grid">\r\n <div class="card">\r\n <form action="\/" method="POST">\r\n <p>\r\n <label for="ssid">SSID<\/label>\r\n <input type="text" id ="ssid" name="ssid"><br>\r\n <label for="pass">Password<\/label>\r\n <input type="text" id ="pass" name="pass"><br>\r\n <label for="ip">IP Address<\/label>\r\n <input type="text" id ="ip" name="ip" value="192.168.1.200"><br>\r\n <label for="gateway">Gateway Address<\/label>\r\n <input type="text" id ="gateway" name="gateway" value="192.168.1.1"><br>\r\n <input type ="submit" value ="Submit">\r\n <\/p>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
In this HTML file, we create an HTML form that will make an HTTP POST request with the data submitted to the server.<\/p>\n\n\n\n
<form action=\"\/\" method=\"POST\"><\/code><\/pre>\n\n\n\nThe form contains three input fields and corresponding labels: SSID, password, and IP address.<\/p>\n\n\n\n
This is the input field for the SSID:<\/p>\n\n\n\n
<label for=\"ssid\">SSID<\/label>\n<input type=\"text\" id =\"ssid\" name=\"ssid\"><br><\/code><\/pre>\n\n\n\nThis is the input field for the password.<\/p>\n\n\n\n
<label for=\"pass\">Password<\/label>\n<input type=\"text\" id =\"pass\" name=\"pass\"><br><\/code><\/pre>\n\n\n\nThere is an input field for the IP address that you want to attribute to the ESP in station mode. As default, we set it to 192.168.1.200<\/span> (you can set another default IP address, or you can delete the value<\/span> parameter\u2014it won’t have a default value).<\/p>\n\n\n\n
<input type=\"text\" id =\"ip\" name=\"ip\" value=\"192.168.1.200\"><\/code><\/pre>\n\n\n\nFinally, there’s an input field for the gateway address. If the default IP address is 192.168.1.200, the gateway can be 192.168.1.1 by default.<\/p>\n\n\n\n
<input type=\"text\" id =\"gateway\" name=\"gateway\" value=\"192.168.1.1\"><br><\/code><\/pre>\n\n\n\nCSS File<\/h2>\n\n\n\n
Copy the following styles to your style.css<\/span> file. We won’t explain how these styles work. We have already explained how similar styles work in other ESP Web Server projects<\/a>.<\/p>\n\n\n
html {\r\n font-family: Arial, Helvetica, sans-serif; \r\n display: inline-block; \r\n text-align: center;\r\n}\r\n\r\nh1 {\r\n font-size: 1.8rem; \r\n color: white;\r\n}\r\n\r\np { \r\n font-size: 1.4rem;\r\n}\r\n\r\n.topnav { \r\n overflow: hidden; \r\n background-color: #0A1128;\r\n}\r\n\r\nbody { \r\n margin: 0;\r\n}\r\n\r\n.content { \r\n padding: 5%;\r\n}\r\n\r\n.card-grid { \r\n max-width: 800px; \r\n margin: 0 auto; \r\n display: grid; \r\n grid-gap: 2rem; \r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n}\r\n\r\n.card { \r\n background-color: white; \r\n box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);\r\n}\r\n\r\n.card-title { \r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n color: #034078\r\n}\r\n\r\ninput[type=submit] {\r\n border: none;\r\n color: #FEFCFB;\r\n background-color: #034078;\r\n padding: 15px 15px;\r\n text-align: center;\r\n text-decoration: none;\r\n display: inline-block;\r\n font-size: 16px;\r\n width: 100px;\r\n margin-right: 10px;\r\n border-radius: 4px;\r\n transition-duration: 0.4s;\r\n }\r\n\r\ninput[type=submit]:hover {\r\n background-color: #1282A2;\r\n}\r\n\r\ninput[type=text], input[type=number], select {\r\n width: 50%;\r\n padding: 12px 20px;\r\n margin: 18px;\r\n display: inline-block;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n}\r\n\r\nlabel {\r\n font-size: 1.2rem; \r\n}\r\n.value{\r\n font-size: 1.2rem;\r\n color: #1282A2; \r\n}\r\n.state {\r\n font-size: 1.2rem;\r\n color: #1282A2;\r\n}\r\nbutton {\r\n border: none;\r\n color: #FEFCFB;\r\n padding: 15px 32px;\r\n text-align: center;\r\n font-size: 16px;\r\n width: 100px;\r\n border-radius: 4px;\r\n transition-duration: 0.4s;\r\n}\r\n.button-on {\r\n background-color: #034078;\r\n}\r\n.button-on:hover {\r\n background-color: #1282A2;\r\n}\r\n.button-off {\r\n background-color: #858585;\r\n}\r\n.button-off:hover {\r\n background-color: #252524;\r\n} <\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
Setting Up the Web Server<\/h1>\n\n\n\n
If you’re using VS Code with the platformIO extension, you need to edit the platformio.ini<\/span> file to look as shown below. If you’re using Arduino IDE, you can ignore this.<\/p>\n\n\n\n
platformio.ini<\/strong> ESP32:<\/strong><\/p>\n\n\n\n
[env:esp32doit-devkit-v1]\nplatform = espressif32\nboard = esp32doit-devkit-v1\nframework = arduino\nmonitor_speed=115200\nlib_deps = ESP Async WebServer<\/code><\/pre>\n\n\n\nCode<\/h2>\n\n\n\n
Copy the following code to your Arduino IDE or to the main.cpp<\/span> file if you’re using VS Code.<\/p>\n\n\n
\/*********\r\n Rui Santos & Sara Santos - Random Nerd Tutorials\r\n Complete instructions at https:\/\/RandomNerdTutorials.com\/esp32-wi-fi-manager-asyncwebserver\/\r\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\r\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n*********\/\r\n#include <Arduino.h>\r\n#include <WiFi.h>\r\n#include <ESPAsyncWebServer.h>\r\n#include <AsyncTCP.h>\r\n#include "LittleFS.h"\r\n\r\n\/\/ Create AsyncWebServer object on port 80\r\nAsyncWebServer server(80);\r\n\r\n\/\/ Search for parameter in HTTP POST request\r\nconst char* PARAM_INPUT_1 = "ssid";\r\nconst char* PARAM_INPUT_2 = "pass";\r\nconst char* PARAM_INPUT_3 = "ip";\r\nconst char* PARAM_INPUT_4 = "gateway";\r\n\r\n\/\/Variables to save values from HTML form\r\nString ssid;\r\nString pass;\r\nString ip;\r\nString gateway;\r\n\r\n\/\/ File paths to save input values permanently\r\nconst char* ssidPath = "\/ssid.txt";\r\nconst char* passPath = "\/pass.txt";\r\nconst char* ipPath = "\/ip.txt";\r\nconst char* gatewayPath = "\/gateway.txt";\r\n\r\nIPAddress localIP;\r\n\/\/IPAddress localIP(192, 168, 1, 200); \/\/ hardcoded\r\n\r\n\/\/ Set your Gateway IP address\r\nIPAddress localGateway;\r\n\/\/IPAddress localGateway(192, 168, 1, 1); \/\/hardcoded\r\nIPAddress subnet(255, 255, 0, 0);\r\n\r\n\/\/ Timer variables\r\nunsigned long previousMillis = 0;\r\nconst long interval = 10000; \/\/ interval to wait for Wi-Fi connection (milliseconds)\r\n\r\n\/\/ Set LED GPIO\r\nconst int ledPin = 2;\r\n\/\/ Stores LED state\r\n\r\nString ledState;\r\n\r\n\/\/ Initialize LittleFS\r\nvoid initLittleFS() {\r\n if (!LittleFS.begin(true)) {\r\n Serial.println("An error has occurred while mounting LittleFS");\r\n }\r\n Serial.println("LittleFS mounted successfully");\r\n}\r\n\r\n\/\/ Read File from LittleFS\r\nString readFile(fs::FS &fs, const char * path){\r\n Serial.printf("Reading file: %s\\r\\n", path);\r\n\r\n File file = fs.open(path);\r\n if(!file || file.isDirectory()){\r\n Serial.println("- failed to open file for reading");\r\n return String();\r\n }\r\n \r\n String fileContent;\r\n while(file.available()){\r\n fileContent = file.readStringUntil('\\n');\r\n break; \r\n }\r\n return fileContent;\r\n}\r\n\r\n\/\/ Write file to LittleFS\r\nvoid writeFile(fs::FS &fs, const char * path, const char * message){\r\n Serial.printf("Writing file: %s\\r\\n", path);\r\n\r\n File file = fs.open(path, FILE_WRITE);\r\n if(!file){\r\n Serial.println("- failed to open file for writing");\r\n return;\r\n }\r\n if(file.print(message)){\r\n Serial.println("- file written");\r\n } else {\r\n Serial.println("- write failed");\r\n }\r\n}\r\n\r\n\/\/ Initialize WiFi\r\nbool initWiFi() {\r\n if(ssid=="" || ip==""){\r\n Serial.println("Undefined SSID or IP address.");\r\n return false;\r\n }\r\n\r\n WiFi.mode(WIFI_STA);\r\n localIP.fromString(ip.c_str());\r\n localGateway.fromString(gateway.c_str());\r\n\r\n\r\n if (!WiFi.config(localIP, localGateway, subnet)){\r\n Serial.println("STA Failed to configure");\r\n return false;\r\n }\r\n WiFi.begin(ssid.c_str(), pass.c_str());\r\n Serial.println("Connecting to WiFi...");\r\n\r\n unsigned long currentMillis = millis();\r\n previousMillis = currentMillis;\r\n\r\n while(WiFi.status() != WL_CONNECTED) {\r\n currentMillis = millis();\r\n if (currentMillis - previousMillis >= interval) {\r\n Serial.println("Failed to connect.");\r\n return false;\r\n }\r\n }\r\n\r\n Serial.println(WiFi.localIP());\r\n return true;\r\n}\r\n\r\n\/\/ Replaces placeholder with LED state value\r\nString processor(const String& var) {\r\n if(var == "STATE") {\r\n if(digitalRead(ledPin)) {\r\n ledState = "ON";\r\n }\r\n else {\r\n ledState = "OFF";\r\n }\r\n return ledState;\r\n }\r\n return String();\r\n}\r\n\r\nvoid setup() {\r\n \/\/ Serial port for debugging purposes\r\n Serial.begin(115200);\r\n\r\n initLittleFS();\r\n\r\n \/\/ Set GPIO 2 as an OUTPUT\r\n pinMode(ledPin, OUTPUT);\r\n digitalWrite(ledPin, LOW);\r\n \r\n \/\/ Load values saved in LittleFS\r\n ssid = readFile(LittleFS, ssidPath);\r\n pass = readFile(LittleFS, passPath);\r\n ip = readFile(LittleFS, ipPath);\r\n gateway = readFile (LittleFS, gatewayPath);\r\n Serial.println(ssid);\r\n Serial.println(pass);\r\n Serial.println(ip);\r\n Serial.println(gateway);\r\n\r\n if(initWiFi()) {\r\n \/\/ Route for root \/ web page\r\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request) {\r\n request->send(LittleFS, "\/index.html", "text\/html", false, processor);\r\n });\r\n server.serveStatic("\/", LittleFS, "\/");\r\n \r\n \/\/ Route to set GPIO state to HIGH\r\n server.on("\/on", HTTP_GET, [](AsyncWebServerRequest *request) {\r\n digitalWrite(ledPin, HIGH);\r\n request->send(LittleFS, "\/index.html", "text\/html", false, processor);\r\n });\r\n\r\n \/\/ Route to set GPIO state to LOW\r\n server.on("\/off", HTTP_GET, [](AsyncWebServerRequest *request) {\r\n digitalWrite(ledPin, LOW);\r\n request->send(LittleFS, "\/index.html", "text\/html", false, processor);\r\n });\r\n server.begin();\r\n }\r\n else {\r\n \/\/ Connect to Wi-Fi network with SSID and password\r\n Serial.println("Setting AP (Access Point)");\r\n \/\/ NULL sets an open Access Point\r\n WiFi.softAP("ESP-WIFI-MANAGER", NULL);\r\n\r\n IPAddress IP = WiFi.softAPIP();\r\n Serial.print("AP IP address: ");\r\n Serial.println(IP); \r\n\r\n \/\/ Web Server Root URL\r\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\r\n request->send(LittleFS, "\/wifimanager.html", "text\/html");\r\n });\r\n \r\n server.serveStatic("\/", LittleFS, "\/");\r\n \r\n server.on("\/", HTTP_POST, [](AsyncWebServerRequest *request) {\r\n int params = request->params();\r\n for(int i=0;i<params;i++){\r\n const AsyncWebParameter* p = request->getParam(i);\r\n if(p->isPost()){\r\n \/\/ HTTP POST ssid value\r\n if (p->name() == PARAM_INPUT_1) {\r\n ssid = p->value().c_str();\r\n Serial.print("SSID set to: ");\r\n Serial.println(ssid);\r\n \/\/ Write file to save value\r\n writeFile(LittleFS, ssidPath, ssid.c_str());\r\n }\r\n \/\/ HTTP POST pass value\r\n if (p->name() == PARAM_INPUT_2) {\r\n pass = p->value().c_str();\r\n Serial.print("Password set to: ");\r\n Serial.println(pass);\r\n \/\/ Write file to save value\r\n writeFile(LittleFS, passPath, pass.c_str());\r\n }\r\n \/\/ HTTP POST ip value\r\n if (p->name() == PARAM_INPUT_3) {\r\n ip = p->value().c_str();\r\n Serial.print("IP Address set to: ");\r\n Serial.println(ip);\r\n \/\/ Write file to save value\r\n writeFile(LittleFS, ipPath, ip.c_str());\r\n }\r\n \/\/ HTTP POST gateway value\r\n if (p->name() == PARAM_INPUT_4) {\r\n gateway = p->value().c_str();\r\n Serial.print("Gateway set to: ");\r\n Serial.println(gateway);\r\n \/\/ Write file to save value\r\n writeFile(LittleFS, gatewayPath, gateway.c_str());\r\n }\r\n \/\/Serial.printf("POST[%s]: %s\\n", p->name().c_str(), p->value().c_str());\r\n }\r\n }\r\n request->send(200, "text\/plain", "Done. ESP will restart, connect to your router and go to IP address: " + ip);\r\n delay(3000);\r\n ESP.restart();\r\n });\r\n server.begin();\r\n }\r\n}\r\n\r\nvoid loop() {\r\n\r\n}\r\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
How The Code Works<\/h3>\n\n\n\n
Let’s take a look at the code and see how the Wi-Fi Manager works.<\/p>\n\n\n\n
The following variables are used to search for the SSID, password, IP address, and gateway on the HTTP POST request made when the form is submitted.<\/p>\n\n\n\n
\/\/ Search for parameter in HTTP POST request\nconst char* PARAM_INPUT_1 = \"ssid\";\nconst char* PARAM_INPUT_2 = \"pass\";\nconst char* PARAM_INPUT_3 = \"ip\";\nconst char* PARAM_INPUT_4 = \"gateway\";<\/code><\/pre>\n\n\n\nThe ssid<\/span>, pass,<\/span> ip<\/span>, and gateway<\/span> variables save the values of the SSID, password, IP address, and gateway submitted in the form.<\/p>\n\n\n\n
\/\/Variables to save values from HTML form\nString ssid;\nString pass;\nString ip;\nString gateway;<\/code><\/pre>\n\n\n\nThe SSID, password, IP address, and gateway when submitted are saved in files in the ESP filesystem. The following variables refer to the path of those files.<\/p>\n\n\n\n
\/\/ File paths to save input values permanently\nconst char* ssidPath = \"\/ssid.txt\";\nconst char* passPath = \"\/pass.txt\";\nconst char* ipPath = \"\/ip.txt\";\nconst char* gatewayPath = \"\/gateway.txt\";<\/code><\/pre>\n\n\n\nThe station IP address and gateway are submitted in the Wi-Fi Manager form. The subnet is hardcoded but you can easily modify this project with another field to include the subnet, if needed.<\/p>\n\n\n\n
IPAddress localIP;\n\/\/IPAddress localIP(192, 168, 1, 200); \/\/ hardcoded\n\n\/\/ Set your Gateway IP address\nIPAddress localGateway;\n\/\/IPAddress localGateway(192, 168, 1, 1); \/\/hardcoded\nIPAddress subnet(255, 255, 0, 0);<\/code><\/pre>\n\n\n\ninitWiFi()<\/h4>\n\n\n\n
The initWiFi()<\/span> function returns a boolean value (either true<\/span> or false<\/span>) indicating if the ESP board connected successfully to a network.<\/p>\n\n\n\n
bool initWiFi() {\n if(ssid==\"\" || ip==\"\"){\n Serial.println(\"Undefined SSID or IP address.\");\n return false;\n }\n\n WiFi.mode(WIFI_STA);\n localIP.fromString(ip.c_str());\n\n if (!WiFi.config(localIP, gateway, subnet)){\n Serial.println(\"STA Failed to configure\");\n return false;\n }\n WiFi.begin(ssid.c_str(), pass.c_str());\n Serial.println(\"Connecting to WiFi...\");\n\n unsigned long currentMillis = millis();\n previousMillis = currentMillis;\n\n while(WiFi.status() != WL_CONNECTED) {\n currentMillis = millis();\n if (currentMillis - previousMillis >= interval) {\n Serial.println(\"Failed to connect.\");\n return false;\n }\n }\n\n Serial.println(WiFi.localIP());\n return true;\n}<\/code><\/pre>\n\n\n\nFirst, it checks if the ssid<\/span> and ip<\/span> variables are empty. If they are, it won’t be able to connect to a network, so it returns false<\/span>.<\/p>\n\n\n\n
if(ssid==\"\" || ip==\"\"){<\/code><\/pre>\n\n\n\nIf that’s not the case, we’ll try to connect to the network using the SSID and password saved in the ssid<\/span> and pass<\/span> variables and set the IP address.<\/p>\n\n\n\n
WiFi.mode(WIFI_STA);\nlocalIP.fromString(ip.c_str());\n\nif (!WiFi.config(localIP, gateway, subnet)){\n Serial.println(\"STA Failed to configure\");\n return false;\n}\nWiFi.begin(ssid.c_str(), pass.c_str());\nSerial.println(\"Connecting to WiFi...\");<\/code><\/pre>\n\n\n\nIf it cannot connect to Wi-Fi after 10 seconds (interval<\/span> variable), it will return false<\/span>.<\/p>\n\n\n\n
unsigned long currentMillis = millis();\npreviousMillis = currentMillis;\n\nwhile(WiFi.status() != WL_CONNECTED) {\n currentMillis = millis();\n if (currentMillis - previousMillis >= interval) {\n Serial.println(\"Failed to connect.\");\n return false;\n }<\/code><\/pre>\n\n\n\nIf none of the previous conditions are met, it means that the ESP successfully connected to the network in station mode (returns true<\/span>).<\/p>\n\n\n\n
return true;<\/code><\/pre>\n\n\n\nsetup()<\/h4>\n\n\n\n
In the setup()<\/span>, start reading the files to get the previously saved SSID, password, IP address, and gateway.<\/p>\n\n\n\n
ssid = readFile(LittleFS, ssidPath);\npass = readFile(LittleFS, passPath);\nip = readFile(LittleFS, ipPath);\ngateway = readFile (LittleFS, gatewayPath);<\/code><\/pre>\n\n\n\nIf the ESP connects successfully in station mode (initWiFi()<\/span> function returns true<\/span>), we can set the commands to handle the web server requests (or any other code that requires the ESP to be connected to the internet):<\/p>\n\n\n\n
if(initWiFi()) {\n \/\/ Route for root \/ web page\n server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send(LittleFS, \"\/index.html\", \"text\/html\", false, processor);\n });\n server.serveStatic(\"\/\", LittleFS, \"\/\");\n \n \/\/ Route to set GPIO state to HIGH\n server.on(\"\/on\", HTTP_GET, [](AsyncWebServerRequest *request) {\n digitalWrite(ledPin, HIGH);\n request->send(LittleFS, \"\/index.html\", \"text\/html\", false, processor);\n });\n\n \/\/ Route to set GPIO state to LOW\n server.on(\"\/off\", HTTP_GET, [](AsyncWebServerRequest *request) {\n digitalWrite(ledPin, LOW);\n request->send(LittleFS, \"\/index.html\", \"text\/html\", false, processor);\n });\n server.begin();\n}<\/code><\/pre>\n\n\n\nIf that’s not the case, the initWiFi()<\/span> function returns false<\/span>. The ESP will set an access point:<\/p>\n\n\n\n
else {\n \/\/ Connect to Wi-Fi network with SSID and password\n Serial.println(\"Setting AP (Access Point)\");\n \/\/ NULL sets an open Access Point\n WiFi.softAP(\"ESP-WIFI-MANAGER\", NULL);\n\n IPAddress IP = WiFi.softAPIP();\n Serial.print(\"AP IP address: \");\n Serial.println(IP); <\/code><\/pre>\n\n\n\nTo set an access point, we use the softAP()<\/span> method and pass as arguments the name for the access point and the password. We want the access point to be open, so we set the password to NULL<\/span>. You can add a password if you wish. To learn more about setting up an Access Point, read one of the following tutorials:<\/p>\n\n\n\n
- \n
- How to Set an ESP32 Access Point (AP) for Web ServerStatic IP Address<\/a><\/li>\n<\/ul>\n\n\n\n
When you access the Access Point, it shows the web page to enter the network credentials in the form. So, the ESP must send the wifimanager.html<\/span> file when it receives a request on the root \/<\/span> URL.<\/p>\n\n\n\n
\/\/ Web Server Root URL\nserver.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(LittleFS, \"\/wifimanager.html\", \"text\/html\");\n});<\/code><\/pre>\n\n\n\nWe must also handle what happens when the form is submitted via an HTTP POST request. The following lines save the submitted values in the ssid<\/span>, pass,<\/span> and ip<\/span> variables and save those variables in the corresponding files.<\/p>\n\n\n\n
server.on(\"\/\", HTTP_POST, [](AsyncWebServerRequest *request) {\n int params = request->params();\n for(int i=0;i<params;i++){\n AsyncWebParameter* p = request->getParam(i);\n if(p->isPost()){\n \/\/ HTTP POST ssid value\n if (p->name() == PARAM_INPUT_1) {\n ssid = p->value().c_str();\n Serial.print(\"SSID set to: \");\n Serial.println(ssid);\n \/\/ Write file to save value\n writeFile(LittleFS, ssidPath, ssid.c_str());\n }\n \/\/ HTTP POST pass value\n if (p->name() == PARAM_INPUT_2) {\n pass = p->value().c_str();\n Serial.print(\"Password set to: \");\n Serial.println(pass);\n \/\/ Write file to save value\n writeFile(LittleFS, passPath, pass.c_str());\n }\n \/\/ HTTP POST ip value\n if (p->name() == PARAM_INPUT_3) {\n ip = p->value().c_str();\n Serial.print(\"IP Address set to: \");\n Serial.println(ip);\n \/\/ Write file to save value\n writeFile(LittleFS, ipPath, ip.c_str());\n }\n \/\/ HTTP POST gateway value\n if (p->name() == PARAM_INPUT_4) {\n gateway = p->value().c_str();\n Serial.print(\"Gateway set to: \");\n Serial.println(gateway);\n \/\/ Write file to save value\n writeFile(LittleFS, gatewayPath, gateway.c_str());\n }\n \/\/Serial.printf(\"POST[%s]: %s\\n\", p->name().c_str(), p->value().c_str());\n }\n }<\/code><\/pre>\n\n\n\nAfter submitting the form, send a response with some text so that we know that the ESP received the form details:<\/p>\n\n\n\n
request->send(200, \"text\/plain\", \"Done. ESP will restart, connect to your router and go to IP address: \" + ip);<\/code><\/pre>\n\n\n\nAfter three seconds, restart the ESP board with ESP.restart()<\/span>:<\/p>\n\n\n\n
delay(3000);\nESP.restart();<\/code><\/pre>\n\n\n\nThat’s a quick summary of how the code works.<\/p>\n\n\n\n
You can apply this idea to any of the other web server projects built with the ESPAsyncWebServer library.<\/p>\n\n\n\n
Uploading Code and Files<\/h1>\n\n\n\n
Upload the files in the data <\/em>folder to your ESP32. On the Arduino IDE, press [Ctrl<\/strong>] + [Shift<\/strong>] + [P<\/strong>] on Windows or [\u2318<\/strong>] + [Shift<\/strong>] + [P<\/strong>] on MacOS to open the command palette. Search for the Upload LittleFS to Pico\/ESP8266\/ESP32<\/strong> command and click on it.<\/p>\n\n\n
\n![\"Upload](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/upload-files-little-fs-esp32-arduino-ide.png?resize=744%2C401&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nIf you don\u2019t have this option is because you didn\u2019t install the filesystem uploader plugin. Check this tutorial<\/a>.<\/p>\n\n\n\n
Important: <\/strong>make sure the Serial Monitor is closed before uploading to the filesystem. Otherwise, the upload will fail.<\/p>\n\n\n\n
If you’re using VS Code with the PlatformIO extension, follow one of the next tutorials to learn how to upload files to your boards:<\/p>\n\n\n\n
- How to Set an ESP32 Access Point (AP) for Web ServerStatic IP Address<\/a><\/li>\n<\/ul>\n\n\n\n
- index.html<\/strong>: to define the content of the web page in station mode to control the output (or any other web page you want to build);<\/li>\n\n\n\n
- Arduino sketch <\/strong>that handles the web server;<\/li>\n\n\n\n
- AsyncTCP<\/a><\/li>\n<\/ul>\n\n\n\n
- ESPAsyncWebServer <\/a><\/li>\n\n\n\n
- Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266 (Windows, Mac OS X, Linux Ubuntu)<\/a><\/li>\n<\/ul>\n\n\n\n
- If the files are empty (2<\/strong>) (the first time you run the board, the files are empty), your board is set as an access point (3<\/strong>);<\/li>\n\n\n\n
- When the ESP first starts, it tries to read the ssid.txt<\/span>, pass.txt<\/span> and ip.txt<\/span> files* (1<\/strong>);<\/li>\n\n\n\n
- How to Set an ESP32 Access Point (AP) for Web Server<\/a><\/li>\n\n\n\n
![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/arduino-ide-2-upload-button.png?resize=36%2C39&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP-Wi-Fi](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/ESP-Wi-Fi-Manager-Sets-Access-Point-Serial-Monitor.png?resize=601%2C619&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Connect](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/03\/Connect-to-ESP32-Wi-Fi-Manager.png?resize=750%2C466&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/03\/ESP32-connected-to-station-success-Wi-Fi-Manager.png?resize=643%2C309&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/ESP32-EPS8266-Connected-to-Access-Point-Wi-Fi-Manager.png?resize=601%2C619&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n