In this tutorial we will learn how to setup a WiFi Manager portal on our ESP32, using the Arduino core and the WiFiManager library. The tests shown below were performed on a ESP32-E FireBeetle board from DFRobot.
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.
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.
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.
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.WiFiManager manager;
Now we will call the autoConnect method on our WiFiManager object. This method call will basically take care of everything :
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.
After this, we will check the outcome of the call and print a message to the serial port accordingly to the result.
"Failed to connect"
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