ESP32 Captive Portal staattisten ja DHCP -IP -asetusten määrittämiseen: 8 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:01

ESP 32 on laite, jossa on integroitu WiFi ja BLE. Se on eräänlainen siunaus IoT -projekteille. Anna vain SSID, salasana ja IP -määritykset ja integroi asiat pilveen. IP -asetusten ja käyttäjätietojen hallinta voi kuitenkin olla päänsärky käyttäjälle.

Mitä jos käyttäjä haluaa muuttaa WiFi -tunnistetietoja?

Entä jos käyttäjä haluaa vaihtaa DHCP/Staattinen IP -asetuksia?

ESP32: n vilkkuminen joka kerta ei ole luotettava eikä edes ratkaisu näihin ongelmiin. Tässä ohjeessa aiomme osoittaa.

• Kuinka luoda kaappaajaportaali.
• Verkkolomakkeen ylläpito ESP32: sta.
• Lukeminen ja kirjoittaminen SPIFFS ESP32: sta.
• Pehmeän tukiaseman luominen ja yhteyden muodostaminen asemalle

Vaihe 1: Laitteisto- ja ohjelmistomääritykset

Laitteiston tekniset tiedot

• ESP32 WiFi/BLE
• Langaton lämpötila- ja kosteusanturi

Ohjelmiston tiedot

Arduino IDE

Vaihe 2: vangitsevan portaalin luominen

Kytketty portaali on verkkosivu, joka näytetään äskettäin yhdistetyille käyttäjille t ennen kuin heille annetaan laajempi pääsy verkkoresursseihin. Tässä palvelemme kolmea verkkosivua, joista voit valita DHCP- tai staattisen IP -asetuksen välillä. voimme määrittää IP -osoitteen ESP: lle kahdella tavalla.

• DHCP IP-osoite- se on tapa määrittää IP-osoite dynaamisesti laitteelle. ESP: n oletus -IP -osoite on 192.168.4.1
• Staattinen IP-osoite- pysyvän IP-osoitteen määrittäminen verkkolaitteellemme. jotta voimme tarjota laitteelle staattisen IP -osoitteen, meidän on määritettävä IP -osoite, yhdyskäytävän osoite ja aliverkon peite.

Ensimmäisellä verkkosivulla Käyttäjä saa valintanapit valitakseen DHCP- tai Staattinen IP -asetukset. Seuraavalla verkkosivulla meidän on annettava IP -tiedot, jotta voimme jatkaa eteenpäin.

HTML -koodi

Verkkosivujen HTML -koodi löytyy tästä Github -arkistosta.

Voit käyttää mitä tahansa IDE- tai tekstieditoria, kuten Sublimea tai muistilehteä ++ HTML -verkkosivujen luomiseen.

• Luo ensin HTML -verkkosivu, joka sisältää kaksi valintanappia valitaksesi DHCP- tai Staattiset IP -asetukset.
• Luo nyt painike lähettääksesi vastauksesi
• Anna valintanäppäimille jokin nimi. ESP -verkkopalvelinluokka ottaa nämä nimet argumentteiksi ja saa valintanappien vastauksen käyttämällä näitä argumentteja
• Lisää nyt "LÄHETÄ" -painike lähettääksesi vastauksen laitteelle.
• Muilla verkkosivuilla on tekstiruutuja. Anna nimen arvo ja syöttötyyppi tekstikenttään ja lisää Lähetä -painike "Lähetä" vastauksen lähettämiseen.
• Luo RESET -painike nollataksesi tekstikentän sisällön.

// Radio -painikkeen DHCP -asetus

Staattinen IP -asetus

// Syötä tekstiruudut

// Lähetä -painike

