ESP32 Captive Portal ՝ ստատիկ և DHCP IP կարգավորումները կազմաձևելու համար. 8 քայլ

2025 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2025-01-23 14:48

ESP 32- ը ինտեգրված WiFi և BLE սարքով սարք է: Դա մի տեսակ բարիք է IoT նախագծերի համար: Պարզապես տվեք ձեր SSID- ի, գաղտնաբառի և IP- ի կազմաձևերը և իրերը միացրեք ամպի մեջ: Բայց IP- ի կարգավորումները և օգտագործողի հավատարմագրերի կառավարումը կարող է գլխացավանք լինել օգտվողի համար:

Ի՞նչ անել, եթե Օգտատերը ցանկանում է փոխել WiFi- ի հավատարմագրերը:

Ի՞նչ անել, եթե օգտագործողը ցանկանում է փոխել DHCP/Ստատիկ IP կարգավորումները:

ESP32- ը ամեն անգամ թարթելը հուսալի չէ և նույնիսկ այդ խնդիրների լուծումը չէ: Ահա այս ուսանելի ուսուցման մեջ մենք պատրաստվում ենք ցույց տալ:

• Ինչպես ստեղծել գերված պորտալ:
• ESP32- ից վեբ ձևի ընդունում:
• SPIFFS ESP32- ից կարդալ և գրել:
• Փափուկ մուտքի կետի ստեղծում և կայանին միացում

Քայլ 1: Սարքավորման և ծրագրակազմի բնութագրում

Սարքաշարի բնութագրում

• ESP32 WiFi/BLE
• Անլար ջերմաստիճանի և խոնավության ցուցիչ

Softwareրագրաշարի բնութագրում

Arduino IDE

Քայլ 2. Ստեղծեք գերված պորտալ

Գերի ընկած պորտալը վեբ էջ է, որը ցուցադրվում է նոր կապակցված օգտվողներին t նախքան ցանցային ռեսուրսներին ավելի լայն հասանելիություն տրամադրելը: Այստեղ մենք ծառայում ենք երեք վեբ էջ ՝ DHCP- ի և Ստատիկ IP կարգավորումների միջև ընտրություն կատարելու համար: մենք կարող ենք ESP- ի IP հասցեն սահմանել երկու եղանակով.

• DHCP IP հասցե- դա սարքին IP հասցեն դինամիկ կերպով նշանակելու միջոց է: ESP- ի կանխադրված IP հասցեն 192.168.4.1 է
• Ստատիկ IP հասցե- մշտական IP հասցե նշանակելը մեր ցանցային սարքին: սարքին ստատիկ IP տրամադրելու համար մենք պետք է սահմանենք IP հասցեն, դարպասի հասցեն և ենթացանցի դիմակը:

Առաջին վեբ էջում Օգտատիրոջը տրամադրվում են ռադիո կոճակներ ՝ DHCP և Ստատիկ IP կարգավորումների միջև ընտրություն կատարելու համար: Հաջորդ վեբ էջում մենք պետք է տրամադրենք IP- ի հետ կապված տեղեկատվությունը ՝ հետագա հետագա ընթացքի համար:

HTML կոդ

Վեբ էջերի HTML կոդը կարելի է գտնել այս Github շտեմարանում:

HTML վեբ էջեր պատրաստելու համար կարող եք օգտագործել ցանկացած IDE կամ տեքստային խմբագիր, ինչպիսիք են Sublime կամ notepad ++:

