ESP32 Captive Portal a statikus és a DHCP IP -beállítások konfigurálásához: 8 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:41

Az ESP 32 egy beépített WiFi és BLE eszköz. Ez egyfajta áldás az IoT projektek számára. Csak adja meg SSID -jét, jelszavát és IP -konfigurációit, és integrálja a dolgokat a felhőbe. Az IP -beállítások és a felhasználói hitelesítő adatok kezelése azonban fejtörést okozhat a felhasználónak.

Mi a teendő, ha a felhasználó módosítani szeretné a WiFi hitelesítő adatait?

Mi a teendő, ha a felhasználó meg akarja változtatni a DHCP/statikus IP -beállításokat?

Az ESP32 mindenkori villogása nem megbízható, és nem is megoldás ezekre a problémákra. Itt, ebben az oktatóanyagban bemutatjuk.

• Hogyan lehet létrehozni egy kötött portált.
• Webes űrlap tárolása az ESP32 -ből.
• Olvasás és írás SPIFFS ESP32 -ből.
• Lágy hozzáférési pont létrehozása és csatlakozás egy állomáshoz

1. lépés: Hardver és szoftver specifikáció

Hardver specifikáció

• ESP32 WiFi/BLE
• Vezeték nélküli hőmérséklet- és páratartalom -érzékelő

Szoftver specifikáció

Arduino IDE

2. lépés: Rögzített portál létrehozása

A lekötött portál olyan weboldal, amelyet az újonnan csatlakozott felhasználóknak t megjelenít, mielőtt szélesebb hozzáférést kapnak a hálózati erőforrásokhoz. Itt három weboldalt szolgálunk ki, amelyek közül választhatunk a DHCP és a statikus IP -beállítások között. kétféleképpen határozhatjuk meg az IP -címet az ESP -hez.

• DHCP IP-cím- ez az IP-cím dinamikus hozzárendelésének módja az eszközhöz. Az ESP alapértelmezett IP -címe 192.168.4.1
• Statikus IP-cím- állandó IP-cím hozzárendelése hálózati eszközünkhöz. Ahhoz, hogy a készülékhez statikus IP -t biztosítsunk, meg kell határoznunk az IP -címet, az átjáró címét és az alhálózati maszkot.

Az első weboldalon a Felhasználó választógombokkal rendelkezik a DHCP és a Statikus IP beállítások közötti választáshoz. A következő weboldalon meg kell adnunk az IP -vel kapcsolatos információkat a továbblépéshez.

HTML kód

A weboldalak HTML -kódja megtalálható ebben a Github adattárban.

Bármilyen IDE vagy szövegszerkesztő, például Sublime vagy Jegyzettömb ++ használható HTML weboldalak készítésére.

• Először hozzon létre egy HTML -weboldalt, amely két választógombot tartalmaz a DHCP és a statikus IP -beállítások közötti választáshoz.
• Most hozza létre a gombot a válasz küldéséhez
• Adjon nevet a választógomboknak. Az ESP webszerver osztály ezeket a neveket érvként veszi fel, és a választógombok válaszát kapja ezen argumentumok használatával
• Most helyezzen be egy „SUBMIT” gombot, hogy elküldje a választ a készüléknek.
• A többi weboldalon szövegdobozok vannak. Adja meg a névértéket és a beviteli típust a szövegmezőben, és adjon hozzá egy elküldés gombot a „BEKÜLDÉS” elemhez a válasz elküldéséhez.
• Hozzon létre egy "RESET" gombot a szövegmező tartalmának visszaállításához.

// Rádiógomb DHCP beállítása

Statikus IP beállítás

// Beviteli szövegdobozok

// Küldés gomb