input [type = "lähetä"] {background-color: #3498DB; / * Vihreä */ reunus: ei mitään; väri valkoinen; pehmuste: 15px 48px; text-align: center; tekstin koristelu: ei mitään; näyttö: inline-block; fontin koko: 16px; }

//Nollaus painike

input [type = "lähetä"] {background-color: #3498DB; / * Vihreä */ reunus: ei mitään; väri valkoinen; pehmuste: 15px 48px; text-align: center; tekstin koristelu: ei mitään; näyttö: inline-block; fontin koko: 16px; }

Vaihe 3: Web -vastauksen saaminen verkkosivuilta ESP32 -versioon

Verkkosivujen tarjoaminen ESP 32 -laitteesta on hauskaa. Se voi olla mitä tahansa lämpötilan tietojen näyttämistä verkkosivulla, ledien kääntämistä mukautetulta verkkosivulta tai käyttäjän WiFi -tunnistetietojen tallentamista verkkosivun kautta. Tätä tarkoitusta varten ESP 32 käyttää WebServer -luokkaa web -sivujen palvelemiseen.

• Luo ensin WebServer -luokan esiintymä porttiin 80 (HTTP -portti).
• Määritä nyt ESP -laite softAP: ksi. Anna SSID ja salasana ja määritä laitteelle staattinen IP.
• Aloita palvelin.

// ********* SSID ja AP: n **************/

const char *ssidAP = "anna SSID"; const char *passAP = "pass -avain";

// ********* Staattinen IP -määritys **************/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": "Yhteyden muodostaminen epäonnistui");

viive (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Soft AP: n määrittäminen": "Virhe kokoonpanossa"); Serial.println (WiFi.softAPIP ());

// käynnistä palvelin

server.begin ();

• Luo ja näytä URL -osoite erilaisilla takaisinsoittopyyntöillä.
• ja käsittele asiakasta asynkronisesti kädensijan avulla.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // käsittele vastauksia server.handleClient ();

• Pääsy verkkosivuille. Yhdistä äskettäin luomaasi tukiasemaan, joka on lueteltu WiFi -verkkoissasi. Siirry nyt selaimeen, kirjoita viimeisessä vaiheessa määrittämäsi IP -osoite ja siirry verkkosivulle.
• Verkkopalvelinluokka käyttää syötteille annettua nimeä ('teksti', 'painike', 'radiopainike' jne.) Argumentteina. Se tallentaa näiden syötteiden vastaukset argumentteina ja voimme saada arvot tai tarkistaa ne käyttämällä args, arg, hasArg -menetelmiä.

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

Sarja.println (Jono (palvelin.argName (i)) + '\ t' + Jono (palvelin.arg (i)));

}

if (palvelin.hasArg ("ipv4static") && palvelin.hasArg ("yhdyskäytävä") && palvelin.hasArg ("aliverkko")) {staticSet (); } else if (palvelin.arg ("ipv4")! = "") {dhcpSetManual (); } else {dhcpSetDefault (); }

Vaihe 4: Staattinen IP -määritys

Tähän mennessä olemme ymmärtäneet, kuinka muodostaa yhteys AP: hen ja kuinka saada arvot verkkosivun syöttökentistä

Tässä vaiheessa määritämme staattisen IP -osoitteen

• Valitse Staattinen IP -asetus ja napsauta Lähetä -painiketta. Sinut ohjataan seuraavalle sivulle.
• Syötä seuraavalla sivulla staattinen IP -osoite, yhdyskäytävän osoite ja aliverkon peite. Tämä sivu näytetään osoitteessa "/staattinen", joka käsitellään kahvan staattisella takaisinsoittomenetelmällä.
• Hae tekstikenttien arvo käyttämällä server.arg () -menetelmää.

Jono ipv4static = Jono (palvelin.arg ("ipv4static"));

Jonoyhdyskäytävä = Jono (palvelin.arg ("yhdyskäytävä")); Merkkijonon aliverkko = Jono (palvelin.arg ("aliverkko"));

• Nyt nämä arvot on sarjoitettu JSON -muotoon.
• Sitten kirjoitamme JSONin SPIFFS: ään.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = yhdyskäytävä;

root ["aliverkko"] = aliverkko;

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

if (root.printTo (fileToWrite)) {

Serial.println ("-Tiedosto kirjoitettu"); }

• Tämä määritys tallennetaan SPIFFS -tiedostoon. Myöhemmin nämä arvot luetaan SPIFFS: stä.
• Staattiset IP -arvot jäsennellään sitten JSON: sta.

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

while (file.available ()) {

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

jos (debugLogData.length ()> 5) {

JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

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

Merkkijono ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["yhdyskäytävä"];

Merkkijonon aliverkkoArvo = readRoot ["aliverkko"];

Vaihe 5: DHCP -asetukset

Tässä vaiheessa määritämme DHCP -asetukset

Valitse DHCP -asetukset hakemistosivulta ja napsauta "Lähetä"

• Sinut ohjataan seuraavalle sivulle. Kirjoita seuraavalla sivulla IP -osoite tai valitse Valitse oletus ja lähetä vastaus napsauttamalla Lähetä -painiketta. Tämä sivu näytetään osoitteessa "/dhcp", jota käsitellään handleDHCP -takaisinsoittomenetelmällä. Hae tekstikenttien arvo käyttämällä server.arg () -menetelmää. Valitse oletusvalintaruutu, kun sitä napsautetaan. 192.168.4.1 IP annetaan laitteelle.
• Nyt nämä arvot on sarjoitettu JSON -muotoon.
• Sitten kirjoitamme JSONin SPIFFS: ään.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

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

if (root.printTo (fileToWrite)) {

Serial.println ("-Tiedosto kirjoitettu"); }

• Tämä määritys tallennetaan SPIFFS -tiedostoon. Myöhemmin nämä arvot luetaan SPIFFS: stä.
• Dhcp IP -arvot jäsennellään sitten JSON: sta.

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

Merkkijono ipdhcpValue = readRoot ["dhcpIP"];

Sarja.println (ipdhcpValue);

dhcpAPConfig ();}

Vaihe 6: WiFi -tunnistetietojen tallentaminen

Toistaiseksi olemme valinneet IP -kokoonpanon. Nyt meidän on tallennettava käyttäjän wifi -käyttäjätiedot. Tämän tilanteen ratkaisemiseksi. Olemme noudattaneet tätä menettelyä.

• Joten nyt meillä on laitteen AP -asetukset DHCP- tai Staattinen IP -kokoonpanossa, jotka olimme valinneet viimeisissä vaiheissa mainitusta kaappaajaportaalista.
• Oletetaan, että olemme valinneet staattisen IP -määrityksen.
• Määritämme softAP: n tällä IP -osoitteella.
• Kun olet lukenut arvot SPIFFS: stä ja jäsentänyt nämä arvot JSONista. Määritämme softAP: n tällä IP -osoitteella.
• Muunna IP -merkkijono tavuksi.

tavu 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];

IPAdd ap_local (ip0, ip1, ip2, ip3);

// *************** Jäsentää tavuja merkkijonosta ****************** //

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

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

tavua = strtoul (str, NULL, base);

str = strchr (str, sep);

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

tauko;

}

str ++;

}}

