ESP8266: Cara Memantau Suhu dan Kelembapan: 12 Langkah

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

Dalam tutorial hari ini, kita akan menggunakan ESP-01, yang merupakan ESP8266 dalam konfigurasi 01 (dengan hanya 2 GPIO), untuk bacaan suhu dan kelembapan sensor DHT22. Saya akan menunjukkan skema elektrik dan bahagian pengaturcaraan ESP dengan Arduino. Contohnya mudah, mudah difahami, dan juga dilengkapi dengan PDF yang digunakan dalam video untuk membantu dalam pemasangan.

Dalam reka bentuk, kita kemudian mempunyai ESP01, sumber yang mengubah 110 atau 220 menjadi 5 volt, pengatur voltan 3v3, dan DHT22, yang merupakan sensor. Pada skrin telefon pintar, anda akan mempunyai alamat IP tempatan selain kod JavaScript yang diberikan oleh ESP. Oleh itu, skrin ini akan menerima parameter suhu dan kelembapan dan akan mencetak nilai-nilai ini, yang akan dikemas kini setiap lima saat. Untuk melakukan ini, anda tidak memerlukan aplikasi pada telefon dan tablet, dan ini berlaku untuk OS Android dan IOS.

Langkah 1: Perhimpunan

Skema elektriknya agak mudah, seperti bahagian pemasangannya, yang akan melibatkan ESP01 sebagai pelayan. ESPO1 akan diprogramkan seolah-olah itu Arduino: melalui bahasa C. Saya menunjukkan bahawa bahagian kod dicetak dari penyemak imbas. Ini bermaksud bahawa ia menghantar kod JavaScript ke penyemak imbas. Di bawah ini, saya akan menerangkan dengan lebih baik mengenai cara ini berfungsi.

Kembali ke rajah pendawaian, saya meletakkan sumber suis 5 volt yang disambungkan ke pengatur voltan 3v3 untuk memberi kuasa kepada ESP01. Kami masih mempunyai DHT22 dengan empat pin. Salah satunya, data, tidak digunakan. Walau bagaimanapun, ia memerlukan perintang penarik.

Langkah 2: Kod

Langkah pertama adalah memasukkan lib yang akan kita gunakan. Lib DHT dapat ditambahkan dengan pilihan Sketsa> Sertakan Perpustakaan> Urus Perpustakaan…

Di tetingkap yang terbuka, cari perpustakaan sensor DHT.

Selepas itu, kami membuat pemboleh ubah jenis ESP8266WebServer yang akan menjadi pelayan kami dan akan bertindak balas terhadap permintaan HTTP (port 80).

Kami juga membuat pemboleh ubah DHT dengan parameter 0 (yang merupakan pin GPIO 0) dan jenisnya (dalam kes kami DHT22).

#include #include #include #include // Criamos uma variável do tipo ESP8266WebServer que já possui funções // que auxiliam na criação das rotas que o ESP8266 vai responder ESP8266WebServer server (80); // Variável do tipo DHT que possui funções para controlarmos o módulo dht // izinkan untuk meningkatkan suhu dan perkhidmatan DHT dht (0, DHT22);

Langkah 3: Persediaan

Dalam persediaan, kita akan menginisialisasi Serial hanya supaya kita mempunyai log. Ini akan berlaku sekiranya ESP8266 disambungkan ke komputer melalui siri untuk menggunakan monitor bersiri.

Kami akan menjadikan ESP8266 menyambung ke rangkaian kami. Dalam kes kami, kami menggunakan rangkaian TesteESP dengan kata laluan 87654321, tetapi anda harus mengubahnya mengikut rangkaian yang anda gunakan.

// Menerbitkan Serial apenas caso esteja com o ESP8266 conectado ao computador pela serla queira ter um log // para Facitar saber o que está acontecendo com o ESP8266 Serial.begin (115200); // Instrução para o ESP8266 se conectar à rede. // No nosso caso o nome da rede é TesteESP e a senha é 87654321. // Você deve alterar com as informações da sua rede WiFi.begin ("TesteESP", "87654321"); // Maklum balas caso esteja usando o Monitor Serial Serial.println (""); Serial.print ("Conectando");

Kami menunggu ESP8266 menyambung ke rangkaian, dan setelah menyambung, kami menghantar tetapan rangkaian. Tukar mengikut rangkaian anda.

