Wifi Manager
June 19, 2021 at 9:14 pm
Introduction
In this tutorial we will learn how to setup a WiFi Manager portal on our ESP32, using the Arduino core and the WiFiManager library. This library offers a very simple way of hosting a portal in the ESP32 that, amongst other functionalities, shows the surrounding WiFi networks and allows to configure access to them. The credentials we choose are saved, meaning that the next time we run our program, the ESP32 will use those credentials to try to connect to that network.
It’s important to mention that the ESP32 will operate in AP mode for serving this portal, meaning that it will host its own WiFi network and we don’t need to have a previously successful connection to any Access Point.
Once we connect to the network hosted by the ESP32, we can use a device such as a computer or a smartphone to access the portal in a web browser. This portal has a nice look and feel, as we will see below, thus offering a nice out of the box solution for WiFi configuration.
As we will see in the code section, the bare minimum example will consist in creating an object, calling a method on that object and checking the outcome of the operation, which is really simple given the whole functionality the library exposes. Naturally, the library allows for many other options and configurations, for more advanced scenarios.
You can check the installation instructions of the library here. In short, the easiest way of installing the is searching it in the Arduino IDE libraries manager.
The code
We will start our code by including the WiFiManager.h library, which will give us access to the functionalities we need to perform the WiFi management through a portal.
1 | #include <WiFiManager.h> |
Moving on to the Arduino setup, we will start by opening a serial connection, so we can output some content to later be obtained in the Arduino IDE serial monitor.
1 | Serial.begin(115200); |
Then we will create an object of class WiFiManager. This object will allow us to bring up the WiFi manager portal with a single line of code, as we will see below.
1 | WiFiManager manager; |
Now we will call the autoConnect method on our WiFiManager object. This method call will basically take care of everything [1]:
- If no network credentials are saved, it will serve the WiFi manager portal;
- If network credentials are saved, it will try to connect to WiFi. If it fails, it will start the AP mode and serve the WiFi Manager portal.
As input, the autoConnect method receives the name of the network that the ESP32 will host and, optionally, a password to be able to connect to it. The autoConnect method can also be called without passing any parameter. In that case, the library will generate a network name.
In our case, we will make use of both parameters the method can receive. We will call our network “ESP32_AP” and our password will be “password“. For a real application scenario, please make sure to use a secure password, as this one that we are using for testing purposes is insecure for real scenarios.
As output, this method call will return a Boolean indicating if it was successful connecting to the WiFi network or not. We will store this result in a variable.
Please take in consideration that, by default, if the configuration portal is launched, the autoConnect method call will block the program execution while waiting for the user to perform the configuration of the network in the portal (or exit it). If you want to set a timeout, you can call this method on the WiFiManager object.
1 | bool success = manager.autoConnect("ESP32_AP","password"); |
After this, we will check the outcome of the call and print a message to the serial port accordingly to the result.
1 2 3 4 5 6 | if(!success) { Serial.println("Failed to connect");} else { Serial.println("Connected");} |
The complete code can be seen in the snippet below. Note that we have left the Arduino main loop empty since, for this introductory tutorial, we simply want to show the portal.
For testing purposes, if you want to try the portal again after saving the credentials, you can simply call the resetSettings method on the WiFiManager object. This method takes no arguments and it will delete the saved credentials, which is very useful for testing purposes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #include <WiFiManager.h>void setup() { Serial.begin(115200); WiFiManager manager; bool success = manager.autoConnect("ESP32_AP","password"); if(!success) { Serial.println("Failed to connect"); } else { Serial.println("Connected"); }}void loop(){} |
Testing the code
To test the code, simply compile it and upload it to your device using the Arduino IDE. Once the procedure finishes, open the list of available networks using a device such as a computer.
You should see a network called ESP32_AP, like shown in figure 1. Connect to it using the password we set before: “password“. Once again, please use an adequate and secure password for real application scenarios.
Also, if you open the Arduino IDE serial monitor, you will see some information getting printed, as shown on figure 2. In particular, we can see the IP address where the WiFi manager portal will be accessible once we connect to the ESP32 network.
Once connected to the ESP32 network, open a web browser of your choice and type the address below in the address bar. Please note that the portal is accessible only via HTTP, which means that any network password that you send goes in plain text (not secure).
1 |
Upon accessing the URL, you should get the portal shown in figure 3. As can be seen, this page indicates that there is no Access Point set and we have 3 options: “Configure WiFi“, “Info” and “Exit“.
If we click the “Configure WiFi” option, we are directed to the page shown in figure 4. It shows all the scanned networks and the strength of the sinal of each one. It also has two text boxes to input the credentials of the network we choose to connect to: SSID and Password.
Upon inserting the credentials, we can click the save button to finish the configuration and close the WiFi Manager portal. If the credentials are correct, the ESP32 will connect to the network and the autoConnect method will return the value true.
Just to illustrate the two other pages that we can navigate to from the index, figure 5 shows the “Info” page. It shows some information about the ESP32 and from the network it is hosting.
If we scroll down, we can also see some additional information about other available pages that we don’t see right away in the index page. This is shown in figure 6.
If we choose to exit the portal without putting the credentials of a network, then the ESP32 won’t be able to connect and the autoConnect method will return false.