ESP32 Captive Portal om statische en DHCP IP-instellingen te configureren: 8 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

ESP 32 is een apparaat met geïntegreerde WiFi en BLE. Het is een soort zegen voor de IoT-projecten. Geef gewoon uw SSID, wachtwoord en IP-configuraties op en integreer de dingen in de cloud. Maar het beheren van de IP-instellingen en gebruikersreferenties kan hoofdpijn opleveren voor de gebruiker.

Wat als de gebruiker de wifi-inloggegevens wil wijzigen?

Wat als de gebruiker de DHCP/Static IP-instellingen wil wijzigen?

Elke keer de ESP32 flashen is niet betrouwbaar en zelfs niet de oplossing voor deze problemen. Hier in dit instructable zullen we gaan demonstreren.

• Hoe maak je een captive portal?
• Een webformulier hosten vanaf de ESP32.
• Lezen en schrijven vanuit SPIFFS ESP32.
• Een Soft Access Point maken en verbinding maken met een station

Stap 1: Hardware- en softwarespecificatie

Hardwarespecificatie:

• ESP32 WiFi/BLE
• Draadloze temperatuur- en vochtigheidssensor

Softwarespecificatie:

Arduino IDE

Stap 2: Een Captive Portal maken

Een captive portal is een webpagina die wordt weergegeven aan nieuw verbonden gebruikers voordat ze bredere toegang krijgen tot netwerkbronnen. Hier serveren we drie webpagina's om te kiezen tussen DHCP- en statische IP-instellingen. we kunnen het IP-adres voor ESP op twee manieren definiëren.

• DHCP IP-adres - het is een manier om het IP-adres dynamisch aan het apparaat toe te wijzen. Het standaard IP-adres van de ESP is 192.168.4.1
• Statisch IP-adres - een permanent IP-adres toewijzen aan ons netwerkapparaat. om het statische IP-adres aan het apparaat te geven, moeten we het IP-adres, het gateway-adres en het subnetmasker definiëren.

Op de eerste webpagina krijgt de gebruiker de keuzerondjes om te kiezen tussen DHCP- en statische IP-instellingen. Op de volgende webpagina moeten we de IP-gerelateerde informatie verstrekken om verder te gaan.

HTML code

De HTML-code voor webpagina's is te vinden in deze Github-repository.

U kunt elke IDE- of teksteditor zoals Sublime of notepad++ gebruiken om HTML-webpagina's te maken.

• Maak eerst een HTML-webpagina met twee keuzerondjes om te kiezen tussen DHCP- en statische IP-instellingen.
• Maak nu de knop om uw reactie in te dienen
• Geef een naam aan keuzerondjes. De ESP-webserverklasse neemt deze namen als argumenten en krijgt het antwoord van de keuzerondjes met behulp van deze argumenten
• Voeg nu een 'VERZENDEN'-knop in om het antwoord naar het apparaat te sturen.
• Op de andere webpagina's hebben we tekstvakken. Geef de naamwaarde en het invoertype in het tekstvak en voeg een verzendknop toe om het antwoord in te dienen met 'VERZENDEN'.
• Maak een ' RESET ' knop aan om de inhoud van het tekstveld te resetten.

//Radio-knop DHCP-instelling

Statische IP-instelling

// Tekstvakken invoeren

//Verzendknop

