In this ESP32 Web server tutorial, you will talk about how to set ESP32 as a soft access point web server or How to use ESP32 in soft AP. In all previous projects on the ESP32 web server, we use ESP32 as in station mode. We will not need to connect ESP32 development board with WiFi network through a router. However, ESP32 will itself work as a router. It will serve as a WiFi network.
ESP32 can be used in station mode, soft access point mode, or in both modes. In the last tutorial ( See this tutorial on creating ESP32 web server), we use ESP32 in station mode where we connected it with a WiFi router and it gets the IP address from a WiFi router. In this mode, the router acts as a soft access point because all web client gets web pages through the wireless router as shown in the figure below.
But, this method has one limitation. If you do not have WiFi router available, you can not use ESP32 as a web server to access data through a local network. The solution to this query is a soft access point method. So let’s see what is soft access point mode and how to set this board in soft AP mode.
ESP32 in a Soft Access Point Mode
The simple meaning of soft access point is a hotspot. We can turn ESP32 into a hotspot device. Every hotspot device acts like a router which we used to transfer data between devices. Any laptop and mobile device having WiFi built-in can connect to this hotspot. Similarly, We can set ESP32 acts like a WiFi router and computing devices can connect to it. As shown in the picture below, ESP32 acts as a soft access point and devices can connect to it through WiFi name and password.
In summary,
- When you use ESP32 in soft access point mode, it builds its own WiFi network.
- All devices within the range of this WiFi network can connect to it ( using this network name and password).
- All devices connected to it will act as a station and ESP32 as a soft access point.
- We will see in coming section how to set SSID and password of this WiFi network created by this board.
- You will not need to connect your board with any router or wired network.
Connecting LEDs to ESP32 Board
For illustration purpose, we will control two LEDs from a web page. The connection diagram is shown below. In this connection diagram, we used three LEDs. We will control these LEDs from a web page. GPIO pin 22, 23 and 15 will be controlled. Now make this circuit diagram on a breadboard.
Followings background knowledge is essential for this tutorial:
ESP32 Soft Access point Code in Arduino IDE
In this code, we will control the three LEDs as shown in the connection diagram given above. But the instructions given in this example are also compatible with other ESP32 web servers. Now copy this sketch and upload it to ESP32 using Arduino IDE. This code sets the ESP32 in soft access point mode.
#include "WiFi.h"
#define LED0 23
#define LED1 22
const char* ssid = "ESP32-Soft-accessPoint";
const char* password = "microcontrollerslab";
WiFiServer server(80);
String html ="<!DOCTYPE html> \
<html> \
<body> \
<center><h1>ESP32 Soft access point</h1></center> \
<center><h2>Web Server</h2></center> \
<form> \
<button name=\"LED0\" button style=\"color:green\" value=\"ON\" type=\"submit\">LED0 ON</button> \
<button name=\"LED0\" button style=\"color=red\" value=\"OFF\" type=\"submit\">LED0 OFF</button><br><br> \
<button name=\"LED1\" button style=\"color:green\" value=\"ON\" type=\"submit\">LED1 ON</button> \
<button name=\"LED1\" button style=\"color:red\" value=\"OFF\" type=\"submit\">LED1 OFF</button> \
</form> \
</body> \
</html>";
void Connect_WiFi()
{
WiFi.begin(ssid, password);
while(WiFi.status() != WL_CONNECTED)
{
delay(100);
}
}
void setup()
{
Serial.begin(115200);
pinMode(LED0, OUTPUT);
pinMode(LED1, OUTPUT);
digitalWrite(LED0, LOW);
digitalWrite(LED1, LOW);
Serial.print("Setting soft access point mode");
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
server.begin();
}
void loop()
{
WiFiClient client=server.available();
if(client)
{
String request = client.readStringUntil('\r');
if(request.indexOf("LED0=ON") != -1)digitalWrite(LED0, HIGH);
if(request.indexOf("LED0=OFF") != -1)digitalWrite(LED0, LOW);
if(request.indexOf("LED1=ON") != -1)digitalWrite(LED1, HIGH);
if(request.indexOf("LED1=OFF") != -1)digitalWrite(LED1, LOW);
client.print(html);
request="";
}
}
Code used in this tutorial is almost identical as used in esp32 web server tutorial except the setting of a soft access point. First, we need to define the SSID name and the password. Following lines set the name of ssid as “ESP32-Soft-accessPoint” and password as “microcontrollerslab”. You can replace the ssid and password to whatever value you want.
const char* ssid = "ESP32-Soft-accessPoint";
const char* password = "microcontrollerslab";
These lines established the access point mode with above-mentioned ssid and password. The Serial.print() function prints the string ” Setting soft access point mode” on a serial monitor.
Serial.print("Setting soft access point mode");
The WiFi.softAP() function used to set the soft AP mode with two arguments as an input to this function. One is the name of SSID which you want to set and another one is the password of WiFi network which will ESP32 create.
WiFi.softAP(ssid, password);
The WiFi.softAPIP() function is used to get the IP address of ESP32 through which we will access the web server. This line saves the IP address value in a variable ‘IPAddress’. After that Serial.print() function prints the value of IP of address on the serial monitor.
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
So these functions will set the ESP32 as soft AP. If you want to turn your any existing ESP32 based web server project into soft access point mode, you only need to add these lines to your code.
Accessing Web server from any device
Now upload this code to your board using Arduino IDE. After you see the message of done uploading in Arduino IDE, click on Serial monitor button to the serial monitor. you will see this message on the serial monitor. It will show your IP address. you need to note down this IP address. Because we will need it to access the web server.Â
How to connect to ESP32 Soft AP
Now, we will see how to connect to a WiFi network created by ESP32. Before doing so you should make sure you powered your board and uploaded the sketch successfully.
- To connect to ESP32 soft AP, open your mobile device WiFi option and search for available WiFi networks. you will see the name of ssid which you have given in the code.
- After that click on the WiFi option and enter the password which you set inside the sketch as shown in the picture.
- Now click on the join button to connect to this WiFi network.
- Once you connected with the WiFi of ESP32, now go to the web browser of your mobile device and search with the IP address you noted before. you will see this web page in the web browser.
- Now connect LEDs with ESP32 board and click on these buttons. you will be able to control LEDs connected with GPIO pins 22 and 23 through this web page.
- You can also connect with this access point through a laptop or your computer. Go to the network setting of your computer, you will also see an “ESP32-Soft-accesspoint” WiFi option there.
So this is how we can easily convert the ESP32 to create a WiFi network of its own and can use to create a web server without using any wireless router.
We have a similar guide with MicroPython for ESP32 and ESP8266:
you may also like to check other ESP32 projects :
For some reason it does not use the SSID/Password and starts an open AP named ESP_0AAB52
Arduino 1.8.9 and Wemos lolin32
Never mind, found out that password length has to be at least 8 to work as described here.
ok thanks for sharing Bert
I luckily choose password length greater than 8
Tested this but it runs incredibly slow.
Most of the time I can’t access the webserver from client.
Any ideas?
Hello,
Can i using this example to send a image like png or jpg? Please, can you help me?
Hallo from Germany,
thank you so much for your tutorial 🙂
I have one question I can’t figure out:
I build a smart control for my camper van. Basically its an Arduino controlling a relay block.
Now I want to update to an esp32 to have the possibility to control the camper via smartphone and have the Data send to the html. ( Battery voltage for example)
Everything works fine BUT 😀 I can’t figure out how to code a hardware switch additionally to the smartphone control using softap.
Turn on lights turn off lights from smartphone is nice to have but I need the possibility to turn it on and off in the van using a hardware switch.
Do you have any idea to find a solution for my problem?
Thank you and stay healthy.
– Johannes
can i use it to browse the web
If you don’t add a server response with a “200 – OK” message, the server will not work most (if not all) of the time. I see this mistake a lot.
Add the lines below marked “Add this line” and the server responds perfectly.
———————————————————————————————
if(client) {
String request = client.readStringUntil(‘\r’);
if(request.indexOf(“LED0=ON”) != -1)digitalWrite(LED0, HIGH);
if(request.indexOf(“LED0=OFF”) != -1)digitalWrite(LED0, LOW);
if(request.indexOf(“LED1=ON”) != -1)digitalWrite(LED1, HIGH);
if(request.indexOf(“LED1=OFF”) != -1)digitalWrite(LED1, LOW);
client.println(“HTTP/1.1 200 OK”); // add this line
client.println(“Content-type:text/html”); // add this line
client.println(“Connection: close”); // add this line
client.println(); // add this line
client.print(html);
client.println(); // add this line
request=””;
}
———————————————————————————————