ESP32 Captive Portal för att konfigurera statiska och DHCP IP -inställningar: 8 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:44

ESP 32 är en enhet med integrerad WiFi och BLE. Det är en välsignelse för IoT -projekten. Ge bara dina SSID, lösenord och IP -konfigurationer och integrera sakerna i molnet. Men att hantera IP -inställningarna och användaruppgifterna kan vara en huvudvärk för användaren.

Vad händer om användaren vill ändra WiFi -uppgifterna?

Vad händer om användaren vill ändra DHCP/statiska IP -inställningar?

Att blinka ESP32 varje gång är inte pålitligt och inte ens lösningen på dessa problem. Här i denna instruerbara kommer vi att demonstrera.

• Hur man skapar en fångad portal.
• Hosta ett webbformulär från ESP32.
• Läsa och skriva från SPIFFS ESP32.
• Skapa en mjuk åtkomstpunkt och ansluta till en station

Steg 1: Specifikationer för hårdvara och programvara

Hårdvaruspecifikation

• ESP32 WiFi/BLE
• Trådlös temperatur- och fuktsensor

Programvaruspecifikation

Arduino IDE

Steg 2: Skapa en Captive Portal

En captive portal är en webbsida som visas för nyanslutna användare t innan de får bredare åtkomst till nätverksresurser. Här serverar vi tre webbsidor att välja mellan DHCP och statiska IP -inställningar. vi kan definiera IP -adressen till ESP på två sätt.

• DHCP IP-adress- det är ett sätt att dynamiskt tilldela IP-adressen till enheten. ESP: s standard -IP -adress är 192.168.4.1
• Statisk IP-adress- tilldela en permanent IP-adress till vår nätverksenhet. För att tillhandahålla den statiska IP -adressen till enheten behöver vi definiera IP -adressen, gateway -adressen och subnätmask.

På den första webbsidan får användaren alternativknappar för att välja mellan DHCP- och statisk IP -inställningar. På nästa webbsida måste vi tillhandahålla den IP -relaterade informationen för att gå vidare.

HTML -kod

HTML -koden för webbsidor finns i detta Github -arkiv.

Du kan använda valfri IDE eller textredigerare som Sublime eller anteckningsblock ++ för att skapa HTML -webbsidor.

• Skapa först en HTML -webbsida som innehåller två alternativknappar för att välja mellan DHCP- och statiska IP -inställningar.
• Skapa nu knappen för att skicka ditt svar
• Ge ett namn till alternativknapparna. ESP -webbserverklassen tar dessa namn som argument och får svar från alternativknapparna med dessa argument
• Sätt nu in en "SKICKA" -knapp för att skicka svaret till enheten.
• På de andra webbsidorna har vi textrutor. Ge namnvärdet och inmatningstypen i textrutan och lägg till en skicka -knapp för att "SKICKA" skicka svaret.
• Skapa en "RESET" -knapp för att återställa textfältets innehåll.

// Radionknapp DHCP -inställning

Statisk IP -inställning

// Mata in textrutor

//Skickaknapp

