Animasi Bitmap Pada ILI9341 TFT Touchscreen Display Shield

Tentang proyek ini

Perisai Tampilan Layar Sentuh TFT berbasis ILI9341 adalah Perisai Tampilan berbiaya rendah yang sangat populer untuk Arduino . Visuino telah memiliki dukungan untuk mereka cukup lama, tetapi saya tidak pernah memiliki kesempatan untuk menulis Tutorial tentang cara menggunakannya. Namun baru-baru ini, hanya sedikit orang yang mengajukan pertanyaan tentang penggunaan tampilan dengan Visuino , jadi saya memutuskan untuk membuat tutorial.

Dalam Tutorial ini, saya akan menunjukkan kepada Anda betapa mudahnya, untuk menghubungkan Shield ke Arduino , dan memprogramnya dengan Visuino untuk menganimasikan Bitmap untuk bergerak di Tampilan.

Langkah 1:Komponen

• Satu Arduino Uno papan yang kompatibel (Mungkin bekerja dengan Mega juga, tapi saya belum menguji perisai dengan itu)

• Satu ILI9341 2.4" TFT Touchscreen Shield untuk Arduino

Langkah 2:Hubungkan ILI9341 TFT Touchscreen Display Shield ke Arduino

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

Langkah 3:Mulai Visuino dan tambahkan TFT Display Shield

Untuk mulai memprogram Arduino, Anda harus memiliki Arduino IDE diinstal dari sini:http://www.arduino.cc/.

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 yang ditunjukkan pada gambar pertama

• Klik pada "Panah Bawah " tombol komponen Arduino untuk membuka Menu Drop Down (Gambar 1 )

• Dari Menu pilih "Tambahkan Perisai... " (Gambar 1 )

• Dalam "Perisai " dialog perluas "Tampilan ", dan pilih "TFT Color Touch Screen Display ILI9341 Shield ", lalu klik "+ " untuk menambahkannya (Gambar 2 )

Langkah 4:Di Visuino:Tambahkan Elemen Teks Gambar untuk bayangan teks

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

• Di Object Inspector, klik "... " tombol di sebelah nilai "Elemen " properti dari "TFT Display " Elemen (Gambar 1 )

• Di editor Elemen, pilih “Gambar Teks ”, lalu klik "+ tombol " (Gambar 2 ) untuk menambahkan satu (Gambar 3 )

• Dalam Object Inspector atur nilai "Color " properti dari "Gambar Teks1 " elemen ke "aclSilver " (Gambar 3 )

• Dalam Object Inspector atur nilai "Size " properti dari "Gambar Teks1 " elemen ke "4 " (Gambar 4 ). Ini membuat teks lebih besar

• Dalam Object Inspector atur nilai "Teks " properti dari "Gambar Teks1 elemen " ke "Visuino " (Gambar 5 )

• Dalam Object Inspector atur nilai "X " properti dari "Gambar Teks1 " elemen ke "43 " (Gambar 6 )

• Dalam Object Inspector atur nilai "Y " properti dari "Gambar Teks1 " elemen ke "278 " (Gambar 6 )

Langkah 5:Di Visuino:Tambahkan Elemen Teks Gambar untuk latar depan teks

Sekarang kita akan menambahkan elemen grafik untuk menggambar teks:

• Di editor Elemen, pilih “Gambar Teks ”, lalu klik tombol "" (Gambar 1 ) untuk menambahkan yang kedua (Gambar 2 )

• Dalam Object Inspector atur nilai "Size " properti dari "Gambar Teks1 " elemen ke "4 " (Gambar 2 )

• Dalam Object Inspector atur nilai "Teks " properti dari "Gambar Teks1 elemen " ke "Visuino " (Gambar 3 )

• Dalam Object Inspector atur nilai "X " properti dari "Gambar Teks1 " elemen ke "40 " (Gambar 4 )

• Dalam Object Inspector atur nilai "Y " properti dari "Gambar Teks1 " elemen ke "275 " (Gambar 4 )

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

Selanjutnya kita akan menambahkan elemen grafis untuk menggambar bitmap:

• Di editor Elemen, pilih “Gambar Bitmap ”, lalu klik tombol "" (Gambar 1 ) untuk menambahkan satu (Gambar 2 )

• Di Object Inspector, klik "... " tombol di sebelah nilai "Bitmap " properti dari "Draw Bitmap1 " Elemen (Gambar 2 ) untuk membuka "Editor Bitmap " (Gambar 3 )

• Di "Editor Bitmap " klik pada "Muat... tombol " (Gambar 3 ) untuk membuka Dialog Pembukaan File (Gambar 4 )

