ESP32 Portal captiu per configurar la configuració IP estàtica i DHCP: 8 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:14

ESP 32 és un dispositiu amb WiFi i BLE integrats. És una mena de benefici per als projectes IoT. Simplement doneu les vostres configuracions d’SSID, contrasenya i IP i integreu les coses al núvol. Però, gestionar la configuració d’IP i les credencials d’usuari pot ser un mal de cap per a l’usuari.

Què passa si l’usuari vol canviar les credencials de WiFi?

Què passa si l'usuari vol canviar la configuració de DHCP / IP estàtica?

Parpellejar l’ESP32 cada cop no és fiable ni tan sols és la solució per a aquests problemes. Aquí, en aquest instructiu, anirem a demostrar.

• Com es crea un portal captiu.
• Allotjament d’un formulari web des de l’ESP32.
• Lectura i escriptura des de SPIFFS ESP32.
• Creació d’un punt d’accés suau i connexió a una estació

Pas 1: Especificació de maquinari i programari

Especificació de maquinari

• ESP32 WiFi / BLE
• Sensor de temperatura i humitat sense fils

Especificació de programari

IDE Arduino

Pas 2: crear un portal captiu

Un portal captiu és una pàgina web que es mostra als usuaris recentment connectats abans que se'ls concedeixi un accés més ampli als recursos de la xarxa. Aquí oferim tres pàgines web per seleccionar entre DHCP i Static IP Settings. podem definir l'adreça IP a ESP de dues maneres.

• Adreça IP DHCP: és una manera d’assignar dinàmicament l’adreça IP al dispositiu. L’adreça IP per defecte de l’ESP és 192.168.4.1
• Adreça IP estàtica: assignació d’una adreça IP permanent al nostre dispositiu de xarxa. per proporcionar la IP estàtica al dispositiu, hem de definir l'adreça IP, l'adreça de la passarel·la i la màscara de subxarxa.

A la primera pàgina web, a l’usuari se li proporcionen els botons d’opció per seleccionar entre els paràmetres DHCP i Static IP. A la següent pàgina web, hem de proporcionar la informació relacionada amb la IP per continuar endavant.

Codi HTML

El codi HTML de les pàgines web es pot trobar en aquest dipòsit de Github.

Podeu utilitzar qualsevol IDE o editor de text com Sublime o Bloc de notes ++ per crear pàgines web HTML.

• Primer, creeu una pàgina web HTML que contingui dos botons d’opció per triar entre la configuració DHCP i la configuració IP estàtica.
• Ara creeu el botó per enviar la vostra resposta
• Posa un nom als botons d'opció. La classe de servidor web ESP prendrà aquests noms com a arguments i obtindrà la resposta dels botons d’opció mitjançant aquests arguments
• Ara inseriu un botó "ENVIAR" per enviar la resposta al dispositiu.
• A la resta de pàgines web, tenim quadres de text. Indiqueu el valor del nom i el tipus d’entrada al quadre de text i afegiu un botó d’enviament per enviar la resposta a "ENVIAR".
• Creeu un botó "RESET" per restablir el contingut del camp de text.

// Configuració DHCP del botó de ràdio

Configuració IP estàtica

// Introduïu quadres de text

// Botó d’enviament

