Ang ESP32 Captive Portal upang I-configure ang Mga Setting ng Static at DHCP IP: 8 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:13

Ang ESP 32 ay isang aparato na may integrated WiFi at BLE. Ito ay uri ng isang biyaya para sa mga proyekto ng IoT. Ibigay lamang ang iyong mga configure ng SSID, password at IP at isama ang mga bagay sa cloud. Ngunit, ang pamamahala ng mga setting ng IP at mga kredensyal ng User ay maaaring maging isang sakit ng ulo sa gumagamit.

Paano kung nais ng Gumagamit na baguhin ang mga kredensyal ng WiFi?

Paano kung nais ng gumagamit na ilipat ang mga setting ng DHCP / Static IP?

Ang pag-flashing ng ESP32 sa tuwina ay hindi maaasahan at hindi kahit na ang solusyon para sa mga problemang ito. Dito sa itinuturo na ito ay magpapakita kami.

• Paano lumikha ng isang bihag na portal.
• Pagho-host ng isang form sa web mula sa ESP32.
• Pagbasa at Pagsulat mula sa SPIFFS ESP32.
• Lumilikha ng isang Soft Access Point at kumokonekta sa isang istasyon

Hakbang 1: Pagtukoy sa Hardware at Software

Pagtukoy sa Hardware

• ESP32 WiFi / BLE
• Wireless Temperatura at Humidity Sensor

Pagtukoy ng Software

Arduino IDE

Hakbang 2: Lumilikha ng isang Captive Portal

Ang isang bihag na portal ay isang web page na ipinapakita sa mga bagong konektadong mga gumagamit bago sila bigyan ng mas malawak na pag-access sa mga mapagkukunan ng network. Narito naghahatid kami ng tatlong mga web page upang pumili sa pagitan ng DHCP at Mga Setting ng Static IP. maaari nating tukuyin ang IP address sa ESP sa dalawang paraan.

• Ang DHCP IP address- ito ay isang paraan upang palaganang maitalaga ang IP address sa aparato. Ang default na IP address ng ESP ay 192.168.4.1
• Static IP address- pagtatalaga ng isang permanenteng IP Adress sa aming network device. upang maibigay ang static IP sa aparato na kailangan namin upang tukuyin ang IP address, gateway address, at subnet mask.

Sa unang webpage, ang User ay binibigyan ng mga radio button upang pumili sa pagitan ng mga setting ng DHCP at Static IP. Sa susunod na webpage, kailangan naming ibigay ang impormasyong nauugnay sa IP upang magpatuloy pa.

HTML Code

Ang HTML code para sa mga web page ay matatagpuan sa imbakan ng Github na ito.

Maaari kang gumamit ng anumang IDE o text editor tulad ng Sublime o notepad ++ upang gumawa ng mga HTML web page.

• Una Lumikha ng isang HTML webpage na naglalaman ng dalawang mga pindutan ng radyo upang pumili sa pagitan ng DHCP at Mga Setting ng Static IP.
• Lumikha ngayon ng pindutan upang isumite ang iyong tugon
• Magbigay ng ilang pangalan sa mga pindutan ng radyo. Gagawin ng klase ng server ng ESP ang mga pangalang ito bilang mga argumento at makukuha ang tugon ng mga pindutan ng radyo gamit ang mga argumentong ito
• Ipasok ngayon ang isang pindutang 'SUBMIT' upang maipadala ang tugon sa aparato.
• Sa iba pang mga web page, mayroon kaming mga text box. Ibigay ang halaga ng pangalan at uri ng Pag-input sa text box at magdagdag ng isang pindutang isumite sa 'SUBMIT' isumite ang tugon.
• Lumikha ng isang pindutang 'I-reset' upang i-reset ang nilalaman ng patlang ng teksto.

// Radio Button DHCP Setting

Static IP Setting

// Mga Input na Kahon ng Teksto

// Magsumite ng Button

