ESP32 Captive Portal za konfiguriranje statičkih i DHCP IP postavki: 8 koraka

2025 Autor: John Day | [email protected]. Zadnja izmjena: 2025-01-13 06:57

ESP 32 je uređaj s integriranim WiFi i BLE. To je neka vrsta blagodati za IoT projekte. Samo dajte svoje SSID, lozinku i IP konfiguracije i integrirajte stvari u oblak. No, upravljanje IP postavkama i korisničkim vjerodajnicama može biti glavobolja za korisnika.

Šta ako korisnik želi promijeniti WiFi vjerodajnice?

Šta ako korisnik želi promijeniti DHCP/statičku IP postavku?

Svako ažuriranje ESP32 nije pouzdano, pa čak ni rješenje za ove probleme. Ovdje u ovom uputstvu ćemo pokazati.

• Kako stvoriti portal za zatvaranje.
• Hostovanje web obrasca sa ESP32.
• Čitanje i pisanje sa SPIFFS ESP32.
• Kreiranje meke pristupne tačke i povezivanje sa stanicom

Korak 1: Specifikacija hardvera i softvera

Hardverske specifikacije

• ESP32 WiFi/BLE
• Bežični senzor temperature i vlažnosti

Specifikacije softvera

Arduino IDE

Korak 2: Kreiranje zaštitnog portala

Zaštitni portal je web stranica koja se prikazuje tek povezanim korisnicima t prije nego im se odobri širi pristup mrežnim resursima. Ovdje poslužujemo tri web stranice za odabir između DHCP i Statične IP postavke. IP adresu ESP -a možemo definirati na dva načina.

• DHCP IP adresa- to je način dinamičkog dodjeljivanja IP adrese uređaju. Zadana IP adresa ESP -a je 192.168.4.1
• Statička IP adresa- dodjeljivanje stalne IP adrese našem mrežnom uređaju. da bismo uređaju dali statičku IP adresu, moramo definirati IP adresu, adresu pristupnika i masku podmreže.

Na prvoj web stranici, korisniku su na raspolaganju radio gumbi za odabir između postavki DHCP i statičke IP adrese. Na sljedećoj web stranici moramo pružiti informacije vezane za IP da bismo nastavili dalje.

HTML kod

HTML kôd za web stranice možete pronaći u ovom Github spremištu.

Možete koristiti bilo koji IDE ili uređivač teksta kao što je Sublime ili notepad ++ za izradu HTML web stranica.

• Prvo stvorite HTML web stranicu koja sadrži dva radio dugmeta za izbor između DHCP i postavki statičke IP adrese.
• Sada kreirajte dugme za slanje odgovora
• Dajte neki naziv dugmadima za izbor. Klasa ESP web servera će uzeti ta imena kao argumente i dobit će odgovor radio dugmadi koristeći te argumente
• Sada umetnite dugme 'SUBMIT' da pošaljete odgovor na uređaj.
• Na ostalim web stranicama imamo okvire za tekst. Okviru za tekst dajte vrijednost imena i vrstu unosa i dodajte dugme za slanje da biste „SUBMIT“poslali odgovor.
• Kreirajte dugme 'RESET' za resetiranje sadržaja tekstualnog polja.

// DHCP postavka radio dugmeta

Statička IP postavka

// Unos tekstualnih okvira

// Submit Button

