Statik ve DHCP IP Ayarlarını Yapılandırmak için ESP32 Captive Portal: 8 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:19

ESP 32, entegre WiFi ve BLE'ye sahip bir cihazdır. IoT projeleri için bir tür nimet. Sadece SSID'nizi, parolanızı ve IP yapılandırmalarınızı verin ve bunları buluta entegre edin. Ancak, IP ayarlarını ve Kullanıcı kimlik bilgilerini yönetmek, kullanıcı için bir baş ağrısı olabilir.

Kullanıcı WiFi kimlik bilgilerini değiştirmek isterse ne olur?

Kullanıcı DHCP/Statik IP ayarlarını değiştirmek isterse ne olur?

ESP32'nin her zaman yanıp sönmesi güvenilir değildir ve bu sorunların çözümü bile değildir. İşte bu talimatta göstereceğiz.

• Tutsak portal nasıl oluşturulur.
• ESP32'den bir web formu barındırma.
• SPIFFS ESP32'den Okuma ve Yazma.
• Bir Yumuşak Erişim Noktası oluşturma ve bir istasyona bağlanma

Adım 1: Donanım ve Yazılım Spesifikasyonu

Donanım Spesifikasyonu

• ESP32 WiFi/BLE
• Kablosuz Sıcaklık ve Nem Sensörü

Yazılım özellikleri

Arduino IDE'si

2. Adım: Bir Esir Portalı Oluşturma

Tutsak portal, yeni bağlanan kullanıcılara ağ kaynaklarına daha geniş erişim izni verilmeden önce görüntülenen bir web sayfasıdır. Burada DHCP ve Statik IP Ayarları arasında seçim yapabileceğiniz üç web sayfası sunuyoruz. IP adresini ESP'ye iki şekilde tanımlayabiliriz.

• DHCP IP adresi- IP adresini cihaza dinamik olarak atamanın bir yoludur. ESP'nin varsayılan IP adresi 192.168.4.1'dir.
• Statik IP adresi- ağ cihazımıza kalıcı bir IP Adresi atama. cihaza statik IP sağlamak için IP adresini, ağ geçidi adresini ve alt ağ maskesini tanımlamamız gerekir.

İlk web sayfasında, Kullanıcıya DHCP ve Statik IP ayarları arasında seçim yapması için radyo düğmeleri sağlanır. Bir sonraki web sayfasında, daha fazla ilerlemek için IP ile ilgili bilgileri sağlamamız gerekiyor.

HTML Kodu

Web sayfaları için HTML kodu bu Github deposunda bulunabilir.

HTML web sayfaları oluşturmak için Sublime veya notepad++ gibi herhangi bir IDE veya metin düzenleyiciyi kullanabilirsiniz.

• Önce DHCP ve Statik IP Ayarları arasında seçim yapmak için iki radyo düğmesi içeren bir HTML web sayfası oluşturun.
• Şimdi yanıtınızı göndermek için düğmeyi oluşturun
• Radyo düğmelerine bir ad verin. ESP Web sunucusu sınıfı bu isimleri argüman olarak alacak ve bu argümanları kullanarak radyo düğmelerinin yanıtını alacaktır.
• Şimdi yanıtı cihaza göndermek için bir ' GÖNDER ' düğmesi ekleyin.
• Diğer web sayfalarında metin kutularımız var. Metin kutusuna ad değerini ve Giriş türünü verin ve yanıtı göndermek için ' GÖNDER ' için bir gönder düğmesi ekleyin.
• Metin alanının içeriğini sıfırlamak için bir 'SIFIRLA' düğmesi oluşturun.

//Radyo Düğmesi DHCP Ayarı

Statik IP Ayarı

// Metin Kutularını Girin

//Gönder Düğmesi

