ESP32 Captive Portal om statiese en DHCP IP -instellings op te stel: 8 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:25

ESP 32 is 'n toestel met geïntegreerde WiFi en BLE. Dit is 'n goeie voorsprong vir die IoT -projekte. Gee net u SSID, wagwoord en IP -konfigurasies en integreer die dinge in die wolk. Maar die bestuur van die IP -instellings en gebruikersbewyse kan vir die gebruiker 'n hoofpyn wees.

Wat as die gebruiker die WiFi -geloofsbriewe wil verander?

Wat as die gebruiker die DHCP/Statiese IP -instellings wil verander?

Elke keer dat die ESP32 flits, is nie betroubaar nie, en selfs nie die oplossing vir hierdie probleme nie. Hier in hierdie instruksies gaan ons demonstreer.

• Hoe om 'n gevange portaal te skep.
• Die aanbied van 'n webvorm vanaf die ESP32.
• Lees en skryf van SPIFFS ESP32.
• Skep 'n sagte toegangspunt en maak verbinding met 'n stasie

Stap 1: Spesifikasie van hardeware en sagteware

Hardeware spesifikasie

• ESP32 WiFi/BLE
• Draadlose temperatuur- en humiditeitsensor

Sagteware spesifikasie

Arduino IDE

Stap 2: Skep 'n Captive Portal

'N Gevange portaal is 'n webbladsy wat aan nuut gekoppelde gebruikers vertoon word voordat hulle breër toegang tot netwerkhulpbronne verleen word. Hier bedien ons drie webblaaie om tussen DHCP en statiese IP -instellings te kies. ons kan die IP -adres op twee maniere vir ESP definieer.

• DHCP IP-adres- dit is 'n manier om die IP-adres dinamies aan die toestel toe te ken. Die standaard IP -adres van die ESP is 192.168.4.1
• Statiese IP-adres- 'n permanente IP-adres toewys aan ons netwerkapparaat. Om die statiese IP aan die toestel te verskaf, moet ons die IP -adres, gateway -adres en subnetmasker definieer.

Op die eerste webbladsy word aan die gebruiker die radioknoppies voorsien om tussen DHCP- en statiese IP -instellings te kies. Op die volgende webblad moet ons die IP -verwante inligting verskaf om verder te gaan.

HTML -kode

Die HTML -kode vir webblaaie kan gevind word in hierdie Github -bewaarplek.

U kan enige IDE of teksredakteur soos Sublime of notepad ++ gebruik om HTML -webblaaie te maak.

• Maak eers 'n HTML -webblad met twee radioknoppies om tussen DHCP en Statiese IP -instellings te kies.
• Skep nou die knoppie om u antwoord in te dien
• Gee 'n naam aan die radioknoppies. Die ESP -webbedienerklas neem hierdie name as argumente en kry die reaksie van die radioknoppies deur hierdie argumente te gebruik
• Voeg nou 'SUBMIT' -knoppie in om die antwoord na die toestel te stuur.
• Op die ander webblaaie het ons tekskassies. Gee die naamwaarde en invoertipe in die tekskassie en voeg 'n stuurknoppie by om 'SEND' die antwoord in te dien.
• Skep 'n 'RESET' -knoppie om die inhoud van die teksveld terug te stel.

// Radioknoppie DHCP -instelling

Statiese IP -instelling

// Teksblokkies invoer

// Dien knoppie in

