ESP32 Captive Portal for å konfigurere statiske og DHCP IP -innstillinger: 8 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:23

ESP 32 er en enhet med integrert WiFi og BLE. Det er en slags velsignelse for IoT -prosjektene. Bare gi SSID, passord og IP -konfigurasjoner og integrer tingene i skyen. Men å administrere IP -innstillingene og brukerlegitimasjon kan være en hodepine for brukeren.

Hva om brukeren vil endre WiFi -legitimasjonen?

Hva om brukeren ønsker å bytte innstillinger for DHCP/statisk IP?

Å blinke ESP32 hver gang er ikke pålitelig og ikke engang løsningen på disse problemene. Her i denne instruksen skal vi demonstrere.

• Hvordan lage en fanget portal.
• Hosting av et webskjema fra ESP32.
• Lese og skrive fra SPIFFS ESP32.
• Opprette et mykt tilgangspunkt og koble til en stasjon

Trinn 1: Spesifikasjon for maskinvare og programvare

Maskinvarespesifikasjon

• ESP32 WiFi/BLE
• Trådløs temperatur- og fuktighetssensor

Programvarespesifikasjon

Arduino IDE

Trinn 2: Opprette en Captive Portal

En fanget portal er en webside som vises for nylig tilkoblede brukere t før de får bredere tilgang til nettverksressurser. Her serverer vi tre nettsider for å velge mellom DHCP og statiske IP -innstillinger. vi kan definere IP -adressen til ESP på to måter.

• DHCP IP-adresse- det er en måte å dynamisk tildele IP-adressen til enheten. ESPs standard IP -adresse er 192.168.4.1
• Statisk IP-adresse- tilordne en permanent IP-adresse til vår nettverksenhet. For å gi den statiske IP -adressen til enheten trenger vi å definere IP -adressen, gateway -adressen og nettverksmasken.

På den første websiden får brukeren radioknappene for å velge mellom DHCP- og statisk IP -innstillinger. På den neste nettsiden må vi oppgi IP -relatert informasjon for å fortsette videre.

HTML -kode

HTML -koden for nettsider finnes i dette Github -depotet.

Du kan bruke en hvilken som helst IDE eller tekstredigerer som Sublime eller notepad ++ for å lage HTML -websider.

• Lag først en HTML -webside som inneholder to alternativknapper for å velge mellom DHCP og statisk IP -innstilling.
• Lag nå knappen for å sende inn svaret ditt
• Gi et navn til alternativknappene. ESP -webserverklassen tar disse navnene som argumenter og får svaret fra radioknappene ved hjelp av disse argumentene
• Sett nå inn en "SEND" -knapp for å sende svaret til enheten.
• På de andre nettsidene har vi tekstbokser. Gi navneverdien og inndatatypen til tekstboksen, og legg til en send -knapp for å "SEND" send inn svaret.
• Lag en RESET -knapp for å tilbakestille innholdet i tekstfeltet.

// Radioknapp DHCP -innstilling

Statisk IP -innstilling

// Skriv inn tekstbokser

// Send inn -knapp

