Arduino Uno: Animasi Bitmap pada ILI9341 TFT Touchscreen Display Shield Dengan Visuino: 12 Langkah (dengan Gambar)

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:58

TFT Touchscreen Display Shields berbasis ILI9341 adalah Display Shields 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 beberapa orang 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 Layar.

Langkah 1: Komponen

1. Satu papan yang kompatibel dengan Arduino Uno (Mungkin bekerja dengan Mega juga, tapi saya belum menguji perisai dengan itu)
2. 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 mulai memprogram Arduino, Anda harus menginstal Arduino IDE dari sini:

Pastikan Anda menginstal 1.6.7 atau lebih tinggi, jika tidak, Instruksi ini tidak akan berfungsi

Visuino: https://www.visuino.com juga perlu diinstal.

1. Mulai Visuino seperti yang ditunjukkan pada gambar pertama
2. Klik tombol "Panah Bawah" pada komponen Arduino untuk membuka Menu Drop Down (Gambar 1)
3. Dari Menu pilih "Add Shields…" (Gambar 1)
4. Pada dialog "Perisai" perluas kategori "Tampilan", dan pilih "TFT Color Touch Screen Display ILI9341 Shield", lalu klik tombol "+" 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:

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

Langkah 5: Di Visuino: Tambahkan Elemen Teks Gambar untuk Latar Depan Teks

Sekarang kita akan menambahkan elemen grafis untuk menggambar teks:

1. Di editor Elemen pilih "Draw Text", lalu klik tombol "+" (Gambar 1) untuk menambahkan yang kedua (Gambar 2)
2. Di Object Inspector atur nilai properti "Size" dari elemen "Draw Text1" menjadi "4" (Gambar 2)
3. Di Object Inspector atur nilai properti "Teks" dari elemen "Draw Text1" ke "Visuino" (Gambar 3)
4. Di Object Inspector atur nilai properti "X" dari elemen "Draw Text1" menjadi "40" (Gambar 4)
5. Di Object Inspector atur 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:

1. Di editor Elemen pilih "Draw Bitmap", lalu klik tombol "+" (Gambar 1) untuk menambahkan satu (Gambar 2)
2. Di Object Inspector, klik tombol "…" di sebelah nilai properti "Bitmap" dari Elemen "Draw Bitmap1" (Gambar 2) untuk membuka "Editor Bitmap" (Gambar 3)
3. Di "Bitmap Editor" klik tombol "Load…" (Gambar 3) untuk membuka Dialog Buka File (Gambar 4)
4. Dalam Dialog Buka File, pilih bitmap yang akan digambar, dan klik tombol "Buka" (Gambar 4). Jika file terlalu besar mungkin tidak dapat masuk ke dalam memori Arduino. Jika Anda keluar dari kesalahan memori selama kompilasi, Anda mungkin perlu memilih bitmap yang lebih kecil
5. Di "Editor Bitmap" klik "OK." 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:

1. Di Object Inspector klik tombol "Pin" di depan properti "X" dari elemen "Draw Bitmap1" (Gambar 1), dan pilih "Integer SinkPin" (Gambar 2)
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 Generator Sine Integer, dan Konfigurasikan Yang Pertama

Kami akan menggunakan 2 generator sinus integer untuk menganimasikan gerakan bitmap:

1. Ketik "sinus" di kotak Filter pada Component Toolbox lalu pilih komponen "Sine Integer Generator" (Gambar 1), dan letakkan dua di antaranya di area desain
2. Di Object Inspector, atur nilai properti "Amplitude" dari komponen SineIntegerGenerator1 ke "96" (Gambar 2)
3. Di Object Inspector, atur nilai properti "Offset" dari komponen SineIntegerGenerator1 ke "96" (Gambar 3)
4. Di Object Inspector, atur nilai properti "Frequency" dari komponen SineIntegerGenerator1 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

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

Langkah 10: Di Visuino: Tambahkan dan Hubungkan Mulai dan Jam Komponen Multi Sumber

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":

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

Langkah 11: Hasilkan, Kompilasi, dan Unggah Kode Arduino

1. Di Visuino, Tekan F9 atau klik tombol yang ditunjukkan pada Gambar 1 untuk menghasilkan kode Arduino, dan buka Arduino IDE
2. Pada Arduino IDE, klik tombol Unggah, untuk mengkompilasi dan mengunggah kode (Gambar 2)

Langkah 12: Dan Mainkan…

Selamat! Anda telah menyelesaikan proyek.

Gambar 2, 3, 4 dan 5 dan Video menunjukkan proyek yang terhubung dan dihidupkan. Anda akan melihat Bitmap bergerak di sekitar TFT Touchscreen Display Shield berbasis ILI9341 seperti yang terlihat di Video.

Pada Gambar 1 Anda dapat melihat diagram Visuino lengkap. Juga terlampir adalah proyek Visuino, yang saya buat untuk Instruksi ini, dan bitmap dengan logo Visuino. Anda dapat mengunduh dan membukanya di Visuino: