Panduan Membangun Aplikasi Fridgeye dengan Tampilan Nextion: Langkah demi Langkah

Aplikasi dan Layanan Online

	Nextion GUI Editor
	Arduino IDE
	GIMP - GNU Image Manipulation Program

Tentang Proyek Ini

Kembali pada Juli tahun ini, beberapa siswa desain dari Jerman meluncurkan Kickstarter satiris untuk membuat prototipe Fridgeye; sensor cahaya indah untuk kulkas Anda. Gabungkan fakta bahwa kami umumnya mengharapkan proyek hardware mencolok muncul di Kickstarter dengan seberapa besar usaha tim untuk membuatnya tampak nyata, tidak heran orang-orang tidak yakin apa yang harus dipikirkan. Tidak rahasia bahwa saya adalah penggemar proyek ini sejak awal, bukan karena saya penasaran ingin tahu apa yang dilakukan lampu kulkas saya. Fridgeye adalah proyek dengan cakupan yang sempurna untuk ditangani dengan potensi pertumbuhan jika Anda ingin memulai di Internet of Things.

Membangun Perangkat Fridgeye

Sebagian besar postingan ini akan difokuskan pada menjalankan aplikasi Fridgeye dengan tampilan sentuh Nextion yang terhubung ke Arduino, tetapi sebelum sampai sejauh itu kita membutuhkan perangkat nyata yang dapat merasakan cahaya. Tidak masalah. Mari kita luangkan 5 menit dan buat satu. Saya janji tidak akan memakan waktu lebih lama. Yang Anda butuhkan hanyalah Arduino, breadboard, fotoresistansi, dan resistor 3.3K. Kita akan menyambungkannya seperti ini. Jangan khawatir tentang koneksi layar untuk saat ini. Cukup fokus pada Arduino, resistor, dan fotoresistansi.

Saya sebenarnya memiliki ProtoShield yang tersisa; jadi saya memasang mini breadboard padanya sehingga saya dapat menjaga semuanya dalam satu paket shield yang tertumpuk yang rapi, tetapi masih memiliki kebebasan breadboard. Ini tampak milik saya.

Oke, saya bohong, itu hanya memakan waktu sekitar 4 menit. Tapi Anda dapat menggunakan menit yang tersisa untuk menurunkan sketsa super sederhana ini pada Arduino dan melihat output serial dari sensor cahaya dari dalam Arduino IDE.

void setup() { Serial.begin(9600); } void loop() { int val = analogRead(A0); Serial.println(val); delay(500); } 

Setelah Anda memprogram Arduino, buka Serial Monitor dari menu Tools. Pastikan baud rate diatur ke 9600. Anda seharusnya melihat nilai integer baru yang merepresentasikan tingkat cahaya setiap setengah detik. Silakan, luangkan satu menit dan coba-coba. Tutup sensor, nyalakan dan matikan lampu, dan bahkan coba sinarkan flashlight smartphone Anda padanya. Lihat nilai-nilai berubah. Anda akan melihat mereka berkisar dari hampir 0 dalam kegelapan total hingga hampir 1024 ketika ditembaki cahaya.

Apa itu Aplikasi Fridgeye?

Aplikasi Fridgeye adalah teman setia untuk perangkat Fridgeye Anda. Zaman ketika perangkat berdiri sendiri sudah berlalu. Setiap orang tahu bahwa di dunia IoT yang luas saat ini, perangkat Anda tidak punya kesempatan kecuali memiliki aplikasi untuk menyertainya. Ini seperti seler kacang dan selai, susu dan siereal, kacang dan wortel.

Aplikasi ini cukup sederhana. Jika kita melihat halaman Kickstarter, itu hanyalah persentase cahaya yang terdeteksi oleh Fridgeye dan tampaknya hanya akan menjadi 0 atau 100 persen.

Saya yakin kita dapat melakukan lebih baik dan menggunakan beberapa dari 99 nilai di antaranya sehingga mereka tidak merasa buruk. Mari kita langsung dari gambar konsep dan bawa ke dunia nyata.

Memulai dengan Tampilan Nextion

