ESP32 Captive Portal to Configure Static and DHCP IP Setting

ESP32 is a device with integrated WiFi and BLE. It is kind of a boon for the IoT projects. Just give your SSID, password and IP configurations and integrate the things into the cloud. But, managing the IP settings and user credentials can be a headache to the user.

What if the User wants to change the WiFi credentials?

What if the user wants to switch the DHCP/static IP settings?

Flashing the ESP32 everytime is not reliable and not even the solution for these problems. Here in this tutorial we will be going to demonstrate.

  • How to create a captive portal.

Creating a Captive Portal

A captive portal is a web page that is displayed to newly connected users t before they are granted broader access to network resources. Here we are serving three web pages to select between DHCP and Static IP Settings. we can define the IP address to ESP in two ways.

  • DHCP IP address- it is a way to dynamically assign the IP address to the device. The ESP’s default IP address is 192.168.4.1

In the first webpage, the User is provided with the radio buttons to select between DHCP and Static IP settings. In the next webpage, we have to provide the IP related information to proceed further.

The HTML code for web pages can be found in this Github repository.

You can use any IDE or text editor like Sublime or notepad++ to make HTML web pages.

  • First Create an HTML webpage containing two radio buttons to choose between DHCP and Static IP Settings.

Getting the Web Response From Web Pages to ESP32

Serving web pages from ESP 32 device is great fun. It can be anything from showing the temperature data in the webpage,turning the led’s from the custom webpage or storing the User WiFi credentials through a webpage. For this purpose, ESP 32 uses WebServer Class to server web pages.

  • First, Create an instance of WebServer class at port 80(HTTP port).
//*********SSID and Pass for AP**************/ 
const char *ssidAP = "give SSID";
const char *passAP = "pass key";
//*********Static IPConfig**************/
IPAddress ap_local_IP(192,168,1,77);
IPAddress ap_gateway(192,168,1,254);
IPAddress ap_subnet(255,255,255,0);
//*********SoftAP Config**************/
WiFi.mode(WIFI_AP);
Serial.println(WiFi.softAP(ssidAP,passAP) ? "soft-AP setup": "Failed to connect");
delay(100);
Serial.println(WiFi.softAPConfig(ap_local_IP, ap_gateway, ap_subnet)? "Configuring Soft AP" : "Error in Configuration"); Serial.println(WiFi.softAPIP());
//begin the server
server.begin();
  • Create and serve the URL using different callbacks.
server.on("/", handleRoot); server.on("/dhcp", handleDHCP); server.on("/static", handleStatic); // handle the responses server.handleClient();
  • To access the web pages. Connect to the AP that you have just created, listed within your WiFi networks. Now, go to the browser, Enter the IP configured by you in the last step and access the webpage.
if(server.args()>0){ for(int i=0; i<=server.args();i++){ Serial.println(String(server.argName(i))+'\t' + String(server.arg(i))); }if(server.hasArg("ipv4static") && server.hasArg("gateway") && server.hasArg("subnet")){ staticSet(); }else if(server.arg("ipv4")!= ""){ dhcpSetManual(); }else{ dhcpSetDefault(); }

Static IP Configuration

So far we have understood how to connect to AP and how to get the values from the input fields of webpage.

In this step, we will configure the Static IP

  • Select the Static IP Setting and click on Submit button. You will be redirected to the next page.
String ipv4static = String(server.arg("ipv4static"));String gateway = String(server.arg("gateway"));String subnet = String(server.arg("subnet"));
  • Now, these values are in Strings and we need to convert these values in IP Address type.
ipv4static.toCharArray(ipv4Arr,sizeof(ipv4static)+2); gateway.toCharArray(gatewayArr,sizeof(gateway)+2); subnet.toCharArray(subnetArr,sizeof(subnet)+2);
  • And parse the String values into bytes.
byte ip[4];
parseBytes(ipv4Arr,'.', ip, 4, 10);
void parseBytes(const char* str, char sep, byte* bytes, int maxBytes, int base) {
for (int i = 0; i < maxBytes; i++) {
bytes[i] = strtoul(str, NULL, base);
// Convert byte str = strchr(str, sep);
// Find next separator
if (str == NULL || *str == '\0') {
break; // No more separators, exit }
str++; // Point to next character after separator
}}
ip0 = (uint8_t)ip[0];
ip1 = (uint8_t)ip[1];
ip2 = (uint8_t)ip[2];
ip3 = (uint8_t)ip[3];
IPAddress ap_local(ip0,ip1,ip2,ip3);
ap_localWeb_IP = ap_local;
WiFi.disconnect(true);
WiFi.mode(WIFI_AP);
Serial.println(WiFi.softAP(ssidAPWeb) ? "Setting up SoftAP" : "error setting up");
Serial.println(WiFi.softAPConfig(ap_localWeb_IP, ap_gate, ap_net) ? "Configuring softAP" : "not connected");

DHCP Settings

In this step, we will configure the DHCP Settings

WiFi.disconnect(false);
WiFi.enableAP(false);
InitAP();
isConnected = false;
void InitAP(){WiFi.enableAP(true);
WiFi.mode(WIFI_AP);
Serial.println(WiFi.softAP(ssidDhcpWeb) ? "SoftAP setup" : "Error Setting UP AP" );
delay(100);
Serial.println(WiFi.softAPConfig(ap_dhcp, ap_gateway, ap_subnet)? "Configuring Soft AP" : "Error in Configuration"); Serial.println(WiFi.softAPIP()); }

Read and Write From SPIFFS

Serial Peripheral Interface Flash File System, or SPIFFS for short. It’s a light-weight file system for microcontrollers with an SPI flash chip. The onboard flash chip of the ESP32 has plenty of space for your web pages. We have also stored our webpage in Flash System. There are a few steps we need to follow to upload data to spiffs

  • Download the ESP 32 SPIFFS data upload tool: https://github.com/me-no-dev/arduino-esp32fs-plugi...
void handleDHCP(){File file = SPIFFS.open("/page_dhcp.html", "r"); server.streamFile(file,"text/html"); 
file.close();}
void handleStatic(){ File file = SPIFFS.open("/page_static.html", "r");
server.streamFile(file,"text/html");
file.close(); }

Writing to SPIFFS

Here we are writing the saved setting to the SPIFFS so that users should not have to go through these steps whenever device resets.

  • Convert the arguments received from the webpage to JSON objects
String ipv4static = String(server.arg("ipv4static"));
String gateway = String(server.arg("gateway"));
String subnet = String(server.arg("subnet")); root["statickey"]="staticSet";
root["staticIP"] = ipv4static;
root["gateway"] = gateway;
root["subnet"] = subnet;
String JSONStatic;
char JSON[120];
root.printTo(Serial);
root.prettyPrintTo(JSONStatic); JSONStatic.toCharArray(JSON,sizeof(JSONStatic)+2);
File fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE); if(!fileToWrite){
Serial.println("Error opening SPIFFS"); } if(fileToWrite.print(JSON)){
Serial.println("--File Written");
}else{ Serial.println("--Error Writing File"); } fileToWrite.close(); }

Overall Code

The Over code for HTML and ESP32 can be found in this GitHub repository.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
vaibhav sharma

vaibhav sharma

5 Followers

Full Stack IoT developer working on effective Wireless Sensor Network