Buat Aplikasi Fridgeye dengan Tampilan Berikutnya

Setelah Anda memprogram Arduino, buka Serial Monitor dari Tools Tidak bisa. Pastikan baud rate diatur ke 9600. Anda akan melihat nilai integer baru yang mewakili tingkat cahaya setiap setengah detik. Silakan, luangkan waktu sebentar dan bermain-main dengannya. Tutupi sensor, nyalakan dan matikan lampu, dan bahkan coba soroti senter ponsel cerdas Anda. Perhatikan perubahan nilai. Anda akan melihat kisarannya dari hampir 0 dalam kegelapan total hingga hampir 1024 saat dibombardir dengan cahaya.

Apa itu Aplikasi Fridgeye?

Aplikasi Fridgeye adalah pendamping tepercaya untuk perangkat Fridgeye Anda. Lewatlah sudah hari-hari ketika perangkat menjadi mandek. Semua orang tahu bahwa di dunia IoT yang besar saat ini, perangkat Anda tidak akan memiliki peluang kecuali memiliki semacam aplikasi yang menyertainya. Ini selai kacang dan jeli, susu dan sereal, kacang polong dan wortel.

Aplikasi ini cukup sederhana. Jika kita melihat halaman Kickstarter, itu benar-benar hanya persentase cahaya yang dideteksi oleh Fridgeye dan tampaknya hanya 0 atau 100 persen.

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

Memulai dengan Tampilan Berikutnya

Untuk proyek ini saya menggunakan layar sentuh Nextion Enhanced 3.5". Ini adalah layar sentuh resistif penuh yang dimaksudkan untuk menangani pengangkatan berat kontrol grafis sehingga bahkan perangkat kelas bawah seperti Arduino dapat berbicara dengannya melalui sepasang serial lines. Meskipun tampilannya sendiri sangat bagus, dokumentasinya bisa sangat sulit dinavigasi, terutama untuk pemula, jadi mari kita telusuri satu langkah pada satu waktu.

Model Pemrograman Tampilan

Jika Anda pernah memprogram Arduino untuk menggunakan tampilan sebelumnya, Anda mungkin pernah menggunakan sesuatu seperti perpustakaan grafis sederhana yang mengabstraksikan perintah menggambar tingkat rendah di permukaan layar. Meskipun sangat bagus, perpustakaan tersebut masih mengharuskan Anda untuk melakukan banyak dorongan piksel untuk menggambar sesuatu di layar. Tampilan Nextion menggunakan pendekatan berbeda yang akan terasa sangat familiar jika Anda terbiasa dengan pola MVVM atau MVC. Pada dasarnya, tampilan aplikasi dikonfigurasi sepenuhnya di depan dan disimpan di layar itu sendiri. Saat runtime, Arduino mereferensikan potongan UI menggunakan ID yang telah ditentukan sebelumnya. Arduino juga mendapatkan informasi kembali dari layar seperti acara sentuh dengan cara yang sama. Itu berarti bahwa alih-alih menggambar sesuatu saat runtime, Arduino hanya bertindak sebagai konduktor tampilan dan kontrol. Jika itu tidak masuk akal, bertahanlah denganku sedikit lebih lama saat kita melangkah melewatinya.

Siapkan Tampilan

Karena aplikasi Fridgeye kami sangat sederhana, aplikasi ini hanya membutuhkan satu halaman. Namun, tampilan Nextion mampu menangani aplikasi yang sangat kompleks dengan banyak halaman dan transisi. Apakah Anda sedang merancang aplikasi sederhana seperti aplikasi kami atau yang sangat kompleks, Anda akan menggunakan Editor GUI Nextion. Ini adalah editor WYSIWYG untuk rangkaian tampilan Nextion dan akan membantu kami mendapatkan tata letak yang tepat. Sekali lagi, dokumentasi dan pengalaman memulai bisa sangat menantang bagi pemula, tetapi setelah Anda menguasainya, Anda akan merancang tata letak yang kompleks dengan cepat.