input[type="submit"]{ achtergrondkleur: #3498DB; /* Groen */ rand: geen; kleur wit; opvulling:15px 48px; tekst uitlijnen: midden; tekstdecoratie: geen; weergave: inline-blok; lettergrootte: 16px; }

//Reset knop

input[type="submit"]{ achtergrondkleur: #3498DB; /* Groen */ rand: geen; kleur wit; opvulling:15px 48px; tekst uitlijnen: midden; tekstdecoratie: geen; weergave: inline-blok; lettergrootte: 16px; }

Stap 3: De webreactie van webpagina's naar ESP32 krijgen

Het serveren van webpagina's vanaf het ESP 32-apparaat is erg leuk. Het kan van alles zijn, van het weergeven van de temperatuurgegevens op de webpagina, het draaien van de led's van de aangepaste webpagina of het opslaan van de WiFi-inloggegevens van de gebruiker via een webpagina. Voor dit doel gebruikt ESP 32 WebServer Class om webpagina's te server.

• Maak eerst een instantie van de WebServer-klasse op poort 80 (HTTP-poort).
• Stel nu het ESP-apparaat in als softAP. Geef de SSID en het wachtwoord op en wijs een statisch IP-adres toe aan het apparaat.
• Begin de server.

//**********SSID en Pass voor AP**************/

const char *ssidAP = "geef SSID"; const char *passAP = "wachtwoord";

//********** Statische IP-configuratie **************/IPAddress ap_local_IP(192, 168, 1, 77); IPA-adres ap_gateway(192, 168, 1, 254); IPA-adres ap_subnet(255, 255, 255, 0);

//**********SoftAP-configuratie***************/

WiFi.modus (WIFI_AP);

Serial.println(WiFi.softAP(ssidAP, passAP) ? "soft-AP setup": "Kan geen verbinding maken");

vertraging (100); Serial.println(WiFi.softAPConfig(ap_local_IP, ap_gateway, ap_subnet)? "Soft AP configureren": "Fout in configuratie"); Seriële.println(WiFi.softAPIP());

// begin de server

server.begin();

• Maak en serveer de URL met verschillende callbacks.
• en behandel de client asynchroon met handleClient.

server.on("/", handleRoot);

server.on("/dhcp", handleDHCP); server.on("/static", handleStatic); // behandel de reacties server.handleClient();

• Om toegang te krijgen tot de webpagina's. Maak verbinding met het AP dat u zojuist hebt gemaakt, vermeld in uw WiFi-netwerken. Ga nu naar de browser, voer het IP-adres in dat u in de laatste stap hebt geconfigureerd en ga naar de webpagina.
• Webserverklasse neemt de naam gegeven aan inputs ('text', 'button', 'radiobutton'etc.) als argumenten. Het slaat de antwoorden van deze invoer op als argumenten en we kunnen de waarden ophalen of controleren met behulp van args, arg, hasArg-methoden.

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(); }

Stap 4: Statische IP-configuratie

Tot nu toe hebben we begrepen hoe we verbinding kunnen maken met AP en hoe we de waarden uit de invoervelden van de webpagina kunnen halen

In deze stap zullen we het statische IP. configureren

• Selecteer de Statische IP-instelling en klik op de knop Verzenden. U wordt doorgestuurd naar de volgende pagina.
• Voer op de volgende pagina het statische IP-adres, het gateway-adres en het subnetmasker in. Deze pagina wordt weergegeven op "/static", wat wordt afgehandeld door de statische callback-methode handle.
• Haal de waarde van tekstvelden op met de server.arg()-methode.

String ipv4static = String(server.arg("ipv4static"));

String gateway = String(server.arg("gateway")); String subnet = String(server.arg("subnet"));

• Nu worden deze waarden geserialiseerd in een JSON-indeling.
• Vervolgens zullen we de JSON naar SPIFFS schrijven.

root["statickey"]="staticSet";

root["staticIP"] = ipv4static;

root["gateway"] = gateway;

root["subnet"] = subnet;

Bestand fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

if(root.printTo(fileToWrite)){

Serial.println ("--Bestand geschreven"); }

• Deze configuratie wordt opgeslagen in SPIFFS. Later worden deze waarden uit SPIFFS gelezen.
• De statische IP-waarden worden vervolgens geparseerd vanuit JSON.

Bestandsbestand = SPIFFS.open("/ip_set.txt", "r");

while(bestand.beschikbaar()){

debugLogData += char(file.read()); }

if(debugLogData.length()>5){

JsonObject& readRoot =jsonBuffer.parseObject(debugLogData);

if(readRoot.containsKey("statickey")){

String ipStaticValue= readRoot["staticIP"];

String gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot["subnet"];

Stap 5: DHCP-instellingen

In deze stap zullen we de DHCP-instellingen configureren

Selecteer de DHCP-instellingen op de indexpagina en klik op "Verzenden"

• U wordt doorgestuurd naar de volgende pagina. Voer op de volgende pagina het IP-adres in of selecteer standaard kiezen en klik op de knop "Verzenden" om het antwoord te verzenden. Deze pagina zal worden aangeboden op "/dhcp", die wordt afgehandeld door de handleDHCP callback-methode. Haal de waarde van tekstvelden op met de server.arg()-methode. Wanneer aangeklikt, kies het standaard selectievakje. het 192.168.4.1 IP wordt aan het apparaat gegeven.
• Nu worden deze waarden geserialiseerd in een JSON-indeling.
• Vervolgens zullen we de JSON naar SPIFFS schrijven.

JsonObject& root =jsonBuffer.createObject();

root["dhcpManual"]="dhcpManual";

root["dhcpIP"] = "192.168.4.1";

Bestand fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

if(root.printTo(fileToWrite)){

Serial.println ("--Bestand geschreven"); }

• Deze configuratie wordt opgeslagen in SPIFFS. Later worden deze waarden uit SPIFFS gelezen.
• De dhcp IP-waarden worden vervolgens geparseerd vanuit JSON.

Bestandsbestand = SPIFFS.open("/ip_set.txt", "r");while(file.available()){ debugLogData += char(file.read()); } if(debugLogData.length()>5){ JsonObject& readRoot =jsonBuffer.parseObject(debugLogData);

if(readRoot.containsKey("dhcpDefault")){

String ipdhcpValue= readRoot["dhcpIP"];

Serial.println(ipdhcpValue);

dhcpAPConfig();}

Stap 6: WiFi-referenties opslaan

Voor nu hebben we de IP-configuratie geselecteerd. Nu moeten we de wifi-inloggegevens van de gebruiker opslaan. Om deze situatie op te lossen. Wij hebben deze procedure gevolgd.

• Dus nu hebben we onze apparaat-AP-configuratie in DHCP- of statische IP-configuratie die we hadden geselecteerd uit de captive portal die in de laatste stappen werd genoemd.
• Laten we zeggen dat we Statische IP-configuratie hebben geselecteerd.
• We zullen een softAP configureren op dit IP.
• Na het lezen van de waarden uit SPIFFS en het ontleden van deze waarden uit JSON. We zullen de softAP op dit IP configureren.
• Converteer de IP-string naar bytes.

byte-ip[4];

parseBytes(ipv4Arr, '.', ip, 4, 10);

ip0 = (uint8_t)ip[0];

ip1 = (uint8_t)ip[1];

ip2 = (uint8_t)ip[2];

ip3 = (uint8_t)ip[3];

IPA-adres ap_local(ip0, ip1, ip2, ip3);

//*************** Ontleed bytes uit tekenreeks *********************//

void parseBytes(const char* str, char sep, byte* bytes, int maxBytes, int base) {

voor (int i = 0; i < maxBytes; i++) {

bytes = strtoul(str, NULL, basis);

str = strchr(str, sep);

if (str == NULL || *str == '\0') {

pauze;

}

str++;

}}

Nu gaan we de softAP configureren op dit IP

Serial.println(WiFi.softAPConfig(ap_localWeb_IP, ap_gate, ap_net)? "SoftAP configureren": "niet verbonden"); Seriële.println(WiFi.softAPIP());

• Start nu de webserver en serveer een webpagina op dit IP. Om de WiFi-referenties van de gebruiker in te voeren.
• De webpagina bestaat uit twee tekstvelden om SSID en wachtwoord in te voeren.
• handleStaticForm is een callback-methode die de webpagina bedient.
• server.handleClient() zorgt voor het verzoek en de antwoorden van en naar de webpagina.

server.begin();

server.on("/", handleStaticForm);

server.onNotFound(handleNotFound);

STTimer = millis();

while(millis()-STimer<= SInterval) {

server.handleClient(); }

Het HTML-formulier wordt opgeslagen in SPIFFS. we controleren op geschikte argumenten met server.arg(). om de waarde van SSID en wachtwoord te krijgen

Bestandsbestand = SPIFFS.open("/WiFi.html", "r");

server.streamFile(bestand, "tekst/html");

bestand.close();

Stap 7: Lezen en schrijven vanuit SPIFFS

SPIFFS

Serial Peripheral Interface Flash File System, of kortweg SPIFFS. Het is een lichtgewicht bestandssysteem voor microcontrollers met een SPI-flashchip. De ingebouwde flash-chip van de ESP32 biedt voldoende ruimte voor uw webpagina's. We hebben onze webpagina ook opgeslagen in Flash System. Er zijn een paar stappen die we moeten volgen om gegevens naar spiffs te uploaden

Download de ESP 32 SPIFFS-tool voor het uploaden van gegevens:

• Maak in je Arduino-schetsboekmap een map met tools als deze nog niet bestaat
• Pak de tool uit in de map tools (het pad ziet eruit als /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Herstart Arduino IDE
• Open een schets (of maak een nieuwe en sla deze op)
• Ga naar de schetsmap (kies Sketch > Show Sketch Folder)
• Maak een map met de naam data en alle bestanden die u wilt in het bestandssysteem daar. We hebben onze HTML-pagina geüpload met de naam webform.html
• Zorg ervoor dat je een bord, poort en gesloten seriële monitor hebt geselecteerd
• Selecteer Extra > ESP8266 Schetsgegevens uploaden. Dit zou moeten beginnen met het uploaden van de bestanden naar het ESP8266 flash-bestandssysteem. Als u klaar bent, wordt in de IDE-statusbalk het bericht SPIFFS Image Uploaded weergegeven.

void handleDHCP(){ Bestandsbestand = SPIFFS.open("/page_dhcp.html", "r"); server.streamFile(bestand, "tekst/html"); bestand.sluiten();}

ongeldig handvatStatisch(){

Bestandsbestand = SPIFFS.open("/page_static.html", "r"); server.streamFile(bestand, "tekst/html"); bestand.sluiten();}

Schrijven naar SPIFFS

Hier schrijven we de opgeslagen instelling naar de SPIFFS, zodat gebruikers deze stappen niet hoeven te doorlopen wanneer het apparaat opnieuw wordt ingesteld.

• Converteer de argumenten ontvangen van de webpagina naar JSON-objecten
• Schrijf deze JSON naar het.txt-bestand dat is opgeslagen in SPIFFS.

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 JSONStatisch; char JSON[120]; root.printTo(Seriële); root.prettyPrintTo(JSONStatic); JSONStatic.toCharArray(JSON, sizeof(JSONStatic)+2); Bestand fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE); if(!fileToWrite){ Serial.println("Fout bij openen SPIFFS"); } if(fileToWrite.print(JSON)){ Serial.println("--File Written"); }else{ Serial.println("--Fout bij schrijven van bestand"); } bestandToWrite.close();

Stap 8: Algemene code

De Over-code voor HTML en ESP32 is te vinden in deze Github-repository