ESP32 Captive Portal нь статик болон DHCP IP тохиргоог тохируулах: 8 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:03

ESP 32 бол нэгдсэн WiFi болон BLE төхөөрөмж юм. Энэ бол IoT төслүүдийн хувьд маш сайн зүйл юм. Зүгээр л SSID, нууц үг, IP -ийнхээ тохиргоог өгөөд эдгээр зүйлсийг үүл рүү нэгтгээрэй. Гэхдээ IP тохиргоо болон Хэрэглэгчийн итгэмжлэлийг удирдах нь хэрэглэгчийн толгойны өвчин болно.

Хэрэв хэрэглэгч WiFi итгэмжлэлийг өөрчлөхийг хүсч байвал яах вэ?

Хэрэв хэрэглэгч DHCP/статик IP тохиргоог өөрчлөхийг хүсч байвал яах вэ?

ESP32 -ийг байнга анивчих нь найдвартай биш бөгөөд эдгээр асуудлыг шийдэх шийдэл биш юм. Энд энэ зааварчилгааны хүрээнд бид үзүүлэх болно.

• Олзлогдсон портал хэрхэн бий болгох.
• ESP32 -ээс вэб маягтыг байршуулах.
• SPIFFS ESP32 -ээс унших, бичих.
• Зөөлөн нэвтрэх цэгийг бий болгож, станц руу холбоно уу

Алхам 1: Техник хангамж ба програм хангамжийн тодорхойлолт

Тоног төхөөрөмжийн тодорхойлолт

• ESP32 WiFi/BLE
• Утасгүй температур ба чийгшил мэдрэгч

Програм хангамжийн тодорхойлолт

Arduino IDE

Алхам 2: Олзлогдсон портал үүсгэх

Олзлогдсон портал гэдэг нь шинээр холбогдсон хэрэглэгчдэд сүлжээний нөөцөд илүү өргөн нэвтрэх эрх олгохоос өмнө харуулдаг вэб хуудас юм. Энд бид DHCP болон статик IP тохиргооноос сонгох гурван вэб хуудсыг санал болгож байна. Бид ESP -ийн IP хаягийг хоёр аргаар тодорхойлж болно.

• DHCP IP хаяг бол төхөөрөмжид IP хаягийг динамикаар хуваарилах арга юм. ESP -ийн анхдагч IP хаяг нь 192.168.4.1 юм
• Статик IP хаяг- манай сүлжээний төхөөрөмжид байнгын IP хаягийг өгөх. Төхөөрөмжийг статик IP -ээр хангахын тулд бид IP хаяг, гарцын хаяг, дэд сүлжээний маскыг тодорхойлох хэрэгтэй.

Эхний вэб хуудсан дээр DHCP болон статик IP тохиргоог сонгохын тулд хэрэглэгчид радио товчлуурыг өгдөг. Дараагийн вэб хуудсанд бид цаашдын үйл ажиллагааг үргэлжлүүлэхийн тулд IP -тэй холбоотой мэдээллийг өгөх ёстой.

HTML код

Вэб хуудасны HTML кодыг энэ Github репозитороос олж болно.

Та HTML вэб хуудас хийхийн тулд Sublime эсвэл notepad ++ гэх мэт IDE эсвэл текст засварлагчийг ашиглаж болно.

• Эхлээд DHCP болон статик IP тохиргооноос сонгох хоёр радио товчлуур агуулсан HTML вэб хуудас үүсгэнэ үү.
• Одоо хариултаа оруулах товчлуурыг үүсгэнэ үү
• Радио товчлууруудад нэр өгнө үү. ESP вэб серверийн анги нь эдгээр нэрийг аргумент болгон авч, эдгээр аргументыг ашиглан радио товчлууруудын хариуг авах болно
• Одоо 'ХҮРГЭХ' товчийг оруулаад төхөөрөмжид хариу илгээнэ үү.
• Бусад вэб хуудсан дээр бид текст хайрцагтай. Нэрийн утга болон оролтын төрлийг текст хайрцагт өгч, хариу илгээх товчийг 'SUBMIT' дээр оруулна уу.
• Текст талбарын агуулгыг дахин тохируулахын тулд 'ДАХИН тохируулах' товчийг үүсгэнэ үү.

// радио товчлуур DHCP тохиргоо

IP статик тохиргоо

// Текст оруулах оролт

// Илгээх товчлуур

