ESP32 nelaisvės portalas, skirtas konfigūruoti statinius ir DHCP IP nustatymus: 8 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:47

ESP 32 yra įrenginys su integruotu „WiFi“ir BLE. Tai savotiška palaima daiktų interneto projektams. Tiesiog nurodykite savo SSID, slaptažodį ir IP konfigūracijas ir integruokite dalykus į debesį. Tačiau IP nustatymų ir vartotojo duomenų tvarkymas gali sukelti galvos skausmą vartotojui.

Ką daryti, jei vartotojas nori pakeisti „WiFi“prisijungimo duomenis?

Ką daryti, jei vartotojas nori pakeisti DHCP/statinio IP nustatymus?

ESP32 mirksėjimas kiekvieną kartą nėra patikimas ir net nėra šių problemų sprendimas. Šioje pamokoje mes parodysime.

• Kaip sukurti uždarą portalą.
• Interneto formos priegloba iš ESP32.
• Skaitymas ir rašymas iš SPIFFS ESP32.
• „Soft Access Point“sukūrimas ir prisijungimas prie stoties

1 žingsnis: Aparatūros ir programinės įrangos specifikacija

Techninės įrangos specifikacija

• ESP32 WiFi/BLE
• Belaidis temperatūros ir drėgmės jutiklis

Programinės įrangos specifikacija

„Arduino IDE“

2 veiksmas: sukurkite nelaisvės portalą

Nepriklausomas portalas yra tinklalapis, kuris rodomas naujai prisijungusiems vartotojams t, kol jiems suteikiama platesnė prieiga prie tinklo išteklių. Čia mes aptarnaujame tris tinklalapius, kad pasirinktume tarp DHCP ir statinių IP nustatymų. IP adresą į ESP galime apibrėžti dviem būdais.

• DHCP IP adresas- tai būdas dinamiškai priskirti įrenginiui IP adresą. Numatytasis ESP IP adresas yra 192.168.4.1
• Statinis IP adresas- nuolatinio IP adreso priskyrimas mūsų tinklo įrenginiui. norėdami suteikti įrenginiui statinį IP, turime apibrėžti IP adresą, šliuzo adresą ir potinklio kaukę.

Pirmajame tinklalapyje Vartotojui pateikiami radijo mygtukai, skirti pasirinkti tarp DHCP ir Statinio IP nustatymų. Kitame tinklalapyje turime pateikti su IP susijusią informaciją, kad galėtume tęsti.

HTML kodas

Tinklalapių HTML kodą rasite šioje „Github“saugykloje.

Norėdami sukurti HTML tinklalapius, galite naudoti bet kurį IDE arba teksto rengyklę, pvz., „Sublime“ar užrašų knygelę ++.

• Pirmiausia sukurkite HTML tinklalapį su dviem radijo mygtukais, kad pasirinktumėte DHCP arba Statiniai IP nustatymai.
• Dabar sukurkite mygtuką, kad pateiktumėte savo atsakymą
• Pavadinkite radijo mygtukus. ESP žiniatinklio serverio klasė ims šiuos pavadinimus kaip argumentus ir gaus atsakymą į radijo mygtukus naudodami šiuos argumentus
• Dabar įterpkite mygtuką „PATEIKTI“, kad išsiųstumėte atsakymą į įrenginį.
• Kituose tinklalapiuose yra teksto laukeliai. Teksto laukelyje nurodykite vardo vertę ir įvesties tipą ir pridėkite pateikimo mygtuką prie „PATEIKTI“, kad pateiktumėte atsakymą.
• Sukurkite mygtuką „RESET“, kad iš naujo nustatytumėte teksto lauko turinį.

// Radijo mygtuko DHCP nustatymas

Statinis IP nustatymas

// Įvesties teksto laukeliai

// Pateikimo mygtukas