Nyt määritämme softAP: n tällä IP -osoitteella

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "SoftAP: n määrittäminen": "ei kytketty"); Serial.println (WiFi.softAPIP ());

• Käynnistä nyt verkkopalvelin ja palvele verkkosivua tällä IP -osoitteella. Käyttäjän WiFi -tunnistetietojen syöttäminen.
• Verkkosivu koostuu kahdesta tekstikentästä SSID: n ja salasanan syöttämiseksi.
• handleStaticForm on takaisinsoittomenetelmä, joka palvelee verkkosivua.
• server.handleClient () hoitaa pyynnöt ja vastaukset verkkosivulle ja sieltä.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

Ajastin = millis ();

while (millis ()-Ajastin <= SI-väli) {

server.handleClient (); }

HTML -lomake tallennetaan SPIFFS -tiedostoon. tarkistamme sopivat argumentit palvelimella server.arg (). saadaksesi SSID: n ja salasanan arvon

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

server.streamFile (tiedosto, "teksti/html");

file.close ();

Vaihe 7: Lue ja kirjoita SPIFFS -tiedostoista

SPIFFS

Serial Peripheral Interface Flash File System tai lyhyesti SPIFFS. Se on kevyt tiedostojärjestelmä mikro-ohjaimille, joissa on SPI-flash-siru. ESP32: n sisäisessä flash -sirussa on runsaasti tilaa verkkosivuillesi. Olemme myös tallentaneet verkkosivumme Flash -järjestelmään. Meidän on noudatettava muutamia vaiheita, jotta voimme ladata tietoja spiff -tiedostoihin

Lataa ESP 32 SPIFFS -tietojen lataustyökalu:

• Luo työkaluhakemisto Arduino -luonnoskirjahakemistoosi, jos sitä ei vielä ole
• Pura työkalu työkalut -hakemistoon (polku näyttää /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Käynnistä Arduino IDE uudelleen
• Avaa luonnos (tai luo uusi ja tallenna se)
• Siirry luonnoshakemistoon (valitse Luonnos> Näytä luonnoskansio)
• Luo hakemisto nimeltä data ja kaikki tiedostot, jotka haluat siellä olevaan tiedostojärjestelmään. Olemme ladanneet HTML -sivumme, jonka nimi on webform.html
• Varmista, että olet valinnut piirilevyn, portin ja suljetun sarjamonitorin
• Valitse Työkalut> ESP8266 Sketch Data Upload. Tämän pitäisi aloittaa tiedostojen lataaminen ESP8266 flash -tiedostojärjestelmään. Kun olet valmis, IDE -tilarivillä näkyy SPIFFS Image Uploaded -viesti.

void handleDHCP () {Tiedostotiedosto = SPIFFS.open ("/page_dhcp.html", "r"); server.streamFile (tiedosto, "teksti/html"); file.close ();}

void handleStatic () {

Tiedostotiedosto = SPIFFS.open ("/page_static.html", "r"); server.streamFile (tiedosto, "teksti/html"); file.close ();}

Kirjoittaminen SPIFFS: lle

Tässä kirjoitamme tallennetun asetuksen SPIFFS -tiedostoon, jotta käyttäjien ei tarvitse suorittaa näitä vaiheita aina, kun laite nollataan.

• Muunna verkkosivulta saadut argumentit JSON -objekteiksi
• Kirjoita tämä JSON SPIFFS -tiedostoon tallennettuun.txt -tiedostoon.

Jono ipv4static = Jono (palvelin.arg ("ipv4static"));

Jonoyhdyskäytävä = Jono (palvelin.arg ("yhdyskäytävä")); Merkkijonon aliverkko = Jono (palvelin.arg ("aliverkko")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = yhdyskäytävä; root ["aliverkko"] = aliverkko; Jono JSONStatic; char JSON [120]; root.printTo (sarja); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Tiedosto fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Virhe avattaessa SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("-Tiedosto kirjoitettu"); } else {Serial.println ("-Virhe tiedoston kirjoittamisessa"); } fileToWrite.close ();

Vaihe 8: Yleinen koodi

HTML- ja ESP32 -tiedostojen ylikoodi löytyy tästä Github -arkistosta