Membuat Stasiun Cuaca Berbasis Web Menggunakan ESP32

Di abad ini, semuanya dialihkan ke WiFi. Ada banyak stasiun cuaca yang tersedia di pasar yang dapat dioperasikan dengan WiFi dan dapat digunakan di rumah. Ini stasiun cuaca terhubung ke internet dan termasuk beberapa sensor. Stasiun tersebut merasakan suhu, kelembaban atau tekanan dan menampilkannya di layar yang sudah ada di gadget dan mengirimkan data ke aplikasi seluler melalui WiFi. Sensor ini sangat mahal sehingga kebanyakan orang tidak mampu membelinya. Kami akan membuat stasiun cuaca di rumah yang akan efisien dan ekonomis juga. Sangat mudah membuatnya di rumah dengan menggunakan komponen yang mudah didapat di pasaran.

Pada artikel ini, kita akan membuat stasiun cuaca menggunakan ESP32 dan BME280 sensor. Sensor akan merasakan parameter masing-masing dan mengirimkannya ke halaman web melalui koneksi WiFi lokal. Untuk ini, kami akan menulis kode dan membakarnya di papan mikrokontroler.

Bagaimana Cara Membuat Stasiun Cuaca Menggunakan ESP32 dan BME280?

Karena kita sekarang mengetahui abstrak proyek, mari kita lanjutkan dan kumpulkan lebih banyak informasi untuk mulai mengerjakan proyek.

Langkah 1: Mengumpulkan Komponen

Pendekatan terbaik untuk memulai proyek apa pun adalah dengan membuat daftar komponen dan melalui studi singkat tentang komponen ini karena tidak ada yang mau bertahan di tengah-tengah proyek hanya karena ada komponen yang hilang. Daftar komponen yang akan kita gunakan dalam proyek ini diberikan di bawah ini:

Langkah 2: Membuat Tabel Dalam HTML

Sekarang mari kita lihat bagaimana tabel dibuat di HyperText Markup Language (HTML) dan ditampilkan di browser web. HTML adalah bahasa yang digunakan untuk membuat struktur halaman web. Ini terdiri dari serangkaian elemen yang memberi tahu browser cara menampilkan hal-hal di halaman. Elemen-elemen ini diwakili oleh tag. Browser membaca kode yang ditulis dalam HTML dan menampilkan konten di layar tanpa menampilkan tag.

Untuk membuat tabel di browser, kita akan menggunakan

menandai. Untuk membuat baris di dalamnya, kami akan menggunakan tags yang artinya baris tabel. Untuk memberi judul pada tabel yang akan kita gunakan tag yang artinya judul tabel. Untuk menentukan setiap sel dalam tabel yang akan kita gunakan menandai. Kode untuk membuat tabel yang dibutuhkan, lihat kode yang diberikan di bawah ini.

kuantitas yang kami ukur nilainya. 
PENGUKURAN NILAI
Temp. Celsius --- * C
Temp. Fahrenheit --- * F
Tekanan --- hPa
Approx. Ketinggian --- meter
Kelembaban --- %

Dalam kode di atas, dua sel dari kolom pertama dinamai sebagai Pengukuran dan Nilai. Di bawah ini, enam baris dibuat dan masing-masing untuk kuantitas berbeda yang akan diukur. Tulis kode ini di notepad. Klik pada Mengajukan menu di sudut kiri atas atas layar. Klik Simpan Sebagai dan beri nama file Anda dengan ekstensi .html.Sekarang ubah Save As Type menjadi SEMUA.Klik tombol simpan untuk menyimpan file. Browser akan dibuat di folder tempat file teks itu ditempatkan. Klik pada file itu untuk melihat tabel Anda di browser.

Saat Anda akan membuka file di browser, akan terlihat seperti gambar berikut. Dalam tabel ini, gaya tidak disertakan. Jika Anda ingin menambahkan border untuk membuat tabel bergaya pilihan Anda sendiri, Anda harus menambahkan CSS di dalamnya. Untuk menambahkan CSS, klik di sini.

