Buat Menu Dikontrol Rotary Encoder pada Layar Nokia 5110 dengan Arduino UNO
Komponen dan Perlengkapan
Arduino UNO
Rotary Encoder
LCD Nokia 5110
Aplikasi dan Layanan Online
Arduino IDE
Tentang Proyek Ini
Sahabatku yang terhormat, selamat datang di tutorial lain! Dalam video ini kita akan belajar cara membuat menu sendiri untuk layar LCD populer Nokia 5110, untuk membuat proyek kita lebih ramah pengguna dan lebih canggih. Ayo kita mulai!
Ini adalah proyek yang akan kita buat. Pada layar muncul menu sederhana, dan dengan bantuan rotary encoder saya dapat menavigasi ke atas atau ke bawah dan memilih item menu dengan menekan tombol rotary encoder. Ketika tombol tengah rotary encoder ditekan, layar lain muncul dan kita dapat mengubah nilai variabel. Jika kita menekan tombol rotary encoder sekali lagi, kita kembali ke layar menu utama. Menu memiliki 6 item, dan kita dapat menggulir menu ke bawah atau ke atas dan item pada layar akan berubah sesuai. Tonton video yang dilampirkan untuk melihat bagaimana menu ini bekerja. Tentu saja Anda dapat memodifikasinya untuk membuat menu Anda sendiri yang lebih kompleks jika Anda ingin.
Ayo kita lihat sekarang cara membangun proyek ini.
Langkah 1: Dapatkan Semua Bagian
Bagian yang diperlukan untuk membangun proyek ini adalah sebagai berikut:
Satu Arduino Uno ▶ https://educ8s.tv/part/ArduinoUno
Satu layar LCD Nokia 5110 ▶ https://educ8s.tv/part/NOKIA5110
Satu Rotary Encoder ▶ https://educ8s.tv/part/RotaryEncoder
Satu breadboard kecil ▶ https://educ8s.tv/part/SmallBreadboard
Beberapa kabel ▶ https://educ8s.tv/part/Wires
Biaya proyek ini sangat rendah, kurang dari $10. Anda dapat menemukan tautan untuk semua bagian yang saya gunakan dalam deskripsi video di bawah ini.
Langkah 2: Layar LCD Nokia 5110
Nokia 5110 adalah layar favorit saya untuk proyek Arduino saya.
Nokia 5110 adalah layar LCD grafik dasar yang awalnya dimaksudkan sebagai layar ponsel. Ini menggunakan pengontrol PCD8544 yang merupakan pengontrol/pengemudi LCD CMOS daya rendah. Karena ini layar ini memiliki konsumsi daya yang menakjubkan. Ini hanya menggunakan 0,4mA saat menyala tetapi lampu latar dinonaktifkan. Ini menggunakan kurang dari 0,06mA saat dalam mode tidur! Itu salah satu alasan yang membuat layar ini favorit saya. PCD8544 berinteraksi dengan mikrokontroler melalui antarmuka bus serial. Itu membuat layar ini sangat mudah digunakan dengan Arduino. Anda hanya perlu menghubungkan 8 kabel.
Saya telah menyiapkan tutorial terperinci tentang cara menggunakan layar LCD Nokia 5110 dengan Arduino. Saya telah melampirkan video ini dalam tutorial ini, itu akan memberikan banyak informasi yang berguna tentang layar, jadi saya mendorong Anda untuk menontonnya dengan cermat. Biaya layar sekitar $4.
Anda dapat mendapatkannya di sini: ▶ https://educ8s.tv/part/NOKIA5110
Langkah 3: Rotary Encoder
Rotary encoder, juga disebut encoder poros, adalah perangkat elektromekanis yang mengubah posisi sudut atau gerakan poros atau poros menjadi kode analog atau digital. Rotary encoder digunakan dalam banyak aplikasi yang memerlukan rotasi poros tidak terbatas yang presisi—termasuk kontrol industri, robotika, lensa fotografi tujuan khusus, perangkat masukan komputer (seperti optomekanik mice dan trackball), reometer stres terkontrol, dan platform radar berputar.
Rotary encoder yang akan kita gunakan dalam proyek ini adalah encoder yang sangat murah. Ini juga memiliki tombol yang tertanam dan agar dapat bekerja kita hanya perlu menghubungkan 5 kabel. Saya telah menyiapkan tutorial terperinci tentang cara menggunakan rotary encoder. Anda dapat menemukan video ini dilampirkan di sini.
Biaya rotary encoder ini sangat rendah. Ini berkira $1,5.
Anda dapat mendapatkannya di sini ▶ https://educ8s.tv/part/RotaryEncoder
Langkah 4: Membangun Proyek
Ayo kita sekarang hubungkan semua bagian bersama. Sebelum membangun proyek ini, jika Anda belum pernah menggunakan rotary encoder di masa lalu, saya mendorong Anda untuk menonton tutorial yang telah saya siapkan tentang rotary encoder. Ini akan membantu Anda memahami cara kerja rotary encoder dan Anda akan mendapatkan beberapa pengalaman dengan mereka. Video ini dilampirkan di sini.
Saya telah meletakkan layar pada breadboard kecil seperti ini. Ayo kita pertama-tama hubungkan layar. Pin pertama layar yang merupakan Reset pergi ke pin digital 3 Arduino Uno, pin kedua pergi ke pin digital 4, pin ketiga pergi ke pin digital 5, pin keempat ke pin digital 11 dan pin kelima ke pin digital 13. Pin berikutnya adalah Vcc. Kita menghubungkan Vcc ke rel positif breadboard, dan rel positif breadboard ke output 3,3V Arduino. Pin berikutnya adalah Backlight untuk layar. Karena kita ingin mengontrolnya melalui perangkat lunak kita menghubungkannya ke pin digital 7. Pin terakhir adalah GND. Kita menghubungkan GND ke rel negatif breadboard, dan rel negatif breadboard ke GND Arduino.
Sekarang yang kita lakukan hanyalah menghubungkan rotary encoder. Pin pertama adalah GND dan kita menghubungkannya ke rel negatif breadboard. Pin berikutnya adalah Vcc dan kita menghubungkannya ke rel positif breadboard. Pin berikutnya adalah SW dan kita menghubungkannya ke Pin Analog 2. Pin berikutnya bernama DT dan kita menghubungkannya ke Pin Analog 1. Terakhir pin CLK terhubung ke Pin Analog 0. Anda dapat menemukan diagram skematik proyek ini dalam deskripsi video di bawah ini.
Sekarang kita siap untuk menyalakan proyek. Seperti yang Anda lihat, proyek ini bekerja dengan baik, dan menu bekerja seperti yang diharapkan! Bagus, ayo kita sekarang lihat perangkat lunak proyek.
Langkah 5: Kode Proyek
Dalam proyek ini kita menggunakan 4 perpustakaan. Kami menggunakan dua perpustakaan untuk layar, dan dua untuk rotary encoder.
Pertama kita akan melihat fungsi drawMenu. Fungsi ini bertanggung jawab untuk menggambar Menu pada layar. Fungsi ini dipanggil setiap beberapa milidetik, jadi jika ada perubahan pada menu fungsi ini bertanggung jawab untuk memperbarui menu pada layar.
int menuitem = 1;int frame = 1; int page = 1; int lastMenuItem = 1;
Ada juga 3 variabel global yang sangat penting, variabel page, variabel menuitem dan variabel frame. Variabel page mengingat layar UI mana yang ditampilkan di layar. Jadi, jika variabel page adalah 1, kita berada di layar UI utama, dan jika variabel adalah 2 kita berada di layar UI sekunder di mana kita menetapkan nilai pada variabel. Item menu mengingat item menu yang dipilih. Jadi, jika nilainya 1, item menu pertama dipilih, jadi fungsi drawMenu harus menggambar item menu ini sebagai hitam dengan huruf putih. Jika item menu adalah 2 item menu kedua dipilih dan seterusnya. Variabel frame mengingat bagian menu mana yang ditampilkan di layar. Karena menu yang kami buat berisi 6 item dan kita hanya dapat menampilkan 3 dari mereka pada satu waktu, kita perlu mengetahui item mana yang ditampilkan di layar. Variabel frame, memberi tahu kita tepat ini. Jika variabel frame memiliki nilai 1, kita menampilkan tiga item menu pertama, jika 2, kita menampilkan item 2,3,4 dan seterusnya.
Saya mencoba membuat kode sesederhana mungkin untuk dimodifikasi jadi saya telah membuat beberapa variabel global yang menahan nama untuk item menu. Dengan cara ini, Anda dapat membuat menu Anda sendiri dengan mudah tanpa mencari dalam kode.
Pertama kita menginisialisasi semua variabel global yang diperlukan dalam kode. Selanjutnya kita menginisialisasi layar. Dalam fungsi loop, pertama kita memanggil fungsi drawMenu untuk menggambar menu di layar. Kemudian kita membaca nilai dari Rotary encoder dan memeriksa apakah tombol ditekan. Misalnya, jika kita berada di layar UI utama dan item menu pertama dipilih, jika nilai dari rotary encoder meningkat, variabel menuitem meningkat dan di loop berikutnya fungsi drawMenu akan menggambar item menu kedua sebagai yang dipilih. Jika kita sekarang menekan tombol rotary encoder kita menavigasi ke halaman kedua, di mana kita menetapkan nilai variabel. Lagi menggunakan rotary encoder kita dapat meningkatkan atau menurunkan nilai variabel. Jika kita menekan tombol kita menavigasi kembali ke halaman menu utama, dan variabel page menurun.
Itu ide dasar di balik menu ini. Kami mengikuti prosedur yang sama untuk semua item menu dan halaman. Kode cukup kompleks, melebihi 400 baris. Terlihat rumit tetapi jika Anda mencoba sendiri Anda akan memahaminya lebih mudah dan akan dapat mengubahnya, mengembangkannya dan menggunakannya dalam proyek Anda sendiri. Seperti biasa Anda dapat menemukan kode yang dilampirkan di sini.
Nokia5110MenuRotary.ino
Langkah 6: Menguji Proyek
Jika kita memuat kode kita dapat melihat bahwa proyek bekerja seperti yang diharapkan. Kita dapat menavigasi menu ke atas dan ke bawah menggunakan poros dan kita dapat memilih item menu apa pun dengan menekan tombol rotary encoder. Seberapa keren itu!
Sekarang setelah kita tahu cara membuat menu untuk layar LCD Nokia 5110 kita dapat menambahkan lebih banyak fitur ke proyek kita dan membuatnya lebih ramah pengguna. Menu sederhana yang kita buat hari ini dapat ditingkatkan meskipun. Kita dapat menggunakan interrupt daripada memeriksa status tombol sepanjang waktu. Dengan cara ini kita dapat mengurangi konsumsi daya proyek dan membuat kode lebih bersih. Saya akan menyiapkan video tentang interrupt segera jadi tetap menyimak. Saya akan senang mendengar pendapat Anda tentang proyek menu ini. Apakah Anda menemukannya berguna dan apakah Anda berencana untuk menggunakan menu dalam salah satu proyek Anda. Silakan posting pendapat dan ide Anda di bawah ini, terima kasih!
