ESP32 Portal captiv pentru configurarea setărilor IP statice și DHCP: 8 pași
ESP32 Portal captiv pentru configurarea setărilor IP statice și DHCP: 8 pași

Cuprins:

Anonim
ESP32 Captive Portal pentru a configura setările IP statice și DHCP
ESP32 Captive Portal pentru a configura setările IP statice și DHCP

ESP 32 este un dispozitiv cu WiFi și BLE integrate. Este un fel de avantaj pentru proiectele IoT. Dă doar configurația SSID, parola și IP și integrează lucrurile în cloud. Dar, gestionarea setărilor IP și acreditările utilizatorului poate fi o durere de cap pentru utilizator.

Ce se întâmplă dacă utilizatorul dorește să schimbe acreditările WiFi?

Ce se întâmplă dacă utilizatorul dorește să schimbe setările DHCP / Static IP?

Intermitentul ESP32 de fiecare dată nu este fiabil și nici măcar soluția pentru aceste probleme. Aici, în acest instructiv, vom demonstra.

  • Cum se creează un portal captiv.
  • Găzduirea unui formular web de la ESP32.
  • Citirea și scrierea din SPIFFS ESP32.
  • Crearea unui Soft Access Point și conectarea la o stație

Pasul 1: Specificații hardware și software

Specificații hardware

  • ESP32 WiFi / BLE
  • Senzor de temperatură și umiditate fără fir

Specificații software

IDE Arduino

Pasul 2: Crearea unui portal captiv

Crearea unui portal captiv
Crearea unui portal captiv
Crearea unui portal captiv
Crearea unui portal captiv
Crearea unui portal captiv
Crearea unui portal captiv

Un portal captiv este o pagină web care este afișată utilizatorilor nou conectați înainte de a li se acorda acces mai larg la resursele de rețea. Aici servim trei pagini web pentru a selecta între DHCP și Static IP Settings. putem defini adresa IP către ESP în două moduri.

  • Adresa IP DHCP - este o modalitate de a atribui dinamic adresa IP dispozitivului. Adresa IP implicită a ESP este 192.168.4.1
  • Adresă IP statică - atribuirea unei adrese IP permanente dispozitivului nostru de rețea. pentru a furniza IP-ul static dispozitivului, trebuie să definim adresa IP, adresa gateway-ului și masca de subrețea.

În prima pagină web, utilizatorul are la dispoziție butoanele radio pentru a selecta între setările DHCP și Static IP. În următoarea pagină web, trebuie să furnizăm informațiile legate de IP pentru a continua mai departe.

Cod HTML

Codul HTML pentru paginile web poate fi găsit în acest depozit Github.

Puteți utiliza orice IDE sau editor de text precum Sublime sau notepad ++ pentru a crea pagini web HTML.

  • Mai întâi Creați o pagină web HTML care conține două butoane radio pentru a alege între DHCP și Static IP Settings.
  • Acum creați butonul pentru a trimite răspunsul
  • Dați un anumit nume butoanelor radio. Clasa de server Web ESP va lua aceste nume ca argumente și va obține răspunsul butoanelor radio folosind aceste argumente
  • Acum introduceți un buton „TRIMITE” pentru a trimite răspunsul la dispozitiv.
  • În celelalte pagini web, avem casete de text. Dați valoarea numelui și tipul de intrare casetei de text și adăugați un buton de trimitere pentru a „TRIMITE” trimite răspunsul.
  • Creați un buton „RESET” pentru a reseta conținutul câmpului de text.

// Setarea DHCP a butonului radio

Setare IP statică

// Introducere casete text

//Buton de trimitere

