Portal cativo ESP32 para definir configurações de IP estático e DHCP: 8 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:37

ESP 32 é um dispositivo com WiFi e BLE integrados. É uma espécie de benção para os projetos de IoT. Basta fornecer o seu SSID, senha e configurações de IP e integrar as coisas na nuvem. Porém, gerenciar as configurações de IP e as credenciais do usuário pode ser uma dor de cabeça para o usuário.

E se o usuário quiser alterar as credenciais do WiFi?

E se o usuário quiser mudar as configurações de DHCP / IP estático?

Atualizar o ESP32 sempre não é confiável e nem mesmo a solução para esses problemas. Vamos demonstrar aqui neste instrutível.

• Como criar um portal cativo.
• Hospedar um formulário da web do ESP32.
• Leitura e gravação de SPIFFS ESP32.
• Criação de um ponto de acesso flexível e conexão a uma estação

Etapa 1: Especificação de Hardware e Software

Especificação de Hardware

• ESP32 WiFi / BLE
• Sensor de temperatura e umidade sem fio

Especificação de Software

IDE Arduino

Etapa 2: Criação de um portal cativo

Um portal cativo é uma página da web exibida para usuários recém-conectados t antes que eles tenham acesso mais amplo aos recursos da rede. Aqui, estamos servindo três páginas da web para selecionar entre as configurações de DHCP e IP estático. podemos definir o endereço IP para ESP de duas maneiras.

• Endereço IP DHCP - é uma forma de atribuir dinamicamente o endereço IP ao dispositivo. O endereço IP padrão do ESP é 192.168.4.1
• Endereço IP estático - atribuindo um endereço IP permanente ao nosso dispositivo de rede. para fornecer o IP estático ao dispositivo, precisamos definir o endereço IP, o endereço do gateway e a máscara de sub-rede.

Na primeira página da Web, o usuário recebe os botões de opção para selecionar entre as configurações de DHCP e IP estático. Na próxima página da Web, temos que fornecer as informações relacionadas ao IP para prosseguirmos.

Código HTML

O código HTML para páginas da web pode ser encontrado neste repositório Github.

Você pode usar qualquer IDE ou editor de texto como Sublime ou notepad ++ para criar páginas da web em HTML.

• Primeiro, crie uma página da Web em HTML contendo dois botões de opção para escolher entre as configurações de DHCP e IP estático.
• Agora crie o botão para enviar sua resposta
• Dê algum nome aos botões de opção. A classe do servidor ESP Web tomará esses nomes como argumentos e obterá a resposta dos botões de opção usando esses argumentos
• Agora insira um botão 'SUBMIT' para enviar a resposta ao dispositivo.
• Nas outras páginas da web, temos caixas de texto. Dê o valor do nome e o tipo de entrada à caixa de texto e adicione um botão de envio para 'ENVIAR' para enviar a resposta.
• Crie um botão 'RESET' para redefinir o conteúdo do campo de texto.

// Configuração de DHCP do botão de rádio

Configuração de IP estático

// Input Text Boxes

//Botão de envio

