ESP32 Captive Portal за конфигуриране на статични и DHCP IP настройки: 8 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

ESP 32 е устройство с интегриран WiFi и BLE. Това е нещо като благодат за IoT проектите. Просто дайте вашите SSID, парола и IP конфигурации и интегрирайте нещата в облака. Но управлението на IP настройките и потребителските идентификационни данни може да бъде главоболие за потребителя.

Ами ако потребителят иска да промени идентификационните данни за WiFi?

Ами ако потребителят иска да смени настройките за DHCP/статичен IP?

Мигането на ESP32 всеки път не е надеждно и дори не е решение на тези проблеми. Тук в тази инструкция ще демонстрираме.

• Как да създадете затворен портал.
• Хостинг на уеб формуляр от ESP32.
• Четене и писане от SPIFFS ESP32.
• Създаване на мека точка за достъп и свързване към станция

Стъпка 1: Спецификация на хардуера и софтуера

Спецификация на хардуера

• ESP32 WiFi/BLE
• Безжичен сензор за температура и влажност

Спецификация на софтуера

Arduino IDE

Стъпка 2: Създаване на портал за задържане

Порталът за задържане е уеб страница, която се показва на новосвързаните потребители t преди да им бъде предоставен по -широк достъп до мрежовите ресурси. Тук обслужваме три уеб страници за избор между DHCP и статични IP настройки. можем да определим IP адреса към ESP по два начина.

• DHCP IP адрес- това е начин за динамично присвояване на IP адреса на устройството. IP адресът на ESP по подразбиране е 192.168.4.1
• Статичен IP адрес- присвояване на постоянен IP адрес на нашето мрежово устройство. за да предоставим статичния IP на устройството, трябва да определим IP адреса, адреса на шлюза и маската на подмрежата.

В първата уеб страница потребителят е снабден с бутони за избор, за да избира между DHCP и статични IP настройки. На следващата уеб страница трябва да предоставим информация, свързана с IP, за да продължим по -нататък.

HTML код

HTML кодът за уеб страници може да бъде намерен в това хранилище на Github.

Можете да използвате всеки IDE или текстов редактор като Sublime или notepad ++ за създаване на HTML уеб страници.

• Първо създайте HTML уеб страница, съдържаща два радио бутона, за да избирате между DHCP и статични IP настройки.
• Сега създайте бутона, за да изпратите отговора си
• Дайте някакво име на бутоните за избор. Класът на уеб сървъра на ESP ще вземе тези имена като аргументи и ще получи отговора на радио бутоните, използвайки тези аргументи
• Сега поставете бутон „ИЗПРАЩАНЕ“, за да изпратите отговора на устройството.
• В другите уеб страници имаме текстови полета. Дайте стойността на името и типа на въвеждане в текстовото поле и добавете бутон за изпращане, за да изпратите отговора „SUBMIT“.
• Създайте бутон „RESET“, за да нулирате съдържанието на текстовото поле.

// DHCP настройка на бутон за радио

Статична IP настройка

// Въвеждане на текстови полета

// Бутон за изпращане

input [type = "submit"] {background-color: #3498DB; / * Зелено */ рамка: няма; цвят: бял; подложка: 15px 48px; подравняване на текст: център; декорация на текст: няма; дисплей: вграден блок; размер на шрифта: 16px; }

//Бутон за рестартиране

input [type = "submit"] {background-color: #3498DB; / * Зелено */ рамка: няма; цвят: бял; подложка: 15px 48px; подравняване на текст: център; декорация на текст: няма; дисплей: вграден блок; размер на шрифта: 16px; }

Стъпка 3: Получаване на уеб отговор от уеб страници към ESP32

Обслужването на уеб страници от устройството ESP 32 е много забавно. Това може да бъде всичко - от показване на данните за температурата в уеб страницата, превключване на светодиодите от персонализираната уеб страница или съхраняване на идентификационните данни на потребителя WiFi чрез уеб страница. За тази цел ESP 32 използва WebServer Class за сървър на уеб страници.

• Първо, създайте екземпляр на клас WebServer на порт 80 (HTTP порт).
• Сега настройте ESP устройството като softAP. Дайте SSID и парола и задайте статичен IP адрес на устройството.
• Стартирайте сървъра.

// ********* SSID и Pass за AP **************/

const char *ssidAP = "дайте SSID"; const char *passAP = "ключ за преминаване";

// ********* Статична IP конфигурация **************/IP Адрес ap_local_IP (192, 168, 1, 77); IP Адрес ap_gateway (192, 168, 1, 254); IP Адрес ap_subnet (255, 255, 255, 0);

// ********* Конфигуриране на SoftAP **************/

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)? "Конфигуриране на мека точка за достъп": "Грешка в конфигурацията"); Serial.println (WiFi.softAPIP ());

