Тұрақты және DHCP IP параметрлерін конфигурациялау үшін ESP32 Captive Portal: 8 қадам

2025 Автор: John Day | [email protected]. Соңғы өзгертілген: 2025-01-23 14:51

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 немесе блокнот ++ сияқты кез келген IDE немесе мәтіндік редакторды қолдануға болады.

• Алдымен DHCP мен тұрақты IP параметрлері арасында таңдау үшін екі радио түймесі бар HTML веб -бетін жасаңыз.
• Енді жауап беру үшін түймені жасаңыз
• Радио түймелерге ат қойыңыз. ESP веб -сервер класы бұл атауларды аргумент ретінде қабылдайды және осы аргументтерді қолданып радио түймелердің жауабын алады
• Енді құрылғыға жауапты жіберу үшін 'Жіберу' түймесін енгізіңіз.
• Басқа веб -беттерде бізде мәтіндік ұяшықтар бар. Мәтін жолағына атының мәнін және енгізу түрін беріңіз және жауапты жіберу үшін «Жіберу» түймесін қосыңыз.
• Мәтін өрісінің мазмұнын қалпына келтіру үшін 'RESET' батырмасын жасаңыз.

// DHCP параметрінің радио түймесі

Статикалық IP параметрлері

// Мәтін ұяшықтарын енгізу

// Жіберу түймесі

енгізу [type = «submit»] {background-color: #3498DB; / * Жасыл */ шекара: жоқ; түсі: ақ; толтыру: 15 пиксель 48 пиксель; мәтінді туралау: ортасы; мәтінді безендіру: жоқ; дисплей: кірістірілген блок; қаріп өлшемі: 16 пиксель; }

// Қалпына келтіру түймесі

енгізу [type = «submit»] {background-color: #3498DB; / * Жасыл */ шекара: жоқ; түсі: ақ; толтыру: 15 пиксель 48 пиксель; мәтінді туралау: ортасы; мәтінді безендіру: жоқ; дисплей: кірістірілген блок; қаріп өлшемі: 16 пиксель; }

3 -қадам: Веб -беттерден ESP32 -ге веб -жауап алу

ESP 32 құрылғысынан веб -беттерге қызмет көрсету өте қызықты. Бұл веб -беттегі температура деректерін көрсетуден, реттелетін веб -беттен светодиодты бұрудан немесе пайдаланушы WiFi тіркелгі деректерін веб -бетте сақтаудан бастап болуы мүмкін. Осы мақсатта ESP 32 веб -беттерді серверге жіберу үшін WebServer класын қолданады.

• Біріншіден, 80 -портта (HTTP порты) WebServer класының данасын жасаңыз.
• Енді ESP құрылғысын softAP ретінде орнатыңыз. SSID пен рұқсат кілтін беріңіз және құрылғыға тұрақты IP тағайындаңыз.
• Серверді бастаңыз.

// ********* SSID және AP үшін рұқсат **************/

const char *ssidAP = «SSID беріңіз»; const char *passAP = «рұқсат кілті»;

// ********* статикалық IP конфигурациясы **************/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»: «Қосылмады»);

кешіктіру (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 ();

• Веб -беттерге кіру үшін. Wi -Fi желілерінде тізімделген сіз жасаған 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 (); } else if (server.arg («ipv4»)! = «») {dhcpSetManual (); } басқа {dhcpSetDefault (); }

4 -қадам: статикалық IP конфигурациясы

Әзірге біз AP -ге қалай қосылуға болатынын және веб -беттің кіріс өрістерінен мәндерді қалай алуға болатынын түсіндік

Бұл қадамда біз статикалық 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);

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»))) {

Жол ipStaticValue = readRoot [«staticIP»];

Жол шлюзіValue = readRoot [«шлюз»];

Жол subnetValue = readRoot [«ішкі желі»];

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

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»)) {

Жол 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) {

үшін (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

Сериялық перифериялық интерфейстің Flash файлдық жүйесі немесе қысқаша SPIFFS. Бұл SPI флэш-чипі бар микроконтроллерлерге арналған жеңіл файлдық жүйе. ESP32 флэш -чипінде сіздің веб -беттеріңізге көп орын бар. Біз сонымен қатар веб -бетті Flash жүйесінде сақтадық. Деректерді спифтерге жүктеу үшін біз бірнеше қадамдарды орындауымыз керек

ESP 32 SPIFFS деректерді жүктеу құралын жүктеңіз:

• Arduino эскиздер каталогында, егер ол әлі жоқ болса, құралдар каталогын жасаңыз
• Құралды құралдар каталогына ораңыз (жол /Arduino/tools/ESP32FS/tool/esp32fs.jar сияқты болады)
• Arduino IDE қайта іске қосыңыз
• Эскизді ашыңыз (немесе жаңасын жасаңыз және сақтаңыз)
• Эскиз каталогына өтіңіз (эскиз> эскиз қалтасын көрсету тармағын таңдаңыз)
• Деректер деп аталатын каталог жасаңыз және сол жерде файлдық жүйеде қажет файлдар. Біз webform.html атауымен HTML бетін жүктедік
• Тақта, порт және жабық сериялық мониторды таңдағаныңызға көз жеткізіңіз
• Құралдар> ESP8266 деректерді жүктеудің эскизін таңдаңыз. Бұл файлдарды 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 файлына жазыңыз.

Жол 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 репозиторийінен табуға болады