Portal Captive ESP32 untuk Mengkonfigurasi Tetapan IP Statik dan DHCP: 8 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:09

ESP 32 adalah peranti dengan WiFi bersepadu dan BLE. Ini adalah kebaikan untuk projek IoT. Cukup berikan konfigurasi SSID, kata laluan dan IP anda dan satukan perkara tersebut ke dalam awan. Tetapi, menguruskan tetapan IP dan kelayakan Pengguna boleh menjadi pusing bagi pengguna.

Bagaimana jika Pengguna ingin menukar kelayakan WiFi?

Bagaimana jika pengguna mahu menukar tetapan IP DHCP / Statik?

Mengemaskan ESP32 setiap masa tidak boleh dipercayai dan bukan juga penyelesaian untuk masalah ini. Di sini dalam arahan ini kita akan menunjukkan.

• Cara membuat portal captive.
• Menghoskan borang web dari ESP32.
• Membaca dan Menulis dari SPIFFS ESP32.
• Membuat Titik Akses Lembut dan menyambung ke stesen

Langkah 1: Spesifikasi Perkakasan dan Perisian

Spesifikasi Perkakasan

• ESP32 WiFi / BLE
• Sensor Suhu dan Kelembapan Tanpa Wayar

Spesifikasi Perisian

Arduino IDE

Langkah 2: Membuat Portal Tawanan

Portal captive adalah laman web yang dipaparkan kepada pengguna yang baru terhubung sebelum mereka diberi akses yang lebih luas ke sumber rangkaian. Di sini kami menyediakan tiga halaman web untuk memilih antara DHCP dan Tetapan IP Statik. kita boleh menentukan alamat IP ke ESP dengan dua cara.

• Alamat IP DHCP- ini adalah cara untuk menetapkan alamat IP secara dinamis ke peranti. Alamat IP lalai ESP ialah 192.168.4.1
• Alamat IP statik - memberikan Alamat IP tetap ke peranti rangkaian kami. untuk memberikan IP statik ke peranti, kita perlu menentukan alamat IP, alamat gateway, dan subnet mask.

Di laman web pertama, Pengguna diberikan butang radio untuk memilih antara tetapan DHCP dan IP Statik. Di laman web seterusnya, kita harus memberikan maklumat berkaitan IP untuk terus maju.

Kod HTML

Kod HTML untuk laman web boleh didapati di repositori Github ini.

Anda boleh menggunakan IDE atau editor teks seperti Sublime atau notepad ++ untuk membuat laman web HTML.

• Pertama Buat laman web HTML yang mengandungi dua butang radio untuk memilih antara DHCP dan Tetapan IP Statik.
• Sekarang buat butang untuk menghantar jawapan anda
• Berikan sebilangan nama pada butang radio. Kelas pelayan Web ESP akan mengambil nama-nama ini sebagai argumen dan mendapat respons butang radio menggunakan argumen ini
• Sekarang masukkan butang 'SUBMIT' untuk menghantar respons ke peranti.
• Di laman web lain, kami mempunyai kotak teks. Berikan nilai nama dan jenis Input ke kotak teks dan tambahkan butang kirim ke 'SUBMIT' kirimkan respons.
• Buat butang 'RESET' untuk menetapkan semula kandungan bidang teks.

// Tetapan DHCP Butang Radio

Tetapan IP Statik

// Kotak Teks Input

// Butang Hantar

