ESP32 Captive Portal za konfiguracijo statičnih in DHCP nastavitev IP: 8 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:05

ESP 32 je naprava z vgrajenim WiFi in BLE. To je nekakšen dar za projekte IoT. Samo podajte svoje nastavitve SSID, geslo in IP ter stvari vključite v oblak. Toda upravljanje nastavitev IP in uporabniških poverilnic je lahko za uporabnika glavobol.

Kaj pa, če želi uporabnik spremeniti poverilnice WiFi?

Kaj pa, če želi uporabnik preklopiti nastavitve DHCP/Statični IP?

Vsakič utripanje ESP32 ni zanesljivo in niti ni rešitev za te težave. Tukaj v tem navodilu bomo pokazali.

• Kako ustvariti portal za lastnike.
• Gostovanje spletnega obrazca iz ESP32.
• Branje in pisanje iz SPIFFS ESP32.
• Ustvarjanje mehke dostopne točke in povezovanje s postajo

1. korak: Specifikacije strojne in programske opreme

Specifikacije strojne opreme

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

Specifikacije programske opreme

Arduino IDE

2. korak: Ustvarite portal za ujetništvo

Zaprti portal je spletna stran, ki se prikaže novo povezanim uporabnikom t, preden jim odobri širši dostop do omrežnih virov. Tukaj prikazujemo tri spletne strani za izbiro med nastavitvami DHCP in statičnim IP. IP naslov ESP lahko definiramo na dva načina.

• Naslov IP DHCP- to je način za dinamično dodelitev naslova IP napravi. Privzeti naslov IP ESP je 192.168.4.1
• Statični naslov IP- dodelitev stalnega naslova IP naši omrežni napravi. Za zagotovitev statičnega IP -ja napravi moramo določiti naslov IP, naslov prehoda in masko podomrežja.

Na prvi spletni strani je uporabniku na voljo izbirni gumb za izbiro med nastavitvami DHCP in statičnega IP. Na naslednji spletni strani moramo za nadaljnjo uporabo posredovati informacije, povezane z IP.

Koda HTML

Kodo HTML za spletne strani najdete v tem skladišču Github.

Za izdelavo spletnih strani HTML lahko uporabite kateri koli IDE ali urejevalnik besedil, na primer Sublime ali notepad ++.

• Najprej ustvarite spletno stran HTML, ki vsebuje dva izbirna gumba za izbiro med nastavitvami DHCP in statičnim IP.
• Zdaj ustvarite gumb za pošiljanje svojega odgovora
• Izbirnim gumbom dajte ime. Razred spletnega strežnika ESP bo ta imena vzel kot argumente in s temi argumenti dobil odziv izbirnih gumbov
• Zdaj vstavite gumb »POŠLJI«, da pošljete odgovor na napravo.
• Na drugih spletnih straneh imamo polja z besedilom. V besedilno polje vnesite vrednost imena in vrsto vnosa ter dodajte gumb za predložitev, da »POŠLJI« pošljite odgovor.
• Ustvarite gumb 'RESET' za ponastavitev vsebine besedilnega polja.

// Nastavitev DHCP radijskega gumba

Nastavitev statične IP

// Vnos besedilnih oken

// Pošlji gumb