Untuk proyek ini saya menggunakan tampilan sentuh Nextion Enhanced 3.5". Ini adalah layar sentuh resistif penuh yang dirancang untuk menangani pengendalian grafis yang berat sehingga bahkan perangkat kelas rendah seperti Arduino dapat berkomunikasi dengannya melalui dua baris serial. Meskipun layar itu sendiri sangat bagus, dokumentasi dapat sangat sulit dinavigasi, terutama untuk pemula jadi mari kita uraikan langkah demi langkah.

Model Pemrograman Tampilan

Jika Anda pernah memprogram Arduino untuk menggunakan layar sebelumnya, Anda mungkin telah menggunakan perpustakaan grafik sederhana yang mengabstraksi perintah rendah level untuk menggambar pada permukaan layar. Meskipun sangat bagus, perpustakaan tersebut masih meminta Anda untuk melakukan banyak penggerakan piksel untuk menggambar sesuatu pada layar. Tampilan Nextion menggunakan pendekatan yang berbeda yang akan terasa sangat akrab jika Anda terbiasa dengan pola MVVM atau MVC. Esensialnya, penampilan aplikasi dikonfigurasi sepenuhnya di depan dan disimpan pada layar itu sendiri. Saat runtime Arduino merujuk pada bagian UI menggunakan ID yang ditetapkan sebelumnya. Arduino juga menerima informasi kembali dari layar seperti event sentuh dengan cara yang sama. Itu berarti alih-alih menggambar sesuatu pada runtime, Arduino hanya bertindak sebagai pengatur dari tampilan dan kontrol. Jika itu tidak masuk akal, tunggu sedikit lebih lama lagi saat kita uraikan.

Siapkan Tampilan

Karena aplikasi Fridgeye kami sangat sederhana, itu hanya akan memerlukan satu halaman. Tampilan Nextion, sebaliknya, mampu menangani aplikasi yang sangat kompleks dengan banyak halaman dan transisi. Baik Anda merancang aplikasi sederhana seperti kami atau yang sangat kompleks, Anda akan menggunakan Nextion GUI Editor. Itu adalah editor WYSIWYG untuk keluarga tampilan Nextion dan akan membantu kita mendapatkan tata letak yang tepat. Lagi pula, dokumentasi dan pengalaman memulai dapat sangat menantang untuk pemula, tetapi setelah Anda mengenalnya, Anda akan merancang tata letak kompleks dengan cepat.

Sebelum kita membuka editor, kita perlu menyiapkan aset latar belakang. Merujuk pada gambar tiruan di atas kita dapat melihat bahwa satu-satunya hal yang akan berubah pada tampilan kami saat runtime adalah persentase cahaya yang terdeteksi. Logo, warna latar belakang, dan bar hijau di bawah adalah statis. Mari kita buat gambar dengan item-item tersebut yang dapat kita gunakan sebagai latar belakang. Ini memakan waktu saya sekitar 5 menit di GIMP dan terlihat seperti ini.

Hal penting yang perlu diingat di sini adalah untuk membuat gambar dengan ukuran yang Anda butuhkan untuk layar Anda. Dalam kasus saya, saya menggunakan layar 3.5" yang berarti 480 x 320 piksel. Itu sebesar apa yang saya buat di GIMP.

Menggunakan Nextion Editor

CATATAN: Nextion Editor memerlukan .NET Framework dan saat ini hanya didukung pada Windows. Saya dapat menjalankannya tanpa masalah di Windows 10 Virtual Machine melalui Parallels pada Macbook saya. Saya tidak mengujinya di Wine di Linux.

Langkah-langkah berikut akan memandu Anda melalui pembuatan tata letak aplikasi sederhana kami di Nextion Editor. Buka Nextion Editor lalu lakukan langkah-langkah berikut.

1. File->New. Beri nama proyek Anda dan lokasi di mesin Anda.

2. Dialog akan muncul meminta Anda untuk memilih perangkat. Dalam kasus saya saya memilih Enhanced dan nomor model 3.5". JANGAN KLIK OK. Lanjutkan ke langkah 3.

3. Klik tab DISPLAY di pojok kiri atas dialog. Pilih arah tampilan 90 Horizontal.

4. Sekarang Anda dapat klik OK.

5. Klik Picture dari Toolbox di sebelah kiri. Ini akan menambahkan elemen p0 ke outline Anda.

6. Di panel Picture/Font di kiri bawah pastikan Anda memilih tab Picture.

7. Klik simbol +.

8. Navigasi ke gambar yang kita buat di GIMP yang menyediakan latar belakang untuk aplikasi kami dan klik Open.

