Kaptívny portál ESP32 na konfiguráciu statických a DHCP nastavení IP: 8 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:58

ESP 32 je zariadenie s integrovaným WiFi a BLE. Je to určitý prínos pre projekty internetu vecí. Stačí zadať konfiguráciu SSID, heslo a IP a integrovať veci do cloudu. Ale správa nastavení IP a poverení používateľa môže byť pre používateľa bolesť hlavy.

Čo keď chce používateľ zmeniť poverenia WiFi?

Čo keď chce používateľ zmeniť nastavenia DHCP/statickej IP?

Blikanie ESP32 vždy nie je spoľahlivé a dokonca ani riešenie týchto problémov. Tu v tomto návode budeme demonštrovať.

• Ako vytvoriť portál na zajatie.
• Hostenie webového formulára z ESP32.
• Čítanie a zápis z SPIFFS ESP32.
• Vytvorenie mäkkého prístupového bodu a pripojenie k stanici

Krok 1: Špecifikácia hardvéru a softvéru

Špecifikácia hardvéru

• ESP32 WiFi/BLE
• Bezdrôtový snímač teploty a vlhkosti

Špecifikácia softvéru

Arduino IDE

Krok 2: Vytvorenie portálu pre vlastnú potrebu

Portál na prihlásenie do vlastníctva je webová stránka, ktorá sa zobrazuje novo pripojeným používateľom skôr, ako im bude poskytnutý širší prístup k sieťovým zdrojom. Tu ponúkame tri webové stránky na výber medzi nastaveniami DHCP a statickej IP. môžeme definovať IP adresu pre ESP dvoma spôsobmi.

• Adresa IP DHCP- je to spôsob, ako dynamicky priradiť adresu IP zariadeniu. Predvolená adresa IP ESP je 192.168.4.1
• Statická adresa IP- priradenie trvalej adresy IP nášmu sieťovému zariadeniu. Aby sme zariadeniu poskytli statickú IP, musíme definovať IP adresu, adresu brány a masku podsiete.

Na prvej webovej stránke sú používateľovi k dispozícii prepínače na výber medzi nastaveniami DHCP a Static IP. Na ďalšej webovej stránke musíme poskytnúť informácie súvisiace s IP, aby sme mohli pokračovať ďalej.

HTML kód

HTML kód pre webové stránky nájdete v tomto úložisku Github.

Na vytváranie webových stránok HTML môžete použiť ľubovoľný IDE alebo textový editor, ako napríklad Sublime alebo notepad ++.

• Najprv vytvorte webovú stránku HTML obsahujúcu dva prepínače na výber medzi nastaveniami DHCP a statickej IP.
• Teraz vytvorte tlačidlo na odoslanie odpovede
• Pomenujte prepínače. Trieda webového servera ESP bude brať tieto názvy ako argumenty a pomocou týchto argumentov dostane odpoveď na prepínače
• Teraz vložte tlačidlo „ODOSLAŤ“na odoslanie odpovede do zariadenia.
• Na ostatných webových stránkach máme textové polia. Do textového poľa zadajte hodnotu názvu a typ vstupu a pridajte tlačidlo „Odoslať“na odoslanie odpovede.
• Vytvorte tlačidlo „RESET“na resetovanie obsahu textového poľa.

// Prepínač DHCP nastavenie prepínača

Nastavenie statickej IP

// Vstupné textové polia

// Tlačidlo Odoslať