input [type = "submit"] {background-color: # 3498DB; / * Hijau * / sempadan: tidak ada; warna: putih; padding: 15px 48px; text-align: tengah; hiasan teks: tiada; paparan: sebaris-blok; saiz fon: 16 piksel; }

// Tetapkan semula Butang

input [type = "submit"] {background-color: # 3498DB; / * Hijau * / sempadan: tidak ada; warna: putih; padding: 15px 48px; text-align: tengah; hiasan teks: tiada; paparan: sebaris-blok; saiz fon: 16 piksel; }

Langkah 3: Mendapatkan Respons Web Dari Halaman Web ke ESP32

Melayan laman web dari peranti ESP 32 sangat menyeronokkan. Ini dapat berupa menunjukkan data suhu di halaman web, memutar petunjuk dari halaman web khusus atau menyimpan bukti kelayakan WiFi Pengguna melalui halaman web. Untuk tujuan ini, ESP 32 menggunakan Kelas WebServer untuk melayan laman web.

• Pertama, Buat contoh kelas WebServer di port 80 (port
• Sekarang sediakan peranti ESP sebagai softAP. Berikan SSID dan kunci laluan dan berikan IP statik ke peranti.
• Mulakan pelayan.

// ********* SSID dan Pas untuk AP ************** /

const char * ssidAP = "berikan SSID"; const char * passAP = "kunci lulus";

// ********* Konfigurasi IP Statik ************** / Alamat IP ap_local_IP (192, 168, 1, 77); Alamat IP ap_gateway (192, 168, 1, 254); Alamat IP ap_subnet (255, 255, 255, 0);

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

WiFi.mode (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "Soft-AP setup": "Gagal menyambung");

kelewatan (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Mengkonfigurasi AP Lembut": "Ralat dalam Konfigurasi"); Serial.println (WiFi.softAPIP ());

// mulakan pelayan

pelayan.begin ();

• Buat dan layari URL menggunakan panggil balik yang berbeza.
• dan menangani klien secara tidak segerak menggunakan handleClient.

server.on ("/", handleRoot);

pelayan.on ("/ dhcp", handleDHCP); server.on ("/ statik", handleStatic); // mengendalikan pelayan respons.handleClient ();

• Untuk mengakses laman web. Sambungkan ke AP yang baru anda buat, disenaraikan dalam rangkaian WiFi anda. Sekarang, pergi ke penyemak imbas, Masukkan IP yang dikonfigurasikan oleh anda pada langkah terakhir dan akses laman web.
• Kelas pelayan web mengambil nama yang diberikan untuk input ('text', 'button', 'radiobutton'etc.) Sebagai argumen. Ini menyimpan respons input ini sebagai argumen dan kita dapat memperoleh nilai atau memeriksanya menggunakan kaedah args, arg, hasArg.

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

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

}

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

Langkah 4: Konfigurasi IP Statik

Sejauh ini kita telah memahami cara menyambung ke AP dan bagaimana mendapatkan nilai dari medan input halaman web

Dalam langkah ini, kita akan mengkonfigurasi IP Statik

• Pilih Tetapan IP Statik dan klik pada butang Hantar. Anda akan diarahkan ke halaman seterusnya.
• Di halaman berikutnya masukkan alamat IP statik, alamat gerbang dan topeng subnet Halaman ini akan dilayani di "/ static" yang dikendalikan dengan kaedah kaedah panggilan balik statik.
• Dapatkan nilai bidang teks menggunakan kaedah server.arg ().

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

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

• Sekarang, nilai-nilai ini diselaraskan ke dalam Format JSON.
• Kemudian kita akan menulis JSON ke SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4statik;

root ["gateway"] = gateway;

root ["subnet"] = subnet;

Fail failToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE);

jika (root.printTo (fileToWrite)) {

Serial.println ("- Fail Ditulis"); }

• Konfigurasi ini disimpan dalam SPIFFS. Kemudian, nilai-nilai ini dibaca dari SPIFFS.
• Nilai IP statik kemudiannya dihuraikan dari JSON.

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

sementara (file.available ()) {

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

jika (debugLogData.length ()> 5) {

JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

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

Rentetan ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot ["subnet"];

Langkah 5: Tetapan DHCP

Pada langkah ini, kita akan mengkonfigurasi Tetapan DHCP

Pilih Tetapan DHCP dari halaman indeks dan klik "Kirim"

• Anda akan diarahkan ke halaman seterusnya. Di halaman seterusnya masukkan alamat IP atau pilih pilih lalai dan klik pada butang "Kirim" untuk menghantar respons. Halaman ini akan dilayan di "/ dhcp" yang dikendalikan dengan kaedah panggilan balik handleDHCP. Dapatkan nilai bidang teks menggunakan kaedah server.arg (). Apabila diklik pilih kotak pilihan lalai. IP 192.168.4.1 akan diberikan kepada peranti.
• Sekarang, nilai-nilai ini diselaraskan ke dalam Format JSON.
• Kemudian kita akan menulis JSON ke SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

Fail failToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE);

jika (root.printTo (fileToWrite)) {

Serial.println ("- Fail Ditulis"); }

• Konfigurasi ini disimpan dalam SPIFFS. Kemudian, nilai-nilai ini dibaca dari SPIFFS.
• Nilai IP dhcp kemudian dihuraikan dari JSON.

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

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

Rentetan ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Langkah 6: Menyimpan Kelayakan WiFi

Buat masa ini, kami telah memilih konfigurasi IP. Sekarang kita perlu menyimpan kelayakan wifi Pengguna. Untuk menyelesaikan keadaan ini. Kami telah mengikuti prosedur ini.

• Oleh itu, sekarang kita mempunyai persediaan AP peranti kita dalam konfigurasi DHCP atau IP Statik yang telah kita pilih dari portal tawanan yang disebutkan dalam langkah terakhir.
• Katakan kita telah memilih konfigurasi IP Statik.
• Kami akan mengkonfigurasi softAP di IP ini.
• Setelah membaca nilai dari SPIFFS dan menguraikan nilai-nilai ini dari JSON. Kami akan mengkonfigurasi softAP di IP ini.
• Tukarkan Rentetan IP menjadi Bait.

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

Alamat IP ap_local (ip0, ip1, ip2, ip3);

// *************** Hurai bait dari rentetan ****************** //

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

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

bait = strtoul (str, NULL, base);

str = strchr (str, sep);

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

rehat;

}

str ++;

}}