Langkah 3: Merakit Komponen

Sekarang mari kita lanjutkan dan hubungkan sensor ke ESP32 naik. Sebelum membuat sambungan ini, ada baiknya melalui studi singkat tentang konfigurasi pin Sensor.

SEBUAH BME280 sensor memiliki tujuh pin di atasnya. One Pin adalah pin Vcc yang digunakan untuk menyalakan sensor dan pin kedua adalah pin ground. Suplai input yang diterapkan ke pin Vcc harus dalam kisaran 1,8V hingga 3,6V. I2C Transmisi data serial (dua arah) dapat dicapai oleh SDA dan SCL pin. SCK digunakan untuk garis jam dalam proses transmisi. SDO pin digunakan untuk data yang keluar dari sensor BME280. SDI pin digunakan untuk data yang keluar dari sensor BME280. Chip aktif-rendah yang dipilih adalah CS pin.

Protokol yang akan kita gunakan dalam proyek ini adalah komunikasi 12C dengan modul sensor BME280. Untuk tujuan ini, kami akan menggunakan file SDA dan SCL pin sensor. Hubungkan pin21 dari ESP32 dihubungkan ke pin SDA dari sensor dan pin22 dari ESP32 dihubungkan ke SCL untuk sensor.

Ketika semua koneksi dibuat, hubungkan papan mikrokontroler ke komputer dan bakar kode di dalamnya. Tekan tombol Aktifkan untuk memulainya. Koneksi diagram akan terlihat seperti:

Langkah 4: Memulai ESP32

Jika Anda belum pernah mengerjakan Arduino IDE sebelumnya, jangan khawatir karena langkah demi langkah untuk menyiapkan Arduino IDE ditunjukkan di bawah ini.

  1. Unduh versi terbaru Arduino IDE dari Arduino.
  2. Hubungkan papan Arduino Anda ke PC dan buka Control Panel. Klik Perangkat keras dan Suara.Sekarang buka Perangkat dan Printer dan temukan port tempat papan Anda terhubung. Dalam kasus saya itu COM14tetapi berbeda di komputer yang berbeda.
  3. Klik File dan kemudian klik Preferensi. Salin tautan berikut di URL Manajer Dewan Tambahan. “https://dl.espressif.com/dl/package_esp32_index.json ”
  4. Sekarang, untuk menggunakan ESP32 dengan Arduino IDE, kita perlu mengimpor pustaka khusus yang memungkinkan kita untuk membakar kode di ESP32 dan menggunakannya. kedua perpustakaan ini dilampirkan dalam tautan yang diberikan di bawah ini. Untuk memasukkan perpustakaan, goto Sketsa> Sertakan Perpustakaan> Tambahkan Perpustakaan ZIP. Sebuah kotak akan muncul. Temukan folder ZIP di komputer Anda dan klik OK untuk memasukkan folder tersebut. Perpustakaan ini dilampirkan bersama dengan kode pada tautan di bawah ini.
  5. Sekarang pergi Sketsa> Sertakan Perpustakaan> Kelola Perpustakaan.
  6. Menu akan terbuka. Di bilah Pencarian, ketik adafruit bme280. Paket ini akan digunakan untuk berintegrasi BME280 sensor dan mengambil bacaan darinya. Paket akan muncul di layar. Instal paket dengan mengklik tombol instal.
  7. Di Manajer Perpustakaan yang sama, cari Sensor Terpadu Adafruit.Perpustakaan ini juga membantu sensor BME280 untuk digunakan dengan ESP32. Daftar akan muncul di kotak. Pergi ke akhir daftar dan pilih perpustakaan yang diperlihatkan pada gambar di bawah ini. Klik pada tombol install untuk menginstal perpustakaan.
  8. Menu akan terbuka. Di bilah pencarian, ketik Arduino JSON.Daftar akan muncul. Install Arduino JSON oleh Benoit Blanchon.
  9. Sekarang klik pada Alat.Menu dropdown akan muncul. Atur papan menjadi Modul Pengembangan ESP.
  10. Klik pada menu Tool lagi dan atur port yang Anda amati di panel kontrol sebelumnya.
  11. Sekarang Unggah kode yang dilampirkan pada tautan di bawah ini dan klik tombol unggah untuk membakar kode pada mikrokontroler ESP32.

