Tampilkan Suhu, Kelembaban & Tekanan BME280 di Layar Sentuh Nextion
Komponen dan Perlengkapan
| Arduino Nano R3 | 1 |
| SparkFun Atmospheric Sensor Breakout - BME280 | 1 |
| Itead Nextion NX8048T070 - Generic 7.0" HMI TFT LCD Touch Display | 1 |
| SparkFun USB to Serial Breakout - FT232RL | 1 |
Aplikasi dan Layanan Online
| Visuino - Graphical Development Environment for Arduino |
| Arduino IDE |
Tentang Proyek Ini
Ada banyak opsi Display untuk menambahkan antarmuka pengguna grafis ke board Arduino. Sebagian besarnya namun memerlukan jumlah memori dan waktu pemrosesan yang besar, dan tidak cocok untuk board Arduino dengan memori dan kemampuan pemrosesan yang terbatas seperti Arduino UNO atau Arduino Nano. Ketika memori terbatas, dan antarmuka pengguna canggih diperlukan, Smart Programmable Serial Nextion Displays adalah pilihan populer. Itead menawarkan Graphical Nextion Editor gratis untuk merancang antarmuka pengguna display.
BME280 adalah sensor kombinasi Suhu, Kelembaban, dan Tekanan Barometrik yang sangat akurat. Ini dapat dihubungkan dengan antarmuka I2C atau SPI.
Visuino memiliki dukungan penuh Nextion Display, dan saya telah merencanakan tutorial untuk dukungan Nextion untuk sementara waktu. Saya juga ingin membuat tutorial untuk sensor BME280. Akhirnya saya memutuskan untuk menggabungkannya, dan membuat satu tutorial yang menampilkan Suhu, Kelembaban, dan Tekanan Barometrik dari BME280 pada 3 saluran komponen Scope(Waveform) di Nextion Display.
Step 1: Components
- Satu board kompatibel Arduino (Saya menggunakan Arduino Nano, karena saya memilikinya, tetapi board lain juga akan baik-baik saja)
- Satu BME280 Sensor Module
- Satu Nextion Serial Interface Smart Display (Saya menggunakan NX4024K032_11 tetapi board lain juga seharusnya bekerja)
- 4 Female-Female jumper wires
- Untuk memprogram display Anda juga akan membutuhkan 5V USB to TTL Serial Converter Module
Step 2: Connect the Nextion Display to the USB Serial Communication Module
Untuk memprogram Nextion Display dengan Nextion Editor Anda perlu menghubungkannya dengan USB to TTL Serial Converter ke komputer Anda:
- Hubungkan Nextion Wires Connector ke Display (Picture 1)
- Jika USB to Serial Module Anda dapat dikonfigurasi, pastikan diatur untuk menyediakan 5V power (Picture 2) (Dalam kasus saya saya perlu mengonfigurasinya dengan jumper pemilihan daya)
- Hubungkan Ground Wire (kabel hitam) dari Nextion Display ke Ground pin dari USB to TTL Serial Converter Module (Picture 2)
- Hubungkan Power (+5V) Wire (kabel merah) dari Nextion Display ke Power(VCC/+5V) pin dari USB to TTL Serial Converter Module (Picture 2)
- Hubungkan RX Wire (kabel kuning) dari Nextion Display ke TX pin dari USB to TTL Serial Converter Module (Picture 2)
- Hubungkan TX Wire (kabel biru) dari Nextion Display ke RX pin dari USB to TTL Serial Converter Module (Picture 2)
- Hubungkan USB to TTL Serial Converter Module ke komputer dengan USB cable (Picture 3)
Step 3: Start the Nextion Editor, and select the Display Type and Orientation
Untuk memprogram Nextion Display, Anda perlu Download and Install the Nextion Editor.
- Mulai Nextion Editor (Picture 1)
- Dari Menu pilih |FileNew| (Picture 1)
- Dalam dialog "Save As", ketik nama file proyek, dan pilih lokasi untuk menyimpan proyek (Picture 2)
- Klik tombol "Save" (Picture 2)
- Dalam dialog "Settings", pilih Display type (Dalam kasus saya NX4024K032_11) (Picture 3)
- Klik tab "DISPLAY" di kiri untuk menampilkan Display settings (Picture 4)
- Pilih orientasi Horizontal untuk display (Picture 4)
- Klik tombol "OK" untuk menutup dialog (Picture 4)
Step 4: In the Nextion Editor: Add and configure Waveform(Scope) component
Kita perlu menambahkan komponen Scope, dan mengonfigurasinya untuk memiliki 3 saluran untuk Suhu, Tekanan, dan Kelembaban:
- Di "Toolbox" di kiri klik komponen "Waveform" (Picture 1) untuk menambahkannya ke area desain (Picture 2)
- Ubah ukuran komponen untuk mengisi display (Picture 3)
- Di toolbox "Attribute", setel nilai atribut "ch" menjadi "3" (Picture 3)
- Di toolbox "Attribute", setel nilai atribut "dir" menjadi "right to left" (Picture 4)
Step 5: In the Nextion Editor: Upload the project to the Nextion Display
- Klik tombol "Upload" (Picture 1)
- Dalam dialog "Upload to Nextion Device", klik tombol "Go" (Picture 2) untuk memulai upload (Picture 3)
- Setelah upload selesai (Picture 4), klik tombol "Exit" untuk menutup dialog.
Step 6: Start Visuino, and select the Arduino Board type
Karena Arduino Nano hanya memiliki satu Serial port, dan diperlukan untuk memprogram Arduino, Anda perlu memprogram Arduino Nano sebelum Nextion Display terhubung.
Untuk memulai memprogram Arduino, Anda perlu menginstal Arduino IDE dari sini: https://www.arduino.cc/ .
Perhatikan bahwa ada beberapa bug kritis di Arduino IDE 1.6.6.
Pastikan Anda menginstal 1.6.7 atau lebih tinggi, jika tidak Tutorial ini tidak akan bekerja!
Visuino: https://www.visuino.com juga perlu diinstal.
- Mulai Visuino seperti yang ditunjukkan pada gambar pertama
- Klik tombol "Tools" pada komponen Arduino (Picture 1) di Visuino
- Setelah dialog muncul, pilih Arduino Nano seperti yang ditunjukkan pada Picture 2
Step 7: In Visuino: Add Nextion Display component, and Scope Element to it
Untuk mengontrol Nextion Display, kita perlu menambahkan komponen Nextion Display di Visuino, lalu menambahkan elemen untuk mengontrol Scope:
- Ketik "next" di Filter box Component Toolbox lalu pilih komponen "Nextion Display" (Picture 1), dan letakkan di area desain
- Klik tombol "Tools" pada komponen DisplayNextion1 (Picture 2)
- Di editor "Elements" pilih elemen "Scope(Wave)", lalu klik tombol di kiri (Picture 2) untuk menambahkan elemen Scope (Picture 3)
Step 8: In Visuino: Add 3 channels to the Scope element, and connect the Nextion Display
Selanjutnya kita perlu menambahkan saluran ke Scope.
- Di Object Inspector, klik tombol "..." di samping nilai sub-properti "Channels" dari elemen Scope1 (Picture 1)
- Di editor Channels pilih elemen "Channel" di kanan, lalu klik 3 kali tombol di kiri (Picture 2) untuk menambahkan 3 saluran (Picture 3)
- Tutup dialog "Channels" dan Display "Elements"
- Hubungkan pin output "Out" dari komponen DisplayNextion1 ke pin input "In" dari saluran "Serial[ 0 ]" dari komponen Arduino (Picture 4)
Step 9: In Visuino: Add and configure 3 Map Range components
Saluran Nextion Display Scope dirancang untuk menampilkan nilai antara 0.0 dan 1.0. Untuk menampilkan Suhu, Kelembaban, dan Tekanan, kita perlu mengonversi nilai ke rentang 0.0 hingga 1.0. Kita dapat menggunakan komponen Map Range untuk ini:
- Ketik "map" di Filter box Component Toolbox lalu pilih komponen "Map Range" (Picture 1), dan letakkan 3 komponen di area desain
- Pilih komponen MapRange1 (Picture 2)
- Di Object Inspector perbaiki properti "Input Range" (Picture 2)
- Di Object Inspector setel nilai sub-properti "Max" dari properti "Input Range" menjadi "101000" (Picture 2) (Anda mungkin perlu menetapkan nilai yang berbeda jika tekanan udara di lokasi Anda sangat berbeda)
- Di Object Inspector setel nilai sub-properti "Min" dari properti "Input Range" menjadi "99000" (Picture 2) (Anda mungkin perlu menetapkan nilai yang berbeda jika tekanan udara di lokasi Anda sangat berbeda)
- Pilih komponen MapRange2 (Picture 3)
- Di Object Inspector perbaiki properti "Input Range" (Picture 3)
- Di Object Inspector setel nilai sub-properti "Max" dari properti "Input Range" menjadi "100" (Picture 3)
- Di Object Inspector setel nilai sub-properti "Min" dari properti "Input Range" menjadi "-20" (Picture 3)
- Pilih komponen MapRange3 (Picture 4)
- Di Object Inspector perbaiki properti "Input Range" (Picture 4)
- Di Object Inspector setel nilai sub-properti "Max" dari properti "Input Range" menjadi "100" (Picture 4)
Step 10: In Visuino: Connect the Map Range components to the Nextion Display Channels
- Hubungkan pin output "Out" dari komponen MapRange1 ke pin input "In" dari elemen "Elements.Scope1.Channels.Channel1" dari komponen DisplayNextion1 (Picture 1)
- Hubungkan pin output "Out" dari komponen MapRange2 ke pin input "In" dari elemen "Elements.Scope1.Channels.Channel2" dari komponen DisplayNextion1 (Picture 2)
- Hubungkan pin output "Out" dari komponen MapRange3 ke pin input "In" dari elemen "Elements.Scope1.Channels.Channel3" dari komponen DisplayNextion1 (Picture 3)
Step 11: In Visuino: Add and connect BME280 component
Kita perlu menambahkan komponen untuk membaca data dari modul BME280:
- Ketik "280" di Filter box Component Toolbox lalu pilih komponen "Pressure Temperature Humidity BME280 I2C" (Picture 1), dan letakkan di area desain
- Modul BME280 saya memiliki I2C address 118(0x76). Jika modul Anda memiliki alamat yang berbeda, Anda perlu mengatur nilai properti "Address" (Picture 2)
- Hubungkan pin output "Pressure(Pa)" dari komponen PressureTemperatureHumidity1 ke pin "In" dari komponen MapRange1 (Picture 2)
- Hubungkan pin output "Temperature" dari komponen PressureTemperatureHumidity1 ke pin "In" dari komponen MapRange2 (Picture 3)
- Hubungkan pin output "Humidity(%)" dari komponen PressureTemperatureHumidity1 ke pin "In" dari komponen MapRange3 (Picture 4)
- Hubungkan pin output "Out" dari komponen PressureTemperatureHumidity1 ke pin "In" dari saluran I2C dari komponen Arduino (Picture 5)
Step 12: In Visuino: Add, configure, and connect Clock Generator component
Kita dapat menggunakan proyek seperti yang ada, namun itu akan merefresh Scope sangat cepat terus-menerus. Lebih baik jika Scope diperbarui misalnya 10 kali detik. Untuk ini kita akan menambahkan komponen jam untuk mengatur pembacaan dari sensor dan pembaruan Scope.
- Ketik "clock" di Filter box Component Toolbox lalu pilih komponen "Clock Generator" (Picture 1), dan letakkan di area desain
- Di Object Inspector, setel nilai properti "Frequency" dari ClockGenerator1 menjadi "10" (Picture 2)
- Hubungkan pin output "Out" dari komponen ClockGenerator1 ke pin input "Clock" dari komponen PressureTemperatureHumidity1 (Picture 3)
Step 13: Generate, Compile, and Upload the Arduino code
- Di Visuino, tekan F9 atau klik tombol yang ditunjukkan pada Picture 1 untuk menghasilkan kode Arduino, dan buka Arduino IDE
- Di Arduino IDE, klik tombol Upload, untuk mengkompilasi dan mengunggah kode (Picture 2)
Step 14: Connect the BME280 Temperature, Humidity and Pressure Sensor to Arduino
- Hubungkan 3V3 VCC Power(kabel merah), Ground(kabel hitam),SDA(kabel hijau), dan SCL(kabel kuning), ke modul BME280 (Picture 1)
- Hubungkan ujung lain dari kabel Ground(kabel hitam) ke pin Ground board Arduino Nano (Picture 2)
- Hubungkan ujung lain dari kabel 3V3 VCC Power(kabel merah) ke pin daya 3V3 board Arduino Nano (Picture 2)
- Hubungkan ujung lain dari kabel SDA(kabel hijau) ke pin SDA/Analog pin 4 board Arduino Nano (Picture 2)
- Hubungkan ujung lain dari kabel SCL(kabel kuning) ke pin SCL/Analog pin 5 board Arduino Nano (Picture 2)
- Picture 3 menunjukkan di mana pin Ground, 3V3 Power, SDA/Analog pin 4, dan SCL/Analog pin 5 dari Arduino Nano
Step 15: Connect the Nextion Display to the Arduino
- Putuskan kabel Nextion Display dari USB to TTL Serial Converter Module
- Hubungkan Ground
- Putuskan kabel Nextion Display dari USB to TTL Serial Converter Module
- Hubungkan Ground Wire (kabel hitam) dari Nextion Display ke pin Ground Arduino Nano (Picture 2)
- Hubungkan TX Wire (kabel biru) dari Nextion Display ke pin RX(D0) Arduino Nano (Picture 2)
- Hubungkan RX Wire (kabel kuning) dari Nextion Display ke pin TX(D1) Arduino Nano (Picture 2)
- Picture 4 menunjukkan di mana pin Ground, 5V Power, RX/Digital pin 0, dan TX/Digital pin 1 dari Arduino Nano
- Hubungkan +5V Power Wire (kabel merah) dari Nextion Display ke pin daya 5V Arduino Nano (Picture 3)
- Picture 4 menunjukkan dalam Merah di mana pin Ground, 5V Power, RX/Digital pin 0, dan TX/Digital pin 1 dari Arduino Nano (Dalam Biru ditampilkan pin yang terhubung pada langkah sebelumnya)
Step 16: And play...
Congratulations! Anda telah menyelesaikan proyek.
Picture 1 menunjukkan proyek yang terhubung dan menyala. Seperti yang Anda lihat pada gambar, dan dalam Video, Scope pada Nextion Display akan memplot Tekanan, Suhu, dan Kelembaban dari modul BME280.
Pada Picture 2 Anda dapat melihat diagram Visuino lengkap.
Dilampirkan adalah proyek Visuino yang saya buat untuk Tutorial ini. Anda dapat mengunduh dan membukanya di Visuino: https://www.visuino.com
Juga dilampirkan dalam zip yang sama adalah proyek Nextion Editor untuk Nextion Display.
FJE6Y04IWE4O3H6.zip