Portal cautivo ESP32 para configurar las opciones de IP estática y DHCP: 8 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

ESP 32 es un dispositivo con WiFi y BLE integrados. Es una especie de bendición para los proyectos de IoT. Simplemente proporcione sus configuraciones de SSID, contraseña e IP e integre las cosas en la nube. Sin embargo, administrar la configuración de IP y las credenciales de usuario puede ser un dolor de cabeza para el usuario.

¿Qué pasa si el usuario desea cambiar las credenciales de WiFi?

¿Qué sucede si el usuario desea cambiar la configuración de DHCP / IP estática?

Flashear el ESP32 cada vez no es confiable y ni siquiera es la solución para estos problemas. Aquí, en este instructable, lo demostraremos.

• Cómo crear un portal cautivo.
• Alojando un formulario web desde el ESP32.
• Lectura y escritura de SPIFFS ESP32.
• Creación de un Soft Access Point y conexión a una estación

Paso 1: Especificación de hardware y software

Especificación de hardware

• ESP32 WiFi / BLE
• Sensor inalámbrico de temperatura y humedad

Especificación de software

IDE de Arduino

Paso 2: creación de un portal cautivo

Un portal cautivo es una página web que se muestra a los usuarios recién conectados antes de que se les conceda un acceso más amplio a los recursos de la red. Aquí estamos sirviendo tres páginas web para seleccionar entre DHCP y Configuración de IP estática. podemos definir la dirección IP a ESP de dos formas.

• Dirección IP DHCP: es una forma de asignar dinámicamente la dirección IP al dispositivo. La dirección IP predeterminada del ESP es 192.168.4.1
• Dirección IP estática: asigna una dirección IP permanente a nuestro dispositivo de red. Para proporcionar la IP estática al dispositivo, necesitamos definir la dirección IP, la dirección de la puerta de enlace y la máscara de subred.

En la primera página web, al usuario se le proporcionan los botones de radio para seleccionar entre DHCP e IP estática. En la siguiente página web, debemos proporcionar la información relacionada con la propiedad intelectual para continuar.

código HTML

El código HTML para las páginas web se puede encontrar en este repositorio de Github.

Puede utilizar cualquier IDE o editor de texto como Sublime o notepad ++ para crear páginas web HTML.

• Primero, cree una página web HTML que contenga dos botones de opción para elegir entre DHCP y Configuración de IP estática.
• Ahora crea el botón para enviar tu respuesta
• Dale un nombre a los botones de radio. La clase del servidor web ESP tomará estos nombres como argumentos y obtendrá la respuesta de los botones de opción usando estos argumentos
• Ahora inserte un botón 'ENVIAR' para enviar la respuesta al dispositivo.
• En las otras páginas web, tenemos cuadros de texto. Dé el valor del nombre y el tipo de entrada al cuadro de texto y agregue un botón de envío para 'ENVIAR' enviar la respuesta.
• Cree un botón 'RESET' para restablecer el contenido del campo de texto.

// Configuración de DHCP del botón de radio

Configuración de IP estática

// Cuadros de texto de entrada

//Botón de enviar