Jadi sekarang ketika Anda akan mengunggah kode, kesalahan mungkin terjadi. Ini adalah kesalahan paling umum yang mungkin terjadi jika Anda menggunakan versi baru dari Arduino IDE dan Arduino JSON. Berikut ini adalah kesalahan yang mungkin Anda lihat di layar.

Dalam file yang disertakan dari C: \ Users \ Pro \ Documents \ Arduino \ libraries \ IOXhop_FirebaseESP32-master / IOXhop_FirebaseESP32.h: 8: 0, dari C: \ Users \ Pro \ Desktop \ smartHome \ code \ code.ino: 2: C : \ Users \ Pro \ Documents \ Arduino \ libraries \ IOXhop_FirebaseESP32-master / IOXhop_FirebaseStream.h: 14: 11: error: StaticJsonBuffer adalah kelas dari ArduinoJson 5. Silakan lihat arduinojson.org/upgrade untuk mempelajari cara mengupgrade program Anda ke ArduinoJson versi 6 StaticJsonBuffer jsonBuffer; ^ Dalam file yang disertakan dari C: \ Users \ Pro \ Documents \ Arduino \ libraries \ IOXhop_FirebaseESP32-master / IOXhop_FirebaseESP32.h: 8: 0, dari C: \ Users \ Pro \ Desktop \ smartHome \ code \ code.ino: 2: C: \ Users \ Pro \ Documents \ Arduino \ libraries \ IOXhop_FirebaseESP32-master / IOXhop_FirebaseStream.h: 65: 11: error: StaticJsonBuffer adalah kelas dari ArduinoJson 5. Silakan lihat arduinojson.org/upgrade untuk mempelajari cara mengupgrade program Anda ke ArduinoJson versi 6 mengembalikan StaticJsonBuffer() .parseObject (_data); ^ Beberapa perpustakaan ditemukan untuk "WiFi.h" Digunakan: C: \ Users \ Pro \ AppData \ Local \ Arduino15 \ packages \ esp32 \ hardware \ esp32 \ 1.0.2 \ libraries \ WiFi Tidak digunakan: C: \ Program Files ( x86) \ Arduino \ libraries \ WiFi Menggunakan library WiFi pada versi 1.0 di folder: C: \ Users \ Pro \ AppData \ Local \ Arduino15 \ packages \ esp32 \ hardware \ esp32 \ 1.0.2 \ libraries \ WiFi Using library IOXhop_FirebaseESP32-master dalam folder: C: \ Users \ Pro \ Documents \ Arduino \ libraries \ IOXhop_FirebaseESP32-master (legacy) Menggunakan library HTTPClient pada versi 1.2 dalam folder: C: \ Users \ Pro \ AppData \ Local \ Arduino15 \ packages \ esp32 \ hardware \ esp32 \ 1.0.2 \ libraries \ HTTPClient Menggunakan library WiFiClientSecure di versi 1.0 dalam folder: C: \ Users \ Pro \ AppData \ Local \ Arduino15 \ packages \ esp32 \ hardware \ esp32 \ 1.0.2 \ libraries \ WiFiClientSecure Menggunakan perpustakaan ArduinoJson di versi 6.12.0 di folder: C: \ Users \ Pro \ Documents \ Arduino \ libraries \ ArduinoJson status keluar 1 Kesalahan kompilasi untuk modul Dev papan ESP32.