input [type = "submit"] {background-color: #3498DB; / * Zeleno */ obrub: nema; boja: bijela; padding: 15px 48px; poravnavanje teksta: centar; dekoracija teksta: nema; prikaz: inline-block; font-veličina: 16px; }

// Dugme za poništavanje

input [type = "submit"] {background-color: #3498DB; / * Zeleno */ obrub: nema; boja: bijela; padding: 15px 48px; poravnavanje teksta: centar; dekoracija teksta: nema; prikaz: inline-block; font-veličina: 16px; }

Korak 3: Prebacivanje web odgovora s web stranica na ESP32

Posluživanje web stranica s ESP 32 uređaja velika je zabava. To može biti bilo što, od prikaza podataka o temperaturi na web stranici, okretanja LED dioda s prilagođene web stranice ili pohranjivanja korisničkih WiFi vjerodajnica putem web stranice. U tu svrhu ESP 32 koristi WebServer klasu za posluživanje web stranica.

• Prvo, kreirajte instancu klase WebServer na portu 80 (HTTP port).
• Sada postavite ESP uređaj kao softAP. Dajte SSID i lozinku i dodijelite statičku IP adresu uređaju.
• Pokrenite server.

// ********* SSID i Pass za AP **************/

const char *ssidAP = "daj SSID"; const char *passAP = "ključ za pristup";

// ********* Statička IP konfiguracija **************/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");

kašnjenje (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Konfiguriranje soft AP": "Greška u konfiguraciji"); Serial.println (WiFi.softAPIP ());

// pokretanje servera

server.begin ();

• Kreirajte i poslužite URL koristeći različite povratne pozive.
• i upravljati klijentom asinhrono pomoću handleClient.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // obrađujemo odgovore server.handleClient ();

• Za pristup web stranicama. Povežite se s pristupnom tačkom koju ste upravo stvorili, a koja je navedena na vašim WiFi mrežama. Sada idite u preglednik, unesite IP koji ste konfigurirali u posljednjem koraku i pristupite web stranici.
• Klasa web servera uzima ime dato ulazu ('text', 'button', 'radiobutton'etc.) Kao argumente. Odgovore ovih ulaza sprema kao argumente, a mi možemo dobiti vrijednosti ili ih provjeriti pomoću metoda args, arg, hasArg.

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

Korak 4: Konfiguracija statičke IP adrese

Do sada smo razumjeli kako se povezati s pristupnom tačkom i kako dobiti vrijednosti iz polja za unos web stranice

U ovom koraku ćemo konfigurirati statičku IP adresu

• Odaberite postavku statičke IP adrese i kliknite na dugme Pošalji. Bit ćete preusmjereni na sljedeću stranicu.
• Na sljedećoj stranici unesite statičku IP adresu, adresu pristupnika i masku podmreže. Ova stranica će biti poslužena na "/static" koja se rukuje metodom statičkog povratnog poziva.
• Dobijte vrijednost tekstualnih polja pomoću metode server.arg ().

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

String gateway = String (server.arg ("gateway")); String subnet = String (server.arg ("podmreža"));

• Sada su ove vrijednosti serijalizirane u JSON format.
• Zatim ćemo zapisati JSON u SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = pristupnik;

root ["podmreža"] = podmreža;

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

if (root.printTo (fileToWrite)) {

Serial.println ("-Datoteka je napisana"); }

• Ova konfiguracija je spremljena u SPIFFS. Kasnije se ove vrijednosti čitaju iz SPIFFS -a.
• Vrijednosti statičke IP adrese tada se analiziraju iz JSON -a.

Datoteka datoteke = 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 ("statickey")) {

String ipStaticValue = readRoot ["staticIP"];

Niz gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot ["subnet"];

Korak 5: Postavke DHCP -a

U ovom koraku ćemo konfigurirati DHCP postavke

Odaberite DHCP postavke s indeksne stranice i kliknite na "Pošalji"

• Bit ćete preusmjereni na sljedeću stranicu. Na sljedećoj stranici unesite IP adresu ili odaberite odaberite zadano i kliknite gumb "Pošalji" da biste poslali odgovor. Ova stranica će biti poslužena na "/dhcp" koji se obrađuje handleDHCP metodom povratnog poziva. Dobijte vrijednost tekstualnih polja pomoću metode server.arg (). Kada kliknete na, odaberite zadano polje za potvrdu. 192.168.4.1 IP će se dati uređaju.
• Sada su ove vrijednosti serijalizirane u JSON format.
• Zatim ćemo zapisati JSON u SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

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

if (root.printTo (fileToWrite)) {

Serial.println ("-Datoteka je napisana"); }

• Ova konfiguracija je spremljena u SPIFFS. Kasnije se ove vrijednosti čitaju iz SPIFFS -a.
• Vrijednosti dhcp IP -a se zatim raščlanjuju iz JSON -a.

Datoteka datoteke = SPIFFS.open ("/ip_set.txt", "r"); while (datoteka.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 ();}

Korak 6: Spremanje WiFi vjerodajnica

Za sada smo odabrali IP konfiguraciju. Sada moramo spremiti wifi vjerodajnice korisnika. Za rješavanje ove situacije. Pratili smo ovu proceduru.

• Dakle, sada imamo postavku AP -a našeg uređaja u DHCP ili statičkoj IP konfiguraciji koju smo odabrali sa zatvorenog portala spomenutog u posljednjim koracima.
• Recimo da smo odabrali konfiguraciju statičke IP adrese.
• Na ovom IP -u konfigurirat ćemo softAP.
• Nakon čitanja vrijednosti iz SPIFFS -a i raščlanjivanja ovih vrijednosti iz JSON -a. SoftAP ćemo konfigurirati na ovom IP -u.
• Pretvorite IP niz u bajtove.

bajt 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];

IP Adresa ap_local (ip0, ip1, ip2, ip3);

// *************** Analiziraj bajtove iz niza ****************** //

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

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

bajtovi = strtoul (str, NULL, baza);

str = strchr (str, sep);

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

break;

}

str ++;

}}