input [type = "isumite"] {background-color: # 3498DB; / * Green * / border: wala; kulay puti; padding: 15px 48px; text-align: gitna; dekorasyon sa teksto: wala; ipakita: inline-block; laki ng font: 16px; }

// Button ng Pag-reset

input [type = "isumite"] {background-color: # 3498DB; / * Green * / border: wala; kulay puti; padding: 15px 48px; text-align: gitna; dekorasyon sa teksto: wala; ipakita: inline-block; laki ng font: 16px; }

Hakbang 3: Pagkuha ng Tugon sa Web Mula sa Mga Pahina sa Web hanggang sa ESP32

Ang paglilingkod sa mga web page mula sa aparato na 32 ng 32 ay masayang-masaya. Maaari itong maging anumang mula sa pagpapakita ng data ng temperatura sa webpage, pag-on ng mga led mula sa pasadyang webpage o pag-iimbak ng mga kredensyal ng User WiFi sa pamamagitan ng isang webpage. Para sa hangaring ito, gumagamit ang ESP 32 ng WebServer Class sa mga web page ng server.

• Una, Lumikha ng isang halimbawa ng klase ng WebServer sa port 80 (HTTP port).
• I-set up ngayon ang aparatong ESP bilang softAP. Bigyan ang SSID at passkey at magtalaga ng isang static IP sa aparato.
• Simulan ang server.

// ********* SSID at Pass para sa AP ***** ***** /

const char * ssidAP = "bigyan ang SSID"; const char * passAP = "pass key";

// ********* Static IP Config ***** ***** / 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": "Nabigong kumonekta");

pagkaantala (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Configuring Soft AP": "Error in Configuration"); Serial.println (WiFi.softAPIP ());

// simulan ang server

server.begin ();

• Lumikha at maghatid ng URL gamit ang iba't ibang mga callback.
• at hawakan ang client nang hindi magkakasabay gamit ang handleClient.

server.on ("/", hawakanRoot);

server.on ("/ dhcp", hawakanDHCP); server.on ("/ static", handleStatic); // hawakan ang mga tugon server.handleClient ();

• Upang ma-access ang mga web page. Kumonekta sa AP na iyong nilikha, nakalista sa loob ng iyong mga network ng WiFi. Ngayon, pumunta sa browser, Ipasok ang IP na na-configure mo sa huling hakbang at i-access ang webpage.
• Kinukuha ng klase ng web server ang pangalang ibinigay sa mga input ('text', 'button', 'radiobutton'etc.) Bilang mga argumento. Sine-save nito ang mga tugon ng mga input na ito bilang mga argumento at maaari nating makuha ang mga halaga o suriin ang mga ito gamit ang mga pamamaraan ng args, arg, hasArg.

kung (server.args ()> 0) {para sa (int i = 0; i <= server.args (); i ++) {

Serial.println (String (server.argName (i)) + '\ t' + String (server.arg (i)));

}

kung (server.hasArg ("ipv4static") && server.hasArg ("gateway") && server.hasArg ("subnet")) {staticSet (); } iba pa kung (server.arg ("ipv4")! = "") {dhcpSetManual (); } iba pa {dhcpSetDefault (); }

Hakbang 4: Static IP Configuration

Sa ngayon naintindihan namin kung paano kumonekta sa AP at kung paano makukuha ang mga halaga mula sa mga field ng pag-input ng webpage

Sa hakbang na ito, mai-configure namin ang Static IP

• Piliin ang Setting ng Static IP at mag-click sa pindutang Isumite. Ire-redirect ka sa susunod na pahina.
• Sa susunod na pahina ipasok ang static IP address, ang gateway address at subnet Mask ang pahinang ito ay ihahatid sa "/ static" na hawakan ng paraan ng static na callback na pamamaraan.
• Kunin ang halaga ng mga patlang ng teksto gamit ang pamamaraan ng server.arg ().

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

String gateway = String (server.arg ("gateway")); String subnet = String (server.arg ("subnet"));

• Ngayon, ang mga halagang ito ay naka-serialize sa isang JSON Format.
• Pagkatapos isusulat namin ang JSON sa SPIFFS.

ugat ["statickey"] = "staticSet";

ugat ["staticIP"] = ipv4static;

ugat ["gateway"] = gateway;

ugat ["subnet"] = subnet;

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

kung (root.printTo (fileToWrite)) {

Serial.println ("- Isinulat ang File"); }

• Ang pagsasaayos na ito ay nai-save sa SPIFFS. Sa paglaon, ang mga halagang ito ay nababasa mula sa SPIFFS.
• Pagkatapos ay mai-parse ang mga static na halaga ng IP mula kay JSON.

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

habang (file.available ()) {

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

kung (debugLogData.length ()> 5) {

JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

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

String ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot ["subnet"];

Hakbang 5: Mga Setting ng DHCP

Sa hakbang na ito, mai-configure namin ang Mga Setting ng DHCP

Piliin ang Mga Setting ng DHCP mula sa pahina ng index at mag-click sa "Isumite"

• Ire-redirect ka sa susunod na pahina. Sa susunod na pahina ipasok ang IP address o piliin ang piliin ang default at mag-click sa pindutang "Isumite" upang isumite ang tugon. Ihahatid ang pahinang ito sa "/ dhcp" na hinahawakan ng pamamaraang callback ngHackDHCP. Kunin ang halaga ng mga patlang ng teksto gamit ang pamamaraan ng server.arg (). Kapag na-click sa pumili ng default na checkbox. ang 192.168.4.1 IP ay ibibigay sa aparato.
• Ngayon, ang mga halagang ito ay naka-serialize sa isang JSON Format.
• Pagkatapos isusulat namin ang JSON sa SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

ugat ["dhcpManual"] = "dhcpManual";

ugat ["dhcpIP"] = "192.168.4.1";

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

kung (root.printTo (fileToWrite)) {

Serial.println ("- Isinulat ang File"); }

• Ang pagsasaayos na ito ay nai-save sa SPIFFS. Sa paglaon, ang mga halagang ito ay nababasa mula sa SPIFFS.
• Ang mga halagang dhcp IP pagkatapos ay mai-parse mula sa JSON.

File file = SPIFFS.open ("/ ip_set.txt", "r"); habang (file.available ()) {debugLogData + = char (file.read ()); } kung (debugLogData.length ()> 5) {JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

kung (readRoot.containsKey ("dhcpDefault")) {

String ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Hakbang 6: Pag-save ng Mga Kredensyal sa WiFi

Sa ngayon, pinili namin ang pagsasaayos ng IP. Ngayon kailangan naming i-save ang mga kredensyal ng wifi ng Gumagamit. Upang malutas ang sitwasyong ito. Sinunod namin ang pamamaraang ito.

• Kaya ngayon mayroon kaming pag-set up ng aming aparato AP sa DHCP o Static IP config na pinili namin mula sa bihag na portal na nabanggit sa mga huling hakbang.
• Sabihin nating napili natin ang pagsasaayos ng Static IP.
• Magse-configure kami ng isang softAP sa IP na ito.
• Matapos basahin ang mga halagang mula sa SPIFFS at i-parse ang mga halagang ito mula kay JSON. Ise-configure namin ang softAP sa IP na ito.
• I-convert ang IP String sa 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];

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

// *****

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

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

bytes = strtoul (str, NULL, base);

str = strchr (str, sep);

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

pahinga;

}

str ++;

}}

Ngayon ay mai-configure namin ang softAP sa IP na ito

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Ang pag-configure ng softAP": "hindi konektado"); Serial.println (WiFi.softAPIP ());

• Simulan ngayon ang web server at maghatid ng isang webpage sa IP na ito. Upang ipasok ang Mga Kredensyal sa WiFi ng Gumagamit.
• Ang webpage ay binubuo ng dalawang mga patlang ng teksto upang ipasok ang SSID at Password.
• Ang handleStaticForm ay isang callback na pamamaraan na nagsisilbi sa webpage.
• Ang server.handleClient () ay nangangalaga sa kahilingan at mga tugon sa at mula sa webpage.

server.begin ();

server.on ("/", hawakanStaticForm);

server.onNotFound (handleNotFound);

STimer = millis ();

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

server.handleClient (); }

Ang form na HTML ay nai-save sa SPIFFS. sinusuri namin ang naaangkop na mga argumento gamit ang server.arg (). upang makuha ang halaga ng SSID at Password

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

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

file.close ();

Hakbang 7: Basahin at Sumulat Mula sa SPIFFS

SPIFFS

Serial Peripheral Interface Flash File System, o SPIFFS para sa maikli. Ito ay isang light-weight file system para sa mga microcontroller na may SPI flash chip. Ang onboard flash chip ng ESP32 ay may maraming puwang para sa iyong mga web page. Naimbak din namin ang aming webpage sa Flash System. Mayroong ilang mga hakbang na kailangan nating sundin upang mag-upload ng data sa mga spiff

I-download ang tool sa pag-upload ng data ng ESP 32 SPIFFS:

• Sa iyong direktoryo ng Arduino sketchbook, lumikha ng direktoryo ng mga tool kung wala pa ito
• I-unpack ang tool sa direktoryo ng mga tool (ang landas ay magiging hitsura ng /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• I-restart ang Arduino IDE
• Magbukas ng isang sketch (o lumikha ng bago at i-save ito)
• Pumunta sa direktoryo ng sketch (piliin ang Sketch> Show Sketch Folder)
• Lumikha ng isang direktoryo na pinangalanang data at anumang mga file na gusto mo sa file system doon. Na-upload namin ang aming pahina sa HTML na may pangalan na webform.html
• Tiyaking napili mo ang isang board, port, at sarado na Serial Monitor
• Piliin ang Mga Tool> Pag-upload ng Data ng Sketch ng ESP8266. Dapat itong magsimulang mag-upload ng mga file sa ESP8266 flash file system. Kapag tapos na, ipapakita ng status bar ng IDE ang nai-upload na mensahe ng Larawan na SPIFFS.

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

void handleStatic () {

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

Sumusulat sa SPIFFS

Sinusulat namin ang naka-save na setting sa SPIFFS upang ang mga gumagamit ay hindi dapat dumaan sa mga hakbang na ito tuwing nagre-reset ang aparato.

• I-convert ang mga argument na natanggap mula sa webpage sa mga object ng JSON
• Isulat ang JSON na ito sa.txt file na nai-save sa SPIFFS.

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

String gateway = String (server.arg ("gateway")); String subnet = String (server.arg ("subnet")); ugat ["statickey"] = "staticSet"; ugat ["staticIP"] = ipv4static; ugat ["gateway"] = gateway; ugat ["subnet"] = subnet; String JSONStatic; char JSON [120]; root.printTo (Serial); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, laki ng (JSONStatic) +2); File fileToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE); kung (! fileToWrite) {Serial.println ("Error sa pagbubukas ng SPIFFS"); } kung (fileToWrite.print (JSON)) {Serial.println ("- Sinulat ang File"); } iba pa {Serial.println ("- Error sa Pagsulat ng File"); } fileToWrite.close ();

Hakbang 8: Pangkalahatang Code

Ang Over code para sa HTML at ESP32 ay matatagpuan sa Github Repository na ito