оролт [type = "submit"] {background-color: #3498DB; / * Ногоон */ хил: байхгүй; өнгө: цагаан; дүүргэгч: 15px 48px; текстийг тэгшлэх: төв; текст чимэглэл: байхгүй; дэлгэц: inline-block; фонтын хэмжээ: 16 пиксел; }

// Дахин тохируулах товч

оролт [type = "submit"] {background-color: #3498DB; / * Ногоон */ хил: байхгүй; өнгө: цагаан; дүүргэгч: 15px 48px; текстийг тэгшлэх: төв; текст чимэглэл: байхгүй; дэлгэц: inline-block; фонтын хэмжээ: 16 пиксел; }

Алхам 3: Вэб хуудсуудаас ESP32 руу вэб хариулт авах

ESP 32 төхөөрөмжөөс вэб хуудсуудаар үйлчлэх нь маш хөгжилтэй байдаг. Энэ нь вэб хуудсан дахь температурын өгөгдлийг харуулах, тусгай вэб хуудаснаас удирдамжийг эргүүлэх эсвэл хэрэглэгчийн WiFi -ийн итгэмжлэлийг вэб хуудсаар дамжуулан хадгалах гэх мэт байж болно. Энэ зорилгоор ESP 32 нь вэб хуудсыг сервер болгохын тулд WebServer Class -ийг ашигладаг.

• Нэгдүгээрт, 80 порт (HTTP порт) дээр WebServer ангийн жишээг үүсгэнэ үү.
• Одоо ESP төхөөрөмжийг softAP болгон тохируулаарай. SSID болон нэвтрэх түлхүүрийг өгөөд төхөөрөмжид статик IP оноож өг.
• Серверийг эхлүүлнэ үү.

// ********* SSID ба AP -ийн Pass **************/

const char *ssidAP = "SSID өгөх"; const char *passAP = "нэвтрүүлэх түлхүүр";

// ********* 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 тохиргоо **************/

WiFi горим (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "Soft-AP тохиргоо": "Холбогдож чадсангүй");

саатал (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 ();

• Вэб хуудсуудад хандахын тулд. WiFi сүлжээндээ жагсаасан дөнгөж үүсгэсэн AP -тэй холбогдоно уу. Одоо хөтөч рүү очоод хамгийн сүүлд тохируулсан IP хаягаа оруулаад вэб хуудас руу орно уу.
• Вэб серверийн анги нь оролтод өгсөн нэрийг ('текст', 'товчлуур', 'радио товчлуур' гэх мэт) аргумент болгон авдаг. Энэ нь эдгээр оролтын хариуг аргумент болгон хадгалдаг бөгөөд бид утгыг олж авах эсвэл 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 ("гарц") && server.hasArg ("дэд сүлжээ")) {staticSet (); } өөр бол (server.arg ("ipv4")! = "") {dhcpSetManual (); } өөр {dhcpSetDefault (); }

Алхам 4: Статик IP тохиргоо

Өнөөг хүртэл бид AP -тэй хэрхэн холбогдох, вэб хуудасны оролтын талбараас утгыг хэрхэн авах талаар ойлгосон

Энэ алхамд бид статик IP -ийг тохируулах болно

• Статик IP тохиргоог сонгоод Илгээх товчийг дарна уу. Таныг дараагийн хуудас руу чиглүүлэх болно.
• Дараагийн хуудсан дээр статик IP хаяг, гарцын хаяг, дэд сүлжээний маск оруулна уу.
• Server.arg () аргыг ашиглан текст талбаруудын утгыг олж мэдэх.

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

String гарц = String (server.arg ("гарц"))); String дэд сүлжээ = String (server.arg ("дэд сүлжээ")));

• Одоо эдгээр утгыг JSON формат руу цувралаар оруулав.
• Дараа нь бид JSON -ийг SPIFFS дээр бичих болно.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["гарц"] = гарц;

root ["дэд сүлжээ"] = дэд сүлжээ;

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

if (root.printTo (fileToWrite)) {

Serial.println ("-Файл бичсэн"); }

• Энэ тохиргоог SPIFFS дээр хадгална. Хожим нь эдгээр утгыг SPIFFS -аас уншдаг.
• Дараа нь статик IP утгуудыг JSON -ээс задлан шинжилдэг.

Файлын файл = 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 ["гарц"];

String subnetValue = readRoot ["дэд сүлжээ"];

Алхам 5: DHCP тохиргоо

Энэ үе шатанд бид DHCP тохиргоог тохируулах болно

Индексийн хуудаснаас DHCP тохиргоог сонгоод "Илгээх" дээр дарна уу

• Таныг дараагийн хуудас руу чиглүүлэх болно. Дараагийн хуудсанд IP хаягаа оруулна уу эсвэл анхдагчаар сонгоод "Илгээх" товчийг дарж хариултаа илгээнэ үү. Энэ хуудсыг "/dhcp" хаягаар үйлчлэх бөгөөд энэ нь handleDHCP дуудлага хийх аргуудаар зохицуулагдах болно. Server.arg () аргыг ашиглан текст талбаруудын утгыг олж мэдэх. Үүнийг дарахад анхдагч хайрцгийг сонгоно уу. 192.168.4.1 IP -ийг төхөөрөмжид өгөх болно.
• Одоо эдгээр утгыг JSON формат руу цуврал болгон оруулсан болно.
• Дараа нь бид JSON -ийг SPIFFS дээр бичих болно.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

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