Sada ćemo konfigurirati softAP na ovom IP -u

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Konfiguriranje softAP -a": "nije povezano"); Serial.println (WiFi.softAPIP ());

• Sada pokrenite web server i poslužite web stranicu na ovom IP -u. Za unos WiFi vjerodajnica korisnika.
• Web stranica se sastoji od dva tekstualna polja za unos SSID -a i lozinke.
• handleStaticForm je metoda povratnog poziva koja služi web stranici.
• server.handleClient () brine o zahtjevu i odgovorima na i sa web stranice.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

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

server.handleClient (); }

HTML obrazac je sačuvan u SPIFFS -u. provjeravamo odgovarajuće argumente koristeći server.arg (). da biste dobili vrijednost SSID -a i lozinke

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

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

file.close ();

Korak 7: Čitajte i pišite sa SPIFFS -a

SPIFFS

Flash datotečni sistem serijskog perifernog sučelja ili skraćeno SPIFFS. To je lagani datotečni sistem za mikrokontrolere sa SPI flash čipom. Ugrađeni flash čip ESP32 ima dovoljno prostora za vaše web stranice. Također smo pohranili našu web stranicu u Flash System. Nekoliko je koraka koje moramo slijediti kako bismo učitali podatke

Preuzmite ESP 32 SPIFFS alat za prijenos podataka:

• U svom Arduino imeniku skica napravite kreiranje direktorija alata ako još ne postoji
• Raspakirajte alat u direktorij alata (put će izgledati poput /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Ponovo pokrenite Arduino IDE
• Otvorite skicu (ili stvorite novu i spremite je)
• Idite u direktorij skica (odaberite Sketch> Show Sketch Folder)
• Kreirajte direktorij s imenom data i sve datoteke koje želite u sistemu datoteka. Učitali smo našu HTML stranicu s imenom webform.html
• Provjerite jeste li odabrali ploču, port i zatvoreni serijski monitor
• Odaberite Alati> ESP8266 Prijenos podataka skice. Ovo bi trebalo početi s otpremanjem datoteka u ESP8266 flash datotečni sistem. Kada završi, statusna traka IDE -a prikazat će poruku SPIFFS Image Uploaded.

void handleDHCP () {Datoteka datoteke = SPIFFS.open ("/page_dhcp.html", "r"); server.streamFile (datoteka, "tekst/html"); file.close ();}

void handleStatic () {

Datoteka datoteke = SPIFFS.open ("/page_static.html", "r"); server.streamFile (datoteka, "tekst/html"); file.close ();}

Pisanje na SPIFFS

Ovdje zapisujemo spremljenu postavku u SPIFFS kako korisnici ne bi morali prolaziti kroz ove korake kad god se uređaj resetira.

• Pretvorite argumente primljene s web stranice u JSON objekte
• Zapišite ovaj JSON u.txt datoteku sačuvanu u SPIFFS -u.

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

String gateway = String (server.arg ("gateway")); String subnet = String (server.arg ("podmreža")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = pristupnik; root ["podmreža"] = podmreža; String JSONStatic; char JSON [120]; root.printTo (serijski); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, veličina (JSONStatic) +2); Datoteka fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Greška pri otvaranju SPIFFS -a"); } if (fileToWrite.print (JSON)) {Serial.println ("-Datoteka je napisana"); } else {Serial.println ("-Greška pri pisanju datoteke"); } fileToWrite.close ();

Korak 8: Opšti kod

Over kod za HTML i ESP32 može se pronaći u ovom Github spremištu