Sebelum kita membuka editor, kita perlu menyiapkan aset latar belakang. Mengacu pada gambar tiruan kami di atas, kami dapat melihat bahwa satu-satunya hal yang akan berubah pada tampilan kami saat runtime adalah persentase cahaya yang terdeteksi. Logo, warna latar belakang, dan bilah hijau di bagian bawah bersifat statis. Mari kita membuat gambar dengan item yang dapat kita gunakan sebagai latar belakang kita. Ini membawa saya semua 5 menit di GIMP dan terlihat seperti ini.

Hal penting untuk diingat di sini adalah membuat gambar persis dengan ukuran yang Anda butuhkan untuk layar Anda. Dalam kasus saya, saya menggunakan layar 3,5" yang diterjemahkan menjadi 480 x 320 piksel. Itu persis seberapa besar saya membuat gambar saya di GIMP.

Menggunakan Editor Berikutnya

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

Langkah-langkah berikut akan memandu Anda dalam membuat tata letak aplikasi sederhana kami di Nextion Editor. Dengan Editor Nextion terbuka lakukan langkah-langkah berikut.

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

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

3. Klik TAMPILAN tab di sudut kiri atas dialog. Pilih arah tampilan 90 Horizontal.

4. Sekarang Anda dapat mengeklik Oke.

5. Klik Gambar dari Toolbox di sebelah kiri. Ini akan menambahkan elemen p0 untuk garis besar Anda.

6. Dalam Gambar/Font panel di kiri bawah pastikan Anda memiliki Gambar tab dipilih.

7. Klik + simbol.

8. Arahkan ke gambar yang kami buat di GIMP yang menyediakan latar belakang untuk aplikasi kami dan klik Buka .

9. Di panel atribut di sebelah kanan klik dua kali pada gambar daerah nilai atribut. Dialog pemilihan gambar akan terbuka dengan latar belakang aplikasi kita.

10. Pilih latar belakang aplikasi dan klik OK .

11. Klik Teks dari Kotak Alat. Ini akan menambahkan area teks bernama t0 di sudut kiri atas layar kami. Perhatikan nilai id atribut karena Anda akan membutuhkannya nanti saat memprogram Arduino.

12. Seret area teks ke lokasi yang diinginkan di bawah tulisan "Status Cahaya" dan ubah ukurannya sehingga memenuhi area yang luas.

13. Untuk memperbaiki latar belakang putih, kita perlu mengatur latar belakang area teks menjadi versi yang dipotong dari latar belakang utama kita. Dengan t0 dipilih ubah sta atribut dalam panel atribut dari warna solid ke potong gambar .

14. Klik dua kali gambar nilai atribut 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 menjadi transparan.

15. Ubah pco atribut t0 menjadi warna font apa pun yang Anda inginkan. Saya memilih warna kustom Merah:125, Hijau:231, Biru:191.

16. Dari Alat pilih menu Font Generator.

17. Dalam dialog Font Creator pilih ketinggian 96 dan pilih font apa pun yang ingin Anda gunakan. Milik saya adalah Montserrat.

18. Beri nama font dan klik Hasilkan Font . Pastikan untuk menyimpannya di lokasi yang mudah diingat. Kami akan membutuhkannya lagi dalam beberapa detik.

19. Tutup dialog Pembuat Font. Anda akan ditanya apakah Anda ingin menambahkan font yang dihasilkan. Klik Ya . Font tersebut sekarang dirujuk sebagai font index 0.

20. Tambahkan beberapa teks tiruan ke t0 untuk melihat seperti apa tampilannya dengan mengubah atribut txt dari t0 sampai 100%. Anda harus mengeklik keluar dari area nilai atribut agar area editor dapat diperbarui.

21. Ubah posisi t0 sesuai keinginan Anda.

22. Klik Kompilasi di bilah alat atas.

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

Perbarui Tampilan

Ada beberapa cara untuk memasukkan desain baru kami yang mewah ke tampilan itu sendiri. Jika Anda memiliki konverter USB-ke-TTL, Anda dapat menghubungkan langsung ke layar Anda dari dalam IDE Nextion dan mengunggah file TFT yang dikompilasi secara langsung. Jika tidak, Anda perlu menyalin file TFT yang telah 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 di dalamnya atau Anda akan mengalami kesalahan. Editor Berikutnya menempatkan file yang berhasil dikompilasi di direktori berikut di Windows.

