Server Web ESP32 dengan BME280 – Stasiun Cuaca Tingkat Lanjut

Dalam tutorial ini Anda akan mempelajari cara membuat server web dengan ESP32 untuk menampilkan pembacaan dari modul sensor BME280. Sensor BME280 mengukur suhu, kelembaban, dan tekanan. Jadi, Anda dapat dengan mudah membangun stasiun cuaca mini dan ringkas dan memantau pengukuran menggunakan server web ESP32 Anda. Itulah yang akan kami lakukan dalam proyek ini.

Sebelum melanjutkan dengan tutorial ini, Anda harus menginstal add-on ESP32 di Arduino IDE Anda. Ikuti salah satu tutorial berikut untuk menginstal ESP32 di Arduino IDE, jika Anda belum melakukannya.

• Memasang Board ESP32 di Arduino IDE(instruksi Windows, Mac OS X, dan Linux)

Anda mungkin juga suka membaca panduan BME280 lainnya:

• ESP32 dengan Sensor BME280 menggunakanArduino IDE

• ESP8266 dengan BME280 menggunakan ArduinoIDE

• ESP32/ESP8266 dengan BME280 menggunakanMicroPython

• Papan Arduino dengan BME280

Tonton Video Tutorialnya

Tutorial ini tersedia dalam format video (lihat di bawah) dan dalam format tertulis (lanjutkan membaca).

Bagian yang Diperlukan

Untuk mengikuti tutorial ini Anda memerlukan bagian-bagian berikut:

• Papan ESP32 DOIT DEVKIT V1 – bacaTinjauan dan Perbandingan Papan Pengembangan ESP32

• Modul Sensor BME280

• Breadboard

• Kabel Jumper

Memperkenalkan Modul Sensor BME280

Modul sensor BME280 membaca suhu, kelembaban, dan tekanan. Karena tekanan berubah dengan ketinggian, Anda juga dapat memperkirakan ketinggian. Ada beberapa versi modul sensor ini, tetapi kami menggunakan yang ditunjukkan pada gambar di bawah ini.

Sensor dapat berkomunikasi menggunakan protokol komunikasi SPI atau I2C (ada modul sensor ini yang hanya berkomunikasi dengan I2C, ini hanya dilengkapi dengan empat pin).

Untuk menggunakan protokol komunikasi SPI, Anda menggunakan pin berikut:

• SCK – ini adalah pin Jam SPI

• SDO – MISO

• SDI – MOSI

• CS – Pilihan Chip

Untuk menggunakan protokol komunikasi I2C, sensor menggunakan pin berikut:

• SCK – ini juga pin SCL

• SDI – ini juga merupakan pin SDA

Skema

Kami akan menggunakan komunikasi I2C dengan modul sensor BME280. Untuk itu, hubungkan sensor ke pin ESP32 SDA dan SCL, seperti yang ditunjukkan pada diagram skema berikut.

(Skema ini menggunakan versi modul ESP32 DEVKIT V1 dengan 36 GPIO – jika Anda menggunakan model lain, periksa pinout untuk board yang Anda gunakan.)

Menginstal Library BME280

Untuk mengambil bacaan dari modul sensor BME280 kami akan menggunakan library Adafruit_BME280. Ikuti langkah-langkah selanjutnya untuk menginstal perpustakaan di Arduino IDE Anda:

Buka Arduino IDE Anda dan buka Sketch > Include Library > Manage Libraries. Manajer Perpustakaan harus terbuka.

Cari “adafruit bme280” di kotak Pencarian dan instal perpustakaan.

Menginstal perpustakaan BME280 Arduino IDE

Memasang Library Adafruit_Sensor

Untuk menggunakan perpustakaan BME280, Anda juga perlu menginstal perpustakaan Adafruit_Sensor. Ikuti langkah-langkah selanjutnya untuk menginstal perpustakaan di Arduino IDE Anda:

Buka Sketch > Include Library > Manage Libraries dan ketik “Adafruit Unified Sensor” di kotak pencarian. Gulir ke bawah untuk menemukan perpustakaan dan menginstalnya.

Setelah menginstal perpustakaan, restart Arduino IDE Anda.

Membaca Suhu, Kelembaban, dan Tekanan

Untuk membiasakan diri dengan sensor BME280, kita akan menggunakan contoh sketsa dari perpustakaan untuk melihat cara membaca suhu, kelembaban, dan tekanan.