input[type="gönder"]{ arka plan rengi: #3498DB; /* Yeşil */ kenarlık: yok; Beyaz renk; dolgu:15 piksel 48 piksel; metin hizalama: merkez; metin-dekorasyon: yok; ekran: satır içi blok; yazı tipi boyutu: 16 piksel; }

//Yeniden başlatma tuşu

input[type="gönder"]{ arka plan rengi: #3498DB; /* Yeşil */ kenarlık: yok; Beyaz renk; dolgu:15 piksel 48 piksel; metin hizalama: merkez; metin-dekorasyon: yok; ekran: satır içi blok; yazı tipi boyutu: 16 piksel; }

Adım 3: Web Sayfalarından ESP32'ye Web Yanıtı Alma

ESP 32 cihazından web sayfaları sunmak çok eğlenceli. Web sayfasındaki sıcaklık verilerini göstermekten, led'leri özel web sayfasından çevirmekten veya bir web sayfası aracılığıyla Kullanıcı WiFi kimlik bilgilerini depolamaktan herhangi bir şey olabilir. Bu amaçla ESP 32, web sayfalarını sunuculamak için WebServer Class'ı kullanır.

• İlk olarak, 80 numaralı bağlantı noktasında (HTTP bağlantı noktası) bir WebServer sınıfı örneği oluşturun.
• Şimdi ESP cihazını softAP olarak ayarlayın. SSID ve parolayı verin ve cihaza statik bir IP atayın.
• Sunucuyu başlatın.

//***********SSID ve AP için Geçiş**************/

const char *ssidAP = "SSID ver"; const char *passAP = "geçiş anahtarı";

//***********Statik IP Yapılandırması**************/IPAdresi ap_local_IP(192, 168, 1, 77); IPAdresi ap_gateway(192, 168, 1, 254); IPAdresi ap_subnet(255, 255, 255, 0);

//***********SoftAP Yapılandırması*************/

WiFi.mode(WIFI_AP);

Serial.println(WiFi.softAP(ssidAP, passAP) ? "soft-AP kurulumu": "Bağlanamadı");

gecikme(100); Serial.println(WiFi.softAPConfig(ap_local_IP, ap_gateway, ap_subnet)? "Soft AP Yapılandırma": "Yapılandırmada Hata"); Seri.println(WiFi.softAPIP());

//sunucuyu başlat

server.begin();

• Farklı geri aramalar kullanarak URL'yi oluşturun ve sunun.
• ve istemciyi handleClient kullanarak eşzamansız olarak ele alın.

server.on("/", handleRoot);

server.on("/dhcp",handleDHCP); server.on("/static", handleStatic); // yanıtları işlemek server.handleClient();

• Web sayfalarına erişmek için. Yeni oluşturduğunuz, WiFi ağlarınızda listelenen AP'ye bağlanın. Şimdi tarayıcıya gidin, son adımda sizin tarafınızdan yapılandırılan IP'yi girin ve web sayfasına erişin.
• Web sunucu sınıfı girdilere('text', 'button', 'radiobutton'vb.) verilen ismi argüman olarak alır. Bu girdilerin yanıtlarını argüman olarak kaydeder ve değerleri alabilir veya args, arg, hasArg yöntemlerini kullanarak kontrol edebiliriz.

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("ağ geçidi") && server.hasArg("alt ağ")){ staticSet(); }else if(server.arg("ipv4")!= ""){ dhcpSetManual(); }else{ dhcpSetDefault(); }

Adım 4: Statik IP Yapılandırması

Buraya kadar AP'ye nasıl bağlanılacağını ve web sayfasının giriş alanlarından değerlerin nasıl alınacağını anladık

Bu adımda Statik IP'yi yapılandıracağız.

• Statik IP Ayarını seçin ve Gönder düğmesine tıklayın. Bir sonraki sayfaya yönlendirileceksiniz.
• Sonraki sayfada statik IP adresini, ağ geçidi adresini ve alt ağ Maskesini girin, bu sayfa statik geri çağırma yöntemiyle işlenen "/static" konumunda sunulacaktır.
• server.arg() yöntemini kullanarak metin alanlarının değerini alın.

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

String ağ geçidi = String(server.arg("ağ geçidi")); String alt ağı = String(server.arg("alt ağ"));

• Şimdi, bu değerler bir JSON Formatında serileştirildi.
• Sonra JSON'u SPIFFS'ye yazacağız.

root["statickey"]="staticSet";

root["staticIP"] = ipv4static;

root["ağ geçidi"] = ağ geçidi;

kök["alt ağ"] = alt ağ;

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

if(root.printTo(fileToWrite)){

Serial.println("--Dosya Yazılı"); }

• Bu yapılandırma SPIFFS'ye kaydedilir. Daha sonra bu değerler SPIFFS'den okunur.
• Statik IP değerleri daha sonra JSON'dan ayrıştırılır.

Dosya dosyası = 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")){

String ipStaticValue= readRoot["staticIP"];

String gatewayValue = readRoot["ağ geçidi"];

String subnetValue = readRoot["alt ağ"];

Adım 5: DHCP Ayarları

Bu adımda DHCP Ayarlarını yapılandıracağız.

Dizin sayfasından DHCP Ayarlarını seçin ve "Gönder"e tıklayın

• Bir sonraki sayfaya yönlendirileceksiniz. Sonraki sayfada IP adresini girin veya varsayılanı seçin ve yanıtı göndermek için "Gönder" düğmesini tıklayın. Bu sayfa, handleDHCP geri çağırma yöntemiyle işlenen "/dhcp" konumunda sunulacaktır. server.arg() yöntemini kullanarak metin alanlarının değerini alın. Tıklandığında varsayılan onay kutusunu seçin. 192.168.4.1 IP cihaza verilecektir.
• Şimdi, bu değerler bir JSON Formatında serileştirildi.
• Sonra JSON'u SPIFFS'ye yazacağız.

JsonObject& root =jsonBuffer.createObject();

root["dhcpManual"]="dhcpManual";

root["dhcpIP"] = "192.168.4.1";

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

if(root.printTo(fileToWrite)){

Serial.println("--Dosya Yazılı"); }

• Bu yapılandırma SPIFFS'ye kaydedilir. Daha sonra bu değerler SPIFFS'den okunur.
• dhcp IP değerleri daha sonra JSON'dan ayrıştırılır.

Dosya dosyası = 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")){

String ipdhcpValue= readRoot["dhcpIP"];

Serial.println(ipdhcpValue);

dhcpAPConfig();}