input [type = "submit"] {background-color: # 3498DB; / * Verd * / vora: cap; color: blanc; encoixinat: 15 px 48 px; text-align: centre; decoració de text: cap; pantalla: bloc en línia; mida de la lletra: 16 px; }

//Botó de reset

input [type = "submit"] {background-color: # 3498DB; / * Verd * / vora: cap; color: blanc; encoixinat: 15 px 48 px; text-align: centre; decoració de text: cap; pantalla: bloc en línia; mida de la lletra: 16 px; }

Pas 3: Obtenir la resposta web de pàgines web a ESP32

Servir pàgines web des del dispositiu ESP 32 és molt divertit. Pot ser des de mostrar les dades de temperatura a la pàgina web, passar els leds de la pàgina web personalitzada o emmagatzemar les credencials de WiFi d’usuari a través d’una pàgina web. Amb aquest propòsit, ESP 32 utilitza WebServer Class per a servir pàgines web.

• En primer lloc, creeu una instància de classe de servidor web al port 80 (port
• Ara configureu el dispositiu ESP com a softAP. Indiqueu el SSID i la clau de pas i assigneu una IP estàtica al dispositiu.
• Comenceu el servidor.

// ********* SSID i Pass for AP ************** /

const char * ssidAP = "donar SSID"; const char * passAP = "clau de passada";

// ********* Configuració IP estàtica ************** / IPAddress ap_local_IP (192, 168, 1, 77); Adreça IP ap_gateway (192, 168, 1, 254); Adreça IP ap_subnet (255, 255, 255, 0);

// ********* Configuració SoftAP ************** /

WiFi.mode (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "Soft-AP setup": "No s'ha pogut connectar");

retard (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Configuració de Soft AP": "Error en la configuració"); Serial.println (WiFi.softAPIP ());

// iniciar el servidor

server.begin ();

• Creeu i publiqueu l'URL mitjançant diferents devolucions de trucada.
• i gestioneu el client de manera asíncrona mitjançant handleClient.

server.on ("/", handleRoot);

server.on ("/ dhcp", handleDHCP); server.on ("/ static", handleStatic); // gestionar les respostes server.handleClient ();

• Per accedir a les pàgines web. Connecteu-vos a l'AP que acabeu de crear, que apareix a les vostres xarxes WiFi. Ara aneu al navegador, introduïu la IP que heu configurat a l’últim pas i accediu a la pàgina web.
• La classe de servidor web pren el nom donat a les entrades ('text', 'botó', 'botó de ràdio', etc.) com a arguments. Desa les respostes d’aquestes entrades com a arguments i podem obtenir els valors o comprovar-los mitjançant mètodes 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 ("passarel·la") && server.hasArg ("subxarxa")) {staticSet (); } else if (server.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }

Pas 4: Configuració IP estàtica

Fins ara hem entès com connectar-nos a AP i com obtenir els valors dels camps d’entrada de la pàgina web

En aquest pas, configurarem la IP estàtica

• Seleccioneu la configuració IP estàtica i feu clic al botó Envia. Se us redirigirà a la pàgina següent.
• A la pàgina següent, introduïu l'adreça IP estàtica, l'adreça de la passarel·la i la subxarxa.
• Obteniu el valor dels camps de text mitjançant el mètode server.arg ().

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

String gateway = Cadena (server.arg ("passarel·la")); Cadena subxarxa = Cadena (server.arg ("subxarxa"));

• Ara, aquests valors es serialitzen en un format JSON.
• Després escriurem el JSON a SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = passarel·la;

root ["subxarxa"] = subxarxa;

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

if (root.printTo (fileToWrite)) {

Serial.println ("- Arxiu escrit"); }

• Aquesta configuració es desa a SPIFFS. Més tard, aquests valors es llegeixen des de SPIFFS.
• Els valors IP estàtics s’analitzen des de JSON.

Fitxer file = 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")) {

Cadena ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["passarel·la"];

String subnetValue = readRoot ["subxarxa"];

Pas 5: Configuració de DHCP

En aquest pas, configurarem la configuració de DHCP

Seleccioneu la configuració DHCP a la pàgina d'índex i feu clic a "Envia"

• Se us redirigirà a la pàgina següent. A la pàgina següent, introduïu l'adreça IP o seleccioneu l'opció predeterminada i feu clic al botó "Envia" per enviar la resposta. Aquesta pàgina es publicarà a "/ dhcp", que es gestiona mitjançant el mètode de devolució de trucada handleDHCP. Obteniu el valor dels camps de text mitjançant el mètode server.arg (). Quan hi feu clic, seleccioneu la casella de selecció predeterminada. es donarà la IP 192.168.4.1 al dispositiu.
• Ara, aquests valors es serialitzen en un format JSON.
• Després escriurem el JSON a SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

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

if (root.printTo (fileToWrite)) {

Serial.println ("- Arxiu escrit"); }

• Aquesta configuració es desa a SPIFFS. Més tard, aquests valors es llegeixen des de SPIFFS.
• Els valors IP dhcp s'analitzen des de JSON.

File file = 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")) {

Cadena ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Pas 6: desar les credencials de WiFi

De moment, hem seleccionat la configuració IP. Ara hem de desar les credencials de wifi de l’usuari. Per resoldre aquesta situació. Hem seguit aquest procediment.

• Per tant, ara tenim la configuració del nostre dispositiu AP en configuració DHCP o IP estàtica que havíem seleccionat al portal captiu esmentat en els darrers passos.
• Suposem que hem seleccionat la configuració IP estàtica.
• Configurarem un softAP en aquesta IP.
• Després de llegir els valors de SPIFFS i analitzar aquests valors de JSON. Configurarem el softAP en aquesta IP.
• Converteix la cadena IP en bytes.

byte 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];

Adreça IP ap_local (ip0, ip1, ip2, ip3);

// *************** Analitza els bytes de la cadena *******************

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

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

bytes = strtoul (str, NULL, base);

str = strchr (str, sep);

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

trencar;

}

str ++;

}}