Setelah menginstal perpustakaan BME280, dan perpustakaan Adafruit_Sensor, buka Arduino IDE dan buka File > Contoh > Adafruit BME280 library > bme280 test .

Perpustakaan

Kode dimulai dengan memasukkan perpustakaan yang dibutuhkan

komunikasi SPI

Karena kita akan menggunakan komunikasi I2C, Anda dapat mengomentari baris berikut :

Catatan: jika Anda menggunakan komunikasi SPI, Anda perlu mengubah definisi pin untuk menggunakan GPIO ESP32. Untuk komunikasi SPI pada ESP32 Anda dapat menggunakan pin HSPI atau VSPI, seperti terlihat pada tabel berikut.

Tekanan Permukaan Laut

Sebuah variabel yang disebut SEALEVELPRESSURE_HPA dibuat.

Ini menghemat tekanan di permukaan laut dalam hectopascal (setara dengan milibar). Variabel ini digunakan untuk memperkirakan ketinggian untuk tekanan tertentu dengan membandingkannya dengan tekanan permukaan laut. Contoh ini menggunakan nilai default, tetapi untuk hasil yang lebih akurat, ganti nilainya dengan tekanan permukaan laut saat ini di lokasi Anda.

I2C

Contoh ini menggunakan komunikasi I2C secara default. Seperti yang Anda lihat, Anda hanya perlu membuat objek Adafruit_BME280 bernama bme.

Jika Anda ingin menggunakan SPI, Anda perlu mengomentari baris sebelumnya dan menghapus komentar pada salah satu baris berikut tergantung pada apakah Anda menggunakan perangkat keras atau perangkat lunak SPI.

setup()

Dalam setup() Anda memulai komunikasi serial

Dan sensor diinisialisasi:

Mencetak Nilai

Dalam loop(), fungsi printValues() membaca nilai dari BME280 dan mencetak hasilnya di Serial Monitor.

Membaca suhu, kelembaban, tekanan, dan memperkirakan ketinggian semudah menggunakan:

• bme.readTemperature() – membaca suhu dalam Celcius;

• bme.readHumidity() – membaca kelembapan mutlak;

• bme.readPressure() – membaca tekanan dalam hPa (hectoPascal = milibar);

• bme.readAltitude(SEALEVELPRESSURE_HPA) – memperkirakan ketinggian dalam meter berdasarkan tekanan di permukaan laut.

Unggah kode ke ESP32 Anda, dan buka Serial Monitor pada baud rate 9600. Anda akan melihat pembacaan yang ditampilkan di Serial Monitor.

Membuat Tabel dalam HTML

Seperti yang Anda lihat di awal posting, kami menampilkan bacaan di halaman web dengan tabel yang disajikan oleh ESP32. Jadi, kita perlu menulis teks HTML untuk membuat tabel.

Untuk membuat tabel dalam HTML Anda menggunakan tag <table> dan </table>.

Untuk membuat baris Anda menggunakan tag <tr> dan </tr>. Judul tabel ditentukan menggunakan tag <th> dan </th>, dan setiap sel tabel didefinisikan menggunakan tag <td>dan </td>.

Untuk membuat tabel untuk bacaan kami, Anda menggunakan teks html berikut:

Kami membuat tajuk tabel dengan sel yang disebut PENGUKURAN, dan yang lain disebut NILAI. Kemudian, kami membuat enam baris untuk menampilkan setiap pembacaan menggunakan tag <tr> dan </tr>. Di dalam setiap baris, kami membuat dua sel, menggunakan tag <td> dan </td>, satu dengan nama pengukuran, dan satu lagi untuk menyimpan nilai pengukuran. Tiga tanda hubung “—” kemudian harus diganti dengan pengukuran aktual dari sensor BME.

Anda dapat menyimpan teks ini sebagai table.html, seret file ke browser Anda dan lihat apa yang Anda miliki. Teks HTML sebelumnya membuat tabel berikut.

Tabel tidak menerapkan gaya apa pun. Anda dapat menggunakan CSS untuk menata tabel dengan preferensi Anda sendiri. Anda mungkin menemukan tautan ini berguna: Tabel Penataan CSS.

Membuat Server Web

Sekarang setelah Anda mengetahui cara mengambil bacaan dari sensor, dan cara membuat tabel untuk menampilkan hasilnya, saatnya membangun server web. Jika Anda telah mengikuti tutorial ESP32 lainnya, Anda harus terbiasa dengan sebagian besar kodenya. Jika tidak, lihat Tutorial Server Web ESP32.

