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

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:35

ESP 32 je uređaj s integriranim WiFi i BLE. To je svojevrsna blagodat 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.

Što ako korisnik želi promijeniti WiFi vjerodajnice?

Što ako korisnik želi promijeniti postavke DHCP -a/statičkog IP -a?

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

• Kako stvoriti portal za zatvaranje.
• Hosting web obrasca s ESP32.
• Čitanje i pisanje s SPIFFS ESP32.
• Stvaranje meke pristupne točke i povezivanje sa stanicom

Korak 1: Specifikacija hardvera i softvera

Specifikacija hardvera

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

Specifikacije softvera

Arduino IDE

Korak 2: Stvaranje zarobljenog portala

Zarobljeni 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 postavki DHCP i statičkih IP adresa. IP adresu ESP -u 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. za pružanje statičkog IP -a uređaju moramo definirati IP adresu, adresu pristupnika i masku podmreže.

Na prvoj web stranici korisnik ima radio gumbe za odabir između postavki DHCP -a i statičkog IP -a. Na sljedećoj web stranici moramo pružiti informacije povezane s IP -om kako bismo nastavili dalje.

HTML kod

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

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

• Prvo stvorite HTML web stranicu koja sadrži dva radio gumba za odabir između DHCP i postavki statičke IP adrese.
• Sada stvorite gumb za slanje odgovora
• Dajte neki naziv radio gumbima. Klasa ESP web poslužitelja uzet će ta imena kao argumente i pomoću tih argumenata dobit će odgovor radijskih gumba
• Sada umetnite gumb 'POŠALJI' da pošaljete odgovor na uređaj.
• Na ostalim web stranicama imamo okvire za tekst. Unesite vrijednost imena i vrstu unosa u tekstualni okvir i dodajte gumb za slanje da biste 'SUBMIT' poslali odgovor.
• Izradite gumb 'RESET' za poništavanje sadržaja tekstualnog polja.

// DHCP postavka radio tipke

Statička IP postavka

// Unos tekstualnih okvira

// Gumb za slanje

input [type = "submit"] {background-color: #3498DB; / * Zeleno */ obrub: nema; boja: bijela; punjenje: 15px 48px; poravnavanje teksta: središte; ukras teksta: nema; prikaz: inline-block; font-size: 16px; }

// Gumb za poništavanje

input [type = "submit"] {background-color: #3498DB; / * Zeleno */ obrub: nema; boja: bijela; punjenje: 15px 48px; poravnavanje teksta: središte; ukras teksta: nema; prikaz: inline-block; font-size: 16px; }

Korak 3: Dobivanje web odgovora s web stranica na ESP32

Posluživanje web stranica s uređaja ESP 32 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 pohrane korisničkih vjerodajnica za korisnika putem web stranice. U tu svrhu ESP 32 koristi WebServer Class za posluživanje web stranica.

• Prvo, stvorite instancu klase WebServer na portu 80 (HTTP port).
• Sada postavite ESP uređaj kao softAP. Dajte SSID i pristupni ključ te uređaju dodijelite statički IP.
• Pokrenite poslužitelj.

// ********* SSID i propusnica 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); IP Adresa 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": "Pogreška u konfiguraciji"); Serial.println (WiFi.softAPIP ());

// pokretanje poslužitelja

server.begin ();

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

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // obrađujemo poslužitelje odgovora 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 poslužitelja uzima argumente naziv dan ulazu ('text', 'button', 'radiobutton'etc.). Odgovore tih 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 ("podmreža")) {staticSet (); } else if (server.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }

Korak 4: Konfiguracija statičkog IP -a

Do sada smo razumjeli kako se spojiti na pristupnu točku i kako dobiti vrijednosti iz polja za unos web stranice

U ovom koraku konfigurirat ćemo statički IP

• Odaberite postavku statičke IP adrese i kliknite gumb 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 bit će poslužena na "/static" koja se rukuje metodom statičkog povratnog poziva.
• Dobijte vrijednost tekstualnih polja pomoću metode server.arg ().

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

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

• Sada su ove vrijednosti serijski prerađene 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 je konfiguracija spremljena u SPIFFS. Kasnije se te vrijednosti čitaju iz SPIFFS -a.
• Vrijednosti statičkog IP -a zatim se raščlanjuju iz JSON -a.

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

while (file.available ()) {{100} {101}

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

Niz subnetValue = readRoot ["podmreža"];

Korak 5: Postavke DHCP -a

U ovom koraku konfigurirat ćemo DHCP postavke

Odaberite DHCP postavke s indeksne stranice i kliknite "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 se posluživati na "/dhcp" koji se obrađuje metodom handleDHCP povratnog poziva. Dobijte vrijednost tekstualnih polja pomoću metode server.arg (). Kada kliknete, odaberite zadani potvrdni okvir. uređaju će se dati 192.168.4.1 IP.
• 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 je konfiguracija spremljena u SPIFFS. Kasnije se te vrijednosti čitaju iz SPIFFS -a.
• Vrijednosti IP -a dhcp -a zatim se 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")) {

Niz ipdhcpValue = readRoot ["dhcpIP"];

Serijski.println (ipdhcpValue);

dhcpAPConfig ();}

Korak 6: Spremanje vjerodajnica za WiFi

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

• 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 zadnjim koracima.
• Recimo da smo odabrali statičku IP konfiguraciju.
• 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) {

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

bajtovi = strtoul (str, NULL, baza);

str = strchr (str, sep);

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

pauza;

}

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 poslužitelj 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 se o zahtjevu i odgovorima na i s web stranice.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

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

server.handleClient (); }

HTML obrazac sprema se u SPIFFS. provjeravamo odgovarajuće argumente pomoću poslužitelja.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: Čitanje i pisanje iz SPIFFS -a

SPIFFS

Flash datotečni sustav serijskog perifernog sučelja ili skraćeno SPIFFS. To je lagani datotečni sustav 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 sustavu. Nekoliko je koraka koje moramo slijediti kako bismo prenijeli podatke u spiffs

Preuzmite ESP 32 SPIFFS alat za prijenos podataka:

• U svom Arduino imeniku skica stvorite direktorij 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)
• Stvorite direktorij s imenom data i sve datoteke koje želite u datotečnom sustavu. Učitali smo našu HTML stranicu s imenom webform.html
• Provjerite jeste li odabrali ploču, priključak i zatvoreni serijski monitor
• Odaberite Alati> ESP8266 Prijenos podataka skice. To bi trebalo početi učitavati datoteke u ESP8266 flash datotečni sustav. Kad to učini, 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 ove korake kad god se uređaj resetira.

• Pretvorite argumente primljene s web stranice u JSON objekte
• Zapišite ovaj JSON u.txt datoteku spremljenu u SPIFFS.

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

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

Korak 8: Opći kod

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