Arduino Uno: Animasi Bitmap pada Perisai Paparan Skrin Sentuh TFI ILI9341 Dengan Visuino: 12 Langkah (dengan Gambar)

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:12

Perisai Paparan Skrin Sentuh TFT berasaskan ILI9341 adalah Perisai Paparan kos rendah yang sangat popular untuk Arduino. Visuino mempunyai sokongan untuk mereka sejak beberapa lama, tetapi saya tidak pernah berpeluang menulis Tutorial tentang cara menggunakannya. Baru-baru ini namun sebilangan orang mengemukakan soalan mengenai penggunaan paparan dengan Visuino, jadi saya memutuskan untuk membuat tutorial.

Dalam Tutorial ini, saya akan menunjukkan betapa mudahnya, menghubungkan Shield ke Arduino, dan memprogramkannya dengan Visuino untuk menghidupkan Bitmap untuk bergerak di Display.

Langkah 1: Komponen

1. Satu papan serasi Arduino Uno (Mungkin juga berfungsi dengan Mega, tetapi saya belum menguji perisainya)
2. Satu ILI9341 2.4 "TFT Touchscreen Shield untuk Arduino

Langkah 2: Sambungkan Perisai Paparan Skrin Sentuh ILI9341 TFT ke Arduino

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

Langkah 3: Mulakan Visuino dan Tambahkan TFT Display Shield

Untuk mula memprogram Arduino, anda perlu memasang Arduino IDE dari sini:

Pastikan anda memasang 1.6.7 atau lebih tinggi, jika tidak, Instructable ini tidak akan berfungsi

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

1. Mulakan Visuino seperti yang ditunjukkan pada gambar pertama
2. Klik pada butang "Arrow Down" pada komponen Arduino untuk membuka Menu Turun (Gambar 1)
3. Dari Menu pilih "Add Shields…" (Gambar 1)
4. Dalam dialog "Perisai" kembangkan kategori "Paparan", dan pilih "Paparan Skrin Sentuh Warna TFT ILI9341 Perisai", kemudian klik pada butang "+" untuk menambahkannya (Gambar 2)

Langkah 4: Di Visuino: Tambahkan Elemen Teks Lukis untuk Bayangan Teks

Seterusnya kita perlu menambahkan elemen Grafik untuk membuat teks dan peta bit. Mula-mula kita akan menambahkan elemen grafik untuk menarik bayangan teks:

1. Dalam Pemeriksa Objek, klik pada butang "…" di sebelah nilai harta "Elemen" Elemen "Paparan TFT" (Gambar 1)
2. Dalam editor Elemen pilih "Draw Text", dan kemudian klik pada butang "+" (Gambar 2) untuk menambahkannya (Gambar 3)
3. Dalam Objek Pemeriksa tetapkan nilai sifat "Warna" elemen "Draw Text1" ke "aclSilver" (Gambar 3)
4. Dalam Object Inspector tetapkan nilai sifat "Size" elemen "Draw Text1" ke "4" (Gambar 4). Ini menjadikan teks lebih besar
5. Dalam Objek Pemeriksa tetapkan nilai harta "Teks" elemen "Draw Text1" ke "Visuino" (Gambar 5)
6. Dalam Objek Pemeriksa tetapkan nilai sifat "X" elemen "Draw Text1" ke "43" (Gambar 6)
7. Dalam Objek Pemeriksa tetapkan nilai harta "Y" elemen "Draw Text1" ke "278" (Gambar 6)

Langkah 5: Di Visuino: Tambahkan Elemen Teks Draw untuk Foreground Teks

Sekarang kita akan menambahkan elemen grafik untuk menarik teks:

1. Dalam editor Elemen pilih "Draw Text", dan kemudian klik pada butang "+" (Gambar 1) untuk menambah yang kedua (Gambar 2)
2. Dalam Objek Pemeriksa tetapkan nilai sifat "Saiz" elemen "Draw Text1" ke "4" (Gambar 2)
3. Dalam Objek Pemeriksa tetapkan nilai harta "Teks" elemen "Draw Text1" ke "Visuino" (Gambar 3)
4. Dalam Objek Pemeriksa tetapkan nilai harta "X" elemen "Draw Text1" ke "40" (Gambar 4)
5. Dalam Objek Pemeriksa tetapkan nilai harta "Y" elemen "Draw Text1" ke "275" (Gambar 4)

Langkah 6: Di Visuino: Tambahkan Elemen Lukisan Bitmap untuk Animasi

Seterusnya kita akan menambahkan elemen grafik untuk melukis peta bit:

1. Dalam editor Elemen pilih "Draw Bitmap", dan kemudian klik pada butang "+" (Gambar 1) untuk menambahkannya (Gambar 2)
2. Dalam Pemeriksa Objek, klik pada butang "…" di sebelah nilai harta "Bitmap" dari Elemen "Draw Bitmap1" (Gambar 2) untuk membuka "Bitmap Editor" (Gambar 3)
3. Dalam "Bitmap Editor" klik pada butang "Muat …" (Gambar 3) untuk membuka Dialog Buka Fail (Gambar 4)
4. Dalam Dialog Buka Fail, pilih peta bit untuk dilukis, dan klik pada butang "Buka" (Gambar 4). Sekiranya failnya terlalu besar, fail tersebut mungkin tidak dapat dimasukkan ke dalam memori Arduino. Sekiranya anda keluar dari ralat memori semasa penyusunan, anda mungkin perlu memilih bitmap yang lebih kecil
5. Dalam "Bitmap Editor" klik pada "OK." butang (Gambar 5) untuk menutup dialog