if (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);

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

String ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Алхам 6: WiFi итгэмжлэлийг хадгалах

Одоогийн байдлаар бид IP тохиргоог сонгосон байна. Одоо бид хэрэглэгчийн wifi итгэмжлэлийг хадгалах хэрэгтэй. Энэ байдлыг шийдвэрлэхийн тулд. Бид энэ журмыг дагаж мөрдсөн.

• Тиймээс одоо бид сүүлийн алхамуудад дурдсан олзлогдсон портал дээрээс сонгосон DHCP эсвэл статик IP тохиргоонд төхөөрөмжийнхөө AP тохиргоог хийж байна.
• Бид статик 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];

IPAddress ap_local (ip0, ip1, ip2, ip3);

// *************** Мөрөөс байтуудыг задлах ****************** //

хоосон parseBytes (const char* str, char sep, байт* байт, int maxBytes, int base) {

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

байт = strtoul (str, NULL, base);

str = strchr (str, sep);

хэрэв (str == NULL || *str == '\ 0') {

завсарлага;

}

str ++;

}}

Одоо бид энэ IP дээр softAP -ийг тохируулах болно

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 (файл, "текст/html");

file.close ();

Алхам 7: SPIFFS -ээс уншиж бичих

SPIFFS

Цуваа захын интерфэйс флаш файлын систем эсвэл богино хугацаанд SPIFFS. Энэ бол SPI флаш чиптэй микроконтроллеруудад зориулсан хөнгөн жинтэй файлын систем юм. ESP32 -ийн флаш чип нь таны вэб хуудсанд хангалттай зайтай байдаг. Бид мөн вэб хуудсаа Flash системд хадгалсан. Өгөгдлийг спиффэд байршуулахын тулд бид хэд хэдэн алхам хийх хэрэгтэй

ESP 32 SPIFFS өгөгдөл байршуулах хэрэгслийг татаж авах:

• Arduino ноорог номын лавлахдаа хараахан байхгүй бол хэрэгслийн лавлах үүсгэнэ үү
• Багаж хэрэгслийг лавлах санд задлах (зам нь /Arduino/tools/ESP32FS/tool/esp32fs.jar шиг харагдах болно)
• Arduino IDE -ийг дахин эхлүүлнэ үү
• Ноорог нээх (эсвэл шинээр үүсгэж хадгалах)
• Ноорог лавлах руу очно уу (ноорог> ноорог хавтсыг харуулна уу).
• Тэнд байгаа файлын системд хүссэн өгөгдөл болон хүссэн файлуудаа үүсгэ. Бид webform.html нэртэй HTML хуудсаа байршууллаа
• Та самбар, порт, хаалттай сериал мониторыг сонгосон эсэхээ шалгаарай
• Tools> ESP8266 Sketch Data Upload -ийг сонгоно уу. Энэ нь ESP8266 флэш файлын системд файлуудыг байршуулж эхлэх ёстой. Үүнийг хийж дууссаны дараа IDE статусын мөрөнд SPIFFS зураг байршуулсан зурвас гарч ирнэ.

void handleDHCP () {Файлын файл = SPIFFS.open ("/page_dhcp.html", "r"); server.streamFile (файл, "текст/html"); file.close ();}

void handleStatic () {

Файлын файл = SPIFFS.open ("/page_static.html", "r"); server.streamFile (файл, "текст/html"); file.close ();}

SPIFFS руу бичиж байна

Энд бид хадгалсан тохиргоог SPIFFS дээр бичиж байгаа бөгөөд ингэснээр хэрэглэгчид төхөөрөмжийг дахин тохируулах бүрт эдгээр алхмуудыг хийх шаардлагагүй болно.

• Вэб хуудаснаас хүлээн авсан аргументыг JSON объект болгон хөрвүүлэх
• Энэ JSON -ийг SPIFFS дээр хадгалагдсан.txt файлд бичээрэй.

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

String гарц = String (server.arg ("гарц"))); String дэд сүлжээ = String (server.arg ("дэд сүлжээ")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["гарц"] = гарц; root ["дэд сүлжээ"] = дэд сүлжээ; 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 ("-Файл бичсэн"); } өөр {Serial.println ("-Файл бичих алдаа"); } fileToWrite.close ();

Алхам 8: Ерөнхий код

HTML болон ESP32 -ийн Over кодыг энэ Github репозитороос олж болно