• Dalam Dialog Buka File, pilih bitmap yang akan digambar, dan klik tombol "Buka tombol " (Gambar 4 ). Jika file terlalu besar mungkin tidak dapat masuk ke memori Arduino. Jika Anda keluar dari kesalahan memori selama kompilasi, Anda mungkin perlu memilih bitmap yang lebih kecil

• Di "Editor Bitmap " klik pada "Oke tombol ." (Gambar 5 ) untuk menutup dialog

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

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

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

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

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

Kami akan menggunakan 2 generator sinus bilangan bulat untuk menganimasikan gerakan bitmap:

• Ketik "sinus " pada kotak Filter pada Component Toolbox kemudian pilih "Sine Integer Generator komponen " (Gambar 1 ), dan lepaskan dua di antaranya itu di area desain

• Di Object Inspector, atur nilai "Amplitudo " properti dari SineIntegerGenerator1 komponen ke "96 " (Gambar 2 )

• Di Object Inspector, atur nilai "Offset " properti dari SineIntegerGenerator1 komponen ke "96 " (Gambar 3 )

• Di Object Inspector, atur nilai "Frekuensi " properti dari SineIntegerGenerator1 komponen ke "0.2 " (Gambar 4 )

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

• Di Object Inspector, atur nilai "Amplitudo " properti dari SineIntegerGenerator2 komponen ke "120 " (Gambar 1 )

• Di Object Inspector, atur nilai "Offset " properti dari SineIntegerGenerator2 komponen ke "120 " (Gambar 2 )

• Di Object Inspector, atur nilai "Frekuensi " properti dari SineIntegerGenerator2 komponen ke "0,03 " (Gambar 3 )

• Hubungkan "Keluar " pin keluaran SineIntegerGenerator1 komponen ke "X " masukan pin dari "Shields.TFT Sisplay.Elements.Draw Bitmap1 " elemen Arduino komponen (Gambar 4 )

• Hubungkan "Keluar " pin keluaran SineIntegerGenerator2 komponen ke "Y " pin masukan dari "Shields.TFT Display.Elements.Draw Bitmap1 " elemen Arduino komponen (Gambar 5 )

Langkah 10:Di Visuino:Tambahkan dan sambungkan 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 membutuhkan cara untuk menyinkronkan acara. Untuk ini kita akan menggunakan komponen Repeat untuk menghasilkan event secara konstan, dan Clock Multi Source untuk menghasilkan 2 event secara berurutan. Acara pertama akan membuat clock generator sinus untuk memperbarui posisi X dan Y, dan yang kedua akan mencatat "Draw Bitmap1" :

• Ketik "ulangi " di kotak Filter di Component Toolbox, lalu pilih "Ulangi komponen " (Gambar 1 ), dan letakkan di area desain (Gambar 2 )

• Ketik "multi " di kotak Filter pada Component Toolbox, lalu pilih "Jam Multi Sumber komponen " (Gambar 2 ), dan letakkan di area desain (Gambar 3 )

• Hubungkan "Keluar " pin keluaran Ulangi1 komponen ke "Dalam " pin masukan ClockMultiSource1 komponen (Gambar 3 )

• Hubungkan "Pin[ 0 ] " pin keluaran dari "Keluar " pin dari ClockMultiSource1 komponen ke "Dalam " pin masukan SineIntegerGenerator1 komponen (Gambar 4 )

• Hubungkan "Pin[ 0 ] " pin keluaran dari "Keluar " pin dari ClockMultiSource2 komponen ke "Dalam " pin masukan SineIntegerGenerator1 komponen (Gambar 5 )

• Hubungkan "Pin[ 1 ] " pin keluaran dari "Jam " pin masukan dari "Shields.TFT Display.Elements.Draw Bitmap1 " elemen Arduino komponen (Gambar 6 )

Langkah 11: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 12:Dan mainkan...

Selamat! Anda telah menyelesaikan proyek.

Gambar 2, 3, 4 dan 5 dan Video tunjukkan proyek yang terhubung dan dihidupkan. Anda akan melihat Bitmap bergerak di sekitar Perisai Tampilan Layar Sentuh TFT berbasis ILI9341 seperti yang terlihat di Video .

Pada Gambar 1 Anda dapat melihat Visuino complete yang lengkap diagram.Terlampir juga Visuino proyek, yang saya buat untuk tutorial ini, dan bitmap dengan Visuino logo. Anda dapat mengunduh dan membukanya di Visuino :https://www.visuino.com