input [type = "submit"] {background-color: #3498DB; / * Grønn */ kant: ingen; farge: hvit; polstring: 15px 48px; tekstjustering: senter; tekst-dekorasjon: ingen; display: inline-block; skriftstørrelse: 16px; }

//Nullstillknapp

input [type = "submit"] {background-color: #3498DB; / * Grønn */ kant: ingen; farge: hvit; polstring: 15px 48px; tekstjustering: senter; tekst-dekorasjon: ingen; display: inline-block; skriftstørrelse: 16px; }

Trinn 3: Få websvaret fra websider til ESP32

Det er veldig morsomt å vise websider fra ESP 32 -enheten. Det kan være alt fra å vise temperaturdataene på nettsiden, snu LED -ene fra den egendefinerte nettsiden eller lagre brukerens WiFi -legitimasjon gjennom en webside. For dette formålet bruker ESP 32 WebServer Class til å servere websider.

• Opprett først en forekomst av WebServer -klassen ved port 80 (HTTP -port).
• Sett nå opp ESP -enheten som softAP. Gi SSID og passord og tilordne en statisk IP til enheten.
• Start serveren.

// ********* SSID og Pass for AP **************/

const char *ssidAP = "gi SSID"; const char *passAP = "pass key";

// ********* Statisk IP -konfigurasjon **************/IPAddress ap_local_IP (192, 168, 1, 77); IPAddress ap_gateway (192, 168, 1, 254); IPAddress ap_subnet (255, 255, 255, 0);

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

WiFi.mode (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "Soft-AP setup": "Klarte ikke å koble til");

forsinkelse (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Configuring Soft AP": "Feil i konfigurasjonen"); Serial.println (WiFi.softAPIP ());

// start serveren

server.begin ();

• Lag og vis URL -en ved hjelp av forskjellige tilbakeringinger.
• og håndter klienten asynkront ved hjelp av handleClient.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // håndtere svarene server.handleClient ();

• For å få tilgang til websidene. Koble til AP -en du nettopp har opprettet, oppført i WiFi -nettverkene dine. Gå nå til nettleseren, skriv inn IP -adressen som ble konfigurert av deg i det siste trinnet, og gå til nettsiden.
• Webserverklassen tar navnet gitt til innganger ('tekst', 'knapp', 'radioknapp' osv.) Som argumenter. Det lagrer svarene til disse inngangene som argumenter, og vi kan få verdiene eller sjekke dem ved hjelp av args, arg, hasArg -metoder.

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 (); } annet hvis (server.arg ("ipv4")! = "") {dhcpSetManual (); } annet {dhcpSetDefault (); }

Trinn 4: Statisk IP -konfigurasjon

Så langt har vi forstått hvordan vi skal koble til AP og hvordan vi får verdiene fra inndatafeltene på nettsiden

I dette trinnet vil vi konfigurere Statisk IP

• Velg statisk IP -innstilling og klikk på Send -knappen. Du blir omdirigert til neste side.
• På neste side skriver du inn den statiske IP -adressen, gatewayadressen og undernettmasken. Denne siden vil bli vist som "/static" som håndteres av håndteringsstatisk tilbakeringingsmetode.
• Få verdien av tekstfelt ved hjelp av server.arg () -metoden.

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

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

• Nå blir disse verdiene seriellisert til et JSON -format.
• Deretter skriver vi JSON til SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = gateway;

root ["subnet"] = delnett;

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

if (root.printTo (fileToWrite)) {

Serial.println ("-Fil skrevet"); }

• Denne konfigurasjonen er lagret i SPIFFS. Senere leses disse verdiene fra SPIFFS.
• De statiske IP -verdiene blir deretter analysert fra JSON.

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

Trinn 5: DHCP -innstillinger

I dette trinnet vil vi konfigurere DHCP -innstillingene

Velg DHCP -innstillinger fra indekssiden og klikk på "Send"

• Du blir omdirigert til neste side. Skriv inn IP -adressen på neste side eller velg velg standard og klikk på "Send" -knappen for å sende inn svaret. Denne siden vil bli vist på "/dhcp" som håndteres av handleDHCP -tilbakeringingsmetode. Få verdien av tekstfelt ved hjelp av server.arg () -metoden. Velg standard avmerkingsboks når du klikker på. 192.168.4.1 IP vil bli gitt til enheten.
• Nå blir disse verdiene seriellisert til et JSON -format.
• Deretter skriver vi JSON til 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 ("-Fil skrevet"); }

• Denne konfigurasjonen er lagret i SPIFFS. Senere leses disse verdiene fra SPIFFS.
• Dhcp IP -verdiene blir deretter analysert fra JSON.

Filfil = SPIFFS.open ("/ip_set.txt", "r"); mens (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 ();}

Trinn 6: Lagre WiFi -legitimasjon

Foreløpig har vi valgt IP -konfigurasjonen. Nå må vi lagre brukerens wifi -legitimasjon. For å løse denne situasjonen. Vi har fulgt denne prosedyren.

• Så nå har vi enhetens AP -oppsett i DHCP- eller statisk IP -konfigurasjon som vi hadde valgt fra den fangede portalen som ble nevnt i de siste trinnene.
• La oss si at vi har valgt statisk IP -konfigurasjon.
• Vi vil konfigurere en softAP på denne IP -adressen.
• Etter å ha lest verdiene fra SPIFFS og analysert disse verdiene fra JSON. Vi vil konfigurere softAP på denne IP.
• Konverter IP -strengen til 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);