9. Di panel atribut di kanan double-klik di area nilai atribut pic. Dialog pemilihan gambar akan terbuka dengan latar belakang aplikasi kami.

10. Pilih latar belakang aplikasi dan klik OK.

11. Klik Text dari Toolbox. Ini akan menambahkan area teks bernama t0 di pojok kiri atas tampilan kami. Catat nilai atribut id karena Anda akan membutuhkannya nanti saat memprogram Arduino.

12. Seret area teks ke lokasi yang diinginkan di bawah kata-kata "Light Status" dan ubah ukurannya sehingga mengisi area yang luas.

13. Untuk memperbaiki latar belakang putih kita perlu mengatur latar belakang area teks menjadi versi yang dicopot dari latar belakang utama kami. Dengan t0 yang dipilih ubah atribut sta di dalam panel atribut dari solid color menjadi crop image.

14. Double-klik nilai atribut picc untuk area teks t0. Ini akan membuka dialog pemilihan gambar. Pilih gambar latar belakang utama lagi dan klik OK. Ini memiliki efek membuat latar belakang area teks transparan.

15. Ubah atribut pco dari t0 menjadi warna font yang Anda inginkan. Saya menggunakan warna khusus Red: 125, Green: 231, Blue: 191.

16. Dari menu Tools pilih Font Generator.

17. Di dialog Font Creator pilih tinggi 96 dan pilih font apa pun yang Anda inginkan. Milik saya adalah Montserrat.

18. Beri nama font dan klik Generate Font. Pastikan menyimpannya di lokasi yang mudah diingat. Kita akan membutuhkannya lagi dalam sekejap.

19. Tutup dialog Font Creator. Anda akan ditanya apakah Anda ingin menambahkan font yang dihasilkan. Klik Yes. Font itu sekarang dirujuk sebagai font index 0.

20. Tambahkan teks dummy ke t0 untuk melihat bagaimana tampilannya dengan mengubah atribut txt dari t0 menjadi 100%. Anda harus klik di luar area nilai atribut agar area editor diperbarui.

21. Posisikan ulang t0 sesuai selera.

22. Klik Compile di toolbar atas.

Jika semuanya berjalan baik Anda sekarang akan memiliki file TFT yang sudah dikompilasi siap digunakan yang terletak di %AppData%\Nextion Editor\bianyi.

Perbarui Tampilan

Ada beberapa cara untuk mendapatkan desain baru yang mewah kita ke layar itu sendiri. Jika Anda memiliki konverter USB-to-TTL Anda dapat terhubung langsung ke layar dari dalam Nextion IDE dan mengunggah file TFT yang dikompilasi secara langsung. Sebaliknya Anda akan perlu menyalin file TFT yang dikompilasi ke kartu micro SD yang dapat dimasukkan langsung ke slot di bagian belakang layar. Kartu SD HARUS diformat FAT32 dan harus memiliki satu file TFT padanya atau Anda akan mengalami kesalahan. Nextion Editor menempatkan file yang berhasil dikompilasi di direktori berikut di Windows.

C:\Users\[your username]\AppData\Roaming\Nextion IDE\bianyi\[project name].tft 

Catatan, Anda mungkin perlu mengaktifkan penampilan file tersembunyi karena folder AppData ditandai sebagai tersembunyi.

Dengan file TFT pada kartu SD lakukan langkah-langkah berikut.

• Pastikan layar dimatikan

• Masukkan kartu SD ke layar

• Nyalakan layar. Layar akan menunjukkan bahwa sedang memperbarui.

• Setelah pembaruan selesai matikan layar

• Buang kartu SD. Jangan lupa langkah ini karena layar tidak akan menjalankan tampilan Anda dengan kartu SD masih dimasukkan.

• Nyalakan layar lagi. Anda sekarang seharusnya melihat aplikasi Fridgeye yang indah kami. Satu-satunya hal yang hilang adalah nilai dari sensor cahaya.

Ajar Arduino Cara Berkomunikasi dengan Nextion

Sekarang layar sudah memiliki tampilan aplikasi kami kita perlu menulis beberapa kode pada Arduino sehingga dapat berinteraksi dengannya dan mengatur persentase status cahaya.

Instal Perpustakaan Nextion

