Tentang proyek ini
Ada banyak Tampilan opsi untuk menambahkan antarmuka pengguna grafis ke Arduino papan. Namun kebanyakan dari mereka membutuhkan banyak memori, dan waktu pemrosesan, dan tidak cocok untuk Arduino papan dengan memori terbatas, dan kekuatan pemrosesan seperti Arduino UNO atau Arduino Nano . Ketika memori terbatas, dan antarmuka pengguna tingkat lanjut diperlukan, Smart Programmable Serial Nextion Menampilkan adalah pilihan yang populer. Ide menawarkan Graphical Nextion Editor . gratis untuk merancang antarmuka pengguna tampilan.
BME280 adalah kombinasi Suhu . yang sangat akurat , Kelembaban , dan Tekanan Barometrik sensor. Itu dapat dihubungkan dengan I2C atau SPI antarmuka,
Visuino memiliki Tampilan Berikutnya full penuh dukungan, dan saya telah merencanakan tutorial untuk Berikutnya dukungan untuk sementara waktu. Saya juga ingin membuat tutorial untuk BME280 sensor. Akhirnya saya memutuskan untuk menggabungkannya, dan membuat satu tutorial yang menampilkan Suhu , Kelembaban , dan Tekanan Barometrik dari BME280 di 3 saluran dari Cakupan (Bentuk gelombang ) pada Tampilan Berikutnya .
Langkah 1:Komponen 
- Satu Arduino papan yang kompatibel (saya menggunakan Arduino Nano, karena saya punya satu, tetapi yang lain akan baik-baik saja)
- Satu Tampilan Cerdas Antarmuka Serial Berikutnya (Saya menggunakan NX4024K032_11 tetapi yang lain juga harus berfungsi)
- 4 Wanita-Wanita kabel jumper
- Untuk memprogram tampilan, Anda juga memerlukan 5V Modul Konverter Serial USB ke TTL
Langkah 2:Hubungkan Tampilan Berikutnya ke Modul Komunikasi Serial USB 
Untuk memprogram Tampilan Berikutnya dengan Editor Berikutnya Anda perlu menghubungkannya dengan USB to TTL Serial Converter ke komputer Anda:
- Hubungkan Konektor Kabel Nextion ke Tampilan (Gambar 1 )
- Jika Modul USB ke Serial your Anda dapat dikonfigurasi, pastikan diatur untuk memberikan daya 5V (Gambar 2 ) (Dalam kasus saya, saya perlu mengonfigurasinya dengan jumper pemilihan daya)
- Hubungkan Kabel Pengardean (Kabel hitam ) dari Tampilan Berikutnya ke Pin arde dari Modul Konverter Serial USB ke TTL (Gambar 2 )
- Hubungkan Kabel Daya (+5V) (Kabel merah ) dari Tampilan Berikutnya ke pin Daya(VCC/+5V) dari Modul Konverter Serial USB ke TTL (Gambar 2 )
- Hubungkan Kabel RX (Kabel kuning ) dari Tampilan Berikutnya ke pin TX dari Modul Konverter Serial USB ke TTL (Gambar 2 )
- Hubungkan TX Wire (Kabel biru ) dari Tampilan Berikutnya ke pin RX dari Modul Konverter Serial USB ke TTL (Gambar 2 )
- Hubungkan Modul Konverter Serial USB ke TTL ke komputer dengan kabel USB (Gambar 3 )
Langkah 3:Mulai Editor Berikutnya, dan pilih Jenis Tampilan dan Orientasi 
Untuk memprogram Tampilan Berikutnya , Anda harus Mengunduh dan Memasang Editor Berikutnya .
- Mulai Editor Berikutnya (Gambar 1 )
- Dari Menu pilih |FileNew | (Gambar 1 )
- Dalam "Simpan Sebagai ", ketik nama file proyek, dan pilih lokasi untuk menyimpan proyek (Gambar 2 )
- Klik "Simpan tombol " (Gambar 2 )
- Dalam "Setelan ", pilih Jenis tampilan (Dalam kasus saya NX4024K032_11 ) (Gambar 3 )
- Klik "TAMPILAN " tab di sebelah kiri untuk menampilkan Setelan tampilan (Gambar 4 )
- Pilih Horisontal orientasi untuk tampilan (Gambar 4 )
- Klik "Oke " untuk menutup dialog (Gambar 4 )
Langkah 4:Di Editor Berikutnya:Tambahkan dan konfigurasikan komponen Waveform(Scope) 
Kita perlu menambahkan komponen Lingkup, dan mengonfigurasinya agar memiliki 3 saluran untuk Suhu , Tekanan , dan Kelembaban :
- Dalam "Kotak Alat " di klik kiri pada "Bentuk Gelombang komponen " (Gambar 1 ) untuk menambahkannya ke area desain (Gambar 2 )
- Ubah ukuran komponen untuk mengisi tampilan (Gambar 3 )
- Dalam "Atribut " kotak alat, atur nilai "ch " atribut ke "3 " (Gambar 3 )
- Dalam "Atribut " kotak alat, atur nilai "dir " atribut ke "kanan ke kiri " (Gambar 4 )
Langkah 5:Di Editor Berikutnya:Unggah proyek ke Tampilan Berikutnya 
- Klik "Unggah tombol " (Gambar 1 )
- Dalam "Unggah ke Perangkat Nextion ", klik "Pergi tombol " (Gambar 2 ) untuk memulai pengunggahan (Gambar 3 )
- Saat unggahan selesai (Gambar 4 ), klik "Keluar " untuk menutup dialog.
Langkah 6:Mulai Visuino, dan pilih jenis Arduino Board 
Sejak Arduino Nano hanya memiliki satu port Serial , dan diperlukan untuk memprogram Arduino , Anda perlu memprogram Arduino Nano sebelum Tampilan Berikutnya terhubung.
Untuk mulai memprogram Arduino, Anda harus memiliki Arduino IDE diinstal dari sini:http://www.arduino.cc/ .
Perlu diketahui 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 berfungsi!
Visuino :https://www.visuino.com juga perlu diinstal.
- Mulai Visuino seperti pada gambar pertama
- Klik "Alat " pada tombol Arduino komponen (Gambar 1 ) dalam Visuino
- Saat dialog muncul, pilih Arduino Nano seperti yang ditunjukkan pada Gambar 2
Langkah 7:Di Visuino:Tambahkan komponen Nextion Display, dan Scope Element ke dalamnya 
Untuk mengontrol Nextion Display, kita perlu menambahkan komponen Nextion Display di Visuino, dan kemudian menambahkan elemen untuk mengontrol Scope:
- Ketik "berikutnya " di kotak Filter pada Component Toolbox lalu pilih "Tampilan Berikutnya komponen " (Gambar 1 ), dan letakkan di area desain
- Klik "Alat " tombol DisplayNextion1 komponen (Gambar 2 )
- Dalam "Elemen " editor pilih “Cakupan(Gelombang) ”, lalu klik tombol "" di sebelah kiri (Gambar 2 ) untuk menambahkan Cakupan elemen (Gambar 3 )
Langkah 8:Di Visuino:Tambahkan 3 saluran ke elemen Lingkup, dan sambungkan Tampilan Berikutnya 
Selanjutnya kita perlu menambahkan saluran ke Lingkup.
- Di Object Inspector, klik "... " tombol di sebelah nilai "Saluran " sub properti dari Cakupan1 elemen (Gambar 1 )
- Di editor Saluran, pilih “Saluran ” di sebelah kanan, lalu klik 3 kali pada tombol "" di sebelah kiri (Gambar 2 ) untuk menambahkan 3 saluran (Gambar 3 )
- Tutup "Saluran " dan Tampilan "Elemen " dialog
- Hubungkan "Keluar " pin keluaran DisplayNextion1 komponen ke ke "Dalam " pin masukan dari "Serial[ 0 ] " saluran Arduino komponen (Gambar 4 )
Langkah 9:Di Visuino:Tambahkan dan konfigurasikan 3 komponen Rentang Peta 
Saluran Lingkup Tampilan Berikutnya dirancang untuk menampilkan nilai antara 0,0 dan 1.0 . Untuk menampilkan Suhu, Kelembaban, dan Tekanan, kita perlu mengonversi nilai ke 0,0 ke 1.0 jangkauan. Kita dapat menggunakan komponen Rentang Peta untuk ini:
- Ketik "peta " di kotak Filter di Component Toolbox lalu pilih "Rentang Peta komponen " (Gambar 1 ), dan lepaskan 3 di antaranya di area desain
- Pilih MapRange1 komponen (Gambar 2 )
- Dalam Object Inspector, perluas "Rentang Input " properti (Gambar 2 )
- Dalam Object Inspector atur nilai "Maks " subproperti dari "Rentang Masukan " properti untuk "101000 " (Gambar 2 ) (Anda mungkin perlu menyetel nilai yang berbeda, jika tekanan udara di lokasi Anda jauh berbeda)
- Dalam Object Inspector, atur nilai "Min " subproperti dari "Rentang Masukan " properti untuk "99000 " (Gambar 2 ) (Anda mungkin perlu menyetel nilai yang berbeda, jika tekanan udara di lokasi Anda jauh berbeda)
- Pilih MapRange2 komponen (Gambar 3 )
- Dalam Object Inspector, perluas "Rentang Input " properti (Gambar 3 )
- Dalam Object Inspector atur nilai "Maks " subproperti dari "Rentang Masukan " properti untuk "100 " (Gambar 3 )
- Dalam Object Inspector, atur nilai "Min " subproperti dari "Rentang Masukan " properti untuk "-20 " (Gambar 3 )
- Pilih MapRange3 komponen (Gambar 4 )
- Dalam Object Inspector, perluas "Rentang Input " properti (Gambar 4 )
- Dalam Object Inspector atur nilai "Maks " subproperti dari "Rentang Masukan " properti untuk "100 " (Gambar 4 )
Langkah 10:Di Visuino:Hubungkan komponen Rentang Peta ke Saluran Tampilan Berikutnya 
- Hubungkan "Keluar " pin keluaran MapRange1 komponen ke "Dalam " masukan pin dari "Elements.Scope1.Channels.Channel1 " elemen DisplayNextion1 komponen (Gambar 1 )
- Hubungkan "Keluar " pin keluaran MapRange2 komponen ke "Dalam " masukan pin dari "Elements.Scope1.Channels.Channel2 " elemen DisplayNextion1 komponen (Gambar 2 )
- Hubungkan "Keluar " pin keluaran MapRange3 komponen ke "Dalam " masukan pin dari "Elements.Scope1.Channels.Channel3 " elemen DisplayNextion1 komponen (Gambar 3 )
Langkah 11:Di Visuino:Tambahkan dan hubungkan komponen BME280 
Kita perlu menambahkan komponen untuk membaca data dari Modul BME280:
- Ketik "280 " pada kotak Filter pada Component Toolbox kemudian pilih "Pressure Temperature Humidity BME280 I2C komponen " (Gambar 1 ), dan letakkan di area desain
- Modul BME280 saya memiliki alamat I2C dari 118 (0x76 ). Jika modul Anda memiliki alamat yang berbeda, Anda perlu menyetel nilai "Alamat " properti (Gambar 2 )
- Hubungkan "Tekanan(Pa) " pin keluaran PressureTemperatureHumidity1 komponen ke ke "Dalam " pin dari MapRange1 komponen (Gambar 2 )
- Hubungkan "Suhu " pin keluaran PressureTemperatureHumidity1 komponen ke ke "Dalam " pin dari MapRange2 komponen (Gambar 3 )
- Hubungkan "Kelembaban(%) " pin keluaran PressureTemperatureHumidity1 komponen ke ke "Dalam " pin dari MapRange3 komponen (Gambar 4 )
- Hubungkan "Keluar " pin keluaran PressureTemperatureHumidity1 komponen ke ke "Dalam " pin dari I2C saluran Arduino komponen (Gambar 5 )
Langkah 12:Di Visuino:Tambahkan, konfigurasikan, dan hubungkan komponen Clock Generator 
Kita dapat menggunakan proyek apa adanya, namun itu akan menyegarkan Lingkup dengan sangat cepat sepanjang waktu. Lebih baik jika Lingkup diperbarui sebagai contoh 10 kali per detik. Untuk ini kami akan menambahkan komponen jam untuk mencatat pembacaan dari sensor dan pembaruan Lingkup.
- Ketik "jam " di kotak Filter dari Component Toolbox lalu pilih "Generator Jam komponen " (Gambar 1 ), dan letakkan di area desain
- Di Object Inspector, atur nilai "Frekuensi " milik ClockGenerator1 ke "10 " (Gambar 2 )
- Hubungkan "Keluar " pin keluaran ClockGenerator1 komponen ke "Jam " pin masukan PressureTemperatureHumidity1 komponen (Gambar 3 )
Langkah 13:Buat, Kompilasi, dan Unggah kode Arduino 
- Dalam Visuino , Tekan F9 atau klik tombol yang ditampilkan di Gambar 1 untuk menghasilkan kode Arduino, dan buka Arduino IDE
- Di Arduino IDE , klik Unggah tombol, untuk mengkompilasi dan mengunggah kode (Gambar 2 )
Langkah 14:Hubungkan Sensor Suhu, Kelembaban dan Tekanan BME280 ke Arduino 
- Hubungkan Daya VCC 3V3 (Kabel merah ), Tanah (Kabel hitam ),SDA (Kabel hijau ), dan SCL (Kabel kuning ), ke Modul BME280 (Gambar 1 )
- Hubungkan ujung lain dari Kabel pembumian (Kabel hitam ) ke Ground pin Arduino Nano papan (Gambar 2 )
- Hubungkan ujung lain dari kabel Daya VCC 3V3 (Kabel merah ) ke 3V3 pin daya Arduino Nano papan (Gambar 2 )
- Hubungkan ujung lain dari kabel SDA (Kabel hijau ) ke SDA/Analog pin 4 dari Arduino Nano papan (Gambar 2 )
- Hubungkan ujung lain dari kabel SCL (Kabel kuning ) ke SCL/Analog pin 5 dari Arduino Nano papan (Gambar 2 )
- Gambar 3 menunjukkan di mana Tanah , 3V3 Daya, SDA/pin Analog 4 , dan pin SCL/Analog 5 , pin dari Arduino Nano
Langkah 15:Hubungkan Tampilan Berikutnya ke Arduino 
- Putuskan sambungan Tampilan Berikutnya kabel dari Modul Konverter Serial USB ke TTL
- Putuskan sambungan Tampilan Berikutnya kabel dari Modul Konverter Serial USB ke TTL
- Hubungkan Kabel Pengardean (Kabel hitam ) dari Tampilan Berikutnya ke Pin arde dari Arduino Nano (Gambar 2 )
- Hubungkan TX Wire (Kabel biru ) dari Tampilan Berikutnya ke pin RX(D0) dari Arduino Nano (Gambar 2 )
- Hubungkan Kabel RX (Kabel kuning ) dari Tampilan Berikutnya ke pin TX(D1) dari Arduino Nano (Gambar 2 )
- Gambar 4 menunjukkan di mana Tanah , 5V Daya, RX/Pin digital 0 , dan TX/Pin digital 1 , pin dari Arduino Nano
- Hubungkan +5V Kabel Listrik (Kabel merah ) dari Tampilan Berikutnya ke pin Daya 5V dari Arduino Nano (Gambar 3 )
- Gambar 4 ditampilkan dalam warna Merah di mana Tanah , 5V Daya, RX/Pin digital 0 , dan TX/Pin digital 1 , pin Arduino Nano (Dengan warna Biru ditunjukkan pin yang terhubung pada langkah sebelumnya)
Langkah 16:Dan mainkan... 
Selamat! Anda telah menyelesaikan proyek.
Gambar 1 menunjukkan proyek yang terhubung dan dihidupkan. Seperti yang Anda lihat di gambar, dan di Video Cakupan pada Tampilan Berikutnya akan memplot Tekanan , Suhu , dan Kelembaban dari Modul BME280 .
Pada Gambar 2 Anda dapat melihat Visuino complete yang lengkap diagram.
Terlampir adalah Visuino proyek, yang saya buat untuk Tutorial ini. Anda dapat mengunduh dan membukanya di Visuino :https://www.visuino.com
Juga terlampir dalam zip yang sama adalah Editor Berikutnya proyek untuk Tampilan Berikutnya .
FJE6Y04IWE4O3H6.zip