Tidak ada yang perlu dikhawatirkan karena kami dapat menghilangkan kesalahan ini dengan mengikuti beberapa langkah sederhana. Kesalahan ini muncul karena versi baru Arduino JSON memiliki kelas lain, bukan StaticJsonBuffer.Ini adalah kelas JSON 5. Jadi, kita dapat menghilangkan kesalahan ini dengan menurunkan versi Arduino JSON dari Arduino IDE kita. Cukup buka Sketsa> Sertakan Perpustakaan> Kelola Perpustakaan.Pencarian untukArduino JSON oleh Benoit Blanchonyang telah Anda instal sebelumnya. Copot pemasangannya terlebih dahulu, lalu setel versinya ke 5.13.5. Sekarang karena kami telah menetapkan versi lama Arduino JSON, instal lagi dan kompilasi ulang kodenya. Kali ini, kode Anda akan berhasil dikompilasi.

Untuk mengunduh kode, klik di sini.

Langkah 5: Memahami Kode

Kode proyek ini sangat sederhana dan dikomentari dengan baik. Tapi tetap saja, kode tersebut dijelaskan secara singkat di bawah ini.

1. Pada awalnya, perpustakaan disertakan sehingga papan ESP32 dapat dihubungkan ke koneksi WiFi lokal di rumah atau kantor. Pustaka yang membantu ESP32 untuk mengintegrasikan sensor BME280 dengannya, juga disertakan. Kemudian nama dan kata sandi koneksi wifi lokal Anda ditentukan sehingga ESP32 dapat terhubung ke Wifi.

// Muat pustaka Wi-Fi #include             // libray untuk menggunakan wifi #include  #include  // library untuk menggunakan sensor BME280 #include  // perpustakaan untuk menggunakan sensor BME280

2. Setelah ini, beberapa baris dikomentari. Garis ini akan digunakan jika Anda menggunakan protokol SPI untuk komunikasi sensor. Kami akan membuat mereka tetap berkomentar karena kami menggunakan protokol 12C.

/ * # termasuk  # Tentukan BME_SCK 18 # Tentukan BME_MISO 19 # Tentukan BME_MOSI 23 # Tentukan BME_CS 5 * /

3. Sebuah variabel dibuat untuk menyimpan nilai tekanan permukaan laut dalam hektopascal. 1 hektopascal setara dengan satu milibar. Ketinggian untuk tekanan tertentu diperkirakan dan kemudian variabel ini membandingkannya dengan tekanan permukaan laut. Setelah ini, bmeadalah objek yang dibuat untuk digunakan lebih lanjut.

#define SEALEVELPRESSURE_HPA (1013.25) // variabel untuk membandingkan tekanan yang ditemukan dengan permukaan laut Adafruit_BME280 bme; // I2C

4. Setelah ini, nama koneksi WiFi Anda dan kekuatannya dimasukkan dalam kode, sehingga ESP32 dapat dihubungkan ke WiFi. Kemudian setelah ini, nomor port diatur untuk berkomunikasi dengan server web dan variabel dideklarasikan untuk menyimpan permintaan HTTP.

const char * ssid = "SSID ANDA"; // Nama koneksi wifi lokal Anda const char * password = "KATA SANDI ANDA"; // Kata sandi koneksi wifi lokal Anda server WiFiServer (80); // Tetapkan nomor port server web ke 80 String header; // Variabel untuk menyimpan permintaan HTTP

5. batal penyiapan ()adalah fungsi di mana kita menginisialisasi pin INPUT atau OUTPUT. Fungsi ini juga mengatur baud rate dengan menggunakan Serial.begin () perintah. Baud Rate adalah kecepatan komunikasi mikrokontroler. Beberapa baris kode ditambahkan di sini untuk menghubungkan ESP32 ke koneksi wifi lokal. Papan akan mencoba untuk terhubung ke koneksi wifi lokal dan akan mencetak "koneksi." di monitor serial. Ini akan dicetak “Terhubung” saat koneksi dibuat. Jadi untuk memantau ini, lebih baik buka monitor serial dan periksa statusnya di sana.

