Panduan Profesional Animasi Bitmap pada Layar Sentuh TFT ILI9341 2.4″

Komponen dan Perlengkapan

• Arduino UNO – 1 unit
• ILI9341 2.4″ TFT Touchscreen Shield untuk Arduino – 1 unit

Aplikasi dan Layanan Online

• Visuino – Lingkungan Pengembangan Grafis untuk Arduino
• Arduino IDE

Tentang Proyek Ini

Display Shield TFT Sentuh berbasis ILI9341 merupakan Display Shield yang sangat populer dan hemat biaya untuk Arduino. Visuino telah mendukungnya selama beberapa waktu, tetapi saya belum pernah menulis tutorial tentang cara menggunakannya. Namun, akhir-akhir ini beberapa orang bertanya tentang penggunaan layar dengan Visuino, jadi saya memutuskan untuk membuat tutorial ini.

Dalam tutorial ini, saya akan menunjukkan seberapa mudahnya untuk menghubungkan Shield ke Arduino dan memrogramnya dengan Visuino untuk menganimasikan Bitmap yang bergerak di layar.

Langkah 1: Komponen

• Papan kompatibel Arduino Uno (Mungkin juga bekerja dengan Mega, tetapi saya belum menguji shield dengan papan ini)
• Satu ILI9341 2.4″ TFT Touchscreen Shield untuk Arduino

Langkah 2: Hubungkan ILI9341 TFT Touchscreen Display Shield ke Arduino

Pasang TFT Shield di atas Arduino Uno seperti yang ditunjukkan pada gambar.

Langkah 3: Mulai Visuino dan tambahkan TFT Display Shield

Untuk memrogram Arduino, Anda perlu menginstal Arduino IDE dari sini: https://www.arduino.cc/.

Pastikan Anda menginstal versi 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 "Arrow Down" pada komponen Arduino untuk membuka Drop Down Menu (Gambar 1)
• Dari Menu pilih "Add Shields..." (Gambar 1)
• Dalam dialog "Shields" perluas kategori "Displays", dan pilih "TFT Color Touch Screen Display ILI9341 Shield", lalu klik tombol "+" untuk menambahkannya (Gambar 2)

Langkah 4: Di Visuino: Tambahkan Elemen Draw Text untuk bayangan teks

Selanjutnya kita perlu menambahkan elemen grafis untuk merender teks dan bitmap. Pertama kita akan menambahkan elemen grafis untuk menggambar bayangan teks:

• Di Object Inspector, klik tombol "..." di samping nilai properti "Elements" dari elemen "TFT Display" (Gambar 1)
• Di editor Elements pilih "Draw Text", lalu klik tombol "+" (Gambar 2) untuk menambah satu (Gambar 3)
• Di Object Inspector tetapkan nilai properti "Color" dari elemen "Draw Text1" menjadi "aclSilver" (Gambar 3)
• Di Object Inspector tetapkan nilai properti "Size" dari elemen "Draw Text1" menjadi "4" (Gambar 4). Ini membuat teks lebih besar
• Di Object Inspector tetapkan nilai properti "Text" dari elemen "Draw Text1" menjadi "Visuino" (Gambar 5)
• Di Object Inspector tetapkan nilai properti "X" dari elemen "Draw Text1" menjadi "43" (Gambar 6)
• Di Object Inspector tetapkan nilai properti "Y" dari elemen "Draw Text1" menjadi "278" (Gambar 6)

Langkah 5: Di Visuino: Tambahkan Elemen Draw Text untuk latar depan teks

Sekarang kita akan menambahkan elemen grafis untuk menggambar teks:

• Di editor Elements pilih "Draw Text", lalu klik tombol "" (Gambar 1) untuk menambah yang kedua (Gambar 2)
• Di Object Inspector tetapkan nilai properti "Size" dari elemen "Draw Text1" menjadi "4" (Gambar 2)
• Di Object Inspector tetapkan nilai properti "Text" dari elemen "Draw Text1" menjadi "Visuino" (Gambar 3)
• Di Object Inspector tetapkan nilai properti "X" dari elemen "Draw Text1" menjadi "40" (Gambar 4)
• Di Object Inspector tetapkan nilai properti "Y" dari elemen "Draw Text1" menjadi "275" (Gambar 4)

Langkah 6: Di Visuino: Tambahkan Elemen Draw Bitmap untuk animasi

Selanjutnya kita akan menambahkan elemen grafis untuk menggambar bitmap:

• Di editor Elements pilih "Draw Bitmap", lalu klik tombol "" (Gambar 1) untuk menambah satu (Gambar 2)
• Di Object Inspector, klik tombol "..." di samping nilai properti "Bitmap" dari elemen "Draw Bitmap1" (Gambar 2) untuk membuka "Bitmap Editor" (Gambar 3)
• Di "Bitmap Editor" klik tombol "Load..." (Gambar 3) untuk membuka File Open Dialog (Gambar 4)
• Dalam File Open Dialog, pilih bitmap yang akan digambar, dan klik tombol "Open" (Gambar 4). Jika file terlalu besar mungkin tidak muat dalam memori Arduino. Jika Anda mendapatkan error out of memory selama kompilasi, Anda mungkin perlu memilih bitmap yang lebih kecil
• Di "Bitmap Editor" klik tombol "OK" (Gambar 5) untuk menutup dialog