1. Unduh versi terbaru perpustakaan Arduino Nextion.

2. Salin seluruh folder ITEADLIB_Arduino_Nextion ke folder perpustakaan Arduino Anda. Pada Windows akan terletak di:

C:\Users\[your_username]\Documents\Arduino\libraries 

Pada Mac akan terletak di:

~/Documents/Arduino/libraries 

3. Jika Anda menggunakan Arduino Mega lewati ke langkah 7.

4. Jika menggunakan Arduino Uno buka file NexConfig.h yang terletak di folder ITEADLIB_Arduino_Nextion yang baru saja Anda salin ke folder perpustakaan Arduino.

5. Berikan komentar pada baris berikut:

#define DEBUG_SERIAL_ENABLE #define dbSerial Serial 

6. Ubah #define untuk nexSerial menjadi Serial alih-alih Serial2. Ini memungkinkan kami untuk menghubungkan layar langsung ke baris RX dan TX pada UNO.

#define nexSerial Serial 

7. Restart Arduino IDE jika sudah terbuka. Ini akan menyebabkan perpustakaan tersedia melalui menu.

8. Dari menu File pilih New untuk membuat sketsa baru.

9. Ganti kode sketsa default dengan berikut:

#include "Nextion.h" long lastUpdate; int SENSOR = A0; NexText t0 = NexText(0, 2, "t0"); void checkSensor() { int val = map(analogRead(SENSOR), 0, 1024, 0, 100); String displayText = String(val) + "%"; t0.setText(displayText.c_str()); } void setup(void) { lastUpdate = millis(); pinMode(SENSOR, INPUT); nexInit(); } void loop(void) { nexLoop(NULL); if (millis() - lastUpdate > 100) { checkSensor(); lastUpdate = millis(); } } 

Penjelasan Kode

Jika kemampuan Arduino Anda memungkinkan Anda memahami sketsa tersebut Anda dapat melewati bagian ini sepenuhnya. Anda hebat. Jika Anda baru dalam kode Arduino jangan biarkan ini menakutkan Anda. Mari kita lihat sketsa ini potong demi potong.

#include "Nextion.h" 

Ini menunjukkan niat kami untuk menggunakan perpustakaan Nextion. Kita tidak perlu melakukan apa pun lagi karena Arduino IDE tahu di mana menemukannya karena kita menempatkannya di folder perpustakaan.

long lastUpdate; 

Ini hanyalah variabel bernama lastUpdate yang akan memungkinkan kami untuk mengontrol seberapa sering kita memperbarui layar nanti dalam sketsa.

int SENSOR = A0; 

Di sini kita hanya memberi pin A0 pada Arduino kami nama yang lebih dapat dibaca kode yang dapat kita gunakan untuk merujuknya nanti. Ini tidak terlalu penting dalam sketsa ini karena ini adalah satu-satunya pin I/O yang kita tangani tetapi ini adalah kebiasaan yang baik untuk dimiliki karena akan berguna ketika Anda memiliki banyak hal yang terhubung ke Arduino Anda.

NexText t0 = NexText(0, 2, "t0"); 

Di sini kita membuat objek dalam sketsa kami yang merujuk pada elemen teks yang kita buat di GUI. Ingat kita menamainya "t0 ". Argumen pertama adalah nomor halaman yang adalah 0 dalam kasus kita dan argumen kedua adalah ID komponen yang kami ingat sebelumnya adalah 2. Jika Anda lupa mencatatnya kembali ke Nextion Editor, klik elemen t0 dan lihat di panel atribut untuk melihat ID.

void checkSensor() { int val = map(analogRead(SENSOR), 0, 1024, 0, 100); String displayText = String(val) + "%"; t0.setText(displayText.c_str()); } 

checkSensor() adalah inti aplikasi kami. Pada baris pertama kita sebenarnya melakukan dua operasi. Pertama kita memanggil analogRead(SENSOR) yang memberikan kita nilai integer yang merepresentasikan tegangan yang ada pada pin A0 (ingat kita menyebutnya SENSOR). Pada Arduino UNO panggilan analogRead akan mengembalikan nilai dari 0 hingga 1024 tetapi kita ingin memetakan itu ke rentang 0 hingga 100 persen. Tidak masalah. Arduino IDE telah menangani kita dengan fungsi bawaan map() yang memungkinkan kita untuk menentukan nilai diikuti oleh [rentang dari] dan [rentang ke]. Kemudian kita mengubah nilai int tersebut menjadi tipe String dan menambahkan tanda %. Langkah terakhir adalah memanggil setText() pada objek NexText t0 yang kita buat sebelumnya.