input [type = "submitted"] {background-color: #3498DB; / * Žalia */ kraštinė: nėra; spalva: balta; paminkštinimas: 15px 48px; text-align: centre; teksto dekoravimas: nėra; ekranas: inline-block; šrifto dydis: 16 taškų; }

//Perkrovimo mygtukas

input [type = "submitted"] {background-color: #3498DB; / * Žalia */ kraštinė: nėra; spalva: balta; paminkštinimas: 15px 48px; text-align: centre; teksto dekoravimas: nėra; ekranas: inline-block; šrifto dydis: 16 taškų; }

3 veiksmas: žiniatinklio atsako gavimas iš tinklalapių į ESP32

Tinklalapių aptarnavimas iš ESP 32 įrenginio yra labai smagus. Tai gali būti bet kas - rodyti temperatūros duomenis tinklalapyje, nukreipti šviesos diodus iš tinkinto tinklalapio arba išsaugoti naudotojo „WiFi“prisijungimo duomenis per tinklalapį. Šiuo tikslu ESP 32 naudoja „WebServer“klasę tinklalapių serveriui.

• Pirma, sukurkite „WebServer“klasės egzempliorių 80 prievade (HTTP prievadas).
• Dabar nustatykite ESP įrenginį kaip „softAP“. Pateikite SSID ir prieigos raktą ir priskirkite įrenginiui statinį IP.
• Pradėkite serverį.

// ********* SSID ir leidimas AP **************/

const char *ssidAP = "duoti SSID"; const char *passAP = "leidimo raktas";

// ********* Statinė IP konfigūracija **************/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": "Nepavyko prisijungti");

vėlavimas (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Minkšto AP konfigūravimas": "Klaida konfigūracijoje"); Serial.println (WiFi.softAPIP ());

// paleisti serverį

server.begin ();

• Sukurkite ir pateikite URL naudodami įvairius atgalinius skambučius.
• ir tvarkyti klientą asinchroniškai, naudojant „handleClient“.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // tvarkyti atsakymus serveris.handleClient ();

• Norėdami pasiekti tinklalapius. Prisijunkite prie ką tik sukurto AP, nurodyto jūsų „WiFi“tinkluose. Dabar eikite į naršyklę, įveskite IP, kurį sukonfigūravote paskutiniame žingsnyje, ir eikite į tinklalapį.
• Žiniatinklio serverio klasė įvestims suteiktą pavadinimą („tekstas“, „mygtukas“, „radijo mygtukas“ir kt.) Laiko argumentu. Tai išsaugo šių įvesties atsakymus kaip argumentus, o mes galime gauti reikšmes arba jas patikrinti naudodami args, arg, hasArg metodus.

if (server.args ()> 0) {for (int i = 0; i <= server.args (); i ++) {

Serial.println (Eilutė (serverio.argName (i)) + '\ t' + Eilutė (server.arg (i)));

}

if (server.hasArg ("ipv4static") && server.hasArg ("vartai") && server.hasArg ("potinklis")) {staticSet (); } else if (server.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }

4 žingsnis: statinė IP konfigūracija

Iki šiol mes supratome, kaip prisijungti prie AP ir kaip gauti vertes iš tinklalapio įvesties laukų

Šiame žingsnyje mes sukonfigūruosime statinį IP

• Pasirinkite statinį IP nustatymą ir spustelėkite mygtuką Pateikti. Būsite nukreipti į kitą puslapį.
• Kitame puslapyje įveskite statinį IP adresą, šliuzo adresą ir potinklio kaukę, šis puslapis bus pateiktas naudojant „/static“, kuris tvarkomas naudojant statinio atšaukimo metodą.
• Gaukite teksto laukų vertę naudodami server.arg () metodą.

Styga ipv4static = Styga (serveris.arg ("ipv4static"));

Styginių šliuzas = String (server.arg ("gateway")); Eilutės potinklis = Eilutė (server.arg ("potinklis"));

• Dabar šios vertės yra suskirstytos į JSON formatą.
• Tada mes parašysime JSON į SPIFFS.

root ["statickey"] = "staticSet";

šaknis ["staticIP"] = ipv4static;

root ["gateway"] = vartai;

root ["potinklis"] = potinklis;

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

if (root.printTo (fileToWrite)) {

Serial.println ("-failas parašytas"); }

• Ši konfigūracija išsaugota SPIFFS. Vėliau šios vertės skaitomos iš SPIFFS.
• Tada statinės IP vertės analizuojamos iš JSON.

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

while (file.available ()) {

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

jei (debugLogData.length ()> 5) {

JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

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

Styga ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["vartai"];

Eilutės potinklisVertė = readRoot ["potinklis"];

5 veiksmas: DHCP nustatymai

Šiame etape sukonfigūruosime DHCP nustatymus

Rodyklės puslapyje pasirinkite DHCP nustatymus ir spustelėkite „Pateikti“

• Būsite nukreipti į kitą puslapį. Kitame puslapyje įveskite IP adresą arba pasirinkite pasirinkti numatytąjį ir spustelėkite mygtuką „Pateikti“, kad pateiktumėte atsakymą. Šis puslapis bus pateiktas adresu „/dhcp“, kuris tvarkomas pagal „handDHCP“atšaukimo metodą. Gaukite teksto laukų vertę naudodami server.arg () metodą. Kai spustelėsite, pasirinkite numatytąjį žymimąjį laukelį. 192.168.4.1 IP bus suteiktas įrenginiui.
• Dabar šios vertės yra suskirstytos į JSON formatą.
• Tada mes parašysime JSON į SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

šaknis ["dhcpIP"] = "192.168.4.1";

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

if (root.printTo (fileToWrite)) {

Serial.println ("-failas parašytas"); }

• Ši konfigūracija išsaugota SPIFFS. Vėliau šios vertės skaitomos iš SPIFFS.
• Tada dhcp IP reikšmės analizuojamos iš JSON.

Failo failas = 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")) {

Eilutė ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

6 veiksmas: išsaugokite „WiFi“prisijungimo duomenis

Šiuo metu mes pasirinkome IP konfigūraciją. Dabar turime išsaugoti vartotojo „wifi“prisijungimo duomenis. Norėdami išspręsti šią situaciją. Mes laikėmės šios procedūros.

• Taigi dabar mes turime savo įrenginio AP sąranką DHCP arba statinio IP konfigūracijoje, kurią pasirinkome iš paskutiniuose veiksmuose paminėto užrakto portalo.
• Tarkime, kad pasirinkome statinę IP konfigūraciją.
• Šiame IP sukonfigūruosime „softAP“.
• Perskaitę vertes iš SPIFFS ir išanalizavę šias vertes iš JSON. Mes sukonfigūruosime „softAP“šiuo IP.
• Konvertuokite IP eilutę į baitus.

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

// *************** Analizuoti baitus iš eilutės ******************

void parseBytes (const char* str, char sep, byte* baitai, int maxBytes, int bazė) {

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

baitų = strtoul (str, NULL, bazė);

str = strchr (str, sep);

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

pertrauka;

}

str ++;

}}

Dabar mes sukonfigūruosime „softAP“šiuo IP

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "SoftAP konfigūravimas": "neprisijungęs"); Serial.println (WiFi.softAPIP ());

• Dabar paleiskite žiniatinklio serverį ir pateikite tinklalapį šiuo IP adresu. Norėdami įvesti naudotojo „WiFi“prisijungimo duomenis.
• Tinklalapį sudaro du teksto laukai, skirti SSID ir slaptažodžiui įvesti.
• „handleStaticForm“yra atgalinio ryšio metodas, kuris aptarnauja tinklalapį.
• server.handleClient () rūpinasi užklausa ir atsakymais į tinklalapį ir iš jo.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

Laikmatis = milis ();

o (milis ()-Laikmatis <= SI intervalas) {

server.handleClient (); }

HTML forma išsaugoma SPIFFS formatu. mes patikriname tinkamus argumentus naudodami server.arg (). gauti SSID ir slaptažodžio reikšmę

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

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

file.close ();

7 žingsnis: skaitykite ir rašykite iš SPIFFS

SPIFFS

„Serial Peripheral Interface Flash File System“arba trumpai SPIFFS. Tai lengva failų sistema, skirta mikrovaldikliams su SPI „flash“mikroschema. ESP32 blykstės lustas turi daug vietos jūsų tinklalapiams. Mes taip pat išsaugojome savo tinklalapį „Flash“sistemoje. Norėdami įkelti duomenis į spiffs, turime atlikti kelis veiksmus

Atsisiųskite ESP 32 SPIFFS duomenų įkėlimo įrankį:

• „Arduino“eskizų knygos kataloge sukurkite įrankių katalogą, jei jo dar nėra
• Išpakuokite įrankį į įrankių katalogą (kelias atrodys kaip /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Iš naujo paleiskite „Arduino IDE“
• Atidarykite eskizą (arba sukurkite naują ir išsaugokite)
• Eikite į eskizų katalogą (pasirinkite Eskizas> Rodyti eskizo aplanką)
• Ten sukurkite katalogą, pavadintą „Duomenys“, ir visus norimus failus. Įkėlėme savo HTML puslapį pavadinimu webform.html
• Įsitikinkite, kad pasirinkote plokštę, prievadą ir uždarytą nuoseklųjį monitorių
• Pasirinkite Įrankiai> ESP8266 Sketch Data Upload. Tai turėtų pradėti įkelti failus į ESP8266 „flash“failų sistemą. Kai tai bus padaryta, IDE būsenos juostoje bus rodomas pranešimas SPIFFS Image Uploaded.

void rankenaDHCP () {Failo failas = SPIFFS.open ("/page_dhcp.html", "r"); server.streamFile (failas, "text/html"); file.close ();}

void handleStatic () {

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

Rašymas į SPIFFS

Čia įrašome išsaugotą nustatymą į SPIFFS, kad vartotojams nereikėtų atlikti šių veiksmų, kai įrenginys iš naujo nustatomas.

• Konvertuokite iš tinklalapio gautus argumentus į JSON objektus
• Įrašykite šį JSON į.txt failą, išsaugotą SPIFFS.

Styga ipv4static = Styga (serveris.arg ("ipv4static"));

Styginių šliuzas = String (server.arg ("gateway")); Eilutės potinklis = Eilutė (server.arg ("potinklis")); root ["statickey"] = "staticSet"; šaknis ["staticIP"] = ipv4static; root ["gateway"] = vartai; root ["potinklis"] = potinklis; Styga JSONStatic; char JSON [120]; root.printTo (Serial); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Failas fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Klaida atidarant SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("-failas parašytas"); } else {Serial.println ("-Klaida rašant failą"); } fileToWrite.close ();

8 žingsnis: bendras kodas

HTML ir ESP32 „Over“kodą galite rasti šioje „Github“saugykloje