input [type = "submit"] {agtergrond-kleur: #3498DB; / * Groen */ grens: geen; kleur: wit; opvulling: 15px 48px; teksbelyn: middel; teksversiering: geen; vertoon: inline-blok; lettergrootte: 16 px; }

// Herstelknoppie

input [type = "submit"] {agtergrond-kleur: #3498DB; / * Groen */ grens: geen; kleur: wit; opvulling: 15px 48px; teksbelyn: middel; teksversiering: geen; vertoon: inline-blok; lettergrootte: 16 px; }

Stap 3: Kry die webrespons van webbladsye na ESP32

Dit is baie lekker om webblaaie vanaf die ESP 32 -toestel te bedien. Dit kan alles wees van die vertoon van die temperatuurdata op die webblad, die omskakeling van die LED's van die pasgemaakte webblad of die stoor van die gebruikers WiFi -geloofsbriewe op 'n webblad. Vir hierdie doel gebruik ESP 32 WebServer Class om webblaaie te bedien.

• Skep eers 'n instansie van WebServer -klas by poort 80 (HTTP -poort).
• Stel nou die ESP -toestel op as softAP. Gee die SSID en wagwoord en ken 'n statiese IP aan die toestel toe.
• Begin die bediener.

// ********* SSID en Pas vir AP **************/

const char *ssidAP = "gee SSID"; const char *passAP = "slaagsleutel";

// ********* Statiese IP -konfigurasie **************/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)? "Sagte-AP opstelling": "Kon nie koppel nie");

vertraging (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Configuring Soft AP": "Konfigurasiefout"); Serial.println (WiFi.softAPIP ());

// begin die bediener

bediener.begin ();

• Skep en bedien die URL met verskillende terugbelle.
• en hanteer die kliënt asynchroon met behulp van handleClient.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // hanteer die antwoorde server.handleClient ();

• Om toegang tot die webblaaie te verkry. Koppel aan die AP wat u pas geskep het, wat op u WiFi -netwerke verskyn. Gaan nou na die blaaier, voer die IP in wat u in die laaste stap gekonfigureer het en kry toegang tot die webblad.
• Webbedienerklas neem die naam wat aan insette gegee word ('teks', 'knoppie', 'radioknoppie' ens.) As argumente. Dit stoor die reaksies van hierdie insette as argumente, en ons kan die waardes kry of dit kontroleer met behulp van args, arg, hasArg -metodes.

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

Stap 4: Statiese IP -konfigurasie

Tot dusver het ons verstaan hoe om aan te sluit by AP en hoe om die waardes uit die invoervelde van die webblad te kry

In hierdie stap stel ons die statiese IP op

• Kies die statiese IP -instelling en klik op die knoppie Submit. U sal na die volgende bladsy herlei word.
• Voer op die volgende bladsy die statiese IP -adres, gateway -adres en subnetmasker in; hierdie bladsy word op '/static' bedien, wat hanteer word deur 'n handmatige terugbelmetode.
• Kry die waarde van teksvelde met behulp van server.arg () metode.

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

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

• Hierdie waardes word nou in 'n JSON -formaat opgedeel.
• Dan skryf ons die JSON na SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = gateway;

root ["subnet"] = subnet;

Lêer fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("-lêer geskryf"); }

• Hierdie opset word in SPIFFS gestoor. Hierdie waardes word later uit SPIFFS gelees.
• Die statiese IP -waardes word dan van JSON ontleed.

Lêer lêer = SPIFFS.open ("/ip_set.txt", "r");

terwyl (file.available ()) {

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

as (debugLogData.length ()> 5) {

JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

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

String ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot ["subnet"];

Stap 5: DHCP -instellings

In hierdie stap stel ons die DHCP -instellings op

Kies die DHCP -instellings op die indeksbladsy en klik op "Submit"

• U sal na die volgende bladsy herlei word. Voer die IP -adres op die volgende bladsy in, of kies standaard, en klik op die "Submit" -knoppie om die antwoord in te dien. Hierdie bladsy word bedien by "/dhcp" wat hanteer word deur die handleDHCP -terugbelmetode. Kry die waarde van teksvelde met behulp van server.arg () metode. As u daarop klik, kies die standaard boks. die 192.168.4.1 IP sal aan die toestel gegee word.
• Hierdie waardes word nou in 'n JSON -formaat opgedeel.
• Dan skryf ons die JSON na SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

Lêer fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("-lêer geskryf"); }

• Hierdie opset word in SPIFFS gestoor. Hierdie waardes word later uit SPIFFS gelees.
• Die dhcp IP -waardes word dan van JSON ontleed.

Lêerlêer = SPIFFS.open ("/ip_set.txt", "r"); terwyl (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 ();}

Stap 6: Stoor WiFi -geloofsbriewe

Vir eers het ons die IP -konfigurasie gekies. Nou moet ons die wifi -geloofsbriewe van die gebruiker stoor. Om hierdie situasie op te los. Ons het hierdie prosedure gevolg.

• Ons het dus ons AP -toestel opgestel in DHCP- of statiese IP -konfigurasie wat ons gekies het uit die gevange portaal wat in die laaste stappe genoem is.
• Gestel ons het 'n statiese IP -opset gekies.
• Ons sal 'n softAP op hierdie IP instel.
• Na die lees van die waardes van SPIFFS en die ontleding van hierdie waardes van JSON. Ons sal die softAP op hierdie IP instel.
• Skakel die IP -string om in 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);

// **************** Ontleed grepe van string ****************** //

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

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

grepe = strtoul (str, NULL, basis);

str = strchr (str, sep);

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

breek;

}

str ++;

}}

