ESP8266: Cara Memantau Suhu dan Kelembaban: 12 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:57

Dalam tutorial hari ini, kita akan menggunakan ESP-01, yaitu ESP8266 dalam konfigurasi 01 (dengan hanya 2 GPIO), untuk pembacaan suhu dan kelembaban sensor DHT22. Saya akan menunjukkan skema listrik dan bagian pemrograman ESP dengan Arduino. Contohnya sederhana, mudah dimengerti, dan juga dilengkapi dengan PDF yang digunakan dalam video untuk membantu perakitan.

Dalam desain, kami memiliki ESP01, sumber yang mengubah 110 atau 220 menjadi 5 volt, pengatur tegangan 3v3, dan DHT22, yang merupakan sensor. Di layar smartphone, Anda akan memiliki alamat IP lokal selain kode JavaScript yang disediakan oleh ESP. Oleh karena itu, layar ini akan menerima parameter suhu dan kelembaban dan akan mencetak nilai-nilai ini, yang akan diperbarui setiap lima detik. Untuk melakukan ini, Anda tidak memerlukan aplikasi apa pun di ponsel dan tablet, dan ini berlaku untuk OS Android dan iOS.

Langkah 1: Perakitan

Skema kelistrikannya cukup sederhana, seperti bagian perakitan yang akan melibatkan ESP01 sebagai server. ESPO1 akan diprogram seperti Arduino: melalui bahasa C. Saya menunjukkan bahwa bagian dari kode dicetak dari browser. Ini berarti bahwa ia mengirimkan kode JavaScript ke browser. Di bawah ini, saya akan menjelaskan lebih baik tentang cara kerjanya.

Kembali ke diagram pengkabelan, saya memasang sumber sakelar 5 volt yang terhubung ke pengatur tegangan 3v3 untuk memberi daya pada ESP01. Kami masih memiliki DHT22 dengan empat pin. Salah satunya, data, tidak digunakan. Namun, dibutuhkan resistor pull up.

Langkah 2: Kode

Langkah pertama adalah memasukkan libs yang akan kita gunakan. Lib DHT dapat ditambahkan dengan opsi Sketsa> Sertakan Perpustakaan> Kelola Perpustakaan …

Di jendela yang terbuka, cari perpustakaan sensor DHT.

Setelah itu, kita buat variabel bertipe ESP8266WebServer yang akan menjadi server kita dan akan merespon permintaan HTTP (port 80).

Kami juga membuat variabel DHT dengan parameter 0 (yang merupakan pin GPIO 0) dan tipenya (dalam kasus kami DHT22).

#include #include #include #include //Criamos uma variável do tipo ESP8266WebServer untuk mendapatkan kesenangan //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 //permitindo ler a temperatur dan umidade DHT dht(0, DHT22);

Langkah 3: Pengaturan

Dalam pengaturan, kami akan menginisialisasi Serial saja sehingga kami memiliki log. Ini akan terjadi jika ESP8266 terhubung ke komputer melalui serial untuk menggunakan monitor serial.

Kami akan membuat ESP8266 terhubung ke jaringan kami. Dalam kasus kami, kami menggunakan jaringan TesteESP dengan kata sandi 87654321, tetapi Anda harus mengubahnya sesuai dengan jaringan yang Anda gunakan.

//Inisialisasi Serial apenas caso 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); //Instruo untuk ESP8266 sekonektar dan 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"); //Umpan balik caso esteja usando o Monitor Serial Serial.println(""); Serial.print("Konektando");

Kami menunggu ESP8266 terhubung ke jaringan, dan setelah terhubung, kami mengirim pengaturan jaringan. Ubah sesuai dengan jaringan Anda.

//Esperamos até que o módulo se conecte rede while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } //Konfigurasi melakukan fixo IP. Você pode alterar conforme a sua rede IPaddress ip(192, 168, 3, 11); Gateway alamat IP(192, 168, 3, 1); Subnet alamat IP(255, 255, 255, 0); Serial.print("Konfigurasi IP fixo para: "); Serial.println(ip); //Envia a configuração WiFi.config(ip, gateway, subnet);

Perintah selanjutnya hanya jika Anda memiliki ESP8266 yang terhubung ke komputer melalui serial, sehingga Anda mendapat umpan balik dari Serial Monitor.

Anda dapat memeriksa IP yang diterima ESP8266 untuk melihat apakah itu sama seperti di pengaturan.

//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("Koneksi"); Serial.print("IP: "); Serial.println(WiFi.localIP());

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

Pada instruksi di bawah ini, setiap kali ESP8266 menerima permintaan HTTP bertipe GET di jalur/temperatur, fungsi getTemperature akan dijalankan.

//Aqui definimos qual a função será executada para o caminho dan 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("/temperature", HTTP_GET, dapatkanSuhu);

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

//Keluar dari 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("/humidity", HTTP_GET, getHumidity);

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

