ESP8266: Sıcaklık ve Nem Nasıl İzlenir: 12 Adım

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

Bugünkü eğitimde, DHT22 sensörünün sıcaklık ve nem okumaları için konfigürasyon 01'deki (sadece 2 GPIO ile) ESP8266 olan bir ESP-01 kullanacağız. Size bir Arduino ile elektrik şeması ve ESP programlama bölümünü göstereceğim. Örnek basit, anlaşılması kolay ve montaja yardımcı olması için videoda kullanılan PDF ile birlikte geliyor.

Tasarımda, 110 veya 220'yi 5 volta dönüştüren kaynak olan ESP01, 3v3'lük bir voltaj regülatörü ve sensör olan DHT22'ye sahibiz. Akıllı telefon ekranında, ESP tarafından sağlanan JavaScript koduna ek olarak yerel IP adresine sahip olacaksınız. Bu ekran bu nedenle sıcaklık ve nem parametrelerini alacak ve her beş saniyede bir güncellenecek olan bu değerleri yazdıracaktır. Bunu yapmak için telefonlarda ve tabletlerde herhangi bir uygulamaya ihtiyacınız olmayacak ve bu hem Android işletim sistemi hem de IOS için geçerlidir.

Adım 1: Montaj

Elektrik şeması, ESP01'i bir sunucu olarak içerecek olan montajla ilgili kısım gibi oldukça basittir. ESPO1, bir Arduino gibi programlanacak: C dili aracılığıyla. Kodun bu kısmının tarayıcıdan yazdırıldığına dikkat çekiyorum. Bu, tarayıcıya JavaScript kodu gönderdiği anlamına gelir. Aşağıda, bunun nasıl çalıştığını daha iyi açıklayacağım.

Bağlantı şemasına dönersek, ESP01'e güç sağlamak için 3v3 voltaj regülatörüne bağlı 5 voltluk anahtarlamalı bir kaynak koydum. Hala dört pimli DHT22'ye sahibiz. Bunlardan biri olan veri kullanılmaz. Ancak, bir çekme direnci gerektirir.

2. Adım: Kodlayın

İlk adım, kullanacağımız lib'leri dahil etmektir. DHT lib, Sketch seçeneği> Kitaplığı Dahil Et> Kitaplıkları Yönet… seçeneğiyle eklenebilir.

Açılan pencerede DHT sensör kitaplığını arayın.

Daha sonra sunucumuz olacak ve HTTP isteklerine cevap verecek (port 80) ESP8266WebServer tipinde bir değişken oluşturduk.

Ayrıca 0 parametreleriyle (GPIO pini 0 olan) ve tipiyle (bizim durumumuzda DHT22) bir DHT değişkeni yaratırız.

#include #include #include #include //ESP8266WebSunucusu için çeşitli değişiklikler var // ESP8266 için ESP8266 yanıtlayıcısı ESP8266WebSunucusu sunucusu(80); //DHT'nin çeşitli işlevlere sahip olması için değişken kontroller/módulo dht kontrolleri //permitindo ler a temperatura e ve umidade DHT dht(0, DHT22);

3. Adım: Kurulum

Kurulumda, yalnızca bir günlüğümüz olması için Seriyi başlatacağız. Bu, seri monitörü kullanmak için ESP8266 bilgisayara seri üzerinden bağlanırsa gerçekleşir.

ESP8266'yı ağımıza bağlayacağız. Bizim durumumuzda TesteESP ağını 87654321 şifresi ile kullanıyoruz, ancak bunu kullandığınız ağa göre değiştirmeniz gerekecek.

//Bir Seri apenas casso esteja com o ESP8266 conectado ao computador pela serla queira ter um log //para facilitar saber o que está acontecendo com o ESP8266 Serial.begin(115200); //Instrução para o ESP8266 se conectar à rede. //Nosso casso o nome da rede é TesteESP ve senha é 87654321. //WiFi.begin("TesteESP", "87654321"); //Geribildirim caso esteja usando o Monitor Serial Serial.println(""); Serial.print("Conectando");

ESP8266'nın ağa bağlanmasını bekliyoruz ve bağlandıktan sonra ağ ayarlarını gönderiyoruz. Ağınıza göre değiştirin.

//Esperamos até que o módulo se conecte à rede while (WiFi.status() != WL_CONNECTED) { gecikme(500); Seri.print("."); } //IP düzeltmesini yapılandırır. Você pode alterar uygun bir sua rede IPAdresi ip(192, 168, 3, 11); IPAdresi ağ geçidi(192, 168, 3, 1); IPAdresi alt ağı(255, 255, 255, 0); Serial.print("Configurando IP fixo para: "); Seri.println(ip); //WiFi.config(ip, ağ geçidi, alt ağ) yapılandırması aracılığıyla;