Nou sal ons die softAP op hierdie IP instel

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

• Begin nou die webbediener en bedien 'n webblad op hierdie IP. Om die WiFi -geloofsbriewe van die gebruiker in te voer.
• Die webblad bestaan uit twee teksvelde om SSID en wagwoord in te voer.
• handleStaticForm is 'n terugbelmetode wat die webblad bedien.
• server.handleClient () sorg vir die versoek en antwoorde van en na die webblad.

bediener.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

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

server.handleClient (); }

Die HTML -vorm word in SPIFFS gestoor. ons kyk na die geskikte argumente met behulp van server.arg (). om die waarde van SSID en wagwoord te kry

Lêer lêer = SPIFFS.open ("/WiFi.html", "r");

server.streamFile (lêer, "text/html");

file.close ();

Stap 7: Lees en skryf vanuit SPIFFS

SPIFFS

Seriële perifere koppelvlak Flash -lêerstelsel, of kortweg SPIFFS. Dit is 'n ligte lêerstelsel vir mikrobeheerders met 'n SPI-flitsskyfie. Die ingeboude flitschip van die ESP32 het baie ruimte vir u webblaaie. Ons het ook ons webblad in Flash System gestoor. Daar is 'n paar stappe wat ons moet volg om data na spiffs op te laai

Laai die ESP 32 SPIFFS-data-oplaai-hulpmiddel af:

• Maak in u Arduino -sketsboekgids 'n gereedskapgids as dit nog nie bestaan nie
• Pak die gereedskap uit in die gids met gereedskap (die pad sal soos /Arduino/tools/ESP32FS/tool/esp32fs.jar lyk)
• Herbegin Arduino IDE
• Maak 'n skets oop (of skep 'n nuwe en stoor dit)
• Gaan na die sketsgids (kies Skets> Wys sketsgids)
• Skep 'n gids met die naam data en alle lêers wat u in die lêerstelsel wil hê. Ons het ons HTML -bladsy met die naam webform.html opgelaai
• Maak seker dat u 'n bord, poort en geslote seriële monitor gekies het
• Kies Tools> ESP8266 Sketsdata -oplaai. Dit moet begin om die lêers na die ESP8266 -lêerstelsel op te laai. As dit klaar is, sal die IDE -statusbalk die SPIFFS -prentopgelaaide boodskap vertoon.

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

leegte handleStatic () {

Lêer lêer = SPIFFS.open ("/page_static.html", "r"); server.streamFile (lêer, "text/html"); file.close ();}

Skryf aan SPIFFS

Hier skryf ons die gestoorde instelling aan die SPIFFS sodat gebruikers nie hierdie stappe hoef te ondergaan wanneer die toestel herstel word nie.

• Skakel die argumente wat van die webblad ontvang is om na JSON -voorwerpe
• Skryf hierdie JSON in die.txt -lêer wat in SPIFFS gestoor is.

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"] = subnet; String JSONStatic; char JSON [120]; root.printTo (reeks); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Lêer fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Fout tydens opening van SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("-lêer geskryf"); } anders {Serial.println ("-Fout by die skryf van lêer"); } fileToWrite.close ();

Stap 8: Algemene kode

Die Over -kode vir HTML en ESP32 kan gevind word in hierdie Github -bewaarplek