Langkah 7: Di Visuino: Tambahkan Pin untuk Sifat X dan Y Elemen Lukisan Bitmap

Untuk menghidupkan Bitmap, kita perlu mengawal kedudukan X dan Y. Untuk ini kami akan menambah pin untuk sifat X dan Y:

1. Dalam Pemeriksa Objek klik pada butang "Pin" di hadapan harta "X" elemen "Draw Bitmap1" (Gambar 1), dan pilih "Integer SinkPin" (Gambar 2)
2. Dalam Pemeriksa Objek klik pada butang "Pin" di hadapan harta "Y" elemen "Draw Bitmap1" (Gambar 3), dan pilih "Integer SinkPin" (Gambar 4)

Langkah 8: Di Visuino: Tambahkan 2 Penjana Sinus Integer, dan Konfigurasikan Yang Pertama

Kami akan menggunakan 2 generator sinus Integer untuk menghidupkan pergerakan bitmap:

1. Ketik "sinus" di kotak Penapis pada Komponen Alat kemudian pilih komponen "Sine Integer Generator" (Gambar 1), dan lepaskan dua daripadanya di kawasan reka bentuk
2. Dalam Pemeriksa Objek, tetapkan nilai harta "Amplitud" komponen SineIntegerGenerator1 ke "96" (Gambar 2)
3. Dalam Pemeriksa Objek, tetapkan nilai harta "Offset" komponen SineIntegerGenerator1 ke "96" (Gambar 3)
4. Dalam Pemeriksa Objek, tetapkan nilai sifat "Kekerapan" komponen SineIntegerGenerator1 ke "0.2" (Gambar 4)

Langkah 9: Di Visuino: Konfigurasikan Generator Sinus Kedua, dan Sambungkan Penjana Sinus ke Pin Koordinat X dan Y Bitmap

1. Dalam Pemeriksa Objek, tetapkan nilai harta "Amplitud" komponen SineIntegerGenerator2 ke "120" (Gambar 1)
2. Dalam Pemeriksa Objek, tetapkan nilai harta "Offset" komponen SineIntegerGenerator2 ke "120" (Gambar 2)
3. Dalam Pemeriksa Objek, tetapkan nilai sifat "Kekerapan" komponen SineIntegerGenerator2 ke "0,03" (Gambar 3)
4. Sambungkan pin keluaran "Out" komponen SineIntegerGenerator1 ke pin input "X" pada elemen "Shields. TFT Sisplay. Elements. Draw Bitmap1" komponen Arduino (Gambar 4)
5. Sambungkan pin keluaran "Out" komponen SineIntegerGenerator2 ke pin input "Y" pada elemen "Shields. TFT Display. Elements. Draw Bitmap1" komponen Arduino (Gambar 5)

Langkah 10: Di Visuino: Tambah dan Sambungkan Komponen Mula dan Jam Multi Sumber

Untuk membuat bitmap setiap kali kedudukan X dan Y dikemas kini, kita perlu menghantar isyarat jam ke elemen "Draw Bitmap1". Untuk menghantar arahan setelah posisi diubah, kami memerlukan cara untuk menyegerakkan peristiwa. Untuk ini kita akan menggunakan komponen Ulangi untuk terus menghasilkan peristiwa, dan Jam Multi Sumber untuk menghasilkan 2 peristiwa secara berurutan. Acara pertama akan membuat penjana sinus untuk mengemas kini kedudukan X dan Y, dan yang kedua akan menandakan "Draw Bitmap1":

1. Ketik "ulangi" di kotak Penapis pada Kotak Alat Komponen, kemudian pilih komponen "Ulangi" (Gambar 1), dan lepaskan di kawasan reka bentuk (Gambar 2)
2. Ketik "multi" di kotak Penapis pada Kotak Alat Komponen, kemudian pilih komponen "Sumber Jam Banyak" (Gambar 2), dan lepaskan di kawasan reka bentuk (Gambar 3)
3. Sambungkan pin output "Out" komponen Repeat1 ke pin input "In" komponen ClockMultiSource1 (Gambar 3)
4. Sambungkan pin output "Pin [0]" pin "Out" dari komponen ClockMultiSource1 ke pin input "In" komponen SineIntegerGenerator1 (Gambar 4)
5. Sambungkan pin output "Pin [0]" pin "Out" dari komponen ClockMultiSource2 ke pin input "In" komponen SineIntegerGenerator1 (Gambar 5)
6. Sambungkan pin keluaran "Pin [1]" pin input "Jam" dari elemen "Shields. TFT Display. Elements. Draw Bitmap1" komponen Arduino (Gambar 6)

Langkah 11: Hasilkan, Susun, dan Muat Naik Kod Arduino

1. Di Visuino, Tekan F9 atau klik pada butang yang ditunjukkan pada Gambar 1 untuk menghasilkan kod Arduino, dan buka Arduino IDE
2. Di Arduino IDE, klik pada butang Upload, untuk menyusun dan memuat naik kod (Gambar 2)

Langkah 12: Dan Main …

Tahniah! Anda telah menyelesaikan projek ini.

Gambar 2, 3, 4 dan 5 dan Video menunjukkan projek yang dihubungkan dan dihidupkan. Anda akan melihat Bitmap bergerak di sekitar Perisai Paparan Skrin Sentuh TFT berasaskan ILI9341 seperti yang dilihat pada Video.

Pada Gambar 1 anda dapat melihat gambarajah Visuino yang lengkap. Juga dilampirkan adalah projek Visuino, yang saya buat untuk Instructable ini, dan peta bit dengan logo Visuino. Anda boleh memuat turun dan membukanya di Visuino: