Captive Portal ESP32 per configurare le impostazioni IP statiche e DHCP: 8 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

ESP 32 è un dispositivo con WiFi e BLE integrati. È una sorta di vantaggio per i progetti IoT. Basta fornire SSID, password e configurazioni IP e integrare le cose nel cloud. Tuttavia, la gestione delle impostazioni IP e delle credenziali utente può essere un grattacapo per l'utente.

Cosa succede se l'Utente vuole cambiare le credenziali WiFi?

Cosa succede se l'utente desidera cambiare le impostazioni DHCP/IP statico?

Il flashing di ESP32 ogni volta non è affidabile e nemmeno la soluzione per questi problemi. Qui in questo istruibile andremo a dimostrare.

• Come creare un captive portal.
• Hosting di un modulo web da ESP32.
• Lettura e scrittura da SPIFFS ESP32.
• Creazione di un Soft Access Point e connessione a una stazione

Passaggio 1: specifiche hardware e software

Specifiche hardware

• ESP32 WiFi/BLE
• Sensore di temperatura e umidità wireless

Specifiche del software

Arduino IDE

Passaggio 2: creazione di un Captive Portal

Un captive portal è una pagina Web che viene visualizzata agli utenti appena connessi prima che venga loro concesso un accesso più ampio alle risorse di rete. Qui stiamo servendo tre pagine web per selezionare tra DHCP e Impostazioni IP statiche. possiamo definire l'indirizzo IP per ESP in due modi.

• Indirizzo IP DHCP: è un modo per assegnare dinamicamente l'indirizzo IP al dispositivo. L'indirizzo IP predefinito dell'ESP è 192.168.4.1
• Indirizzo IP statico: assegnazione di un indirizzo IP permanente al nostro dispositivo di rete. per fornire l'IP statico al dispositivo è necessario definire l'indirizzo IP, l'indirizzo del gateway e la subnet mask.

Nella prima pagina Web, all'utente vengono forniti i pulsanti di opzione per selezionare tra le impostazioni DHCP e IP statico. Nella prossima pagina web, dobbiamo fornire le informazioni relative all'IP per procedere ulteriormente.

Codice HTML

Il codice HTML per le pagine web può essere trovato in questo repository Github.

Puoi utilizzare qualsiasi IDE o editor di testo come Sublime o notepad++ per creare pagine Web HTML.

• Innanzitutto creare una pagina Web HTML contenente due pulsanti di opzione per scegliere tra DHCP e Impostazioni IP statico.
• Ora crea il pulsante per inviare la tua risposta
• Dai un nome ai pulsanti di opzione. La classe del server Web ESP prenderà questi nomi come argomenti e otterrà la risposta dei pulsanti di opzione utilizzando questi argomenti
• Ora inserisci un pulsante 'INVIA' per inviare la risposta al dispositivo.
• Nelle altre pagine web, abbiamo caselle di testo. Assegna il valore del nome e il tipo di input alla casella di testo e aggiungi un pulsante di invio a "INVIA" invia la risposta.
• Creare un pulsante "RESET" per ripristinare il contenuto del campo di testo.

//Impostazione DHCP del pulsante radio

Impostazione IP statico

//Inserisci caselle di testo

//Pulsante Invia