• Նախ ստեղծեք HTML վեբ էջ, որը պարունակում է երկու ռադիո կոճակ ՝ DHCP- ի և Ստատիկ IP կարգավորումների միջև ընտրություն կատարելու համար:
• Այժմ ստեղծեք ձեր պատասխանը ներկայացնելու կոճակը
• Որոշ անուն տվեք ռադիո կոճակներին: ESP վեբ սերվերի դասը կընդունի այս անունները որպես փաստարկներ և կստանա ռադիո կոճակների պատասխանը `օգտագործելով այս փաստարկները
• Այժմ տեղադրեք «ՈUBԱՐԿԵԼ» կոճակը ՝ պատասխանը սարքին ուղարկելու համար:
• Մյուս վեբ էջերում մենք ունենք տեքստային տուփեր: Տեքստային տուփին տվեք անվան արժեքը և Մուտքի տեսակը և «Ներկայացնել» պատասխանին ներկայացնելու կոճակ ավելացրեք:
• Ստեղծեք «RESET» կոճակը ՝ տեքստային դաշտի բովանդակությունը վերականգնելու համար:

// Ռադիո կոճակի DHCP կարգավորում

Ստատիկ IP կարգավորում

// Մուտքագրեք տեքստային տուփեր

// Ներկայացնելու կոճակ

մուտքագրում [type = "submit"] {background-color: #3498DB; / * Կանաչ */ եզրագիծ ՝ ոչ; գույնը `սպիտակ; լիցքավորում `15px 48px; text-align: կենտրոն; տեքստի ձևավորում. ոչ մեկը; ցուցադրում `ներկառուցված բլոկ; տառատեսակի չափը `16px; }

// Վերագործարկեք կոճակը

մուտքագրում [type = "submit"] {background-color: #3498DB; / * Կանաչ */ եզրագիծ ՝ ոչ; գույնը `սպիտակ; լիցքավորում `15px 48px; text-align: կենտրոն; տեքստի ձևավորում. ոչ մեկը; ցուցադրում `ներկառուցված բլոկ; տառատեսակի չափը `16px; }

Քայլ 3: Վեբ էջերից վեբ պատասխան ստանալը ESP32- ին

ESP 32 սարքից վեբ էջերի սպասարկումը մեծ հաճույք է: Դա կարող է լինել ամեն ինչ ՝ վեբ էջում ջերմաստիճանի տվյալները ցուցադրելուց, LED- ները սովորական կայքից շեղելուց կամ Օգտվողի WiFi- ի հավատարմագրերի պահպանումից ՝ վեբ էջի միջոցով: Այդ նպատակով ESP 32 -ը օգտագործում է WebServer Class- ը ՝ վեբ էջերը սերվերին հասցնելու համար:

• Նախ, ստեղծեք WebServer դասի օրինակ 80 նավահանգստում (HTTP նավահանգիստ):
• Այժմ կարգավորեք ESP սարքը որպես softAP: Տվեք SSID- ը և գաղտնաբառ և սարքին տվեք ստատիկ IP:
• Սկսեք սերվերը:

// ********* SSID և Pass AP- ի համար **************/

const char *ssidAP = "տալ SSID"; const char *passAP = "անցման բանալին";

// ********* Ստատիկ IP կոնֆիգուրացիա **************/IPAdress ad_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": "Չհաջողվեց միանալ");

ուշացում (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Soft AP- ի կարգավորում". "Կազմաձևման սխալ"); Serial.println (WiFi.softAPIP ());

// սկսել սերվերը

server.begin ();

• Ստեղծեք և սպասարկեք URL- ը ՝ օգտագործելով տարբեր հետադարձ կապեր:
• և կարգավորել հաճախորդին ասինքրոն կերպով ՝ օգտագործելով handleClient- ը:

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // կարգավորել պատասխանները server.handleClient ();

• Վեբ էջերին մուտք գործելու համար: Միացեք ձեր ստեղծած AP- ին, որը նշված է ձեր WiFi ցանցերում: Այժմ, գնացեք զննարկիչ, մուտքագրեք վերջին քայլում ձեր կողմից կազմաձևված IP- ն և մուտք գործեք կայք:
• Վեբ սերվերի դասը որպես արգումենտ ընդունում է մուտքերին տրված անունը («տեքստ», «կոճակ», «radiobutton» և այլն): Այն պահպանում է այս մուտքերի պատասխանները որպես փաստարկներ, և մենք կարող ենք ստանալ արժեքները կամ ստուգել դրանք ՝ օգտագործելով args, arg, hasArg մեթոդներ:

if (server.args ()> 0) {for (int i = 0; i <= server.args (); i ++) {

Serial.println (Լարը (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 (); }

Քայլ 4: Ստատիկ IP կազմաձևում

Մինչ այժմ մենք հասկացել ենք, թե ինչպես միանալ AP- ին և ինչպես ստանալ արժեքները վեբ էջի մուտքագրման դաշտերից:

Այս քայլում մենք կկարգավորենք Static IP- ն

• Ընտրեք Ստատիկ IP կարգավորումը և կտտացրեք Ներկայացնել կոճակին: Դուք կուղղորդվեք հաջորդ էջ:
• Հաջորդ էջում մուտքագրեք ստատիկ IP հասցե, դարպասի հասցե և ենթածանցի դիմակ: Այս էջը կսպասարկվի «/static» հասցեով, որը մշակվում է բռնակով ստատիկ հետկանչի մեթոդով:
• Ստացեք տեքստային դաշտերի արժեքը `օգտագործելով server.arg () մեթոդը:

Լար ipv4static = Լար (server.arg ("ipv4static"));

Լարային դարպաս = լարային (server.arg («դարպաս»)); Լարային ենթածանց = Լար (server.arg ("ենթահամակարգ"));

• Այժմ այդ արժեքները սերիականացվում են JSON ձևաչափի:
• Այնուհետև JSON- ը կգրենք SPIFFS- ին:

արմատ ["statickey"] = "staticSet";

արմատ ["staticIP"] = ipv4static;

արմատ ["դարպաս"] = դարպաս;

արմատ ["ենթահամակարգ"] = ենթացանց;

Ֆայլ fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

եթե (root.printTo (fileToWrite)) {

Serial.println ("-Ֆայլը գրված է"); }

• Այս կազմաձևը պահվում է SPIFFS- ում: Հետագայում այդ արժեքները կարդացվում են SPIFFS- ից:
• Ստատիկ IP արժեքներն այնուհետև վերլուծվում են JSON- ից:

Ֆայլի ֆայլ = SPIFFS.open ("/ip_set.txt", "r");

while (file.available ()) {

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

եթե (debugLogData.length ()> 5) {

JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

եթե (readRoot.containsKey («statickey»)) {

Լար ipStaticValue = readRoot ["staticIP"];

Լարային gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot ["subnet"];

Քայլ 5: DHCP- ի կարգավորումներ

Այս քայլում մենք կկարգավորենք DHCP- ի կարգավորումները

Ընտրեք DHCP- ի կարգավորումները ինդեքսի էջից և կտտացրեք «Ներկայացնել»

• Դուք կուղղորդվեք հաջորդ էջ: Հաջորդ էջում մուտքագրեք IP հասցեն կամ ընտրեք ընտրել լռելյայն և պատասխանը ներկայացնելու համար կտտացրեք «Ներկայացնել» կոճակին: Այս էջը կսպասարկվի «/dhcp» հասցեով, որը մշակվում է handleDHCP հետկանչի մեթոդով: Ստացեք տեքստային դաշտերի արժեքը `օգտագործելով server.arg () մեթոդը: Երբ կտտացրեք ընտրեք կանխադրված վանդակը: 192.168.4.1 IP- ն կտրվի սարքին:
• Այժմ այդ արժեքները սերիականացվում են JSON ձևաչափի:
• Այնուհետև JSON- ը կգրենք SPIFFS- ին:

JsonObject & root = jsonBuffer.createObject ();

արմատ ["dhcpManual"] = "dhcpManual";

արմատ ["dhcpIP"] = "192.168.4.1";

Ֆայլ fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

եթե (root.printTo (fileToWrite)) {

Serial.println ("-Ֆայլը գրված է"); }

• Այս կազմաձևը պահվում է SPIFFS- ում: Հետագայում այդ արժեքները կարդացվում են SPIFFS- ից:
• Այնուհետև dhcp IP- ի արժեքները վերլուծվում են JSON- ից:

Ֆայլի ֆայլ = SPIFFS.open ("/ip_set.txt", "r"); while (file.available ()) {debugLogData += char (file.read ()); } if (debugLogData.length ()> 5) {JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

եթե (readRoot.containsKey («dhcpDefault»)) {

Լարային ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Քայլ 6: WiFi հավատարմագրերի պահպանում

Առայժմ մենք ընտրել ենք IP կոնֆիգուրացիան: Այժմ մենք պետք է պահպանենք Օգտվողի wi -fi հավատարմագրերը: Այս իրավիճակը լուծելու համար: Մենք հետևել ենք այս ընթացակարգին:

• Այսպիսով, այժմ մենք ունենք մեր սարքի AP- ի կարգավորումը DHCP կամ Ստատիկ IP կազմաձևով, որը մենք ընտրել էինք վերջին քայլերում նշված գերված պորտալից:
• Ասենք, որ մենք ընտրել ենք Ստատիկ IP կոնֆիգուրացիա:
• Այս IP- ում մենք կկարգավորենք softAP- ը:
• SPIFFS- ի արժեքները կարդալուց և JSON- ից այդ արժեքները վերլուծելուց հետո: Այս IP- ում մենք կկարգավորենք softAP- ը:
• Փոխարկեք IP տողը բայթերի:

բայթ 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 հասցե ap_local (ip0, ip1, ip2, ip3);

// *****************************************************

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

համար (int i = 0; i <maxBytes; i ++) {

բայթ = strtoul (փող., NULL, հիմք);

str = strchr (str, sep);

եթե (փող == NULL || *փող == '\ 0') {

ընդմիջում;

}

փող ++;

}}

Այժմ մենք կկարգավորենք softAP- ը այս IP- ում

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "SoftAP- ի կազմաձևում". "Միացված չէ"); Serial.println (WiFi.softAPIP ());

• Այժմ սկսեք վեբ սերվերը և սպասարկեք վեբ էջը այս IP հասցեով: Օգտագործողի WiFi հավատարմագրերը մուտքագրելու համար:
• Վեբ էջը բաղկացած է երկու տեքստային դաշտից ՝ SSID և գաղտնաբառ մուտքագրելու համար:
• handleStaticForm- ը հետադարձ կապի մեթոդ է, որը սպասարկում է վեբ էջը:
• server.handleClient () հոգում է հարցման և պատասխանների վեբ էջից և դրանից:

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STIMER = millis ();

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

server.handleClient (); }

HTML ձևը պահվում է SPIFFS- ում: մենք ստուգում ենք համապատասխան փաստարկների առկայությունը `օգտագործելով server.arg (): SSID- ի և գաղտնաբառի արժեքը ստանալու համար:

Ֆայլի ֆայլ = SPIFFS.open ("/WiFi.html", "r");

server.streamFile (ֆայլ, "text/html");

file.close ();

Քայլ 7: Կարդացեք և գրեք SPIFFS- ից

SPIFFS

Սերիական ծայրամասային ինտերֆեյս Flash ֆայլային համակարգ կամ կարճ SPIFFS: Դա թեթև քաշային ֆայլային համակարգ է միկրոկոնտրոլերների համար ՝ SPI ֆլեշ չիպով: ESP32- ի ֆլեշ չիպը շատ տեղ ունի ձեր վեբ էջերի համար: Մենք նաև մեր կայքը պահել ենք Flash System- ում: Կան մի քանի քայլեր, որոնք մենք պետք է հետևենք ՝ տվյալները spiff- ներ վերբեռնելու համար

Ներբեռնեք ESP 32 SPIFFS տվյալների վերբեռնման գործիքը ՝

• Ձեր Arduino էսքիզների գրքույկում ստեղծեք գործիքների գրացուցակ, եթե այն դեռ գոյություն չունի
• Գործիքը բացեք գործիքների գրացուցակում (ուղին նման կլինի /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Վերագործարկեք Arduino IDE- ն
• Բացեք ուրվագիծը (կամ ստեղծեք նորը և պահեք այն)
• Գնացեք ուրվագծերի գրացուցակ (ընտրեք ուրվագիծ> Sուցադրել էսքիզների պանակը)
• Ստեղծեք տվյալների անունով գրացուցակ և ցանկացած ֆայլ, որը ցանկանում եք այնտեղ գտնվող ֆայլային համակարգում: Մենք վերբեռնել ենք մեր HTML էջը webform.html անունով
• Համոզվեք, որ ընտրել եք տախտակ, նավահանգիստ և փակ սերիական մոնիտոր
• Ընտրեք Գործիքներ> ESP8266 Էսքիզ տվյալների վերբեռնում: Սա պետք է սկսի ֆայլերը վերբեռնել ESP8266 ֆլեշ ֆայլային համակարգ: Ավարտելուց հետո IDE կարգավիճակի տողը կցուցադրի SPIFFS Image Uploaded հաղորդագրությունը:

դատարկ բռնակ DHCP () {Ֆայլի ֆայլ = SPIFFS.open ("/page_dhcp.html", "r"); server.streamFile (ֆայլ, "text/html"); file.close ();}

void handleStatic () {

Ֆայլի ֆայլ = SPIFFS.open ("/page_static.html", "r"); server.streamFile (ֆայլ, "text/html"); file.close ();}

Գրել SPIFFS- ին

Այստեղ մենք գրում ենք պահպանված կարգավորումը SPIFFS- ին, որպեսզի օգտվողները ստիպված չլինեն անցնել այս քայլերը, երբ սարքը վերակայվի:

• Վեբ էջից ստացված փաստարկները փոխակերպեք JSON օբյեկտների
• Գրեք այս JSON- ը SPIFFS- ում պահված.txt ֆայլում:

Լար ipv4static = Լար (server.arg ("ipv4static"));

Լարային դարպաս = լարային (server.arg («դարպաս»)); Լարային ենթածանց = Լար (server.arg ("ենթահամակարգ")); արմատ ["statickey"] = "staticSet"; արմատ ["staticIP"] = ipv4static; արմատ ["դարպաս"] = դարպաս; արմատ ["ենթահամակարգ"] = ենթացանց; Լարային JSONStatic; char JSON [120]; root.printTo (Սերիա); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Ֆայլ fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Սխալ SPIFFS- ի բացման ժամանակ"); } if (fileToWrite.print (JSON)) {Serial.println ("-Ֆայլը գրված է"); } else {Serial.println ("-Ֆայլ գրելիս սխալ է"); } fileToWrite.close ();

Քայլ 8: Ընդհանուր ծածկագիր

HTML- ի և ESP32- ի Over կոդը կարելի է գտնել այս Github շտեմարանում