Sonraki komutlar, yalnızca seri olarak bilgisayara bağlı ESP8266'nız olması durumundadır, böylece Seri Monitörden geri bildirim alırsınız.

Ayarlardaki ile aynı olup olmadığını görmek için ESP8266'nın aldığı IP'yi kontrol edebilirsiniz.

//Mostramos hiçbir Monitör Seri o ip com o qual o esp8266 se conectou para ver se está de acordo com o que konfigürasyonları Serial.println(""); Serial.println("Bağlantı"); Seri.print ("IP: "); Serial.println(WiFi.localIP());

Burada, her istek için hangi fonksiyonların yürütüleceğini tanımlamaya başlıyoruz.

Aşağıdaki talimatta, ESP8266, yol/sıcaklıkta GET türünden bir HTTP isteği aldığında, getTemperature işlevi yürütülecektir.

//Aqui definimos, bir função será executada para o caminho ve tipo dado olarak nitelenir. //Nesse casso qudo houver uma requisição http do tipo caminho GET no caminho https://192.168.2.8/temperature //(pode ser outro ip bağlı olarak sua yapılandırma) bir função getTemperature sunucu executada server.on("/temperature", HTTP_GET, getSıcaklık);

Bu diğer ifadede, ESP8266, yol / nemde GET türünde bir HTTP isteği aldığında, getHumidity işlevi yürütülür.

//Nesse dışarı caso qudo houver uma requisição http do tipo GET no caminho https://192.168.2.8/humidity //(pode ser outro ip bağlı olarak sua yapılandırma) bir função getHumidity sera executada server.on("/humidity", HTTP_GET, getHumidity);

Bu talimatta, ESP8266, yol / monitörde GET türünde bir HTTP isteği aldığında, showMonitor işlevi yürütülecektir.

showMonitor işlevi, sıcaklık ve nem değerlerini gösterecek olan ana html'yi döndürmekten sorumludur.

//Nesse caso qudo houver uma requisição http do tipo caminho GET no caminho https://192.168.2.8/monitor //(konfigürasyondan bağımsız olarak) bir função showMonitor executada. //Sıcaklıkların ve değerlerin en iyi şekilde yeniden düzenlendiği bir sayfa // sıcaklığın ve sıcaklığın yeniden değerlendirilmesi, sunucunun temposuyla ilgili bilgileri içerir.on("/monitor", HTTP_GET, showMonitor);

İstenen yol bulunamadığında yürütülmesi gereken fonksiyon tanımı aşağıdadır.

//Tanımlamalar, gerçek işlevlerin yürütülmesi için, istemci gereksinimlerinin olmadığı, sunucunun kayıt altına alınması için gerekli koşulların yerine getirilmesi için geçerlidir.onNotFound(onNotFound);

Burada daha önce port 80'de bildirdiğimiz sunucumuzu başlatıyoruz.

Bu kurulumun sonu.

// 80 numaralı sunucuya bağlanıyor server.begin(); Serial.println("Servidor HTTP iniciado"); }

4. Adım: Döngü

Lib ESP8266WebServer sayesinde, istemci olup olmadığını ve istek yolunun ne olduğunu döngüde kontrol etmemize gerek yok. Sadece handleClient()'i çağırmamız gerekiyor ve nesne, herhangi bir müşterinin herhangi bir istekte bulunup bulunmadığını kontrol edecek ve daha önce kaydettiğimiz ilgili fonksiyona yönlendirilecektir.