void setup(void) { lastUpdate = millis(); pinMode(SENSOR, INPUT); nexInit(); } 

Ini adalah fungsi setup Arduino standar yang dieksekusi sebelum kode sketsa lainnya. Kami menginisialisasi lastUpdate ke saat ini dengan memanggil fungsi millis(), menyiapkan pin A0 kami sebagai input dan menginisialisasi perpustakaan Nextion.

void loop(void) { nexLoop(NULL); if (millis() - lastUpdate > 100) { checkSensor(); lastUpdate = millis(); } } 

Dalam pemrograman Arduino fungsi loop() dieksekusi terus-menerus hingga Arduino dimatikan dan dinyalakan kembali atau direset dengan cara lain. Kami harus terus melayani perpustakaan Nextion dengan memanggil nexLoop(). Parameter NULL berarti bahwa dalam contoh kita kami tidak mendengarkan event sentuh dari layar. Kemudian kita memiliki pemeriksaan yang sangat sederhana untuk melihat apakah sudah lebih dari 100 milidetik sejak pembacaan sensor terakhir kita. Jika demikian kita memanggil metode checkSensor() kami dan mengatur variabel lastUpdate ke saat ini dengan panggilan lain ke millis().

Itu saja. Kurang dari 30 baris kode adalah semua yang diperlukan untuk berinteraksi dengan tampilan Nextion kami dari Arduino.

Hubungkan Tampilan

Sebelum kita sebenarnya menghubungkan layar ke Arduino kita mari kita unggah kode sketsa kita ke Arduino dari IDE dengan klik panah kanan kecil di bar atas atau menggunakan pintasan Ctrl+U.

Layar tidak dapat terhubung saat unggahan karena pada Arduino UNO baris serial yang sama yang digunakan oleh layar diperlukan oleh IDE untuk mendorong sketsa baru. Jika Anda menggunakan Arduino Mega alih-alih Anda tidak perlu khawatir tentang itu.

Sekarang dengan kode yang sudah diunggah ke Arduino mari kita hubungkan layar. Jangan lupa untuk mencabut daya dari Arduino terlebih dahulu. Lihat diagram Fritzing untuk informasi koneksi.

Saat Anda menyala kembali Arduino aplikasi Fridgeye Anda seharusnya dengan senang hati menunjukkan pembacaan sensor cahaya saat ini.

Penutup

Uf! Kami berhasil. Jadi, pada titik ini Anda mungkin bertanya dengan sedikit kemarahan dalam nada Anda "APA MANFAATNYA? Saya harus menempatkan seluruhnya di kulkas saya sehingga saya bahkan tidak akan bisa melihat layar." Anda adalah siswa yang sangat tajam tetapi saya tidak pernah mengatakan bahwa semuanya ini berguna, hanya banyak kegunaan untuk dibangun dan dipelajari.

Jika itu membuat Anda merasa lebih baik saya menantang Anda untuk membawa proyek ini langkah lebih jauh dan mencari tahu bagaimana Anda dapat menempatkan sensor di kulkas Anda dan layar di tempat lain. Ada begitu banyak cara untuk mencapai tujuan tersebut. WiFi, Bluetooth, Zigbee, dan pemancar radio generik hanyalah beberapa yang muncul dalam pikiran. Banyak opsi dan banyak hal untuk dipelajari. Jika Anda mencoba coba silakan hubungi saya di Twitter @KevinSidwar atau kirimkan email kepada saya (Kevin at sidwar dot com). Saya akan senang mendengar petualangan Anda di IoT. Sampai jumpa lain, happy hacking.

Jika Anda menikmati postingan saya dan ingin mempelajari lebih lanjut tentang memulai di IoT maka Anda mungkin tertarik pada kursus yang sedang saya buat tentang konsep Fridgeye. Jika tidak, saya benar-benar berterima kasih karena Anda sebenarnya membaca hingga akhir. Semoga Anda memiliki hari yang luar biasa. Anda layak mendapatkannya.

Kode

Sketsa Arduino untuk Aplikasi Fridgeye

Skematik