ESP32 Portali i kapur për të konfiguruar cilësimet IP statike dhe DHCP: 8 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:19

ESP 32 është një pajisje me WiFi dhe BLE të integruar. Kindshtë një lloj ndihme për projektet IoT. Thjesht jepni konfigurimin tuaj SSID, fjalëkalimin dhe IP dhe integroni gjërat në cloud. Por, menaxhimi i cilësimeve IP dhe kredencialet e përdoruesit mund të jetë një dhimbje koke për përdoruesit.

Po nëse Përdoruesi dëshiron të ndryshojë kredencialet WiFi?

Po sikur përdoruesi të ndryshojë cilësimet e DHCP/IP statike?

Ndezja e ESP32 çdo herë nuk është e besueshme dhe as zgjidhje për këto probleme. Këtu në këtë udhëzues do të demonstrojmë.

• Si të krijoni një portal të kapur.
• Pritja e një forme uebi nga ESP32.
• Leximi dhe Shkrimi nga SPIFFS ESP32.
• Krijimi i një Pike të butë hyrëse dhe lidhja me një stacion

Hapi 1: Specifikimet e harduerit dhe softuerit

Specifikimet e harduerit

• ESP32 WiFi/BLE
• Sensori i temperaturës dhe lagështisë pa tel

Specifikimi i Softuerit

Arduino IDE

Hapi 2: Krijimi i një Portali të Kapur

Një portal i kapur është një faqe në internet që u shfaqet përdoruesve të sapo lidhur para se t'u jepet qasje më e gjerë në burimet e rrjetit. Këtu po shërbejmë tre faqe në internet për të zgjedhur midis DHCP dhe cilësimeve IP statike. ne mund të përcaktojmë adresën IP të ESP në dy mënyra.

• Adresa IP DHCP- është një mënyrë për të caktuar në mënyrë dinamike adresën IP të pajisjes. Adresa IP e paracaktuar e ESP është 192.168.4.1
• Adresa IP statike- caktimi i një Adresa IP të përhershme në pajisjen tonë të rrjetit. për të siguruar IP statike për pajisjen duhet të përcaktojmë adresën IP, adresën e portës dhe maskën e nën -rrjetës.

Në faqen e parë në internet, Përdoruesit i sigurohen butonat e radios për të zgjedhur midis cilësimeve të DHCP dhe IP statike. Në faqen tjetër, ne duhet të sigurojmë informacionin e lidhur me IP për të vazhduar më tej.

Kodi HTML

Kodi HTML për faqet e internetit mund të gjendet në këtë depo Github.

Ju mund të përdorni çdo redaktues teksti ose IDE si Sublime ose notepad ++ për të bërë faqe në internet HTML.

• Së pari krijoni një faqe në internet HTML që përmban dy butona radio për të zgjedhur midis DHCP dhe cilësimeve IP statike.
• Tani krijoni butonin për të paraqitur përgjigjen tuaj
• Jepni ndonjë emër butonave të radios. Klasa e serverit ESP në internet do t'i marrë këto emra si argumente dhe do të marrë përgjigjen e butonave të radios duke përdorur këto argumente
• Tani futni një buton 'SUBMIT' për të dërguar përgjigjen në pajisje.
• Në faqet e tjera të internetit, ne kemi kuti teksti. Jepni vlerën e emrit dhe llojin e hyrjes në kutinë e tekstit dhe shtoni një buton dorëzimi në 'PUBRDORIM' dorëzoni përgjigjen.
• Krijoni një buton 'RESET' për të rivendosur përmbajtjen e fushës së tekstit.

// Cilësimi i DHCP i Butonit të Radios

Vendosja IP IP statike

// Kutitë e tekstit hyrës

// Butoni i Paraqitjes