Salin kode berikut ke Arduino IDE Anda. Jangan upload dulu. Pertama, Anda harus memasukkan SSID dan kata sandi Anda.

Ubah baris berikut untuk memasukkan SSID dan kata sandi Anda di antara tanda kutip ganda.

Kemudian, periksa apakah Anda memiliki papan kanan dan port COM yang dipilih, dan unggah kode ke ESP32 Anda. Setelah mengunggah, buka Serial Monitor pada baud rate 115200, dan salin alamat IP ESP32.

Buka browser Anda, rekatkan alamat IP, dan Anda akan melihat pembacaan sensor terbaru. Untuk memperbarui bacaan, Anda hanya perlu me-refresh halaman web.

Cara Kerja Kode

Sketsa ini sangat mirip dengan sketsa yang digunakan dalam Tutorial Server Web ESP32. Pertama, Anda menyertakan perpustakaan WiFi dan perpustakaan yang diperlukan untuk membaca dari sensor BME280.

Baris berikutnya mendefinisikan variabel untuk menyimpan tekanan di permukaan laut. Untuk estimasi ketinggian yang lebih akurat, ganti nilainya dengan tekanan permukaan laut saat ini di lokasi Anda.

Pada baris berikut Anda membuat objek Adafruit_BME280 yang disebut bme yang secara default membuat komunikasi dengan sensor menggunakan I2C.

Seperti disebutkan sebelumnya, Anda perlu memasukkan ssid dan kata sandi Anda di baris berikut di dalam tanda kutip ganda.

Kemudian, Anda mengatur server web Anda ke port 80.

Baris berikut membuat variabel untuk menyimpan header permintaan HTTP:

setup()

Dalam setup(), kita memulai komunikasi serial pada baud rate 115200 untuk keperluan debugging

Anda memeriksa bahwa sensor BME280 berhasil diinisialisasi.

Baris berikut memulai koneksi Wi-Fi dengan WiFi.begin(ssid, password), tunggu koneksi berhasil dan cetak alamat IP ESP di Serial Monitor.

loop()

Dalam loop(), kami memprogram apa yang terjadi ketika klien baru membuat koneksi dengan server web. ESP selalu mendengarkan klien yang masuk dengan baris ini:

Saat permintaan diterima dari klien, kami akan menyimpan data yang masuk. Perulangan while yang mengikuti akan berjalan selama klien tetap terhubung. Kami tidak menyarankan mengubah bagian kode berikut kecuali Anda tahu persis apa yang Anda lakukan.

Menampilkan Halaman Web HTML

Hal berikutnya yang perlu Anda lakukan adalah mengirimkan respons ke klien dengan teks HTML untuk membangun halaman web.

Halaman web dikirim ke klien menggunakan ekspresi ini client.println(). Anda harus memasukkan apa yang ingin Anda kirim ke klien sebagai argumen.

Cuplikan kode berikut mengirimkan halaman web untuk menampilkan pembacaan sensor dalam sebuah tabel.

Catatan: Anda dapat mengklik di sini untuk melihat halaman web HTML lengkap.

Menampilkan Pembacaan Sensor

Untuk menampilkan pembacaan sensor pada tabel, kita hanya perlu mengirimkannya di antara tag <td> dan </td> yang sesuai. Misalnya, untuk menampilkan suhu:

Catatan: tag <span> berguna untuk menata bagian tertentu dari teks. Dalam hal ini, kami menggunakan tag <span> untuk menyertakan pembacaan sensor dalam kelas yang disebut “sensor”. Ini berguna untuk menata bagian teks tertentu menggunakan CSS.

Secara default, tabel menampilkan pembacaan suhu dalam derajat Celcius dan Fahrenheit. Anda dapat mengomentari tiga baris berikut, jika Anda ingin menampilkan suhu hanya dalam derajat Fahrenheit.

Menutup Koneksi

Terakhir, ketika respons berakhir, kami menghapus variabel header, dan menghentikan koneksi dengan klien dengan client.stop().

Membungkus

Singkatnya, dalam proyek ini Anda telah belajar cara membaca suhu, kelembaban, tekanan, dan memperkirakan ketinggian menggunakan modul sensor BME280. Anda juga mempelajari cara membangun server web yang menampilkan tabel dengan pembacaan sensor. Anda dapat dengan mudah memodifikasi proyek ini untuk menampilkan data dari sensor lain.