ESP32 Captive Portal til konfiguration af statisk og DHCP IP -indstillinger: 8 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:28

ESP 32 er en enhed med integreret WiFi og BLE. Det er en slags velsignelse for IoT -projekterne. Bare giv dine SSID, adgangskode og IP -konfigurationer og integrer tingene i skyen. Men administration af IP -indstillinger og brugeroplysninger kan være en hovedpine for brugeren.

Hvad hvis brugeren vil ændre WiFi -legitimationsoplysningerne?

Hvad hvis brugeren vil ændre DHCP/statisk IP -indstillinger?

At blinke ESP32 hver gang er ikke pålideligt og ikke engang løsningen på disse problemer. Her i denne instruktive vil vi demonstrere.

• Sådan opretter du en captive portal.
• Hosting af en webformular fra ESP32.
• Læsning og skrivning fra SPIFFS ESP32.
• Oprettelse af et blødt adgangspunkt og forbindelse til en station

Trin 1: Specifikationer for hardware og software

Hardware specifikation

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

Softwarespecifikation

Arduino IDE

Trin 2: Oprettelse af en Captive Portal

En fanget portal er en webside, der vises for nyligt tilsluttede brugere, før de får bredere adgang til netværksressourcer. Her serverer vi tre websider at vælge mellem DHCP og statisk IP -indstillinger. vi kan definere IP -adressen til ESP på to måder.

• DHCP IP-adresse- det er en måde at dynamisk tildele IP-adressen til enheden. ESP's standard IP -adresse er 192.168.4.1
• Statisk IP-adresse- tildeling af en permanent IP-adresse til vores netværksenhed. For at levere den statiske IP til enheden skal vi definere IP -adressen, gateway -adressen og undernetmasken.

På den første webside får brugeren radioknapperne til at vælge mellem DHCP- og statisk IP -indstillinger. På den næste webside skal vi levere de IP -relaterede oplysninger for at fortsætte videre.

HTML -kode

HTML -koden til websider findes i dette Github -lager.

Du kan bruge enhver IDE eller teksteditor som Sublime eller notesblok ++ til at lave HTML -websider.

• Opret først en HTML -webside med to alternativknapper for at vælge mellem DHCP- og statisk IP -indstillinger.
• Opret nu knappen for at indsende dit svar
• Giv radioknapper et navn. ESP -webserverklassen tager disse navne som argumenter og får svaret fra radioknapperne ved hjælp af disse argumenter
• Indsæt nu en 'SEND' knap for at sende svaret til enheden.
• På de andre websider har vi tekstbokse. Giv navneværdien og indtastningstypen til tekstfeltet, og tilføj en send -knap for at 'SEND' indsende svaret.
• Opret en 'RESET' knap for at nulstille indholdet i tekstfeltet.

// Radioknap DHCP -indstilling

Statisk IP -indstilling

// Indtast tekstbokse

// Send knap