input [type = "submit"] {background-color: #3498DB; / * Grön */ kant: ingen; färg vit; vaddering: 15px 48px; text-align: center; text-dekoration: ingen; display: inline-block; teckenstorlek: 16px; }

//Återställningsknapp

input [type = "submit"] {background-color: #3498DB; / * Grön */ kant: ingen; färg vit; vaddering: 15px 48px; text-align: center; text-dekoration: ingen; display: inline-block; teckenstorlek: 16px; }

Steg 3: Få webbsvaret från webbsidor till ESP32

Att visa webbsidor från ESP 32 -enheten är väldigt roligt. Det kan vara allt från att visa temperaturdata på webbsidan, vända LED -lamporna från den anpassade webbsidan eller lagra användarens WiFi -referenser via en webbsida. För detta ändamål använder ESP 32 WebServer Class till serverwebbsidor.

• Skapa först en instans av WebServer -klassen vid port 80 (HTTP -port).
• Ställ nu in ESP -enheten som softAP. Ge SSID och lösenord och tilldela enheten en statisk IP.
• Starta servern.

// ********* SSID och Pass för AP **************/

const char *ssidAP = "ge 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": "Det gick inte att ansluta");

fördröjning (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Configuring Soft AP": "Error in Configuration"); Serial.println (WiFi.softAPIP ());

// starta servern

server.begin ();

• Skapa och servera webbadressen med olika återuppringningar.
• och hantera klienten asynkront med handleClient.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // hantera svaren server.handleClient ();

• För att komma åt webbsidorna. Anslut till den AP som du just skapat, listad i dina WiFi -nätverk. Gå nu till webbläsaren, ange IP -adressen som konfigurerades av dig i det sista steget och öppna webbsidan.
• Webbserverklassen tar namnet på inmatningar ("text", "knapp", "radioknapp" osv.) Som argument. Det sparar svaren på dessa ingångar som argument och vi kan få värdena eller kontrollera dem med args, arg, hasArg -metoder.

if (server.args ()> 0) {för (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 (); } annars if (server.arg ("ipv4")! = "") {dhcpSetManual (); } annat {dhcpSetDefault (); }

Steg 4: Statisk IP -konfiguration

Hittills har vi förstått hur man ansluter till AP och hur man får värdena från webbsidans inmatningsfält

I det här steget konfigurerar vi den statiska IP: n

• Välj den statiska IP -inställningen och klicka på knappen Skicka. Du kommer att omdirigeras till nästa sida.
• På nästa sida anger du den statiska IP -adressen, gatewayadressen och subnätmask. Den här sidan kommer att visas på "/static" som hanteras av hantera statisk återuppringningsmetod.
• Få värdet på textfält med server.arg () -metoden.

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

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

• Nu är dessa värden serialiserade till ett JSON -format.
• Sedan skriver vi JSON till SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = gateway;

root ["subnät"] = delnät;

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

if (root.printTo (fileToWrite)) {

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

• Denna konfiguration sparas i SPIFFS. Senare läses dessa värden från SPIFFS.
• De statiska IP -värdena analyseras sedan från 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"];

Steg 5: DHCP -inställningar

I det här steget kommer vi att konfigurera DHCP -inställningarna

Välj DHCP -inställningar från indexsidan och klicka på "Skicka"

• Du kommer att omdirigeras till nästa sida. Ange IP -adressen på nästa sida eller välj välj standard och klicka på "Skicka" -knappen för att skicka svaret. Den här sidan kommer att visas på "/dhcp" som hanteras av handleDHCP -återuppringningsmetod. Få värdet på textfält med server.arg () -metoden. När du klickar in väljer du standardrutan. 192.168.4.1 IP kommer att ges till enheten.
• Nu är dessa värden serialiserade till ett JSON -format.
• Sedan skriver vi JSON till 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 skriven"); }

• Denna konfiguration sparas i SPIFFS. Senare läses dessa värden från SPIFFS.
• Dhcp IP -värdena analyseras sedan från JSON.

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

Steg 6: Spara WiFi -referenser

För tillfället har vi valt IP -konfiguration. Nu måste vi spara användarens wifi -uppgifter. För att lösa denna situation. Vi har följt denna procedur.

• Så nu har vi vår enhets AP -installation i DHCP- eller statisk IP -konfiguration som vi hade valt från den fångna portalen som nämns i de senaste stegen.
• Låt oss säga att vi har valt statisk IP -konfiguration.
• Vi kommer att konfigurera en softAP på denna IP.
• Efter att ha läst värdena från SPIFFS och analyserat dessa värden från JSON. Vi kommer att konfigurera softAP på denna IP.
• Konvertera IP -strängen till 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);

// **************** Analysera byte från strängen ****************** //

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

för (int i = 0; i <maxBytes; i ++) {

byte = strtoul (str, NULL, bas);

str = strchr (str, sep);

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

ha sönder;

}

str ++;

}}

Nu kommer vi att konfigurera softAP på denna IP

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

• Starta nu webbservern och servera en webbsida på denna IP. För att ange användarens WiFi -referenser.
• Webbsidan består av två textfält för att ange SSID och lösenord.
• handleStaticForm är en återuppringningsmetod som serverar webbsidan.
• server.handleClient () tar hand om förfrågan och svar till och från webbsidan.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

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

server.handleClient (); }

HTML -formuläret sparas i SPIFFS. vi söker efter lämpliga argument med server.arg (). för att få värdet på SSID och lösenord

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

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

file.close ();

Steg 7: Läs och skriv från SPIFFS

SPIFFS

Seriellt perifert gränssnitt Flash File System, eller SPIFFS för kort. Det är ett lättviktigt filsystem för mikrokontroller med ett SPI-flashchip. Det inbyggda flashchippet i ESP32 har gott om plats för dina webbsidor. Vi har också lagrat vår webbsida i Flash System. Det finns några steg vi måste följa för att ladda upp data till spiffs

Ladda ner ESP 32 SPIFFS dataöverföringsverktyg:

• Skapa verktygskatalog i din Arduino -skissbokskatalog om den inte finns ännu
• Packa upp verktyget i verktygskatalogen (sökvägen kommer att se ut som /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Starta om Arduino IDE
• Öppna en skiss (eller skapa en ny och spara den)
• Gå till skisskatalogen (välj Skiss> Visa skissmapp)
• Skapa en katalog som heter data och alla filer du vill ha i filsystemet där. Vi har laddat upp vår HTML -sida med namnet webform.html
• Se till att du har valt ett kort, en port och en stängd seriell bildskärm
• Välj Verktyg> ESP8266 Sketch Data Upload. Detta bör börja ladda upp filerna till ESP8266 flash -filsystemet. När det är gjort visar IDE -statusfältet SPIFFS Image Uploaded -meddelande.

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

void handleStatic () {

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

Skriver till SPIFFS

Här skriver vi den sparade inställningen till SPIFFS så att användare inte ska behöva gå igenom dessa steg när enheten återställs.

• Konvertera argumenten från webbsidan till JSON -objekt
• Skriv denna JSON till.txt -filen som sparats 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 ["subnät"] = delnät; String JSONStatic; röding 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 ("Fel när SPIFFS öppnades"); } if (fileToWrite.print (JSON)) {Serial.println ("-Filskriven"); } else {Serial.println ("-Fel vid skrivning av fil"); } fileToWrite.close ();

Steg 8: Övergripande kod

Överkoden för HTML och ESP32 finns i detta Github -arkiv