input [type = "submit"] {background-color: # 3498DB; / * Verde * / borde: ninguno; color blanco; relleno: 15px 48px; alineación de texto: centro; decoración de texto: ninguna; pantalla: bloque en línea; tamaño de fuente: 16px; }

//Botón de reinicio

input [type = "submit"] {background-color: # 3498DB; / * Verde * / borde: ninguno; color blanco; relleno: 15px 48px; alineación de texto: centro; decoración de texto: ninguna; pantalla: bloque en línea; tamaño de fuente: 16px; }

Paso 3: Obtener la respuesta web de las páginas web a ESP32

Servir páginas web desde el dispositivo ESP 32 es muy divertido. Puede ser cualquier cosa, desde mostrar los datos de temperatura en la página web, encender los LED de la página web personalizada o almacenar las credenciales de WiFi del usuario a través de una página web. Para este propósito, ESP 32 usa WebServer Class para servidores de páginas web.

• Primero, cree una instancia de la clase WebServer en el puerto 80 (puerto
• Ahora configure el dispositivo ESP como softAP. Proporcione el SSID y la clave de acceso y asigne una IP estática al dispositivo.
• Inicie el servidor.

// ********* SSID y Pass para AP ************** /

const char * ssidAP = "dar SSID"; const char * passAP = "clave de paso";

// ********* Configuración de IP estática ************** / IPAddress ap_local_IP (192, 168, 1, 77); Dirección IP ap_gateway (192, 168, 1, 254); IPAddress ap_subnet (255, 255, 255, 0);

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

Modo WiFi (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "Soft-AP setup": "No se pudo conectar");

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

// iniciar el servidor

server.begin ();

• Cree y proporcione la URL utilizando diferentes devoluciones de llamada.
• y manejar el cliente de forma asincrónica usando handleClient.

server.on ("/", handleRoot);

servidor.on ("/ dhcp", handleDHCP); server.on ("/ static", handleStatic); // manejar las respuestas server.handleClient ();

• Para acceder a las páginas web. Conéctese al AP que acaba de crear, incluido en sus redes WiFi. Ahora, vaya al navegador, ingrese la IP configurada por usted en el último paso y acceda a la página web.
• La clase de servidor web toma el nombre dado a las entradas ('texto', 'botón', 'botón de radio', etc.) como argumentos. Guarda las respuestas de estas entradas como argumentos y podemos obtener los valores o verificarlos usando los métodos 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 (servidor.hasArg ("ipv4static") && servidor.hasArg ("puerta de enlace") && servidor.hasArg ("subred")) {staticSet (); } else if (server.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }

Paso 4: Configuración de IP estática

Hasta ahora hemos entendido cómo conectarnos a AP y cómo obtener los valores de los campos de entrada de la página web

En este paso configuraremos la IP estática

• Seleccione la configuración de IP estática y haga clic en el botón Enviar. Serás redirigido a la página siguiente.
• En la página siguiente, ingrese la dirección IP estática, la dirección de la puerta de enlace y la máscara de subred. Esta página se atenderá en "/ static", que se maneja mediante el método de devolución de llamada estática.
• Obtenga el valor de los campos de texto usando el método server.arg ().

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

String gateway = String (server.arg ("gateway")); String subred = String (server.arg ("subred"));

• Ahora, estos valores se serializan en un formato JSON.
• Luego, escribiremos el JSON en SPIFFS.

root ["statickey"] = "staticSet";

root ["IP estática"] = ipv4static;

raíz ["puerta de enlace"] = puerta de enlace;

root ["subred"] = subred;

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

if (root.printTo (fileToWrite)) {

Serial.println ("- Archivo escrito"); }

• Esta configuración se guarda en SPIFFS. Posteriormente, estos valores se leen de SPIFFS.
• Luego, los valores de IP estática se analizan desde JSON.

Archivo archivo = SPIFFS.open ("/ ip_set.txt", "r");

while (file.available ()) {

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

if (debugLogData.length ()> 5) {

JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

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

String ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["puerta de enlace"];

String subnetValue = readRoot ["subred"];

Paso 5: Configuración de DHCP

En este paso, configuraremos los ajustes de DHCP

Seleccione la configuración de DHCP de la página de índice y haga clic en "Enviar"

• Serás redirigido a la página siguiente. En la página siguiente ingrese la dirección IP o seleccione elegir predeterminado y haga clic en el botón "Enviar" para enviar la respuesta. Esta página se servirá en "/ dhcp", que se maneja mediante el método de devolución de llamada handleDHCP. Obtenga el valor de los campos de texto usando el método server.arg (). Cuando se hace clic en, elija la casilla de verificación predeterminada. la IP 192.168.4.1 se le dará al dispositivo.
• Ahora, estos valores se serializan en un formato JSON.
• Luego, escribiremos el JSON en SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

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

if (root.printTo (fileToWrite)) {

Serial.println ("- Archivo escrito"); }

• Esta configuración se guarda en SPIFFS. Posteriormente, estos valores se leen de SPIFFS.
• Luego, los valores de IP de dhcp se analizan desde JSON.

Archivo 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")) {

String ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Paso 6: guardar las credenciales de WiFi

Por ahora, hemos seleccionado la configuración de IP. Ahora necesitamos guardar las credenciales wifi del usuario. Para resolver esta situación. Hemos seguido este procedimiento.

• Así que ahora tenemos la configuración de AP de nuestro dispositivo en DHCP o configuración de IP estática que habíamos seleccionado del portal cautivo mencionado en los últimos pasos.
• Digamos que hemos seleccionado la configuración de IP estática.
• Configuraremos un softAP en esta IP.
• Después de leer los valores de SPIFFS y analizar estos valores de JSON. Configuraremos el softAP en esta IP.
• Convierta la cadena de 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];

Dirección IP ap_local (ip0, ip1, ip2, ip3);

// *************** Analizar bytes de la cadena ****************** //

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

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

bytes = strtoul (str, NULL, base);

str = strchr (str, sep);

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

rotura;

}

str ++;

}}

Ahora configuraremos el softAP en esta IP

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Configurando softAP": "no conectado"); Serial.println (WiFi.softAPIP ());

• Ahora inicie el servidor web y sirva una página web en esta IP. Ingresar las Credenciales WiFi del Usuario.
• La página web consta de dos campos de texto para ingresar SSID y Contraseña.
• handleStaticForm es un método de devolución de llamada que sirve a la página web.
• server.handleClient () se encarga de la solicitud y las respuestas hacia y desde la página web.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = milis ();

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

server.handleClient (); }