batal penyiapan () {Serial.begin (115200); // pengaturan status bool baud rate; // pengaturan default // (Anda juga dapat mengirimkan objek perpustakaan Wire seperti & Wire2) // status = bme.begin (); if (! bme.begin (0x76)) {// memeriksa apakah sensor fouund Serial.println ("Tidak dapat menemukan sensor BME280 yang valid, periksa kabel!"); sementara (1); } // Hubungkan ke jaringan Wi-Fi dengan SSID dan kata sandi Serial.print ("Menghubungkan ke"); Serial.println (ssid); WiFi.begin (ssid, kata sandi); while (WiFi.status ()! = WL_CONNECTED) {delay (500); Serial.print ("."); } // Cetak alamat IP lokal dan mulai server web Serial.println (""); Serial.println ("WiFi terhubung."); Serial.println ("alamat IP:"); // mencetak alamat ip pada monitor serial Serial.println (WiFi.localIP ()); server.begin (); }

6. void loop ()adalah fungsi yang berjalan berulang kali dalam satu putaran. Dalam loop ini, kami menulis kode yang memberi tahu papan mikrokontroler tugas apa yang harus dilakukan dan bagaimana. Dalam kode ini, pertama, koneksi dibuat dengan klien baru. Jika sambungan berhasil dibuat, halaman web ditampilkan di browser. Kemudian tabel dibuat dan pembacaan sensor diisi pada tabel tersebut. Saat tabel terisi, koneksi ditutup.

void loop () {WiFiClient client = server.available (); // Dengarkan klien yang masuk jika (klien) {// Jika klien baru terhubung, Serial.println ("Klien Baru."); // cetak pesan di port serial String currentLine = ""; // buat String untuk menyimpan data yang masuk dari klien while (client.connected ()) {// loop sementara klien terhubung if (client.available ()) {// jika ada byte untuk dibaca dari klien, karakter c = client.read (); // membaca satu byte, lalu Serial.write (c); // cetaklah header monitor serial + = c; if (c == '\ n') {// jika byte adalah karakter baris baru // jika baris saat ini kosong, Anda mendapat dua karakter baris baru berturut-turut. // itu adalah akhir dari permintaan HTTP klien, jadi kirimkan tanggapan: if (currentLine.length () == 0) {// Header HTTP selalu dimulai dengan kode tanggapan (mis. HTTP / 1.1 200 OK) // dan a content-type sehingga klien tahu apa yang akan datang, lalu baris kosong: client.println ("HTTP / 1.1 200 OK"); client.println ("Jenis konten: teks / html"); client.println ("Sambungan: tutup"); client.println (); // Tampilkan halaman web HTML client.println (""); client.println (""); client.println (""); // CSS untuk memberi gaya pada tabel client.println ("

ESP32 dengan BME280

"); client.println (""); client.println (""); client.println (""); client.println (""); client.println (""); client.println (""); client.println ("
PENGUKURANNILAI
Temp. Celsius"); client.println (bme.readTemperature ()); client.println (" * C
Temp. Fahrenheit"); client.println (1.8 * bme.readTemperature () + 32); client.println (" * F
Tekanan"); client.println (bme.readPressure () / 100.0F); client.println (" hPa
Approx. Ketinggian"); client.println (bme.readAltitude (SEALEVELPRESSURE_HPA)); client.println (" m
Kelembaban"); client.println (bme.readHumidity ()); client.println ("%
"); // Respons HTTP diakhiri dengan baris kosong lain client.println (); // Keluar dari while loop break;} else {// jika Anda mendapat baris baru, hapus currentLine currentLine =" ";}} else if (c! = '\ r') {// jika Anda mendapatkan yang lain selain karakter carriage return, currentLine + = c; // tambahkan ke akhir baris saat ini}}} // Hapus header variabel header = ""; // Tutup koneksi client.stop (); Serial.println ("Klien terputus."); Serial.println ("");}}

Ini adalah keseluruhan prosedur bagaimana membuat stasiun cuaca menggunakan ESP32, sekarang setelah mengumpulkan komponen perangkat keras dari pasaran dan mulai membuatnya sendiri. Semoga berhasil!

Facebook Twitter Google Plus Pinterest