input[type="submit"]{ background-color: #3498DB; /* Verde */ bordo: nessuno; colore bianco; imbottitura: 15px 48px; allineamento del testo: centro; decorazione del testo: nessuna; display: blocco in linea; dimensione del carattere: 16px; }

//Tasto reset

input[type="submit"]{ background-color: #3498DB; /* Verde */ bordo: nessuno; colore bianco; imbottitura: 15px 48px; allineamento del testo: centro; decorazione del testo: nessuna; display: blocco in linea; dimensione del carattere: 16px; }

Passaggio 3: ottenere la risposta Web dalle pagine Web a ESP32

Servire pagine web dal dispositivo ESP 32 è molto divertente. Può essere qualsiasi cosa, dal mostrare i dati della temperatura nella pagina web, accendere i led dalla pagina web personalizzata o memorizzare le credenziali WiFi dell'utente attraverso una pagina web. A tale scopo, ESP 32 utilizza la classe WebServer per le pagine Web del server.

• Innanzitutto, crea un'istanza della classe WebServer sulla porta 80 (porta
• Ora imposta il dispositivo ESP come softAP. Fornisci SSID e passkey e assegna un IP statico al dispositivo.
• Avvia il server.

//*********SSID e Pass per AP**************/

const char *ssidAP = "dare SSID"; const char *passAP = "chiave di accesso";

//********* Configurazione IP statico**************/IPAddress ap_local_IP(192, 168, 1, 77); IPAddress ap_gateway(192, 168, 1, 254); IPAddress ap_subnet(255, 255, 255, 0);

//*********Configurazione SoftAP**************/

WiFi.mode(WIFI_AP);

Serial.println(WiFi.softAP(ssidAP, passAP) ? "soft-AP setup": "Impossibile connettersi");

ritardo(100); Serial.println(WiFi.softAPConfig(ap_local_IP, ap_gateway, ap_subnet)? "Configurazione Soft AP": "Errore nella configurazione"); Serial.println(WiFi.softAPIP());

//inizia il server

server.begin();

• Crea e pubblica l'URL utilizzando diversi callback.
• e gestire il client in modo asincrono utilizzando handleClient.

server.on("/", handleRoot);

server.on("/dhcp", handleDHCP); server.on("/static", handleStatic); // gestisce le risposte server.handleClient();

• Per accedere alle pagine web. Connettiti all'AP che hai appena creato, elencato nelle tue reti WiFi. Ora, vai nel browser, inserisci l'IP da te configurato nell'ultimo passaggio e accedi alla pagina web.
• La classe del server Web prende il nome dato agli input('text', 'button', 'radiobutton'etc.) come argomenti. Salva le risposte di questi input come argomenti e possiamo ottenere i valori o controllarli usando i metodi 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(); }

Passaggio 4: configurazione IP statico

Finora abbiamo capito come collegarci ad AP e come ottenere i valori dai campi di input della pagina web

In questo passaggio, configureremo l'IP statico

• Selezionare l'impostazione IP statico e fare clic sul pulsante Invia. Verrai reindirizzato alla pagina successiva.
• Nella pagina successiva inserisci l'indirizzo IP statico, l'indirizzo del gateway e la subnet Mask. Questa pagina verrà servita in "/static" che viene gestita dal metodo handle statico di callback.
• Ottieni il valore dei campi di testo usando il metodo server.arg().

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

String gateway = String(server.arg("gateway")); Sottorete di stringhe = String(server.arg("subnet"));

• Ora, questi valori vengono serializzati in un formato JSON.
• Quindi scriveremo il JSON in SPIFFS.

root["statickey"]="staticSet";

root["staticIP"] = ipv4static;

root["porta"] = porta;

root["sottorete"] = sottorete;

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

if(root.printTo(fileToWrite)){

Serial.println("--File scritto"); }

• Questa configurazione viene salvata in SPIFFS. Successivamente, questi valori vengono letti da SPIFFS.
• I valori IP statici vengono quindi analizzati da JSON.

File file = SPIFFS.open("/ip_set.txt", "r");

while(file.disponibile()){

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

Passaggio 5: impostazioni DHCP

In questo passaggio, configureremo le impostazioni DHCP

Selezionare le impostazioni DHCP dalla pagina dell'indice e fare clic su "Invia"

• Verrai reindirizzato alla pagina successiva. Nella pagina successiva inserisci l'indirizzo IP o seleziona scegli predefinito e fai clic sul pulsante "Invia" per inviare la risposta. Questa pagina verrà servita su "/dhcp" che è gestita dal metodo di callback handleDHCP. Ottieni il valore dei campi di testo usando il metodo server.arg(). Quando si fa clic su scegli la casella di controllo predefinita. l'IP 192.168.4.1 verrà fornito al dispositivo.
• Ora, questi valori sono serializzati in un formato JSON.
• Quindi scriveremo il JSON in SPIFFS.

JsonObject& root =jsonBuffer.createObject();

root["dhcpManual"]="dhcpManual";

root["dhcpIP"] = "192.168.4.1";

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

if(root.printTo(fileToWrite)){

Serial.println("--File scritto"); }

• Questa configurazione viene salvata in SPIFFS. Successivamente, questi valori vengono letti da SPIFFS.
• I valori IP DHCP vengono quindi analizzati da 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")){

String ipdhcpValue= readRoot["dhcpIP"];

Serial.println(ipdhcpValue);

dhcpAPConfig();}

Passaggio 6: salvataggio delle credenziali WiFi

Per ora, abbiamo selezionato la configurazione IP. Ora dobbiamo salvare le credenziali wifi dell'Utente. Per risolvere questa situazione. Abbiamo seguito questa procedura.

• Quindi ora abbiamo la configurazione dell'AP del nostro dispositivo in configurazione DHCP o IP statico che avevamo selezionato dal captive portal menzionato negli ultimi passaggi.
• Diciamo che abbiamo selezionato la configurazione IP statico.
• Configureremo un softAP su questo IP.
• Dopo aver letto i valori da SPIFFS e aver analizzato questi valori da JSON. Configureremo il softAP su questo IP.
• Converti la stringa IP in byte.

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

IPAddress ap_local(ip0, ip1, ip2, ip3);

//*************** Analizza i byte dalla stringa ******************//

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

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

rottura;

}