input [type = "indsend"] {background-color: #3498DB; / * Grøn */ kant: ingen; farve: hvid; polstring: 15px 48px; tekstjustering: center; tekst-dekoration: ingen; display: inline-blok; skrifttype: 16px; }

//Genstarts knap

input [type = "indsend"] {background-color: #3498DB; / * Grøn */ kant: ingen; farve: hvid; polstring: 15px 48px; tekstjustering: center; tekst-dekoration: ingen; display: inline-blok; skrifttype: 16px; }

Trin 3: Få websvaret fra websider til ESP32

Det er sjovt at betjene websider fra ESP 32 -enheden. Det kan være alt fra at vise temperaturdataene på websiden, dreje LED'erne fra den brugerdefinerede webside eller gemme brugerens WiFi -legitimationsoplysninger via en webside. Til dette formål bruger ESP 32 WebServer Class til at servere websider.

• Opret først en forekomst af WebServer -klassen ved port 80 (HTTP -port).
• Konfigurer nu ESP -enheden som softAP. Giv SSID og adgangsnøgle, og tildel en statisk IP til enheden.
• Start serveren.

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

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

// ********* Statisk IP -konfiguration **************/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": "Kunne ikke oprette forbindelse");

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

// start serveren

server.begin ();

• Opret og betjen URL'en ved hjælp af forskellige tilbagekald.
• og håndter klienten asynkront ved hjælp af handleClient.

server.on ("/", handleRoot);

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

• For at få adgang til websiderne. Opret forbindelse til det AP, du lige har oprettet, angivet i dine WiFi -netværk. Gå nu til browseren, indtast den IP, der blev konfigureret af dig i det sidste trin, og få adgang til websiden.
• Webserverklassen tager navnet på input ('tekst', 'knap', 'radiobutton'etc.) Som argumenter. Det gemmer svarene på disse input som argumenter, og vi kan få værdierne eller kontrollere dem ved hjælp af args, arg, hasArg -metoder.

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

Trin 4: Statisk IP -konfiguration

Hidtil har vi forstået, hvordan man opretter forbindelse til AP, og hvordan man får værdierne fra webstedets inputfelter

I dette trin konfigurerer vi den statiske IP

• Vælg den statiske IP -indstilling, og klik på knappen Send. Du bliver omdirigeret til den næste side.
• På den næste side skal du indtaste den statiske IP -adresse, gatewayadresse og subnetmaske, denne side vil blive vist som "/static", som håndteres ved håndtering af statisk tilbagekaldsmetode.
• Få værdien af tekstfelter ved hjælp af server.arg () -metoden.

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

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

• Nu er disse værdier serialiseret til et JSON -format.
• Derefter skriver vi JSON til SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = gateway;

root ["subnet"] = undernet;

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

hvis (root.printTo (fileToWrite)) {

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

• Denne konfiguration gemmes i SPIFFS. Senere læses disse værdier fra SPIFFS.
• De statiske IP -værdier analyseres derefter fra JSON.

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

mens (file.available ()) {

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

hvis (debugLogData.length ()> 5) {

JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

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

String ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot ["subnet"];

Trin 5: DHCP -indstillinger

I dette trin konfigurerer vi DHCP -indstillingerne

Vælg DHCP -indstillinger fra indekssiden, og klik på "Send"

• Du bliver omdirigeret til den næste side. Indtast IP -adressen på den næste side, eller vælg vælg standard, og klik på knappen "Send" for at indsende svaret. Denne side vil blive vist på "/dhcp", som håndteres af handleDHCP -tilbagekaldsmetode. Få værdien af tekstfelter ved hjælp af server.arg () -metoden. Vælg standard afkrydsningsfelt, når der klikkes på. 192.168.4.1 IP vil blive givet til enheden.
• Nu er disse værdier serialiseret til et JSON -format.
• Derefter skriver vi JSON til SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

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

hvis (root.printTo (fileToWrite)) {

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

• Denne konfiguration gemmes i SPIFFS. Senere læses disse værdier fra SPIFFS.
• Dhcp IP -værdierne analyseres derefter fra JSON.

Filfil = SPIFFS.open ("/ip_set.txt", "r"); mens (file.available ()) {debugLogData += char (file.read ()); } hvis (debugLogData.length ()> 5) {JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

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

String ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Trin 6: Gemme WiFi -legitimationsoplysninger

For nu har vi valgt IP -konfigurationen. Nu skal vi gemme brugerens wifi -legitimationsoplysninger. For at løse denne situation. Vi har fulgt denne procedure.

• Så nu har vi vores enheds AP -opsætning i DHCP eller statisk IP -konfiguration, som vi havde valgt fra den bundne portal nævnt i de sidste trin.
• Lad os sige, at vi har valgt statisk IP -konfiguration.
• Vi konfigurerer en softAP på denne IP.
• Efter at have læst værdierne fra SPIFFS og analyseret disse værdier fra JSON. Vi konfigurerer softAP på denne IP.
• Konverter IP -strengen til 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];

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

// **************** Parse bytes fra strengen ****************** //

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

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

pause;

}

str ++;

}}

Nu konfigurerer vi softAP på denne IP

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

• Start nu webserveren og server en webside på denne IP. For at indtaste brugerens WiFi -legitimationsoplysninger.
• Websiden består af to tekstfelter til indtastning af SSID og adgangskode.
• handleStaticForm er en tilbagekaldelsesmetode, der betjener websiden.
• server.handleClient () tager sig af anmodningen og svarene til og fra websiden.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

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

server.handleClient (); }

HTML -formularen gemmes i SPIFFS. vi kontrollerer de passende argumenter ved hjælp af server.arg (). for at få værdien af SSID og adgangskode

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

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

file.close ();

Trin 7: Læs og skriv fra SPIFFS

SPIFFS

Serielt perifert interface Flash File System, eller SPIFFS for kort. Det er et let filsystem til mikrokontrollere med en SPI-flashchip. Den indbyggede flashchip i ESP32 har masser af plads til dine websider. Vi har også gemt vores webside i Flash System. Der er et par trin, vi skal følge for at uploade data til spiffs

Download ESP 32 SPIFFS dataoverførselsværktøj:

• Opret værktøjskatalog i din Arduino -skitsebogskatalog, hvis den ikke findes endnu
• Pak værktøjet ud i værktøjskataloget (stien vil ligne /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Genstart Arduino IDE
• Åbn en skitse (eller opret en ny og gem den)
• Gå til skitsemappen (vælg Skitse> Vis skitsemappe)
• Opret et bibliotek med navnet data og eventuelle filer, du ønsker i filsystemet der. Vi har uploadet vores HTML -side med navnet webform.html
• Sørg for, at du har valgt et kort, en port og en lukket seriel skærm
• Vælg Værktøjer> ESP8266 Upload af skitsedata. Dette skulle begynde at uploade filerne til ESP8266 flash -filsystemet. Når det er gjort, viser IDE -statuslinjen SPIFFS Image Uploaded -meddelelse.

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 gemte indstilling til SPIFFS, så brugerne ikke skal skulle gennemgå disse trin, når enheden nulstilles.

• Konverter argumenterne modtaget fra websiden til JSON -objekter
• Skriv denne JSON til.txt -filen, der er gemt 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"] = undernet; String JSONStatic; char JSON [120]; root.printTo (seriel); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Fil fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Fejl ved åbning af SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("-fil skrevet"); } else {Serial.println ("-Fejl ved skrivning af fil"); } fileToWrite.close ();

Trin 8: Overordnet kode

Over -koden til HTML og ESP32 findes i dette Github -lager