Obsah:
2025 Autor: John Day | [email protected]. Naposledy změněno: 2025-01-13 06:57
ESP 32 je zařízení s integrovaným WiFi a BLE. Je to určitá výhoda pro projekty IoT. Stačí zadat konfiguraci SSID, hesla a IP a integrovat věci do cloudu. Ale správa nastavení IP a přihlašovacích údajů uživatele může být pro uživatele bolest hlavy.
Co když chce uživatel změnit pověření WiFi?
Co když chce uživatel změnit nastavení DHCP/Static IP?
Blikání ESP32 pokaždé není spolehlivé a dokonce ani řešení těchto problémů. Zde v tomto pokynu budeme demonstrovat.
- Jak vytvořit portál pro zajetí.
- Hostování webového formuláře z ESP32.
- Čtení a zápis z SPIFFS ESP32.
- Vytvoření měkkého přístupového bodu a připojení ke stanici
Krok 1: Specifikace hardwaru a softwaru
Specifikace hardwaru
- ESP32 WiFi/BLE
- Bezdrátový snímač teploty a vlhkosti
Specifikace softwaru
Arduino IDE
Krok 2: Vytvoření portálu pro vlastní potřebu
Portál pro vlastní potřebu je webová stránka, která se zobrazí nově připojeným uživatelům před tím, než jim bude udělen širší přístup k síťovým prostředkům. Zde nabízíme tři webové stránky pro výběr mezi nastavením DHCP a Static IP. IP adresu pro ESP můžeme definovat dvěma způsoby.
- DHCP IP adresa- je to způsob, jak dynamicky přiřadit IP adresu zařízení. Výchozí IP adresa ESP je 192.168.4.1
- Statická IP adresa- přiřazení trvalé IP adresy našemu síťovému zařízení. k zajištění statické IP adresy zařízení potřebujeme definovat IP adresu, adresu brány a masku podsítě.
Na první webové stránce jsou uživateli k dispozici přepínače pro výběr mezi nastavením DHCP a Static IP. Na další webové stránce musíme poskytnout informace související s IP, abychom mohli pokračovat dále.
HTML kód
HTML kód pro webové stránky najdete v tomto úložišti Github.
K vytváření webových stránek HTML můžete použít jakýkoli IDE nebo textový editor, jako je Sublime nebo notepad ++.
- Nejprve vytvořte webovou stránku HTML obsahující dva přepínače pro výběr mezi nastavením DHCP a statickou IP.
- Nyní vytvořte tlačítko pro odeslání odpovědi
- Pojmenujte přepínače. Třída webového serveru ESP bude tyto názvy brát jako argumenty a pomocí těchto argumentů získá odpověď přepínačů
- Nyní vložte tlačítko 'ODESLAT' pro odeslání odpovědi do zařízení.
- Na ostatních webových stránkách máme textová pole. Do textového pole zadejte hodnotu názvu a typ vstupu a přidejte tlačítko Odeslat k odeslání odpovědi „ODESLAT“.
- Vytvořením tlačítka „RESET“obnovíte obsah textového pole.
// Přepínač DHCP nastavení
Nastavení statické IP
// Vstup textových polí
// Tlačítko Odeslat
vstup [typ = "odeslat"] {barva pozadí: #3498DB; / * Zelená */ ohraničení: žádné; barva bílá; čalounění: 15px 48px; zarovnání textu: střed; textová dekorace: žádná; zobrazení: inline-block; velikost písma: 16px; }
//Tlačítko reset
vstup [typ = "odeslat"] {barva pozadí: #3498DB; / * Zelená */ ohraničení: žádné; barva bílá; čalounění: 15px 48px; zarovnání textu: střed; textová dekorace: žádná; zobrazení: inline-block; velikost písma: 16px; }
Krok 3: Získání webové odpovědi z webových stránek na ESP32
Obsluha webových stránek ze zařízení ESP 32 je skvělá zábava. Může to být cokoli od zobrazení teplotních údajů na webové stránce, otočení LED z vlastní webové stránky nebo uložení přihlašovacích údajů uživatele WiFi prostřednictvím webové stránky. Za tímto účelem používá ESP 32 k serverům webových stránek třídu WebServer.
- Nejprve vytvořte instanci třídy WebServer na portu 80 (port
- Nyní nastavte zařízení ESP jako softAP. Zadejte SSID a přístupový klíč a přiřaďte zařízení statickou IP adresu.
- Spusťte server.
// ********* SSID a Pass pro AP **************/
const char *ssidAP = "dát SSID"; const char *passAP = "předat klíč";
// ********* Konfigurace statické IP **************/IPAddress ap_local_IP (192, 168, 1, 77); IP adresa ap_gateway (192, 168, 1, 254); IP adresa ap_subnet (255, 255, 255, 0);
// ********* SoftAP Config **************/
WiFi.mode (WIFI_AP);
Serial.println (WiFi.softAP (ssidAP, passAP)? "Soft-AP setup": "Nepodařilo se připojit");
zpoždění (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Konfigurace Soft AP": "Chyba v konfiguraci"); Serial.println (WiFi.softAPIP ());
// spusťte server
server.begin ();
- Vytvořte a zobrazujte adresu URL pomocí různých zpětných volání.
- a zpracovávat klienta asynchronně pomocí handleClient.
server.on ("/", handleRoot);
server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // zpracování odpovědí server.handleClient ();
- Pro přístup na webové stránky. Připojte se k přístupovému bodu, který jste právě vytvořili a který je uveden ve vašich sítích WiFi. Nyní přejděte do prohlížeče, zadejte IP, kterou jste v posledním kroku nakonfigurovali, a přejděte na webovou stránku.
- Třída webového serveru bere jako argumenty název zadaný vstupům ('text', 'tlačítko', 'radiobutton'atd.). Uloží odpovědi těchto vstupů jako argumenty a můžeme získat hodnoty nebo je zkontrolovat pomocí metod args, arg, hasArg.
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 (); } else if (server.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }
Krok 4: Konfigurace statické IP
Doposud jsme rozuměli tomu, jak se připojit k AP a jak získat hodnoty ze vstupních polí webové stránky
V tomto kroku nakonfigurujeme statickou IP
- Vyberte nastavení statické IP a klikněte na tlačítko Odeslat. Budete přesměrováni na další stránku.
- Na další stránce zadejte statickou IP adresu, adresu brány a masku podsítě, tato stránka bude zobrazována na "/static", což je zpracováno metodou zpracování statického zpětného volání.
- Získejte hodnotu textových polí pomocí metody server.arg ().
String ipv4static = String (server.arg ("ipv4static"));
String gateway = String (server.arg ("brána")); Řetězec podsíť = Řetězec (server.arg ("podsíť"));
- Nyní jsou tyto hodnoty serializovány do formátu JSON.
- Poté zapíšeme JSON do SPIFFS.
root ["statickey"] = "staticSet";
root ["staticIP"] = ipv4static;
root ["gateway"] = brána;
root ["podsíť"] = podsíť;
Soubor fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);
if (root.printTo (fileToWrite)) {
Serial.println ("-soubor zapsán"); }
- Tato konfigurace je uložena v SPIFFS. Později jsou tyto hodnoty načteny ze SPIFFS.
- Statické hodnoty IP jsou pak analyzovány z JSON.
Soubor souboru = 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")) {
Řetězec ipStaticValue = readRoot ["staticIP"];
Řetězec gatewayValue = readRoot ["brána"];
Řetězec subnetValue = readRoot ["podsíť"];
Krok 5: Nastavení DHCP
V tomto kroku nakonfigurujeme nastavení DHCP
Vyberte nastavení DHCP z indexové stránky a klikněte na „Odeslat“
- Budete přesměrováni na další stránku. Na další stránce zadejte IP adresu nebo vyberte zvolit výchozí a odpověď odešlete kliknutím na tlačítko „Odeslat“. Tato stránka bude zobrazována na adrese "/dhcp", která je zpracovávána metodou zpětného volání handleDHCP. Získejte hodnotu textových polí pomocí metody server.arg (). Po kliknutí na vybrat výchozí zaškrtávací políčko. zařízení bude přidělena IP adresa 192.168.4.1.
- Nyní jsou tyto hodnoty serializovány do formátu JSON.
- Poté zapíšeme JSON do SPIFFS.
JsonObject & root = jsonBuffer.createObject ();
root ["dhcpManual"] = "dhcpManual";
root ["dhcpIP"] = "192.168.4.1";
Soubor fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);
if (root.printTo (fileToWrite)) {
Serial.println ("-soubor zapsán"); }
- Tato konfigurace je uložena v SPIFFS. Později jsou tyto hodnoty načteny ze SPIFFS.
- Hodnoty IP dhcp jsou poté analyzovány z JSON.
Soubor souboru = 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")) {
Řetězec ipdhcpValue = readRoot ["dhcpIP"];
Serial.println (ipdhcpValue);
dhcpAPConfig ();}
Krok 6: Uložení pověření WiFi
Prozatím jsme vybrali konfiguraci IP. Nyní musíme uložit pověření uživatele WiFi. K vyřešení této situace. Dodrželi jsme tento postup.
- Nyní tedy máme nastavení AP našeho zařízení v konfiguraci DHCP nebo Static IP, které jsme vybrali z portálu pro zajetí uvedeného v posledních krocích.
- Řekněme, že jsme vybrali konfiguraci statické IP.
- Na této IP nakonfigurujeme softAP.
- Po přečtení hodnot ze SPIFFS a analýze těchto hodnot z JSON. Na této IP nakonfigurujeme softAP.
- Převeďte řetězec IP na bajty.
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);
// *************** Analyzovat bajty z řetězce ****************** //
void parseBytes (const char* str, char sep, byte* bytes, int maxBytes, int base) {
pro (int i = 0; i <maxBytes; i ++) {
bajty = strtoul (str, NULL, základ);
str = strchr (str, sep);
if (str == NULL || *str == '\ 0') {
přestávka;
}
str ++;
}}
Nyní nakonfigurujeme softAP na této IP
Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Konfigurace softAP": "není připojeno"); Serial.println (WiFi.softAPIP ());
- Nyní spusťte webový server a zobrazte webovou stránku na této IP adrese. Chcete -li zadat pověření uživatele WiFi.
- Webová stránka se skládá ze dvou textových polí pro zadání SSID a hesla.
- handleStaticForm je metoda zpětného volání, která slouží webové stránce.
- server.handleClient () se stará o požadavek a odpovědi na a z webové stránky.
server.begin ();
server.on ("/", handleStaticForm);
server.onNotFound (handleNotFound);
STimer = millis ();
while (millis ()-STimer <= SInterval) {
server.handleClient (); }
Formulář HTML je uložen ve formátu SPIFFS. zkontrolujeme vhodné argumenty pomocí server.arg (). abyste získali hodnotu SSID a hesla
Soubor souboru = SPIFFS.open ("/WiFi.html", "r");
server.streamFile (soubor, "text/html");
file.close ();
Krok 7: Čtení a zápis z SPIFFS
SPIFFS
Serial Peripheral Interface Flash File System nebo zkráceně SPIFFS. Je to lehký souborový systém pro mikrokontroléry s flash čipem SPI. Integrovaný flash čip ESP32 má dostatek místa pro vaše webové stránky. Naši webovou stránku jsme také uložili do systému Flash. Při nahrávání dat do spiffů musíme dodržet několik kroků
Stáhněte si nástroj pro nahrávání dat ESP 32 SPIFFS:
- V adresáři skicářů Arduino vytvořte adresář nástrojů, pokud ještě neexistuje
- Rozbalte nástroj do adresáře nástrojů (cesta bude vypadat jako /Arduino/tools/ESP32FS/tool/esp32fs.jar)
- Restartujte Arduino IDE
- Otevřete skicu (nebo vytvořte novou a uložte ji)
- Přejděte do adresáře skici (zvolte Skica> Zobrazit složku skici)
- V systému souborů vytvořte adresář s názvem data a všechny soubory, které chcete. Nahráli jsme naši HTML stránku s názvem webform.html
- Ujistěte se, že jste vybrali desku, port a zavřený sériový monitor
- Vyberte Nástroje> Nahrání dat skici ESP8266. To by mělo začít nahrávat soubory do systému souborů ESP8266 flash. Po dokončení se na stavovém řádku IDE zobrazí zpráva Nahraný obrázek SPIFFS.
void handleDHCP () {Soubor souboru = SPIFFS.open ("/page_dhcp.html", "r"); server.streamFile (soubor, "text/html"); file.close ();}
void handleStatic () {
Soubor souboru = SPIFFS.open ("/page_static.html", "r"); server.streamFile (soubor, "text/html"); file.close ();}
Zápis do SPIFFS
Zde zapisujeme uložené nastavení do SPIFFS, aby uživatelé nemuseli procházet těmito kroky při každém resetování zařízení.
- Převeďte argumenty přijaté z webové stránky na objekty JSON
- Tento JSON zapište do souboru.txt uloženého v SPIFFS.
String ipv4static = String (server.arg ("ipv4static"));
String gateway = String (server.arg ("brána")); Řetězec podsíť = Řetězec (server.arg ("podsíť")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = brána; root ["podsíť"] = podsíť; Řetězec JSONStatic; znak JSON [120]; root.printTo (sériové); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Soubor fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Chyba při otevírání SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("-File Written"); } else {Serial.println ("-Chyba při zápisu souboru"); } fileToWrite.close ();
Krok 8: Celkový kód
Over code pro HTML a ESP32 najdete v tomto úložišti Github