input [type = "submit"] {ozadje-barve: #3498DB; / * Zelena */ obroba: brez; barva: bela; oblazinjenje: 15px 48px; poravnava besedila: sredina; okras besedila: brez; zaslon: vrstni blok; velikost pisave: 16px; }

// Gumb za ponastavitev

input [type = "submit"] {ozadje-barve: #3498DB; / * Zelena */ obroba: brez; barva: bela; oblazinjenje: 15px 48px; poravnava besedila: sredina; okras besedila: brez; zaslon: vrstni blok; velikost pisave: 16px; }

3. korak: Prenos spletnega odziva s spletnih strani na ESP32

Posredovanje spletnih strani iz naprave ESP 32 je zelo zabavno. To je lahko karkoli, od prikaza podatkov o temperaturi na spletni strani, obračanja LED -jev s spletne strani po meri ali shranjevanja poverilnic za uporabnika WiFi prek spletne strani. V ta namen ESP 32 uporablja strežnik WebServer za strežnike spletnih strani.

• Najprej ustvarite primerek razreda WebServer na vratih 80 (vrata
• Zdaj nastavite napravo ESP kot softAP. Dajte SSID in geslo ter napravi dodelite statični IP.
• Zaženite strežnik.

// ********* SSID in Pass za AP **************/

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

// ********* Statična IP -konfiguracija **************/IP -naslov ap_local_IP (192, 168, 1, 77); IPAddress ap_gateway (192, 168, 1, 254); IP -naslov ap_subnet (255, 255, 255, 0);

// ********* Konfiguracija SoftAP **************/

WiFi.mode (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "" Soft-AP setup ":" Failed to connect ");

zamuda (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Konfiguriranje mehke dostopne točke": "Napaka pri konfiguraciji"); Serial.println (WiFi.softAPIP ());

// zaženemo strežnik

server.begin ();

• Ustvarite in posredujte URL z različnimi povratnimi klici.
• in odjemalec obravnavati asinhrono z uporabo handleClient.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // obravnavamo odgovore server.handleClient ();

• Za dostop do spletnih strani. Povežite se z dostopno točko, ki je navedena v vaših omrežjih WiFi. Zdaj pojdite v brskalnik, vnesite IP, ki ste ga nastavili v zadnjem koraku, in odprite spletno stran.
• Razred spletnega strežnika vzame za argumente ime vhodov ('besedilo', 'gumb', 'radiobutton' itd.). Odgovore teh vhodov shrani kot argumente, vrednosti pa lahko dobimo ali jih preverimo z metodami 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 ("prehod") && server.hasArg ("podomrežje")) {staticSet (); } else if (server.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }

4. korak: Konfiguracija statičnega IP -ja

Doslej smo razumeli, kako se povezati z AP in kako pridobiti vrednosti iz vnosnih polj spletne strani

V tem koraku bomo konfigurirali statični IP

• Izberite Nastavitev statičnega IP -ja in kliknite gumb Pošlji. Preusmerjeni boste na naslednjo stran.
• Na naslednji strani vnesite statični naslov IP, naslov prehoda in masko podomrežja. Ta stran bo prikazana na "/static", ki jo obravnava metoda statičnega povratnega klica.
• Pridobite vrednost besedilnih polj z metodo server.arg ().

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

Niz prehod = String (server.arg ("prehod")); Niz podomrežja = Niz (server.arg ("podomrežje"));

• Zdaj so te vrednosti serijalizirane v format JSON.
• Nato bomo JSON zapisali v SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = prehod;

root ["podomrežje"] = podomrežje;

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

if (root.printTo (fileToWrite)) {

Serial.println ("-Datoteka zapisana"); }

• Ta konfiguracija je shranjena v SPIFFS. Kasneje se te vrednosti preberejo iz SPIFFS.
• Vrednosti statičnega IP se nato razčlenijo iz JSON.

Datotečna datoteka = SPIFFS.open ("/ip_set.txt", "r");

medtem ko (file.available ()) {

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

if (debugLogData.length ()> 5) {

JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

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

Niz ipStaticValue = readRoot ["staticIP"];

Niz gatewayValue = readRoot ["prehod"];

Niz subnetValue = readRoot ["podomrežje"];

5. korak: Nastavitve DHCP

V tem koraku bomo konfigurirali nastavitve DHCP

Na strani indeksa izberite nastavitve DHCP in kliknite »Pošlji«

• Preusmerjeni boste na naslednjo stran. Na naslednji strani vnesite naslov IP ali izberite izberite privzeto in kliknite gumb "Pošlji", da pošljete odgovor. Ta stran bo prikazana na "/dhcp", ki jo obravnava metoda povratnega klica handleDHCP. Pridobite vrednost besedilnih polj z metodo server.arg (). Ko kliknete, izberite privzeto potrditveno polje. 192.168.4.1 IP bo dal napravi.
• Zdaj so te vrednosti serijalizirane v format JSON.
• Nato bomo JSON zapisali v 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 zapisana"); }

• Ta konfiguracija je shranjena v SPIFFS. Kasneje se te vrednosti preberejo iz SPIFFS.
• Vrednosti IP dhcp se nato razčlenijo iz JSON.

Datotečna datoteka = 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")) {

Niz ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

6. korak: Shranite poverilnice WiFi

Za zdaj smo izbrali konfiguracijo IP. Zdaj moramo shraniti poverilnice wifi uporabnika. Za rešitev te situacije. Temu postopku smo sledili.

• Tako imamo zdaj nastavitev AP naše naprave v konfiguraciji DHCP ali Static IP, ki smo jo izbrali s portala za lastno uporabo, omenjenega v zadnjih korakih.
• Recimo, da smo izbrali konfiguracijo statičnega IP.
• Na tem IP -ju bomo konfigurirali softAP.
• Po branju vrednosti iz SPIFFS in razčlenjevanju teh vrednosti iz JSON. Na tem IP -ju bomo konfigurirali softAP.
• Pretvorite niz IP v bajte.

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 -naslov ap_local (ip0, ip1, ip2, ip3);

// *************** Razčleni bajte iz niza ****************** //

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

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

bajti = strtoul (str, NULL, osnova);

str = strchr (str, sep);

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

zlom;

}

str ++;

}}

Zdaj bomo na tem IP -ju konfigurirali softAP

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

• Zdaj zaženite spletni strežnik in strežite spletno stran na tem IP. Za vnos poverilnic WiFi uporabnika.
• Spletna stran je sestavljena iz dveh besedilnih polj za vnos SSID in gesla.
• handleStaticForm je metoda povratnega klica, ki služi spletni strani.
• server.handleClient () skrbi za zahtevo in odgovore na spletno stran in z nje.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

medtem ko (millis ()-STimer <= SInterval) {

server.handleClient (); }

Obrazec HTML je shranjen v SPIFFS. ustrezne argumente preverimo s pomočjo server.arg (). da dobite vrednost SSID in gesla

Datotečna datoteka = SPIFFS.open ("/WiFi.html", "r");

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

file.close ();

Korak 7: Branje in pisanje iz SPIFFS

SPIFFS

Flash datotečni sistem serijskega perifernega vmesnika ali na kratko SPIFFS. To je lahek datotečni sistem za mikrokrmilnike z bliskovnim čipom SPI. Vgrajen bliskovni čip ESP32 ima dovolj prostora za vaše spletne strani. Spletno stran smo shranili tudi v sistem Flash. Nekaj korakov moramo upoštevati, da naložimo podatke v spiffs

Prenesite orodje za nalaganje podatkov ESP 32 SPIFFS:

• V imeniku skicirkov Arduino ustvarite imenik orodij, če še ne obstaja
• Razpakirajte orodje v imenik orodij (pot bo videti kot /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Znova zaženite Arduino IDE
• Odprite skico (ali ustvarite novo in jo shranite)
• Pojdite v imenik skic (izberite Sketch> Show Sketch Folder)
• Ustvarite imenik z imenom podatki in vse datoteke, ki jih želite v datotečnem sistemu. Naložili smo stran HTML z imenom webform.html
• Prepričajte se, da ste izbrali ploščo, vrata in zaprli serijski monitor
• Izberite Orodja> ESP8266 Nalaganje podatkov skice. To bi moralo začeti nalaganje datotek v datotečni sistem ESP8266 flash. Ko bo končano, bo v vrstici stanja IDE prikazano sporočilo SPIFFS Image Uploaded.

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

void handleStatic () {

Datotečna datoteka = SPIFFS.open ("/page_static.html", "r"); server.streamFile (datoteka, "besedilo/html"); file.close ();}

Pisanje v SPIFFS

Tukaj zapisujemo shranjeno nastavitev v SPIFFS, tako da uporabnikom ne bo treba opraviti teh korakov, ko se naprava ponastavi.

• Argumente, prejete s spletne strani, pretvorite v objekte JSON
• Zapišite ta JSON v datoteko.txt, shranjeno v SPIFFS.

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

Niz prehod = String (server.arg ("prehod")); Niz podomrežja = Niz (server.arg ("podomrežje")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = prehod; root ["podomrežje"] = podomrežje; 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 ("Napaka pri odpiranju SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("-Datoteka zapisana"); } else {Serial.println ("-Napaka pri zapisovanju datoteke"); } fileToWrite.close ();

8. korak: Splošna koda

Kodo Over za HTML in ESP32 najdete v tem skladišču Github