Langkah 7: Di Visuino: Tambahkan pin untuk properti X dan Y dari elemen Draw Bitmap

Untuk menganimasikan Bitmap, kita perlu mengontrol posisi X dan Y-nya. Untuk ini kita akan menambahkan pin untuk properti X dan Y:

• Di Object Inspector klik tombol "Pin" di depan properti "X" dari elemen "Draw Bitmap1" (Gambar 1), dan pilih "Integer SinkPin" (Gambar 2)
• Di Object Inspector klik tombol "Pin" di depan properti "Y" dari elemen "Draw Bitmap1" (Gambar 3), dan pilih "Integer SinkPin" (Gambar 4)

Langkah 8: Di Visuino: Tambahkan 2 Integer Sine Generators, dan konfigurasikan yang pertama

Kita akan menggunakan 2 Integer sine generators untuk menganimasikan gerakan bitmap:

• Ketik "sine" di kotak Filter dari Component Toolbox lalu pilih komponen "Sine Integer Generator" (Gambar 1), dan seret dua dari mereka ke area desain
• Di Object Inspector, tetapkan nilai properti "Amplitude" dari komponen SineIntegerGenerator1 menjadi "96" (Gambar 2)
• Di Object Inspector, tetapkan nilai properti "Offset" dari komponen SineIntegerGenerator1 menjadi "96" (Gambar 3)
• Di Object Inspector, tetapkan nilai properti "Frequency" dari komponen SineIntegerGenerator1 menjadi "0.2" (Gambar 4)

Langkah 9: Di Visuino: Konfigurasikan Sine Generator kedua, dan hubungkan Sine Generators ke pin koordinat X dan Y dari Bitmap

• Di Object Inspector, tetapkan nilai properti "Amplitude" dari komponen SineIntegerGenerator2 menjadi "120" (Gambar 1)
• Di Object Inspector, tetapkan nilai properti "Offset" dari komponen SineIntegerGenerator2 menjadi "120" (Gambar 2)
• Di Object Inspector, tetapkan nilai properti "Frequency" dari komponen SineIntegerGenerator2 menjadi "0.03" (Gambar 3)
• Hubungkan pin output "Out" dari komponen SineIntegerGenerator1 ke pin input "X" dari elemen "Shields.TFT Sisplay.Elements.Draw Bitmap1" dari komponen Arduino (Gambar 4)
• Hubungkan pin output "Out" dari komponen SineIntegerGenerator2 ke pin input "Y" dari elemen "Shields.TFT Display.Elements.Draw Bitmap1" dari komponen Arduino (Gambar 5)

Langkah 10: Di Visuino: Tambahkan dan hubungkan komponen Start dan Clock Multi Source

Untuk merender bitmap setiap kali posisi X dan Y diperbarui, kita perlu mengirim sinyal clock ke elemen "Draw Bitmap1". Untuk mengirim perintah setelah posisi diubah, kita perlu cara untuk mensinkronkan peristiwa. Untuk ini kita akan menggunakan komponen Repeat untuk terus-menerus menghasilkan peristiwa, dan Clock Multi Source untuk menghasilkan 2 peristiwa secara berurutan. Peristiwa pertama akan mengclock sine generators untuk memperbarui posisi X dan Y, dan yang kedua akan mengclock "Draw Bitmap1":

• Ketik "repeat" di kotak Filter dari Component Toolbox, lalu pilih komponen "Repeat" (Gambar 1), dan seret ke area desain (Gambar 2)
• Ketik "multi" di kotak Filter dari Component Toolbox, lalu pilih komponen "Clock Multi Source" (Gambar 2), dan seret ke area desain (Gambar 3)
• Hubungkan pin output "Out" dari komponen Repeat1 ke pin input "In" dari komponen ClockMultiSource1 (Gambar 3)
• Hubungkan pin output "Pin[ 0 ]" dari pin "Out" dari komponen ClockMultiSource1 ke pin input "In" dari komponen SineIntegerGenerator1 (Gambar 4)
• Hubungkan pin output "Pin[ 0 ]" dari pin "Out" dari komponen ClockMultiSource2 ke pin input "In" dari komponen SineIntegerGenerator1 (Gambar 5)
• Hubungkan pin output "Pin[ 1 ]" dari pin input "Clock" dari elemen "Shields.TFT Display.Elements.Draw Bitmap1" dari komponen Arduino (Gambar 6)

Langkah 11: Hasilkan, Kompilasi, dan Unggah Kode Arduino

• Di Visuino, tekan F9 atau klik tombol yang ditunjukkan pada Gambar 1 untuk menghasilkan kode Arduino, dan buka Arduino IDE
• Di Arduino IDE, klik tombol Upload, untuk mengkompilasi dan mengunggah kode (Gambar 2)

Langkah 12: Dan mainkan...

Selamat! Anda telah menyelesaikan proyek ini.

Gambar 2, 3, 4 dan 5 dan Video menunjukkan proyek yang sudah terhubung dan menyala. Anda akan melihat Bergeraknya Bitmap di sekitar ILI9341 based TFT Touchscreen Display Shield seperti yang terlihat pada Video.

Pada Gambar 1 Anda dapat melihat diagram Visuino lengkap. Juga dilampirkan adalah proyek Visuino yang saya buat untuk tutorial ini, dan bitmap dengan logo Visuino. Anda dapat mengundah dan membukanya di Visuino: https://www.visuino.com

FPHWHL0IV0AHJLX.zip