input [type = "benyújt" "{background-color: #3498DB; / * Zöld */ szegély: nincs; fehér szín; párnázás: 15px 48px; text-align: center; szövegdíszítés: nincs; kijelző: inline-block; betűméret: 16 képpont; }

//Reset gomb

input [type = "benyújt" "{background-color: #3498DB; / * Zöld */ szegély: nincs; fehér szín; párnázás: 15px 48px; text-align: center; szövegdíszítés: nincs; kijelző: inline-block; betűméret: 16 képpont; }

3. lépés: A webes válasz megszerzése a weblapokról az ESP32 -re

A weboldalak kiszolgálása az ESP 32 eszközről nagyon szórakoztató. Ez bármi lehet: a hőmérséklet adatok megjelenítése a weboldalon, a LED -ek elfordítása az egyéni weboldalról vagy a felhasználói WiFi hitelesítő adatok tárolása egy weboldalon keresztül. Az ESP 32 erre a célra a WebServer osztályt használja a weboldalak kiszolgálására.

• Először hozzon létre egy WebServer osztály példányt a 80 -as porton (HTTP port).
• Most állítsa be az ESP -eszközt softAP -ként. Adja meg az SSID -t és a jelszót, és rendeljen hozzá statikus IP -címet az eszközhöz.
• Indítsa el a szervert.

// ********* SSID és bérlet AP **************/

const char *ssidAP = "SSID megadása"; const char *passAP = "jelszó";

// ********* Statikus IP -konfiguráció **************/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.mód (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "Soft-AP setup": "Nem sikerült csatlakozni");

késleltetés (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Soft AP konfigurálása": "Hiba a konfigurációban"); Serial.println (WiFi.softAPIP ());

// indítsa el a szervert

szerver.begin ();

• Hozza létre és jelenítse meg az URL -t különböző visszahívások használatával.
• és kezelje az ügyfelet aszinkron módon a handleClient segítségével.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // kezeli a válaszokat server.handleClient ();

• A weboldalak eléréséhez. Csatlakozzon az újonnan létrehozott AP -hez, amely fel van sorolva a WiFi hálózatokon. Most lépjen a böngészőbe, írja be az utolsó lépésben az Ön által konfigurált IP -címet, és lépjen be a weboldalra.
• A webszerver -osztály a bemeneteknek adott nevet („szöveg”, „gomb”, „rádiógomb” stb.) Veszi argumentumként. Ezeknek a bemeneteknek a válaszait argumentumként menti, és megkaphatjuk az értékeket, vagy ellenőrizhetjük őket az args, arg, hasArg metódusokkal.

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

Serial.println (Karakterlánc (szerver.argName (i)) + '\ t' + Karakterlánc (szerver.arg (i)));

}

if (szerver.hasArg ("ipv4static") && szerver.hasArg ("átjáró") && szerver.hasArg ("alhálózat")) {staticSet (); } else if (szerver.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }

4. lépés: Statikus IP -konfiguráció

Eddig megértettük, hogyan kell csatlakozni az AP -hez, és hogyan lehet lekérni az értékeket a weboldal beviteli mezőiből

Ebben a lépésben konfiguráljuk a statikus IP -t

• Válassza ki a Statikus IP -beállítást, majd kattintson a Küldés gombra. A rendszer átirányítja a következő oldalra.
• A következő oldalon adja meg a statikus IP -címet, az átjáró címét és az alhálózati maszkot. Ez az oldal a "/static" címen fog megjelenni, amelyet a statikus visszahívási módszer kezel.
• Szerezze be a szövegmezők értékét a server.arg () metódussal.

Karakterlánc ipv4static = Karakterlánc (szerver.arg ("ipv4static"));

Karakterlánc átjáró = Karakterlánc (szerver.arg ("átjáró")); Karakterlánc alhálózat = Karakterlánc (szerver.arg ("alhálózat"));

• Most ezeket az értékeket JSON formátumba soroljuk.
• Ezután a JSON -t írjuk a SPIFFS -be.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = átjáró;

root ["alhálózat"] = alhálózat;

Fájl fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("-Fájl írva"); }

• Ez a konfiguráció SPIFFS fájlba kerül mentésre. Később ezeket az értékeket kiolvassa a SPIFFS -ből.
• A statikus IP -értékeket ezután elemzi a JSON.

Fájlfájl = 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")) {

Karakterlánc ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["átjáró"];

String subnetValue = readRoot ["alhálózat"];

5. lépés: DHCP beállítások

Ebben a lépésben konfiguráljuk a DHCP beállításokat

Válassza ki a DHCP beállításokat az indexoldalon, majd kattintson a "Küldés" gombra

• A rendszer átirányítja a következő oldalra. A következő oldalon adja meg az IP -címet, vagy válassza az alapértelmezett kiválasztása lehetőséget, majd kattintson a "Küldés" gombra a válasz elküldéséhez. Ez az oldal a "/dhcp" címen fog megjelenni, amelyet a handleDHCP visszahívási módszer kezel. Szerezze be a szövegmezők értékét a server.arg () metódussal. Ha rákattint, válassza az alapértelmezett jelölőnégyzetet. a 192.168.4.1 IP -címet kapja az eszköz.
• Most ezeket az értékeket JSON formátumba soroljuk.
• Ezután a JSON -t írjuk a SPIFFS -be.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

Fájl fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("-Fájl írva"); }

• Ez a konfiguráció SPIFFS fájlba kerül mentésre. Később ezeket az értékeket kiolvassa a SPIFFS -ből.
• A dhcp IP értékeit ezután elemzi a JSON.

Fájlfájl = 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")) {

Karakterlánc ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

6. lépés: A WiFi hitelesítő adatok mentése

Egyelőre az IP -konfigurációt választottuk. Most el kell mentenünk a felhasználó wifi hitelesítő adatait. Ennek a helyzetnek a megoldására. Ezt az eljárást követtük.