Sekarang kita akan mengkonfigurasi softAP di IP ini

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Mengkonfigurasi softAP": "tidak disambungkan"); Serial.println (WiFi.softAPIP ());

• Sekarang mulakan pelayan web dan layari laman web di IP ini. Untuk memasukkan Kredensial WiFi Pengguna.
• Halaman web terdiri daripada dua bidang teks untuk memasukkan SSID dan Kata Laluan.
• handleStaticForm adalah kaedah panggilan balik yang melayani laman web.
• server.handleClient () mengurus permintaan dan respons ke dan dari laman web.

pelayan.begin ();

server.on ("/", handleStaticForm);

pelayan.onNotFound (handleNotFound);

STimer = milis ();

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

pelayan.handleClient (); }

Bentuk HTML disimpan dalam SPIFFS. kami memeriksa argumen yang sesuai menggunakan server.arg (). untuk mendapatkan nilai SSID dan Kata Laluan

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

server.streamFile (fail, "teks / html");

fail.tutup ();

Langkah 7: Baca dan Tulis Dari SPIFFS

SPIFFS

Sistem Fail Flash Antara Muka Periferal Serial, atau SPIFFS secara ringkas. Ini adalah sistem fail ringan untuk mikrokontroler dengan SPI flash chip. Cip flash onboard ESP32 mempunyai banyak ruang untuk laman web anda. Kami juga telah menyimpan laman web kami dalam Sistem Flash. Terdapat beberapa langkah yang perlu kita ikuti untuk memuat naik data ke spiff

Muat turun alat muat naik data ESP 32 SPIFFS:

• Di direktori buku sketsa Arduino anda, buat direktori alat jika belum ada
• Buka alat ke dalam direktori alat (jalannya akan kelihatan seperti /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Mulakan semula Arduino IDE
• Buka lakaran (atau buat yang baru dan simpan)
• Pergi ke direktori sketsa (pilih Sketch> Show Sketch Folder)
• Buat direktori bernama data dan fail yang anda mahukan dalam sistem fail di sana. Kami telah memuat naik halaman HTML kami dengan nama webform.html
• Pastikan anda telah memilih papan, port, dan Monitor Serial yang ditutup
• Pilih Alat> Muat Naik Data Lakaran ESP8266. Ini mesti mula memuat naik fail ke dalam sistem fail flash ESP8266. Setelah selesai, bar status IDE akan memaparkan mesej SPIFFS Uploaded Image.

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

pegangan kosongStatic () {

Fail fail = SPIFFS.open ("/ page_static.html", "r"); server.streamFile (fail, "teks / html"); file.close ();}

Menulis kepada SPIFFS

Di sini kami menulis tetapan yang disimpan ke SPIFFS agar pengguna tidak perlu melalui langkah-langkah ini setiap kali peranti diatur semula.

• Tukarkan argumen yang diterima dari laman web ke objek JSON
• Tulis JSON ini ke fail.txt yang disimpan dalam SPIFFS.

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

String gateway = String (server.arg ("gateway")); String subnet = String (server.arg ("subnet")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4statik; root ["gateway"] = gateway; root ["subnet"] = subnet; Rentetan JSONStatic; char JSON [120]; root.printTo (Bersiri); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Fail failToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Ralat semasa membuka SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("- Fail Ditulis"); } lain {Serial.println ("- Kesalahan Menulis Fail"); } fileToWrite.close ();

Langkah 8: Kod Keseluruhan

Kod Over untuk HTML dan ESP32 boleh didapati di Github Repository ini