vstup [typ = "odoslať"] {farba pozadia: #3498DB; / * Zelená */ hranica: žiadna; farba: biela; čalúnenie: 15 pixelov 48 pixelov; zarovnanie textu: stred; textová dekorácia: žiadna; displej: radový blok; veľkosť písma: 16px; }

//Tlačidlo reštart

vstup [typ = "odoslať"] {farba pozadia: #3498DB; / * Zelená */ hranica: žiadna; farba: biela; čalúnenie: 15 pixelov 48 pixelov; zarovnanie textu: stred; textová dekorácia: žiadna; displej: radový blok; veľkosť písma: 16px; }

Krok 3: Získanie webovej odpovede z webových stránok na ESP32

Poskytovanie webových stránok zo zariadenia ESP 32 je skvelá zábava. Môže to byť čokoľvek, od zobrazovania údajov o teplote na webovej stránke, otáčania LED diód z vlastnej webovej stránky alebo ukladania poverení používateľa WiFi prostredníctvom webovej stránky. Na tento účel ESP 32 používa na serverovanie webových stránok triedu WebServer.

• Najprv vytvorte inštanciu triedy WebServer na porte 80 (port
• Teraz nastavte zariadenie ESP ako softAP. Zadajte SSID a prístupový kľúč a priraďte zariadeniu statickú IP adresu.
• Spustite server.

// ********* SSID a Pass pre AP **************/

const char *ssidAP = "dať SSID"; const char *passAP = "odovzdať kľúč";

// ********* Konfigurácia statickej IP **************/IPAddress ap_local_IP (192, 168, 1, 77); IP adresa ap_gateway (192, 168, 1, 254); IP adresa ap_subnet (255, 255, 255, 0);

// ********* Konfigurácia SoftAP **************/

WiFi.mode (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "Soft-AP setup": "Nepodarilo sa pripojiť");

oneskorenie (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Konfigurácia Soft AP": "Chyba v konfigurácii"); Serial.println (WiFi.softAPIP ());

// spustenie servera

server.begin ();

• Vytvorte a zobrazte adresu URL pomocou rôznych spätných volaní.
• a spracovávať klienta asynchrónne pomocou handleClient.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // zvládnuť odpovede server.handleClient ();

• Prístup na webové stránky. Pripojte sa k prístupovému bodu, ktorý ste práve vytvorili a je uvedený vo vašich sieťach WiFi. Teraz choďte do prehliadača, zadajte IP, ktorú ste nakonfigurovali v poslednom kroku, a vstúpte na webovú stránku.
• Trieda webového servera považuje názov zadaný vstupom ('text', 'tlačidlo', 'rádiobutton'atz.) Za argumenty. Uloží reakcie týchto vstupov ako argumenty a hodnoty môžeme získať alebo ich skontrolovať pomocou metód 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 (); }

Krok 4: Konfigurácia statickej IP

Doteraz sme pochopili, ako sa pripojiť k AP a ako získať hodnoty zo vstupných polí webovej stránky

V tomto kroku nakonfigurujeme statickú IP

• Vyberte nastavenie statickej adresy IP a kliknite na tlačidlo Odoslať. Budete presmerovaní na nasledujúcu stránku.
• Na nasledujúcej stránke zadajte statickú adresu IP, adresu brány a masku podsiete. Táto stránka sa bude zobrazovať na adrese „/static“, ktorá je spracovaná metódou handle static callback.
• Získajte hodnotu textových polí pomocou metódy server.arg ().

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

Reťazcová brána = Reťazec (server.arg ("brána")); Reťazec podsiete = Reťazec (server.arg ("podsieť"));

• Teraz sú tieto hodnoty serializované do formátu JSON.
• Potom napíšeme JSON do SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = brána;

root ["subnet"] = podsieť;

Súbor fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("-zapísaný súbor"); }

• Táto konfigurácia je uložená v SPIFFS. Neskôr sa tieto hodnoty načítajú zo SPIFFS.
• Statické hodnoty IP sú potom analyzované z JSON.

Súbor súboru = 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")) {

Reťazec ipStaticValue = readRoot ["staticIP"];

Reťazec gatewayValue = readRoot ["brána"];

Reťazec subnetValue = readRoot ["podsieť"];

Krok 5: Nastavenia DHCP

V tomto kroku nakonfigurujeme nastavenia DHCP

Vyberte nastavenia DHCP z indexovej stránky a kliknite na „Odoslať“

• Budete presmerovaní na nasledujúcu stránku. Na ďalšej stránke zadajte IP adresu alebo zvoľte zvoľte predvolené a kliknutím na tlačidlo „Odoslať“odošlite odpoveď. Táto stránka sa bude zobrazovať na adrese „/dhcp“, o ktorú sa stará metóda spätného volania handleDHCP. Získajte hodnotu textových polí pomocou metódy server.arg (). Po kliknutí na položku vyberte predvolené začiarkavacie políčko. zariadeniu bude pridelená adresa IP 192.168.4.1.
• Teraz sú tieto hodnoty serializované do formátu JSON.
• Potom napíšeme JSON do SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

Súbor fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("-zapísaný súbor"); }

• Táto konfigurácia je uložená v SPIFFS. Neskôr sa tieto hodnoty načítajú zo SPIFFS.
• Hodnoty IP dhcp sa potom analyzujú z JSON.

Súbor súboru = 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")) {

Reťazec ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Krok 6: Uloženie poverení WiFi

Zatiaľ sme vybrali konfiguráciu IP. Teraz musíme uložiť poverenia používateľa pre wifi. Na vyriešenie tejto situácie. Dodržali sme tento postup.

• Takže teraz máme nastavenie AP nášho zariadenia v konfigurácii DHCP alebo Static IP, ktoré sme vybrali z portálu na prihlásenie do väzby uvedeného v posledných krokoch.
• Povedzme, že sme vybrali konfiguráciu statickej IP.
• Na tejto IP nakonfigurujeme softAP.
• Po prečítaní hodnôt zo SPIFFS a analýze týchto hodnôt z JSON. Na tejto IP adrese nakonfigurujeme softAP.
• Previesť reťazec IP na bajty.

bajtový 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);