• Tehát most megvan az eszközünk AP beállítása DHCP vagy statikus IP konfigurációban, amelyet az utolsó lépésekben említett rögzített portálról választottunk ki.
• Tegyük fel, hogy statikus IP -konfigurációt választottunk.
• SoftAP -ot konfigurálunk ezen az IP -címen.
• Miután elolvasta az értékeket a SPIFFS -ből, és elemezte ezeket az értékeket a JSON -ból. Ezen a címen konfiguráljuk a softAP -ot.
• Konvertálja az IP karakterláncot bájtra.

bájt 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);

// *************** Bájtok elemzése a karakterláncból ****************** //

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

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

bájtok = strtoul (str, NULL, bázis);

str = strchr (str, szept);

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

szünet;

}

str ++;

}}

Most ezen az IP -n konfiguráljuk a softAP -ot

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "SoftAP konfigurálása": "nincs kapcsolat"); Serial.println (WiFi.softAPIP ());

• Most indítsa el a webszervert, és jelenítsen meg egy weboldalt ezen az IP -címen. A felhasználó WiFi hitelesítő adatainak megadása.
• A weboldal két szövegmezőből áll, amelyek megadják az SSID -t és a jelszót.
• A handleStaticForm egy visszahívási módszer, amely kiszolgálja a weboldalt.
• server.handleClient () gondoskodik a weboldalra érkező kérésekről és válaszokról.

szerver.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

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

server.handleClient (); }

A HTML űrlap SPIFFS formátumban kerül mentésre. a server.arg () használatával ellenőrizzük a megfelelő érveket. hogy megkapja az SSID és a jelszó értékét

Fájlfájl = SPIFFS.open ("/WiFi.html", "r");

server.streamFile (fájl, "text/html");

file.close ();

7. lépés: Olvasás és írás SPIFFS -ből

SPIFFS

Soros perifériás interfész Flash fájlrendszer, röviden SPIFFS. Ez egy könnyű fájlrendszer a SPI flash chipet tartalmazó mikrokontrollerekhez. Az ESP32 beépített flash chipje rengeteg helyet tartalmaz weboldalai számára. Weboldalunkat a Flash rendszerben is tároltuk. Néhány lépést kell követnünk az adatok feltöltéséhez a spiff -ekbe

Töltse le az ESP 32 SPIFFS adatfeltöltő eszközt:

• Az Arduino vázlatfüzet könyvtárában hozzon létre eszközök könyvtárat, ha még nem létezik
• Csomagolja ki az eszközt az eszközök könyvtárába (az útvonal így néz ki: /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Indítsa újra az Arduino IDE -t
• Nyisson meg egy vázlatot (vagy hozzon létre újat, és mentse el)
• Lépjen a vázlatkönyvtárba (válassza a Vázlat> Vázlat mappa megjelenítése lehetőséget)
• Hozzon létre egy könyvtárat adatokkal és az ott található fájlrendszerben található fájlokkal. Feltöltöttük a webform.html nevű HTML -oldalunkat
• Győződjön meg arról, hogy kiválasztott egy táblát, portot és zárt soros monitort
• Válassza az Eszközök> ESP8266 Sketch Data Upload lehetőséget. Ezzel el kell kezdeni a fájlok feltöltését az ESP8266 flash fájlrendszerbe. Ha kész, az IDE állapotsor SPIFFS képfeltöltés üzenetet jelenít meg.

void handleDHCP () {Fájl fájl = SPIFFS.open ("/page_dhcp.html", "r"); server.streamFile (fájl, "text/html"); file.close ();}

void handleStatic () {

Fájlfájl = SPIFFS.open ("/page_static.html", "r"); server.streamFile (fájl, "text/html"); file.close ();}

Írás a SPIFFS -hez

Itt írjuk a mentett beállítást az SPIFFS -be, hogy a felhasználóknak ne kelljen elvégezniük ezeket a lépéseket az eszköz visszaállításakor.

• A weblapról kapott argumentumokat konvertálja JSON objektumokká
• Írja be ezt a JSON -t a SPIFFS fájlba mentett.txt fájlba.

Karakterlánc ipv4static = Karakterlánc (szerver.arg ("ipv4static"));

Karakterlánc átjáró = Karakterlánc (szerver.arg ("átjáró")); Karakterlánc alhálózat = Karakterlánc (szerver.arg ("alhálózat")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = átjáró; root ["alhálózat"] = alhálózat; String JSONStatic; char JSON [120]; root.printTo (soros); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Fájl fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Hiba a SPIFFS megnyitásakor"); } if (fileToWrite.print (JSON)) {Serial.println ("-Fájl írva"); } else {Serial.println ("-Hiba a fájl írásakor"); } fileToWrite.close ();

8. lépés: Általános kód

A HTML és az ESP32 Over kódja megtalálható ebben a Github lerakatban