input [type = "submit"] {background-color: # 3498DB; / * Verde * / border: none; culoare albă; umplutură: 15 px 48 px; text-align: centru; decor-text: nici unul; afișaj: bloc în linie; dimensiunea fontului: 16 px; }

//Butonul de resetare

input [type = "submit"] {background-color: # 3498DB; / * Verde * / border: none; culoare albă; umplutură: 15 px 48 px; text-align: centru; decor-text: nici unul; afișaj: bloc în linie; dimensiunea fontului: 16 px; }

Pasul 3: Obținerea răspunsului web de la paginile web la ESP32

Obținerea răspunsului web de la paginile web la ESP32
Obținerea răspunsului web de la paginile web la ESP32

Servirea paginilor web de pe dispozitivul ESP 32 este foarte distractiv. Poate fi orice, de la afișarea datelor de temperatură în pagina web, transformarea led-urilor de la pagina web personalizată sau stocarea acreditărilor utilizatorului WiFi printr-o pagină web. În acest scop, ESP 32 utilizează WebServer Class pentru a pagini web server.

  • Mai întâi, creați o instanță a clasei WebServer la portul 80 (port
  • Acum configurați dispozitivul ESP ca softAP. Dați SSID-ul și cheia de acces și atribuiți un IP static dispozitivului.
  • Începeți serverul.

// ********* SSID și Pass pentru AP ************** /

const char * ssidAP = "da SSID"; const char * passAP = "cheie de trecere";

// ********* Static IP Config ************** / 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": "Conectarea nu a reușit");

întârziere (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Configurarea Soft AP": "Eroare în configurare"); Serial.println (WiFi.softAPIP ());

// începe serverul

server.begin ();

  • Creați și difuzați adresa URL utilizând diferite apeluri de apel.
  • și gestionați clientul în mod asincron folosind handleClient.

server.on ("/", handleRoot);

server.on ("/ dhcp", handleDHCP); server.on ("/ static", handleStatic); // gestionează răspunsurile server.handleClient ();

  • Pentru a accesa paginile web. Conectați-vă la AP-ul pe care tocmai l-ați creat, listat în rețelele dvs. WiFi. Acum, accesați browserul, introduceți adresa IP configurată de dvs. în ultimul pas și accesați pagina web.
  • Clasa de server web ia numele dat intrărilor („text”, „buton”, „buton radio” etc.) ca argumente. Salvează răspunsurile acestor intrări ca argumente și putem obține valorile sau le putem verifica folosind metode 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 ("subrețea")) {staticSet (); } else if (server.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }

Pasul 4: Configurare IP statică

Configurare IP statică
Configurare IP statică

Până acum am înțeles cum să ne conectăm la AP și cum să obținem valorile din câmpurile de intrare ale paginii web

În acest pas, vom configura IP-ul static

  • Selectați setarea IP static și faceți clic pe butonul Trimiteți. Veți fi redirecționat la pagina următoare.
  • În pagina următoare, introduceți adresa IP statică, adresa gateway-ului și subrețul.
  • Obțineți valoarea câmpurilor de text folosind metoda server.arg ().

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

String gateway = String (server.arg ("gateway")); Șir subrețea = Șir (server.arg ("subrețea"));

  • Acum, aceste valori sunt serializate într-un format JSON.
  • Apoi vom scrie JSON către SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = gateway;

root ["subrețea"] = subrețea;

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

if (root.printTo (fileToWrite)) {

Serial.println ("- Fișier scris"); }

  • Această configurație este salvată în SPIFFS. Ulterior, aceste valori sunt citite din SPIFFS.
  • Valorile IP statice sunt apoi analizate din JSON.

Fișier fișier = 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"];

String gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot ["subrețea"];

Pasul 5: Setări DHCP

Setări DHCP
Setări DHCP

În acest pas, vom configura setările DHCP

Selectați Setările DHCP din pagina index și faceți clic pe „Trimiteți”

  • Veți fi redirecționat la pagina următoare. În pagina următoare introduceți adresa IP sau selectați alegeți implicit și faceți clic pe butonul „Trimiteți” pentru a trimite răspunsul. Această pagină va fi difuzată la „/ dhcp”, care este gestionată prin metoda de apelare handleDHCP. Obțineți valoarea câmpurilor de text folosind metoda server.arg (). Când faceți clic în, selectați caseta de selectare implicită. IP-ul 192.168.4.1 va fi dat dispozitivului.
  • Acum, aceste valori sunt serializate într-un format JSON.
  • Apoi vom scrie JSON către SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

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

if (root.printTo (fileToWrite)) {

Serial.println ("- Fișier scris"); }

  • Această configurație este salvată în SPIFFS. Ulterior, aceste valori sunt citite din SPIFFS.
  • Valorile IP dhcp sunt apoi analizate din JSON.

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

Pasul 6: Salvarea acreditării WiFi

Salvarea acreditării WiFi
Salvarea acreditării WiFi

Deocamdată, am selectat configurația IP. Acum trebuie să salvăm acreditările wifi ale utilizatorului. Pentru a rezolva această situație. Am urmat această procedură.

  • Deci, acum avem configurarea AP-ului dispozitivului în configurația DHCP sau Static IP pe care o selectasem din portalul captiv menționat în ultimii pași.
  • Să presupunem că am selectat configurația IP static.
  • Vom configura un softAP la acest IP.
  • După citirea valorilor din SPIFFS și analizarea acestor valori din JSON. Vom configura softAP la acest IP.
  • Convertiți șirul IP în octeți.

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

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

// *************** Analizați octeții din șir *******************

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

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

octeți = strtoul (str, NULL, bază);

str = strchr (str, sep);

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

pauză;

}

str ++;

}}