// *************** Analyzujte bajty z reťazca ****************** //

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

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

bajty = strtoul (str, NULL, základ);

str = strchr (str, sep);

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

prestávka;

}

str ++;

}}

Teraz nakonfigurujeme softAP na tejto IP

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Konfigurácia softAP": "nepripojené"); Serial.println (WiFi.softAPIP ());

• Teraz spustite webový server a zobrazte webovú stránku na tejto adrese IP. Ak chcete zadať poverenia používateľa WiFi.
• Webová stránka sa skladá z dvoch textových polí na zadanie SSID a hesla.
• handleStaticForm je metóda spätného volania, ktorá slúži webovej stránke.
• server.handleClient () sa stará o požiadavky a reakcie na a z webovej stránky.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

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

server.handleClient (); }

HTML formulár je uložený v SPIFFS. vhodné argumenty skontrolujeme pomocou server.arg (). získate hodnotu SSID a hesla

Súbor súboru = SPIFFS.open ("/WiFi.html", "r");

server.streamFile (súbor, "text/html");

file.close ();

Krok 7: Čítajte a píšte zo SPIFFS

SPIFFS

Sériové periférne rozhranie Flash File System alebo skrátene SPIFFS. Je to ľahký súborový systém pre mikrokontroléry s čipom SPI flash. Integrovaný flash čip ESP32 má dostatok miesta pre vaše webové stránky. Webovú stránku sme tiež uložili do systému Flash System. Na odoslanie údajov do formátu spiff je potrebné vykonať niekoľko krokov

Stiahnite si nástroj na nahrávanie údajov ESP 32 SPIFFS:

• V adresári skicárov Arduino vytvorte adresár nástrojov, ak ešte neexistuje
• Rozbaľte nástroj do adresára nástrojov (cesta bude vyzerať ako /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Reštartujte Arduino IDE
• Otvorte skicu (alebo vytvorte novú a uložte ju)
• Prejdite do adresára náčrtu (zvoľte Náčrt> Zobraziť priečinok náčrtu)
• V systéme súborov vytvorte priečinok s názvom data a všetky súbory, ktoré chcete. Nahrali sme našu stránku HTML s názvom webform.html
• Uistite sa, že ste vybrali dosku, port a zatvorený sériový monitor
• Vyberte položku Nástroje> ESP8266 Nahranie údajov skice. Tým by sa malo začať odosielanie súborov do systému súborov ESP8266 flash. Po dokončení sa v stavovom riadku IDE zobrazí správa Nahraný obrázok SPIFFS.

neplatné handleDHCP () {Súbor súboru = SPIFFS.open ("/page_dhcp.html", "r"); server.streamFile (súbor, "text/html"); file.close ();}

void handleStatic () {

Súbor súboru = SPIFFS.open ("/page_static.html", "r"); server.streamFile (súbor, "text/html"); file.close ();}

Zápis do SPIFFS

Tu zapisujeme uložené nastavenie do formátu SPIFFS, aby používatelia nemuseli tieto kroky vykonávať vždy, keď sa zariadenie resetuje.

• Skonvertujte argumenty prijaté z webovej stránky na objekty JSON
• Napíšte tento JSON do súboru.txt uloženého v SPIFFS.

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

Reťazcová brána = Reťazec (server.arg ("brána")); Reťazec podsiete = Reťazec (server.arg ("podsieť")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = brána; root ["subnet"] = podsieť; Reťazec JSONStatic; znak JSON [120]; root.printTo (sériové); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Súbor fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Chyba pri otváraní SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("-File Written"); } else {Serial.println ("-Chyba pri zápise súboru"); } fileToWrite.close ();

Krok 8: Celkový kód

Nadmerný kód pre HTML a ESP32 nájdete v tomto úložisku Github