6. Adım: WiFi Kimlik Bilgilerini Kaydetme

Şimdilik IP konfigürasyonunu seçtik. Şimdi Kullanıcının wifi kimlik bilgilerini kaydetmemiz gerekiyor. Bu durumu çözmek için. Bu prosedürü uyguladık.

• Şimdi, son adımlarda bahsedilen captive portaldan seçtiğimiz DHCP veya Statik IP konfigürasyonunda cihaz AP kurulumumuz var.
• Diyelim ki Statik IP konfigürasyonunu seçtik.
• Bu IP'de bir softAP yapılandıracağız.
• SPIFFS'den değerleri okuduktan ve bu değerleri JSON'dan ayrıştırdıktan sonra. SoftAP'yi bu IP'de yapılandıracağız.
• IP Dizesini Bayt'a dönüştürün.

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

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

//***************Dizeden baytları ayrıştır ******************//

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

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

bytes = strtoul(str, NULL, taban);

str = strchr(str, sep);

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

kırmak;

}

str++;

}}

Şimdi softAP'yi bu IP'de yapılandıracağız

Serial.println(WiFi.softAPConfig(ap_localWeb_IP, ap_gate, ap_net) ? "softAP yapılandırılıyor": "bağlı değil"); Seri.println(WiFi.softAPIP());