C:\Users\[nama pengguna Anda]\AppData\Roaming\Nextion IDE\bianyi\[nama proyek].tft  

Perhatikan, Anda mungkin harus mengaktifkan tampilan file tersembunyi karena folder AppData ditandai sebagai tersembunyi.

Dengan file TFT di kartu SD, lakukan langkah-langkah berikut.

• Pastikan layar dimatikan

• Masukkan kartu SD ke layar

• Nyalakan layar. Layar akan menunjukkan bahwa itu sedang diperbarui.

• Setelah pembaruan selesai, matikan layar

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

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

Ajari Arduino Cara Berbicara Selanjutnya

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

Instal Perpustakaan Nextion

1. Unduh versi terbaru dari perpustakaan Nextion Arduino.

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

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

Di Mac itu akan berlokasi di:

~/Documents/Arduino/libraries 

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

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

5. Komentari baris berikut:

#define DEBUG_SERIAL_ENABLE #define dbSerial Serial  

6. Ubah #define untuk nexSerial menjadi Serial bukan Serial2. Hal ini memungkinkan kami untuk menghubungkan layar secara langsung ke jalur RX dan TX di UNO.

#define nexSerial Serial  

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

8. Dari Berkas pilih menu Baru untuk membuat sketsa baru.

9. Ganti kode sketsa default dengan yang berikut ini:

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

Panduan Kode

Jika Arduino foo Anda memungkinkan Anda untuk memahami sketsa itu, maka Anda dapat melewati bagian ini sepenuhnya. Anda luar biasa. Jika Anda baru mengenal kode Arduino, jangan biarkan ini membuat Anda takut. Mari kita lihat sketsa ini sepotong demi sepotong.

#include "Nextion.h"  

Ini menunjukkan niat kami untuk menggunakan perpustakaan Nextion. Kami tidak perlu melakukan hal lain karena Arduino IDE tahu di mana menemukannya karena kami meletakkannya di folder perpustakaan.

long lastUpdate; 

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

int SENSOR =A0;  

Di sini kami hanya memberikan pin A0 pada Arduino kami nama yang lebih mudah dibaca kode yang dapat kami gunakan untuk referensi nanti. Ini tidak terlalu penting dalam sketsa ini karena ini adalah satu-satunya pin I/O yang kita hadapi, tetapi ini adalah kebiasaan yang baik 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 kita yang mengacu pada elemen teks yang kita buat di GUI. Ingat bahwa kami menamakannya "t0 ". Argumen pertama adalah nomor halaman yang 0 dalam kasus kami dan argumen kedua adalah ID komponen yang kami ingat dari sebelumnya adalah 2. Jika Anda lupa untuk menuliskannya kembali ke Editor Berikutnya, klik tombol t0 elemen 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 daging dari aplikasi kami. Pada baris pertama kita sebenarnya melakukan dua operasi. Pertama kita panggil analogRead(SENSOR) yang memberi kita nilai integer yang mewakili tegangan yang ada pada pin A0 (ingat kita menyebutnya SENSOR). Pada Arduino UNO panggilan analogRead akan mengembalikan nilai dari 0 hingga 1024 tetapi kami ingin memetakannya ke dalam kisaran 0 hingga 100 persen. Tidak masalah. Arduino IDE membuat kita tertutup dengan map() . bawaan fungsi yang memungkinkan kita untuk menentukan nilai yang diikuti oleh [dari rentang] dan [ke rentang]. Kami kemudian mengubah nilai int itu menjadi tipe String dan menempelkan tanda %. Langkah terakhir adalah memanggil setText() di NexText t0 . kami objek yang kita buat sebelumnya.

pengaturan batal(batal) { lastUpdate =milis(); pinMode(SENSOR, INPUT); berikutnyaInit(); }  