// Esperamos até que o módulo se conecte à rede while (WiFi.status ()! = WL_CONNECTED) {kelewatan (500); Cetakan bersiri ("."); } // Configurações melakukan IP fixo. Você pode alterar sesuai dengan i redde IPAddress ip (192, 168, 3, 11); Gerbang IPAddress (192, 168, 3, 1); Subnet IPAddress (255, 255, 255, 0); Serial.print ("Configurando IP fixo para:"); Bersiri.println (ip); // Envia a configuração WiFi.config (ip, gateway, subnet);

Perintah seterusnya hanya sekiranya ESP8266 anda disambungkan ke komputer melalui siri, sehingga anda mendapat maklum balas dari Serial Monitor.

Anda boleh memeriksa IP yang diterima ESP8266 untuk melihat sama ada sama seperti dalam tetapan.

// Mostramos no Monitor Serial o ip com o qual o esp8266 se conectou para ver se está de acordo com o que configuramos Serial.println (""); Serial.println ("Connectado"); Serial.print ("IP:"); Serial.println (WiFi.localIP ());

Di sini, kita mulai menentukan fungsi mana yang akan dijalankan untuk setiap permintaan.

Dalam arahan di bawah ini, setiap kali ESP8266 menerima permintaan HTTP dari jenis GET dalam jalur / suhu, fungsi getTemperature akan dijalankan.

// Aqui definimos qual a função será executada para o caminho e tipo dado. // Nesse caso quando houver uma requisição http do tipo GET no caminho https://192.168.2.8/temperature // (pode ser outro ip dependendo da sua configuração) a função getTemperature será executada server.on ("/ suhu", HTTP_GET, getTemperature);

Dalam pernyataan lain ini, setiap kali ESP8266 menerima permintaan HTTP jenis GET di jalur / kelembapan, fungsi getHumidity akan dijalankan.

// Nesse outo caso quando houver uma requisição http do tipo GET no caminho https://192.168.2.8/humidity // (pode ser outro ip dependendo da sua configuração) a função getHumidity será executada server.on ("/ kelembapan", HTTP_GET, getHumidity);

Dalam arahan ini, setiap kali ESP8266 menerima permintaan HTTP jenis GET di jalur / monitor, fungsi showMonitor akan dijalankan.

Fungsi showMonitor bertanggungjawab untuk mengembalikan html utama yang akan memaparkan nilai suhu dan kelembapan.

// Nesse caso quando houver uma requisição http do tipo GET no caminho https://192.168.2.8/monitor // (pode ser outro ip dependendo da sua configuração) pertunjukan funçãoMonitor será executada. // Esta função retornará a página principal que mostrará os valores // da temperatura e da umidade e recarregará essas informações de tempos em tempos server.on ("/ monitor", HTTP_GET, showMonitor);

Berikut adalah definisi fungsi yang harus dilaksanakan apabila jalan yang diminta tidak dijumpai.

// Aqui definimos qual função será executada caso o caminho que o cliente requisitou não tenha sido registrado server.onNotFound (onNotFound);

Di sini kami memulakan pelayan kami yang sebelumnya kami nyatakan di port 80.

Ini adalah akhir persediaan.

// Inicializamos o server que criamos na porta 80 server.begin (); Serial.println ("Servidor HTTP iniciado"); }

Langkah 4: Gelung

Terima kasih kepada lib ESP8266WebServer, kami tidak perlu memeriksa sekiranya ada pelanggan dan apakah jalan permintaannya. Kami hanya perlu memanggil handleClient (), dan objek akan memeriksa apakah ada pelanggan yang membuat permintaan dan akan mengarahkan ke fungsi yang sesuai yang kami daftarkan sebelumnya.