input [type = "submit"] {background-color: # 3498DB; / * Verde * / borda: nenhum; cor branca; preenchimento: 15px 48px; alinhamento de texto: centro; decoração de texto: nenhum; display: bloco embutido; tamanho da fonte: 16px; }

//Botão de reset

input [type = "submit"] {background-color: # 3498DB; / * Verde * / borda: nenhum; cor branca; preenchimento: 15px 48px; alinhamento de texto: centro; decoração de texto: nenhum; display: bloco embutido; tamanho da fonte: 16px; }

Etapa 3: obtendo a resposta da web de páginas da web para ESP32

Servir páginas da web a partir do dispositivo ESP 32 é muito divertido. Pode ser qualquer coisa, desde mostrar os dados de temperatura na página da web, virar os leds da página da web personalizada ou armazenar as credenciais de WiFi do usuário por meio de uma página da web. Para este propósito, ESP 32 usa WebServer Class para servidor de páginas da web.

• Primeiro, crie uma instância da classe WebServer na porta 80 (porta
• Agora configure o dispositivo ESP como softAP. Forneça o SSID e a senha e atribua um IP estático ao dispositivo.
• Inicie o servidor.

// ********* SSID e passe para AP ************** /

const char * ssidAP = "dar SSID"; const char * passAP = "chave de acesso";

// ********* Configuração de IP estático ************** / IPAddress ap_local_IP (192, 168, 1, 77); Endereço IP ap_gateway (192, 168, 1, 254); Endereço IP ap_subnet (255, 255, 255, 0);

// ********* SoftAP Config ************** /

WiFi.mode (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "Configuração do soft-AP": "Falha ao conectar");

atraso (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Configurando Soft AP": "Erro na configuração"); Serial.println (WiFi.softAPIP ());

// inicie o servidor

server.begin ();

• Crie e veicule o URL usando diferentes retornos de chamada.
• e lidar com o cliente de forma assíncrona usando handleClient.

server.on ("/", handleRoot);

server.on ("/ dhcp", handleDHCP); server.on ("/ estático", handleStatic); // lida com as respostas server.handleClient ();

• Para acessar as páginas da web. Conecte-se ao AP que você acabou de criar, listado em suas redes sem fio. Agora, vá até o navegador, digite o IP configurado por você na última etapa e acesse a página da web.
• A classe do servidor da Web recebe o nome dado às entradas ('texto', 'botão', 'botão de rádio'etc.) Como argumentos. Ele salva as respostas dessas entradas como argumentos e podemos obter os valores ou verificá-los usando os 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 (server.hasArg ("ipv4static") && server.hasArg ("gateway") && server.hasArg ("subnet")) {staticSet (); } else if (server.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }

Etapa 4: Configuração de IP estático

Até agora, entendemos como se conectar ao AP e como obter os valores dos campos de entrada da página da web

Nesta etapa, vamos configurar o IP estático

• Selecione a configuração de IP estático e clique no botão Enviar. Você será redirecionado para a próxima página.
• Na próxima página, insira o endereço IP estático, o endereço do gateway e a máscara de sub-rede. Esta página será exibida em "/ estático", que é gerenciado pelo método de retorno de chamada estática do identificador.
• Obtenha o valor dos campos de texto usando o método server.arg ().

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

String gateway = String (server.arg ("gateway")); Sub-rede String = String (server.arg ("sub-rede"));

• Agora, esses valores são serializados em um formato JSON.
• Em seguida, escreveremos o JSON em SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = gateway;

root ["sub-rede"] = sub-rede;

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

if (root.printTo (fileToWrite)) {

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

• Esta configuração é salva em SPIFFS. Posteriormente, esses valores são lidos no SPIFFS.
• Os valores de IP estático são então analisados em JSON.

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

String ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot ["subnet"];

Etapa 5: Configurações de DHCP

Nesta etapa, vamos definir as configurações de DHCP

Selecione as configurações de DHCP na página de índice e clique em "Enviar"

• Você será redirecionado para a próxima página. Na próxima página, digite o endereço IP ou selecione escolher padrão e clique no botão "Enviar" para enviar a resposta. Esta página será servida em "/ dhcp" que é tratada pelo método de retorno de chamada handleDHCP. Obtenha o valor dos campos de texto usando o método server.arg (). Quando clicado em, escolha a caixa de seleção padrão. o IP 192.168.4.1 será fornecido ao dispositivo.
• Agora, esses valores são serializados em um formato JSON.
• Em seguida, escreveremos o JSON em SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

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

if (root.printTo (fileToWrite)) {

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

• Esta configuração é salva em SPIFFS. Posteriormente, esses valores são lidos no SPIFFS.
• Os valores de IP dhcp são então analisados a partir de JSON.

Arquivo 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 ();}

Etapa 6: salvando credenciais de WiFi

Por enquanto, selecionamos a configuração de IP. Agora precisamos salvar as credenciais wi-fi do usuário. Para resolver esta situação. Seguimos este procedimento.

• Portanto, agora temos a configuração do AP do nosso dispositivo em DHCP ou configuração de IP estático que selecionamos do portal cativo mencionado nas últimas etapas.
• Digamos que selecionamos a configuração de IP estático.
• Vamos configurar um softAP neste IP.
• Depois de ler os valores de SPIFFS e analisar esses valores de JSON. Vamos configurar o softAP neste IP.
• Converta a string de IP em 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];

Endereço IP ap_local (ip0, ip1, ip2, ip3);

// *************** Analisar bytes da string ****************** //

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

pausa;

}

str ++;

}}

Agora vamos configurar o softAP neste IP

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

• Agora inicie o servidor da web e exiba uma página da web neste IP. Para inserir as credenciais WiFi do usuário.
• A página da web consiste em dois campos de texto para inserir o SSID e a senha.
• handleStaticForm é um método de retorno de chamada que atende a página da web.
• server.handleClient () cuida da solicitação e das respostas de e para a página da web.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = milis ();

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

server.handleClient (); }

O formulário HTML é salvo em SPIFFS. verificamos os argumentos adequados usando server.arg (). para obter o valor de SSID e senha

Arquivo de arquivo = SPIFFS.open ("/ WiFi.html", "r");

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

file.close ();

Etapa 7: ler e gravar de SPIFFS

SPIFFS

Sistema de arquivos Flash de interface periférica serial ou SPIFFS para abreviar. É um sistema de arquivos leve para microcontroladores com um chip flash SPI. O chip flash integrado do ESP32 tem muito espaço para suas páginas da web. Também armazenamos nossa página da web em Flash System. Existem algumas etapas que precisamos seguir para fazer upload de dados para spiffs

Baixe a ferramenta de upload de dados ESP 32 SPIFFS:

• No diretório do caderno de desenho do Arduino, crie o diretório de ferramentas se ainda não existir
• Descompacte a ferramenta no diretório de ferramentas (o caminho será semelhante a /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Reinicie o Arduino IDE
• Abra um esboço (ou crie um novo e salve-o)
• Vá para o diretório de esboço (escolha Sketch> Show Sketch Folder)
• Crie um diretório denominado data e quaisquer arquivos que você deseja no sistema de arquivos lá. Carregamos nossa página HTML com o nome webform.html
• Certifique-se de ter selecionado uma placa, porta e monitor serial fechado
• Selecione Ferramentas> Upload de dados de esboço ESP8266. Isso deve começar a carregar os arquivos no sistema de arquivos flash ESP8266. Quando terminar, a barra de status do IDE exibirá a mensagem SPIFFS Image Uploaded.

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

void handleStatic () {

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

Escrevendo para SPIFFS

Aqui, estamos gravando a configuração salva no SPIFFS para que os usuários não precisem seguir essas etapas sempre que o dispositivo for reiniciado.

• Converta os argumentos recebidos da página da web em objetos JSON
• Grave este JSON no arquivo.txt salvo em SPIFFS.

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

String gateway = String (server.arg ("gateway")); Sub-rede String = String (server.arg ("sub-rede")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = gateway; root ["sub-rede"] = sub-rede; String JSONStatic; char JSON [120]; root.printTo (Serial); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Arquivo fileToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Erro ao abrir SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("- Arquivo escrito"); } else {Serial.println ("- Erro ao gravar arquivo"); } fileToWrite.close ();

Etapa 8: Código geral

O código Over para HTML e ESP32 pode ser encontrado neste Repositório Github