// стартиране на сървъра

server.begin ();

• Създайте и обслужвайте URL адреса, използвайки различни обратни извиквания.
• и обработвайте клиента асинхронно, като използвате handleClient.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // обработваме отговорите server.handleClient ();

• За достъп до уеб страниците. Свържете се с току -що създадената точка за достъп, посочена във вашите WiFi мрежи. Сега отидете в браузъра, Въведете IP, конфигуриран от вас в последната стъпка и влезте в уеб страницата.
• Класът на уеб сървъра приема името, дадено на входовете ('text', 'button', 'radiobutton'etc.) Като аргументи. Той записва отговорите на тези входове като аргументи и можем да получим стойностите или да ги проверим с помощта на 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 (); } else {dhcpSetDefault (); }

Стъпка 4: Статична IP конфигурация

Досега разбрахме как да се свържем с AP и как да получим стойностите от полетата за въвеждане на уеб страницата

В тази стъпка ще конфигурираме статичния IP

• Изберете статичната IP настройка и щракнете върху бутона Изпращане. Ще бъдете пренасочени към следващата страница.
• На следващата страница въведете статичния IP адрес, адреса на шлюза и подмрежовата маска, тази страница ще се обслужва на "/static", която се обработва чрез метода за статично обратно извикване.
• Вземете стойността на текстовите полета, като използвате метода server.arg ().

Низ ipv4static = Низ (server.arg ("ipv4static"));

String gateway = String (server.arg ("gateway")); Низова подмрежа = 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")) {

Низ ipStaticValue = readRoot ["staticIP"];

Низ gatewayValue = readRoot ["шлюз"];

Низ subnetValue = readRoot ["подмрежа"];

Стъпка 5: Настройки на DHCP

В тази стъпка ще конфигурираме настройките на DHCP

Изберете DHCP Settings от индексната страница и кликнете върху „Submit“

• Ще бъдете пренасочени към следващата страница. На следващата страница въведете 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")) {

Низ ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Стъпка 6: Запазване на идентификационни данни за WiFi

Засега сме избрали IP конфигурацията. Сега трябва да запазим идентификационните данни за wifi на Потребителя. За да разрешите тази ситуация. Следвахме тази процедура.

• Така че сега имаме настройка на AP на нашето устройство в DHCP или Static IP конфигурация, която сме избрали от портала за задържане, споменат в последните стъпки.
• Да предположим, че сме избрали конфигурация на статичен IP.
• Ние ще конфигурираме softAP на този IP.
• След като прочетете стойностите от SPIFFS и анализирате тези стойности от JSON. Ние ще конфигурираме softAP на този IP.
• Преобразувайте 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) {

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

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

str = strchr (str, sep);

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

прекъсване;

}

str ++;

}}

Сега ще конфигурираме 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 (файл, "текст/html");

file.close ();

Стъпка 7: Четене и писане от SPIFFS

SPIFFS

Flash File System на сериен периферен интерфейс или накратко SPIFFS. Това е лека файлова система за микроконтролери със SPI флаш чип. Вграденият флаш чип на ESP32 има достатъчно място за вашите уеб страници. Съхранихме и нашата уеб страница във Flash System. Има няколко стъпки, които трябва да следваме, за да качим данни в спифове

Изтеглете инструмента за качване на данни ESP 32 SPIFFS:

• Във вашата директория за скици на Arduino създайте директория с инструменти, ако все още не съществува
• Разопаковайте инструмента в директорията с инструменти (пътят ще изглежда като /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Рестартирайте Arduino IDE
• Отворете скица (или създайте нова и я запазете)
• Отидете в директорията за скици (изберете Sketch> Show Sketch Folder)
• Създайте директория с име data и всички файлове, които искате във файловата система там. Качихме нашата HTML страница с име webform.html
• Уверете се, че сте избрали платка, порт и затворен сериен монитор
• Изберете Инструменти> ESP8266 Качване на данни за скици. Това трябва да започне качването на файловете във флаш файловата система ESP8266. Когато приключи, лентата на състоянието на IDE ще покаже съобщение SPIFFS Image Uploaded.

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 във.txt файла, записан в SPIFFS.

Низ ipv4static = Низ (server.arg ("ipv4static"));

String gateway = String (server.arg ("gateway")); Низова подмрежа = Низ (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 ("-Файл е написан"); } else {Serial.println ("-Грешка при запис на файл"); } fileToWrite.close ();

Стъпка 8: Общ код

Over кодът за HTML и ESP32 може да бъде намерен в това Github хранилище