Fungsi showMonitor bertanggung jawab untuk mengembalikan html utama yang akan menampilkan nilai suhu dan kelembaban.

//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) a função showMonitor será executada. //Memastikan kesenangan di halaman utama dengan kecepatan tinggi //mengatur suhu dan mengatur ulang informasi tentang tempo dan tempo server.on("/monitor", HTTP_GET, showMonitor);

Berikut adalah definisi fungsi yang harus dijalankan ketika jalur yang diminta tidak ditemukan.

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

Disini kita menginisialisasi server kita yang sebelumnya kita deklarasikan pada port 80.

Ini adalah akhir dari pengaturan.

//Inisialisasi dari server dengan server 80 server.begin(); Serial.println("Servidor HTTP iniciado"); }

Langkah 4: Putaran

Berkat lib ESP8266WebServer, kami tidak perlu memeriksa loop jika ada klien dan untuk apa jalur permintaannya. Kita hanya perlu memanggil handleClient(), dan objek akan memeriksa apakah ada klien yang membuat permintaan dan akan mengarahkan ulang ke fungsi yang sesuai yang kita daftarkan sebelumnya.

void loop() { //Verifikasi persyaratan algum server klien algum.handleClient(); }

Langkah 5: Permintaan Tidak Ditemukan

Ini adalah fungsi yang sebelumnya kami log untuk dijalankan ketika klien membuat permintaan apa pun yang belum terdaftar.

Fungsi ini hanya mengembalikan kode 404 (kode default ketika sumber daya tidak ditemukan), tipe data yang dikembalikan (dalam kasus teks biasa), dan teks dengan kata-kata "Tidak Ditemukan."

//Função que definimos para ser chamada quando o caminho requisitado não foi reggistrado void onNotFound() { 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) void getTemperature() { //Fazemos a leitura da suhu através lakukan módulo dht float t = dht.readTemperature(); //Cria um json com os dados da temperatur String json = "{"temperature\":"+String(t)+"}"; //Envia o json para o cliente com o código 200, que é o código quando a requisição foi realizada com sucesso server.send (200, "application/json", json); }

Langkah 7: Mengembalikan Kelembaban

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

//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) void 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 = "{"kelembaban\":"+String(h)+"}"; //Envia o json para o cliente com o código 200, que é o código quando a requisição foi realizada com sucesso server.send(200, "application/json", json); }

Langkah 8: HTML

Ini adalah fungsi yang akan mengembalikan html saat klien mengakses/memantau. Halaman ini akan menampilkan nilai suhu dan kelembaban, dan akan memuat ulang data dari waktu ke waktu. Bagian antara dan dan gaya>

mendefinisikan tampilan halaman, dan Anda dapat mengubahnya sesuka 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 = "" "" ""

"Pemantau DHT"

"tubuh{"

"padding:35px;"

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

Langkah 9: Kelanjutan Gaya HTML

"h1{" "warna: #FFFFFF;" "font-family: sans-serif;" "}" "p{" "warna: #EEEEEE;" "font-family: sans-serif;" "ukuran font:18px;" "}" ""

Di sini kita memiliki bagian utama dari html. Di dalamnya, kami memiliki dua paragraf yang akan menunjukkan suhu dan kelembaban. Perhatikan id paragraf, karena melalui mereka kami akan memulihkan paragraf ini untuk memasukkan nilai suhu dan kelembaban setelah permintaan.

Monitor DHT

Suhu:

Kelembaban:

Langkah 10: JavaScript

Di sini kita mulai mendefinisikan skrip yang dari waktu ke waktu akan membaca nilai suhu dan kelembaban. Fungsi refresh () memanggil fungsi refreshTemperature () dan refreshHumdity (), dan setInterval memanggil fungsi refresh setiap 5000 milidetik (5 detik).

"menyegarkan();" "setInterval(segarkan, 5000);" "fungsi refresh()" "{" "refreshTemperature()" "refreshHumidity();" "}"

Fungsi refreshTemperature () membuat permintaan pada / suhu, mem-parsing informasi yang terkandung dalam json, dan menambahkan ke dalam paragraf suhu id.

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

Fungsi refreshHumidity () membuat permintaan ke / kelembaban, mem-parsing informasi yang terkandung dalam json, dan menambahkan ke dalam paragraf kelembaban id. Dan dengan itu, kami menyelesaikan html yang akan kami kirimkan dalam permintaan di / monitor.

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

"";

Langkah 11: Menyelesaikan ShowMonitor

Sekarang string dengan html yang akan kita kirim sudah siap, kita bisa mengirimkannya ke klien. Ini melengkapi fungsi showMonitor dan kodenya.

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

Langkah 12: Pengujian

Sekarang buka browser Anda dan masukkan https://192.168.2.8/monitor (Anda mungkin memerlukan ip yang berbeda tergantung pada konfigurasi Anda).