gelung kosong () {// Verifica se há alguma requisição de algum cliente server.handleClient (); }

Langkah 5: Permintaan Tidak Dijumpai

Ini adalah fungsi yang sebelumnya kita log untuk melaksanakan ketika klien membuat permintaan yang belum didaftarkan.

Fungsi hanya mengembalikan kod 404 (kod lalai untuk ketika sumber tidak dijumpai), jenis data yang dikembalikan (dalam hal teks biasa), dan teks dengan kata-kata "Tidak Ditemukan."

// Função que definimos para ser chamada quando o caminho requisitado não juga membatalkan pendaftaran padaNotFound () {server.send (404, "text / plain", "Not Found"); }

Langkah 6: Mengembalikan Suhu

Ini adalah fungsi yang akan mengembalikan json dengan data suhu ketika klien membuat permintaan GET pada / suhu.

// Função que definimos que será executada quando o cliente fizer uma requisição // do tipo GET no caminho https://192.168.2.8/temperature (pode ser outro ip dependendo da sua configuração) batal getTemperature () {// Fazemos a leitura da temperatura através do módulo dht float t = dht.readTemperature (); // Cria um json com os dados da temperatura String json = "{" suhu / ":" + Rentetan (t) + "}"; // Envia o json para o cliente com o código 200, que é o código quando a requisição juga realizada com sucesso server.send (200, "application / json", json); }

Langkah 7: Mengembalikan Kelembapan

Fungsi inilah yang akan mengembalikan json dengan data kelembapan ketika pelanggan membuat permintaan GET dalam / kelembapan.

// Função que definimos que será executada quando o cliente fizer uma requisição // do tipo GET no caminho https://192.168.2.8/humidity (pode ser outro ip dependendo da sua configuração) batal getHumidity () {// Fazemos a leitura da umidade através do módulo dht float h = dht.readHumidity (); // Cria um json com os dados da umidade String json = "{" kelembapan / ":" + Rentetan (h) + "}"; // Envia o json para o cliente com o código 200, que é o código quando a requisição juga realizada com sucesso server.send (200, "application / json", json); }

Langkah 8: HTML

Ini adalah fungsi yang akan mengembalikan html ketika klien masuk ke akses / monitor. Halaman ini akan menunjukkan nilai suhu dan kelembapan, dan akan memuat semula data dari semasa ke semasa. Bahagian yang ada di antara dan dan gaya>

menentukan penampilan halaman, dan anda boleh mengubahnya mengikut kehendak anda.

// Função que definimos que será executada quando o cliente fizer uma requisição // do tipo GET no caminho https://192.168.2.8/monitor (pode ser outro ip dependendo da sua configuração) void showMonitor () {String html = "" "" ""

"Monitor DHT"

"badan {"

"padding: 35px;"

"latar-warna: # 222222;" "}"

Langkah 9: Penerusan Gaya HTML

"h1 {" "warna: #FFFFFF;" "font-keluarga: sans-serif;" "}" "p {" "warna: #EEEEEE;" "font-keluarga: sans-serif;" "saiz fon: 18 piksel;" "}" ""

Di sini kita mempunyai bahagian utama html. Di dalamnya, kita mempunyai dua perenggan yang akan menunjukkan suhu dan kelembapan. Perhatikan id perenggan, kerana melalui ayat inilah kita akan memulihkan perenggan ini untuk memasukkan nilai suhu dan kelembapan setelah diminta.

Monitor DHT

Suhu:

Kelembapan:

Langkah 10: JavaScript

Di sini kita mula menentukan skrip yang akan dari semasa ke semasa membaca nilai suhu dan kelembapan. Fungsi refresh () memanggil fungsi refreshTemperature () dan refreshHumdity (), dan setInterval memanggil fungsi refresh setiap 5000 milisaat (5 saat).

"muat semula ();" "setInterval (muat semula, 5000);" "fungsi refresh ()" "{" "refreshTemperature ()" "refreshHumidity ();" "}"

Fungsi refreshTemperature () membuat permintaan pada / suhu, menguraikan maklumat yang terdapat di json, dan menambahkan ke dalam perenggan suhu id.

"fungsi refreshTemperature ()" "{" "var xmlhttp = XMLHttpRequest baru ();" "xmlhttp.onreadystatechange = function () {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200) {" "document.getElementById ('suhu'). innerHTML = 'Suhu:' + JSON. parse (xmlhttp.responseText).temperature + 'C'; " "}" "};" "xmlhttp.open ('GET', 'https://192.168.2.8/temperature', benar);" "xmlhttp.send ();" "}"

Fungsi refreshHumidity () membuat permintaan ke / kelembapan, menguraikan maklumat yang terdapat dalam json, dan menambahkan ke dalam perenggan kelembapan id. Dan dengan itu, kami menyelesaikan html yang akan kami kirimkan dalam / monitor.

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

"";

Langkah 11: Menamatkan ShowMonitor

Sekarang bahawa tali dengan html yang akan kami kirim sudah siap, kami dapat mengirimkannya kepada klien. Ini melengkapkan fungsi dan kod showMonitor.

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

Langkah 12: Menguji

Sekarang buka penyemak imbas anda dan masukkan https://192.168.2.8/monitor (anda mungkin memerlukan ip yang berbeza bergantung pada konfigurasi anda).