Ara configurarem el softAP en aquesta IP

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Configuració de softAP": "no està connectat"); Serial.println (WiFi.softAPIP ());

• Ara comenceu el servidor web i publiqueu una pàgina web en aquesta IP. Per introduir les credencials WiFi de l'usuari.
• La pàgina web consta de dos camps de text per introduir SSID i contrasenya.
• handleStaticForm és un mètode de devolució de trucada que serveix per a la pàgina web.
• server.handleClient () s’encarrega de la sol·licitud i de les respostes a i des de la pàgina web.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

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

server.handleClient (); }

El formulari HTML es desa a SPIFFS. comprovem els arguments adequats mitjançant server.arg (). per obtenir el valor de SSID i contrasenya

File file = SPIFFS.open ("/ WiFi.html", "r");

server.streamFile (fitxer, "text / html");

file.close ();

Pas 7: Llegiu i escriviu des de SPIFFS

SPIFFS

Interfície perifèrica sèrie Sistema de fitxers Flash, o SPIFFS en resum. És un sistema de fitxers lleuger per a microcontroladors amb un xip flash SPI. El xip flash incorporat de l’ESP32 té molt d’espai per a les vostres pàgines web. També hem emmagatzemat la nostra pàgina web al sistema Flash. Hi ha uns quants passos que hem de seguir per penjar dades a spiffs

Descarregueu l'eina de càrrega de dades ESP 32 SPIFFS:

• Al directori del quadern de dibuixos Arduino, creeu un directori d’eines si encara no existeix
• Desempaqueteu l'eina al directori d'eines (el camí tindrà l'aspecte de /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Reinicieu Arduino IDE
• Obrir un esbós (o crear-ne un de nou i desar-lo)
• Aneu al directori d'esbossos (trieu Esbós> Mostra la carpeta d'esbós)
• Creeu un directori anomenat dades i els fitxers que vulgueu al sistema de fitxers. Hem penjat la nostra pàgina HTML amb el nom webform.html
• Assegureu-vos que heu seleccionat una placa, un port i un monitor sèrie tancats
• Seleccioneu Eines> Càrrega de dades d'esbós ESP8266. Això hauria de començar a carregar els fitxers al sistema de fitxers flash ESP8266. Quan s'hagi acabat, la barra d'estat de l'IDE mostrarà el missatge SPIFFS Image Uploaded.

void handleDHCP () {File file = SPIFFS.open ("/ page_dhcp.html", "r"); server.streamFile (fitxer, "text / html"); file.close ();}

void handleStatic () {

Fitxer file = SPIFFS.open ("/ page_static.html", "r"); server.streamFile (fitxer, "text / html"); file.close ();}

Escrivint a SPIFFS

Aquí escrivim la configuració desada a SPIFFS perquè els usuaris no hagin de seguir aquests passos sempre que es restableixi el dispositiu.

• Convertiu els arguments rebuts de la pàgina web en objectes JSON
• Escriviu aquest JSON al fitxer.txt desat a SPIFFS.

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

String gateway = Cadena (server.arg ("passarel·la")); Cadena subxarxa = Cadena (server.arg ("subxarxa")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = passarel·la; root ["subxarxa"] = subxarxa; Cadena JSONStatic; char JSON [120]; root.printTo (sèrie); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Fitxer fileToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Error en obrir SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("- Fitxer escrit"); } else {Serial.println ("- Error en escriure el fitxer"); } fileToWrite.close ();

Pas 8: Codi general

El codi Over per a HTML i ESP32 es pot trobar en aquest dipòsit de Github