Ini adalah fungsi pengaturan Arduino standar yang dijalankan sebelum kode sketsa lainnya. Kami menginisialisasi lastUpdate ke sekarang dengan memanggil millis() fungsi, atur pin A0 kami menjadi input dan inisialisasi perpustakaan Nextion.

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

Dalam pemrograman Arduino loop() fungsi terus dijalankan sampai Arduino dimatikan dan dihidupkan kembali atau diatur ulang dengan cara lain. Kami harus terus melayani perpustakaan Nextion dengan memanggil nexLoop() . Parameter NULL hanya berarti bahwa dalam contoh kami, kami tidak mendengarkan acara sentuh apa pun dari layar. Kami kemudian memiliki pemeriksaan yang sangat sederhana untuk melihat apakah sudah lebih dari 100 milidetik sejak pembacaan sensor terakhir kami. Jika demikian, kami memanggil checkSensor() . kami metode dan atur lastUpdate variabel ke sekarang dengan panggilan lain ke millis() .

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

Hubungkan Layar

Sebelum kita benar-benar menghubungkan layar ke Arduino, mari kita lanjutkan dan masukkan kode sketsa kita ke sana dari IDE dengan mengklik panah kanan kecil di bilah atas atau dengan menggunakan pintasan Ctrl+U.

Layar tidak dapat terhubung selama pengunggahan karena pada Arduino UNO garis serial yang sama yang digunakan layar diperlukan oleh IDE untuk mendorong sketsa baru. Jika Anda menggunakan Arduino Mega, Anda tidak perlu khawatir tentang itu.

Sekarang dengan kode yang didorong ke Arduino, mari kita sambungkan tampilan. Jangan lupa untuk mencabut power dari Arduino terlebih dahulu. Lihat diagram Fritzing untuk informasi koneksi.

Saat Anda menyalakan kembali Arduino, aplikasi Fridgeye Anda akan dengan senang hati menunjukkan kepada Anda pembacaan sensor cahaya saat ini.

Penutup

Wah! Kita berhasil. Jadi, Anda mungkin bertanya pada titik ini dengan sedikit kemarahan dalam nada Anda, "APA YANG BAIK INI? Saya harus meletakkan semuanya di lemari es saya sehingga saya bahkan tidak akan bisa melihat layarnya." Anda adalah murid yang sangat cerdik tetapi saya tidak pernah mengatakan bahwa semua ini berguna, hanya sangat menyenangkan untuk dibangun dan dipelajari.

Jika itu membuat Anda merasa lebih baik, saya menantang Anda untuk mengambil proyek ini selangkah lebih maju dan mencari tahu bagaimana Anda bisa meletakkan sensor di lemari es Anda dan memasang layar di tempat lain. Ada begitu banyak cara untuk mencapai tujuan itu. WiFi, Bluetooth, Zigbee, dan pemancar radio generik hanyalah beberapa yang terlintas dalam pikiran. Banyak pilihan dan banyak hal untuk dipelajari. Jika Anda mencobanya, silakan hubungi saya di Twitter @KevinSidwar atau kirimi saya email (Kevin di sidwar dot com). Saya ingin mendengar tentang petualangan Anda di IoT. Sampai jumpa lagi, selamat meretas.

Jika Anda menyukai postingan saya dan ingin mempelajari lebih lanjut tentang memulai IoT, Anda mungkin tertarik dengan kursus yang sedang saya buat seputar konsep Fridgeye . Jika tidak, saya benar-benar berterima kasih karena Anda benar-benar membaca sampai akhir. Semoga harimu menyenangkan. Anda layak mendapatkannya.

Kode

Arduino Sketch untuk Aplikasi Fridgeye

Ini adalah kode yang berjalan di Arduino sehingga dapat berbicara dengan tampilan Nextion dan menunjukkan pembaca sensor cahaya saat ini.

Skema

Ini adalah diagram pengkabelan tentang cara menghubungkan Arduino, fotoresistor, resistor, dan layar bersama-sama untuk membuat proyek ini.

Robot Asisten Rumah Otonom Generik Serial Bluetooth dengan Win 10 IoT-Core RPI2