input [type = "submit"] {background-color: #3498DB; / * E gjelbër */ kufiri: asnjë; ngjyra: e bardhë; mbushje: 15px 48px; text-align: qendra; dekorimi i tekstit: asnjë; ekrani: inline-block; font-size: 16px; }

// Butoni i rivendosjes

input [type = "submit"] {background-color: #3498DB; / * E gjelbër */ kufiri: asnjë; ngjyra: e bardhë; mbushje: 15px 48px; text-align: qendra; dekorimi i tekstit: asnjë; ekrani: inline-block; font-size: 16px; }

Hapi 3: Marrja e përgjigjes në internet nga faqet e internetit në ESP32

Shërbimi i faqeve të internetit nga pajisja ESP 32 është një kënaqësi e madhe. Mund të jetë çdo gjë nga shfaqja e të dhënave të temperaturës në faqen në internet, kthimi i udhëzimeve nga faqja e personalizuar e internetit ose ruajtja e kredencialeve të Përdoruesit WiFi përmes një faqe në internet. Për këtë qëllim, ESP 32 përdor Class WebServer për të serveruar faqet e internetit.

• Së pari, krijoni një shembull të klasës WebServer në portin 80 (porta
• Tani vendosni pajisjen ESP si softAP. Jepni SSID dhe çelësin e kalimit dhe caktoni një IP statike në pajisje.
• Filloni serverin.

// ********* SSID dhe Pass për AP **************/

const char *ssidAP = "jep SSID"; const char *passAP = "çelësi i kalimit";

// ********* Konfigurimi statik i IP **************/IPAdresa ad_local_IP (192, 168, 1, 77); Adresa IP_gateway (192, 168, 1, 254); Adresa IP_subnet (255, 255, 255, 0);

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

Modaliteti WiFi (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "Soft-AP setup": "Lidhja dështoi");

vonesë (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Konfigurimi i Soft AP": "Gabim në Konfigurim"); Serial.println (WiFi.softAPIP ());

// filloni serverin

server.filloj ();

• Krijoni dhe shërbeni URL duke përdorur thirrje të ndryshme.
• dhe trajtojeni klientin në mënyrë asinkrone duke përdorur handleClient.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // trajtoni përgjigjet server.handleClient ();

• Për të hyrë në faqet e internetit. Lidhuni me AP që sapo keni krijuar, të listuara brenda rrjeteve tuaja WiFi. Tani, shkoni te shfletuesi, Futni IP -në e konfiguruar në hapin e fundit dhe hyni në faqen e internetit.
• Klasa e serverit të uebit merr emrin e dhënë hyrjeve ('tekst', 'buton', 'radiobutton'etc.) Si argumente. Ajo ruan përgjigjet e këtyre hyrjeve si argumente dhe ne mund të marrim vlerat ose t'i kontrollojmë ato duke përdorur metoda args, arg, hasArg.

nëse (server.args ()> 0) {pë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 (); } tjetër if (server.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }

Hapi 4: Konfigurimi statik i IP

Deri më tani ne kemi kuptuar se si të lidhemi me AP dhe si të marrim vlerat nga fushat hyrëse të faqes në internet

Në këtë hap, ne do të konfigurojmë IP Static

• Zgjidhni cilësimin IP statik dhe klikoni në butonin Paraqit. Do të ridrejtoheni në faqen tjetër.
• Në faqen tjetër futni adresën IP statike, adresën e hyrjes dhe maskën e nën -rrjetës kjo faqe do të shërbehet në "/static" e cila trajtohet me metodën e trajtimit statik të thirrjes statike.
• Merrni vlerën e fushave të tekstit duke përdorur metodën server.arg ().

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

String gateway = String (server.arg ("gateway")); Nën -rrjeti i vargut = String (server.arg ("nën -rrjet"));

• Tani, këto vlera serializohen në një format JSON.
• Pastaj ne do t'i shkruajmë JSON SPIFFS.

rrënjë ["statickey"] = "staticSet";

rrënjë ["staticIP"] = ipv4static;

rrënjë ["gateway"] = portë hyrëse;

rrënjë ["nënrrjet"] = nënrrjet;

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

if (root.printTo (fileToWrite)) {

Serial.println ("-Skedari është shkruar"); }

• Ky konfigurim ruhet në SPIFFS. Më vonë, këto vlera lexohen nga SPIFFS.
• Vlerat statike të IP -së analizohen më pas nga JSON.

Skedari i skedarit = SPIFFS.open ("/ip_set.txt", "r");

ndërsa (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"];

Hapi 5: Cilësimet e DHCP

Në këtë hap, ne do të konfigurojmë cilësimet e DHCP

Zgjidhni Cilësimet e DHCP nga faqja e indeksit dhe klikoni në "Paraqit"

• Do të ridrejtoheni në faqen tjetër. Në faqen tjetër futni adresën IP ose zgjidhni zgjidhni default dhe klikoni në butonin "Paraqit" për të paraqitur përgjigjen. Kjo faqe do të shërbehet në "/dhcp" e cila trajtohet me metodën e kthimit të thirrjes handleDHCP. Merrni vlerën e fushave të tekstit duke përdorur metodën server.arg (). Kur klikoni në, zgjidhni kutinë e parazgjedhur të zgjedhjes. IP 192.168.4.1 do t'i jepet pajisjes.
• Tani, këto vlera serializohen në një format JSON.
• Pastaj ne do t'i shkruajmë JSON SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

rrënjë ["dhcpManual"] = "dhcpManual";

rrënja ["dhcpIP"] = "192.168.4.1";

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

if (root.printTo (fileToWrite)) {

Serial.println ("-Skedari është shkruar"); }

• Ky konfigurim ruhet në SPIFFS. Më vonë, këto vlera lexohen nga SPIFFS.
• Vlerat e dhcp IP analizohen më pas nga JSON.

Skedari i skedarit = SPIFFS.open ("/ip_set.txt", "r"); ndërsa (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 ();}

Hapi 6: Ruajtja e kredencialeve të WiFi

Tani për tani, ne kemi zgjedhur konfigurimin IP. Tani duhet të ruajmë kredencialet wifi të Përdoruesit. Për të zgjidhur këtë situatë. Ne e kemi ndjekur këtë procedurë.

• Pra, tani kemi konfigurimin e pajisjes sonë AP në konfigurimin DHCP ose Static IP të cilin e kishim zgjedhur nga portali robër i përmendur në hapat e fundit.
• Le të themi se kemi zgjedhur konfigurimin IP statik.
• Ne do të konfigurojmë një softAP në këtë IP.
• Pas leximit të vlerave nga SPIFFS dhe analizimit të këtyre vlerave nga JSON. Ne do të konfigurojmë softAP në këtë IP.
• Shndërroni IP String në 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];

Adresa IP_local (ip0, ip1, ip2, ip3);

// *************** Analizo byte nga vargu ***************** //

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

për (int i = 0; i <maxBytes; i ++) {

byte = strtoul (str, NULL, bazë);

str = strchr (str, sep);

nëse (str == NULL || *str == '\ 0') {

pushim;

}

str ++;

}}

Tani do të konfigurojmë softAP në këtë IP

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Konfigurimi i softAP": "jo i lidhur"); Serial.println (WiFi.softAPIP ());

• Tani filloni serverin në internet dhe shërbeni një faqe në internet në këtë IP. Për të futur Kredencialet WiFi të Përdoruesit.
• Faqja e internetit përbëhet nga dy fusha teksti për të futur SSID dhe fjalëkalim.
• handleStaticForm është një metodë e kthimit në telefon që i shërben uebfaqes.
• server.handleClient () kujdeset për kërkesën dhe përgjigjet në dhe nga faqja e internetit.

server.filloj ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STIMER = millis ();

ndërsa (millis ()-STimer <= SInterval) {

server.handleClient (); }

Forma HTML ruhet në SPIFFS. ne kontrollojmë për argumentet e përshtatshme duke përdorur server.arg (). për të marrë vlerën e SSID dhe Fjalëkalimi

Skedari i skedarit = SPIFFS.open ("/WiFi.html", "r");

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

file.close ();

Hapi 7: Lexoni dhe Shkruani Nga SPIFFS

SPIFFS

Serial Periferike Ndërfaqja Flash File System, ose shkurt SPIFFS. It'sshtë një sistem skedarësh me peshë të lehtë për mikrokontrolluesit me një çip flash SPI. Çipi flash në bord i ESP32 ka shumë hapësirë për faqet tuaja në internet. Ne gjithashtu kemi ruajtur faqen tonë në Flash System. Ka disa hapa që duhet të ndjekim për të ngarkuar të dhëna në spiffs

Shkarkoni mjetin e ngarkimit të të dhënave ESP 32 SPIFFS:

• Në drejtorinë tuaj të skicave Arduino, krijoni drejtorinë e mjeteve nëse nuk ekziston ende
• Shpaketoni mjetin në drejtorinë e mjeteve (rruga do të duket si /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Rinisni Arduino IDE
• Hapni një skicë (ose krijoni një të re dhe ruajeni)
• Shkoni te drejtoria e skicave (zgjidhni Skicë> Shfaq skedarin e skicës)
• Krijoni një drejtori të quajtur të dhëna dhe çdo skedar që dëshironi në sistemin e skedarëve atje. Ne kemi ngarkuar faqen tonë HTML me emrin webform.html
• Sigurohuni që keni zgjedhur një tabelë, port dhe monitor të mbyllur serial
• Zgjidhni Veglat> Ngarkimi i të dhënave të skicës ESP8266. Kjo duhet të fillojë ngarkimin e skedarëve në sistemin e skedarëve flash ESP8266. Kur të mbarojë, shiriti i statusit IDE do të shfaq mesazhin SPIFFS Uploaded Image.

dorezë e pavlefshmeDHCP () {Skedari i skedarit = SPIFFS.open ("/page_dhcp.html", "r"); server.streamFile (skedari, "tekst/html"); file.close ();}

void handleStatic () {

Skedari i skedarit = SPIFFS.open ("/page_static.html", "r"); server.streamFile (skedari, "tekst/html"); file.close ();}

Shkrimi në SPIFFS

Këtu po shkruajmë cilësimin e ruajtur në SPIFFS në mënyrë që përdoruesit të mos kenë nevojë të kalojnë nëpër këto hapa sa herë që pajisja të rivendoset.

• Shndërroni argumentet e marra nga faqja në internet në objekte JSON
• Shkruani këtë JSON në skedarin.txt të ruajtur në SPIFFS.

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

String gateway = String (server.arg ("gateway")); Nën -rrjeti i vargut = String (server.arg ("nën -rrjet")); rrënjë ["statickey"] = "staticSet"; rrënja ["staticIP"] = ipv4static; rrënjë ["gateway"] = portë hyrëse; rrënjë ["nënrrjet"] = nënrrjet; String JSONStatic; char JSON [120]; root.printTo (Serial); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); File fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Gabim në hapjen e SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("-Skedari është shkruar"); } else {Serial.println ("-Gabim në Shkrimin e Skedarit"); } fileToWrite.close ();

Hapi 8: Kodi i përgjithshëm

Kodi Over për HTML dhe ESP32 mund të gjendet në këtë depo të Github