str++;

}}

Ora configureremo il softAP su questo IP

Serial.println(WiFi.softAPConfig(ap_localWeb_IP, ap_gate, ap_net) ? "Configurazione softAP": "non connesso"); Serial.println(WiFi.softAPIP());

• Ora avvia il server web e servi una pagina web su questo IP. Per inserire le Credenziali WiFi dell'Utente.
• La pagina web è composta da due campi di testo per inserire SSID e Password.
• handleStaticForm è un metodo di callback che serve la pagina web.
• server.handleClient() si occupa della richiesta e delle risposte da e verso la pagina web.

server.begin();

server.on("/", handleStaticForm);

server.onNotFound(handleNotFound);

STimer = millis();

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

server.handleClient(); }

Il modulo HTML viene salvato in SPIFFS. controlliamo gli argomenti adatti usando server.arg(). per ottenere il valore di SSID e Password

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

server.streamFile(file, "testo/html");

file.close();

Passaggio 7: leggere e scrivere da SPIFFS

SPIFFS

Serial Peripheral Interface Flash File System, o SPIFFS in breve. È un file system leggero per microcontrollori con un chip flash SPI. Il chip flash integrato dell'ESP32 ha molto spazio per le tue pagine web. Abbiamo anche memorizzato la nostra pagina web in Flash System. Ci sono alcuni passaggi che dobbiamo seguire per caricare i dati su spiffs

Scarica lo strumento di caricamento dati SPIFFS ESP 32:

• Nella directory dello sketchbook di Arduino, crea la directory degli strumenti se non esiste ancora
• Decomprimi lo strumento nella directory degli strumenti (il percorso sarà simile a /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Riavvia Arduino IDE
• Apri uno schizzo (o creane uno nuovo e salvalo)
• Vai alla directory degli schizzi (scegli Schizzo > Mostra cartella degli schizzi)
• Crea una directory denominata data e tutti i file che desideri nel file system lì. Abbiamo caricato la nostra pagina HTML con il nome webform.html
• Assicurati di aver selezionato una scheda, una porta e un monitor seriale chiuso
• Selezionare Strumenti > Caricamento dati schizzo ESP8266. Questo dovrebbe iniziare a caricare i file nel file system flash ESP8266. Al termine, la barra di stato dell'IDE visualizzerà il messaggio SPIFFS Image Uploaded.

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

void handleStatic(){

File file = SPIFFS.open("/page_static.html", "r"); server.streamFile(file, "testo/html"); file.close();}

Scrivere su SPIFFS

Qui stiamo scrivendo l'impostazione salvata su SPIFFS in modo che gli utenti non debbano eseguire questi passaggi ogni volta che il dispositivo viene ripristinato.

• Converti gli argomenti ricevuti dalla pagina web in oggetti JSON
• Scrivi questo JSON nel file.txt salvato in SPIFFS.

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

String gateway = String(server.arg("gateway")); Sottorete di stringhe = String(server.arg("subnet")); root["statickey"]="staticSet"; root["staticIP"] = ipv4static; root["porta"] = porta; root["sottorete"] = sottorete; Stringa JSONStatic; char JSON[120]; root.printTo(Seriale); root.prettyPrintTo(JSONStatic); JSONStatic.toCharArray(JSON, sizeof(JSONStatic)+2); File fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE); if(!fileToWrite){ Serial.println("Errore durante l'apertura di SPIFFS"); } if(fileToWrite.print(JSON)){ Serial.println("--File Scritto"); }else{ Serial.println("--Errore durante la scrittura del file"); } fileToWrite.close();

Passaggio 8: codice generale

Il codice Over per HTML ed ESP32 può essere trovato in questo repository Github