El formulario HTML se guarda en SPIFFS. verificamos los argumentos adecuados usando server.arg (). para obtener el valor de SSID y contraseña

Archivo archivo = SPIFFS.open ("/ WiFi.html", "r");

server.streamFile (archivo, "texto / html");

file.close ();

Paso 7: leer y escribir desde SPIFFS

SPIFFS

Serial Peripheral Interface Flash File System, o SPIFFS para abreviar. Es un sistema de archivos liviano para microcontroladores con un chip flash SPI. El chip flash integrado del ESP32 tiene mucho espacio para sus páginas web. También hemos almacenado nuestra página web en Flash System. Hay algunos pasos que debemos seguir para cargar datos en spiffs

Descargue la herramienta de carga de datos ESP 32 SPIFFS:

• En su directorio de cuaderno de bocetos de Arduino, cree un directorio de herramientas si aún no existe
• Desempaquete la herramienta en el directorio de herramientas (la ruta se verá como /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Reinicie Arduino IDE
• Abra un boceto (o cree uno nuevo y guárdelo)
• Vaya al directorio de bocetos (elija Boceto> Mostrar carpeta de bocetos)
• Cree un directorio llamado datos y los archivos que desee en el sistema de archivos allí. Hemos subido nuestra página HTML con el nombre webform.html
• Asegúrese de haber seleccionado una placa, un puerto y un monitor serial cerrado
• Seleccione Herramientas> Carga de datos de croquis ESP8266. Esto debería comenzar a cargar los archivos en el sistema de archivos flash ESP8266. Cuando termine, la barra de estado IDE mostrará el mensaje SPIFFS Image Uploaded.

void handleDHCP () {Archivo archivo = SPIFFS.open ("/ page_dhcp.html", "r"); server.streamFile (archivo, "texto / html"); file.close ();}

void handleStatic () {

Archivo archivo = SPIFFS.open ("/ page_static.html", "r"); server.streamFile (archivo, "texto / html"); file.close ();}

Escribiendo a SPIFFS

Aquí estamos escribiendo la configuración guardada en SPIFFS para que los usuarios no tengan que seguir estos pasos cada vez que se reinicia el dispositivo.

• Convierta los argumentos recibidos de la página web en objetos JSON
• Escriba este JSON en el archivo.txt guardado en SPIFFS.

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

String gateway = String (server.arg ("gateway")); String subred = String (server.arg ("subred")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; raíz ["puerta de enlace"] = puerta de enlace; root ["subred"] = subred; String JSONStatic; char JSON [120]; root.printTo (Serial); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, tamaño de (JSONStatic) +2); Archivo fileToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Error al abrir SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("- Archivo escrito"); } else {Serial.println ("- Error al escribir el archivo"); } fileToWrite.close ();

Paso 8: Código general

El código Over para HTML y ESP32 se puede encontrar en este repositorio de Github