Acum vom configura softAP la acest IP

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Configurarea softAP": "neconectat"); Serial.println (WiFi.softAPIP ());

  • Acum începeți serverul web și difuzați o pagină web la acest IP. Pentru a introduce acreditările WiFi ale utilizatorului.
  • Pagina web constă din două câmpuri de text pentru a introduce SSID și parolă.
  • handleStaticForm este o metodă de apel invers care servește pagina web.
  • server.handleClient () se ocupă de cerere și răspunsuri la și de la pagina web.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = milis ();

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

server.handleClient (); }

Formularul HTML este salvat în SPIFFS. verificăm argumentele potrivite folosind server.arg (). pentru a obține valoarea SSID și a parolei

Fișier fișier = SPIFFS.open ("/ WiFi.html", "r");

server.streamFile (fișier, "text / html");

file.close ();

Pasul 7: Citiți și scrieți din SPIFFS

SPIFFS

Serial Peripheral Interface Flash File System sau SPIFFS pe scurt. Este un sistem de fișiere ușor pentru microcontrolere cu un cip flash SPI. Cipul flash integrat al ESP32 are mult spațiu pentru paginile dvs. web. De asemenea, am stocat pagina noastră web în sistemul Flash. Există câțiva pași pe care trebuie să-i urmăm pentru a încărca date pe spiffs

Descărcați instrumentul de încărcare a datelor ESP 32 SPIFFS:

  • În directorul de schițe Arduino, creați directorul de instrumente dacă nu există încă
  • Despachetați instrumentul în directorul de instrumente (calea va arăta ca /Arduino/tools/ESP32FS/tool/esp32fs.jar)
  • Reporniți Arduino IDE
  • Deschideți o schiță (sau creați una nouă și salvați-o)
  • Accesați directorul de schițe (alegeți Schiță> Afișați folderul de schiță)
  • Creați acolo un director numit date și orice fișiere pe care le doriți în sistemul de fișiere. Am încărcat pagina noastră HTML cu numele webform.html
  • Asigurați-vă că ați selectat o placă, un port și un monitor serial închis
  • Selectați Instrumente> Încărcare date schiță ESP8266. Aceasta ar trebui să înceapă încărcarea fișierelor în sistemul de fișiere flash ESP8266. Când ați terminat, bara de stare IDE va afișa mesajul SPIFFS Image Uploaded.

void handleDHCP () {Fișier fișier = SPIFFS.open ("/ page_dhcp.html", "r"); server.streamFile (fișier, "text / html"); file.close ();}

void handleStatic () {

Fișier fișier = SPIFFS.open ("/ page_static.html", "r"); server.streamFile (fișier, "text / html"); file.close ();}

Scrierea către SPIFFS

Aici scriem setarea salvată în SPIFFS, astfel încât utilizatorii să nu fie nevoiți să parcurgă acești pași ori de câte ori dispozitivul se resetează.

  • Convertiți argumentele primite de pe pagina web în obiecte JSON
  • Scrieți acest JSON în fișierul.txt salvat în SPIFFS.

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

String gateway = String (server.arg ("gateway")); Șir subrețea = Șir (server.arg ("subrețea")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = gateway; root ["subrețea"] = subrețea; 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 ("Eroare la deschiderea SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("- Fișier scris"); } else {Serial.println ("- Eroare la scrierea fișierului"); } fileToWrite.close ();

Pasul 8: Cod general

Codul Over pentru HTML și ESP32 poate fi găsit în acest depozit Github