// **************** Parse byte fra strengen ****************** //

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

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

byte = strtoul (str, NULL, base);

str = strchr (str, sep);

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

gå i stykker;

}

str ++;

}}

Nå vil vi konfigurere softAP på denne IP

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Configuring softAP": "not connected"); Serial.println (WiFi.softAPIP ());

• Start nå webserveren og server en webside på denne IP -adressen. For å angi brukerens WiFi -legitimasjon.
• Nettsiden består av to tekstfelt for å angi SSID og passord.
• handleStaticForm er en tilbakeringingsmetode som betjener websiden.
• server.handleClient () tar seg av forespørselen og svarene til og fra nettsiden.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

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

server.handleClient (); }

HTML -skjemaet lagres i SPIFFS. vi ser etter passende argumenter ved hjelp av server.arg (). for å få verdien av SSID og passord

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

server.streamFile (fil, "tekst/html");

file.close ();

Trinn 7: Les og skriv fra SPIFFS

SPIFFS

Serielt perifert grensesnitt Flash File System, eller SPIFFS for kort. Det er et lett filsystem for mikrokontrollere med en SPI-flash-brikke. Den innebygde flash -brikken til ESP32 har god plass til nettsidene dine. Vi har også lagret nettsiden vår i Flash System. Det er noen få trinn vi må følge for å laste opp data til spiffs

Last ned verktøyet for dataopplasting av ESP 32 SPIFFS:

• I din Arduino skissebok -katalog, opprett verktøykatalog hvis den ikke eksisterer ennå
• Pakk ut verktøyet i verktøykatalogen (banen vil se ut som /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Start Arduino IDE på nytt
• Åpne en skisse (eller lag en ny og lagre den)
• Gå til skisse -katalogen (velg Skisse> Vis skisse -mappe)
• Lag en katalog som heter data og eventuelle filer du vil ha i filsystemet der. Vi har lastet opp HTML -siden vår med navnet webform.html
• Sørg for at du har valgt et kort, port og lukket seriell skjerm
• Velg Verktøy> ESP8266 Sketch Data Upload. Dette bør begynne å laste opp filene til ESP8266 flash -filsystemet. Når dette er gjort, vil IDE -statuslinjen vise SPIFFS Image Uploaded -melding.

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

void handleStatic () {

Filfil = SPIFFS.open ("/page_static.html", "r"); server.streamFile (fil, "tekst/html"); file.close ();}

Skriver til SPIFFS

Her skriver vi den lagrede innstillingen til SPIFFS slik at brukerne ikke trenger å gå gjennom disse trinnene når enheten tilbakestilles.

• Konverter argumentene mottatt fra nettsiden til JSON -objekter
• Skriv denne JSON til.txt -filen som er lagret i SPIFFS.

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

String gateway = String (server.arg ("gateway")); String subnet = String (server.arg ("subnet")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = gateway; root ["subnet"] = delnett; String JSONStatic; røye JSON [120]; root.printTo (seriell); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); File fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Feil ved åpning av SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("-Fil skrevet"); } annet {Serial.println ("-Feil ved skriving av fil"); } fileToWrite.close ();

Trinn 8: Samlet kode

Over -koden for HTML og ESP32 finnes i dette Github -depotet