• Şimdi web sunucusunu başlatın ve bu IP'de bir web sayfası sunun. Kullanıcının WiFi Kimlik Bilgilerini girmek için.
• Web sayfası, SSID ve Parola girmek için iki metin alanından oluşur.
• handleStaticForm, web sayfasına hizmet veren bir geri arama yöntemidir.
• server.handleClient(), istek ve web sayfasına gelen ve gelen yanıtlarla ilgilenir.

server.begin();

server.on("/", handleStaticForm);

server.onNotFound(handleNotFound);

Stimer = millis();

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

server.handleClient(); }

HTML formu SPIFFS'ye kaydedilir. server.arg() kullanarak uygun argümanları kontrol ederiz. SSID ve Parola değerini almak için

Dosya dosyası = SPIFFS.open("/WiFi.html", "r");

server.streamFile(dosya, "metin/html");

dosya.kapat();

7. Adım: SPIFFS'den Okuma ve Yazma

SPIFFS

Seri Çevre Birimi Arayüzü Flash Dosya Sistemi veya kısaca SPIFFS. SPI flaş çipli mikrodenetleyiciler için hafif bir dosya sistemidir. ESP32'nin yerleşik flash yongası, web sayfalarınız için bolca alana sahiptir. Web sayfamızı da Flash Sisteminde sakladık. Spiffs'e veri yüklemek için izlememiz gereken birkaç adım var.

ESP 32 SPIFFS veri yükleme aracını indirin:

• Arduino eskiz defteri dizininizde henüz yoksa araçlar dizini oluşturun
• Aracı araçlar dizinine paketinden çıkarın (yol /Arduino/tools/ESP32FS/tool/esp32fs.jar gibi görünecektir)
• Arduino IDE'yi yeniden başlatın
• Bir çizim açın (veya yeni bir tane oluşturun ve kaydedin)
• Çizim dizinine gidin (Çizim > Çizim Klasörünü Göster'i seçin)
• Oradaki dosya sisteminde data adında bir dizin ve istediğiniz herhangi bir dosya oluşturun. Webform.html adlı HTML sayfamızı yükledik
• Bir kart, bağlantı noktası ve kapalı Seri Monitör seçtiğinizden emin olun.
• Araçlar > ESP8266 Çizim Verisi Yükleme'yi seçin. Bu, dosyaları ESP8266 flash dosya sistemine yüklemeye başlamalıdır. Bittiğinde, IDE durum çubuğu SPIFFS Image Uploaded mesajını görüntüler.

void handleDHCP(){ Dosya dosyası = SPIFFS.open("/page_dhcp.html", "r"); server.streamFile(dosya, "metin/html"); dosya.kapat();}

void handleStatic(){

Dosya dosyası = SPIFFS.open("/page_static.html", "r"); server.streamFile(dosya, "metin/html"); dosya.kapat();}

SPIFFS'ye yazma

Burada, kaydedilen ayarı SPIFFS'ye yazıyoruz, böylece kullanıcılar cihaz sıfırlandığında bu adımları tekrarlamak zorunda kalmazlar.

• Web sayfasından alınan argümanları JSON nesnelerine dönüştürün
• Bu JSON'u SPIFFS'de kaydedilen.txt dosyasına yazın.

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

String ağ geçidi = String(server.arg("ağ geçidi")); String alt ağı = String(server.arg("alt ağ")); root["statickey"]="staticSet"; root["staticIP"] = ipv4static; root["ağ geçidi"] = ağ geçidi; kök["alt ağ"] = alt ağ; JSONStatic dizisi; karakter JSON[120]; root.printTo(Seri); root.prettyPrintTo(JSONStatic); JSONStatic.toCharArray(JSON, sizeof(JSONStatic)+2); Dosya fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE); if(!fileToWrite){ Serial.println("SPIFFS açılırken hata oluştu"); } if(fileToWrite.print(JSON)){ Serial.println("--Dosya Yazılı"); }else{ Serial.println("--Dosya Yazma Hatası"); } fileToWrite.close();

Adım 8: Genel Kod

HTML ve ESP32 için Over kodu bu Github Deposunda bulunabilir.