void loop() { //Algum cliente server.handleClient(); }

Adım 5: İstek Bulunamadı

Bu, istemci kaydedilmemiş herhangi bir istekte bulunduğunda yürütmek için daha önce günlüğe kaydettiğimiz işlevdir.

İşlev yalnızca 404 kodunu (bir kaynak bulunamadığında varsayılan kod), döndürülen veri türünü (düz metin durumunda) ve "Bulunamadı" kelimelerini içeren bir metni döndürür.

//Função que que que, chamada qudo o para ser chamada qudo o caminho requisitado não foi kayıt geçersiz onNotFound() { server.send(404, "metin/düz", "Bulunamadı"); }

Adım 6: Sıcaklığın Geri Döndürülmesi

Bu, istemci / sıcaklıkta bir GET isteği yaptığında sıcaklık verileriyle bir json döndüren işlevdir.

//Tanımlamalar şu anda yürütülüyor: Müşteriler için gerekli olan şeyler//do tipo GET no caminho https://192.168.2.8/temperature (pode ser outro ip bağlı olarak sua yapılandırma) void getTemperature() { //Fazemos a leitura da temperatura através yapmak mod dht float t = dht.readTemperature(); //Cria um json com os dados ve temperatura String json = "{"temperature\":"+String(t)+"}"; //Envia o json para o cliente com o código 200, que é o código qudo a requisição foi realizada com sucesso server.send (200, "application/json", json); }

Adım 7: Nemin Geri Dönüşü

Bu, istemci / nemde bir GET isteği yaptığında nem verileriyle bir json döndüren işlevdir.

//Tanımlamalar şu anda yürütülüyor: Müşteriler için geçerli olan değerler//do tipo GET no caminho https://192.168.2.8/humidity (pode ser outro ip bağlı olarak sua configuração) void getHumidity() { //Fazemos a leitura da umidade através do módulo dht float h = dht.readHumidity(); //Cria um json com os dados ve umidade String json = "{"nem\":"+String(h)+"}"; //Envia o json para o cliente com o código 200, que é o código qudo a requisição foi realizada com sucesso server.send(200, "application/json", json); }

8. Adım: HTML

Bu, istemci erişmeye / izlemeye gittiğinde html'yi döndürecek işlevdir. Bu sayfa sıcaklık ve nem değerlerini gösterecek ve zaman zaman verileri yeniden yükleyecektir. ve ve style> arasındaki kısım

sayfanın görünümünü tanımlar ve istediğiniz gibi değiştirebilirsiniz.

//Tanımlamalar, uygulamanın yürütülmesi için gereken miktar ve müşteri fizer uma requisição//do tipo GET no caminho https://192.168.2.8/monitor (pode ser outro ip bağlı olarak sua yapılandırma) void showMonitor() { String html = "" "" ""

"DHT Monitör"

"vücut{"

"dolgu:35 piksel;"

"arka plan rengi: #222222;" "}"

9. Adım: HTML Stili Devam Etme

"h1{" "renk: #FFFFFF;" "yazı tipi ailesi: sans-serif;" "}" "p{" "renk: #EEEEEE;" "yazı tipi ailesi: sans-serif;" "yazı tipi boyutu:18 piksel;" "}" ""

Burada html'nin ana kısmına sahibiz. İçinde sıcaklık ve nemi gösterecek iki paragrafımız var. Paragrafların kimliklerine dikkat edin, çünkü taleplerden sonra sıcaklık ve nem değerlerini girmek için bu paragrafları kurtaracağız.

DHT Monitör

Sıcaklık:

Nem:

Adım 10: JavaScript

Burada zaman zaman sıcaklık ve nem değerlerini okuyacak olan komut dosyasını tanımlamaya başlıyoruz. Yenileme () işlevi, refreshTemperature () ve refreshHumdity () işlevlerini çağırır ve setInterval, her 5000 milisaniyede (5 saniyede bir) yenileme işlevini çağırır.

"yenile();" "setInterval(yenile, 5000);" "fonksiyon yenileme()" "{" "refreshTemperature()" "refreshNemlilik();" "}"

YenilemeTemperature () işlevi / sıcaklıkta bir istekte bulunur, json'da bulunan bilgileri ayrıştırır ve paragrafa id sıcaklığını ekler.

"function refreshTemperature()" "{" "var xmlhttp = new XMLHttpRequest();" "xmlhttp.onreadystatechange = function() {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200){" "document.getElementById('temperature').innerHTML = 'Sıcaklık: ' + JSON. parse(xmlhttp.responseText).temperature + 'C';" "}" "};" "xmlhttp.open('GET', 'https://192.168.2.8/temperature', true);" "xmlhttp.send();" "}"

refreshHumidity () işlevi /nem için istekte bulunur, json'da bulunan bilgileri ayrıştırır ve id id'sini paragrafa ekler. Ve bununla birlikte / monitor içindeki istekleri göndereceğimiz html'yi bitiriyoruz.

"function refreshHumidity()" "{" "var xmlhttp = new XMLHttpRequest();" "xmlhttp.onreadystatechange = function() {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200){" "document.getElementById('nem').innerHTML = 'Nem: ' + JSON. parse(xmlhttp.responseText).nem + '%';" "}" "};" "xmlhttp.open('GET', 'https://192.168.2.8/nem', true);" "xmlhttp.send();" "}"

"";

Adım 11: ShowMonitor'u Bitirme

Artık göndereceğimiz html'li dize hazır olduğuna göre, onu istemciye gönderebiliriz. Bu, showMonitor işlevini ve kodu tamamlar.

//Envia o html para o cliente com o código 200, que é o código qudo a requisição foi realizada com sucesso server.send(200, "text/html", html); }

Adım 12: Test Etme

Şimdi tarayıcınızı açın ve https://192.168.2.8/monitor girin (yapılandırmanıza bağlı olarak farklı bir ipe ihtiyacınız olabilir).