Mundarija:

Arduino Uno: ILI9341 TFT sensorli displey ekranidagi Bitmap animatsiyasi Visuino bilan: 12 qadam (rasmlar bilan)
Arduino Uno: ILI9341 TFT sensorli displey ekranidagi Bitmap animatsiyasi Visuino bilan: 12 qadam (rasmlar bilan)

Video: Arduino Uno: ILI9341 TFT sensorli displey ekranidagi Bitmap animatsiyasi Visuino bilan: 12 qadam (rasmlar bilan)

Video: Arduino Uno: ILI9341 TFT sensorli displey ekranidagi Bitmap animatsiyasi Visuino bilan: 12 qadam (rasmlar bilan)
Video: Connect an SPI TFT with Touchscreen to your Arduino - ILI9341 LCD with XPT2046 Touch screen 2024, Noyabr
Anonim
Image
Image

ILI9341 -ga asoslangan TFT sensorli ekranli qalqonlar Arduino uchun juda mashhur arzon ekranli ekranlardir. Visuino ularni uzoq vaqtdan beri qo'llab -quvvatlab keladi, lekin men ulardan qanday foydalanish bo'yicha qo'llanma yozishga hech qachon imkoniyat topmaganman. Yaqinda Visuino -da displeylardan foydalanish haqida kam odam savol berdi, shuning uchun men darslik qilishga qaror qildim.

Ushbu qo'llanmada men sizga qalqonni Arduino -ga ulash va uni Visuino -da dasturlash orqali Bitmap -ni ekran bo'ylab harakatlanishini ko'rsatish qanchalik oson ekanligini ko'rsataman.

1 -qadam: komponentlar

ILI9341 TFT sensorli ekran qalqonini Arduino -ga ulang
ILI9341 TFT sensorli ekran qalqonini Arduino -ga ulang
  1. Bitta Arduino Uno mos keladigan taxtasi (Bu Mega bilan ham ishlashi mumkin, lekin men u bilan qalqonni hali sinab ko'rmaganman)
  2. Arduino uchun bitta ILI9341 2.4 dyuymli TFT sensorli ekran

2 -qadam: ILI9341 TFT sensorli ekran qalqonini Arduino -ga ulang

ILI9341 TFT sensorli ekran qalqonini Arduino -ga ulang
ILI9341 TFT sensorli ekran qalqonini Arduino -ga ulang
ILI9341 TFT sensorli ekran qalqonini Arduino -ga ulang
ILI9341 TFT sensorli ekran qalqonini Arduino -ga ulang

TFT qalqonini rasmlarda ko'rsatilgandek Arduino Uno tepasiga ulang

3 -qadam: Visuino -ni ishga tushiring va TFT ekran qalqoni qo'shing

Visuino -ni ishga tushiring va TFT ekran qalqoni qo'shing
Visuino -ni ishga tushiring va TFT ekran qalqoni qo'shing
Visuino -ni ishga tushiring va TFT ekran qalqoni qo'shing
Visuino -ni ishga tushiring va TFT ekran qalqoni qo'shing

Arduino dasturlashni boshlash uchun siz bu erdan Arduino IDE -ni o'rnatishingiz kerak bo'ladi:

1.6.7 yoki undan yuqori versiyasini o'rnatganingizga ishonch hosil qiling, aks holda bu ko'rsatma ishlamaydi

Visuino: https://www.visuino.com ham o'rnatilishi kerak.

  1. Visuinoni birinchi rasmda ko'rsatilgandek ishga tushiring
  2. Ochiladigan menyuni ochish uchun Arduino komponentining "Ok pastga" tugmasini bosing (1 -rasm).
  3. Menyudan "Qalqonlarni qo'shish …" -ni tanlang (1 -rasm).
  4. "Qalqonlar" muloqot oynasida "Ko'rgazmalar" turkumini kengaytiring va "ILI9341 qalqoni TFT rangli sensorli displeyi" ni tanlang, so'ng uni qo'shish uchun "+" tugmasini bosing (2 -rasm).

4 -qadam: Visuino -da: Matn soyasi uchun Draw Text elementini qo'shing

Visuino -da: Matn soyasi uchun Draw Text elementini qo'shing
Visuino -da: Matn soyasi uchun Draw Text elementini qo'shing
Visuino -da: Matn soyasi uchun Draw Text elementini qo'shing
Visuino -da: Matn soyasi uchun Draw Text elementini qo'shing
Visuino -da: Matn soyasi uchun Draw Text elementini qo'shing
Visuino -da: Matn soyasi uchun Draw Text elementini qo'shing

Keyin biz matn va bitmapni ko'rsatish uchun Grafika elementlarini qo'shishimiz kerak. Avval biz matnning soyasini chizish uchun grafik elementni qo'shamiz:

  1. Ob'ekt inspektorida "TFT displeyi" elementining "Elements" xususiyatining yonidagi "…" tugmasini bosing (1 -rasm).
  2. Elements muharririda "Matn chizish" -ni tanlang va "+" tugmachasini bosing (2 -rasm) (3 -rasm).
  3. Ob'ekt inspektorida "Matnni chizish1" elementining "Rang" xususiyatining qiymatini "aclSilver" ga o'rnating (3 -rasm).
  4. Ob'ekt inspektorida "Matnni chizish1" elementining "Hajmi" xususiyatining qiymatini "4" ga qo'ying (4 -rasm). Bu matnni kattalashtiradi
  5. Ob'ekt inspektorida "Matnni chizish1" elementining "Matn" xususiyatining qiymatini "Visuino" ga o'rnating (5 -rasm)
  6. Ob'ekt inspektorida "Matnni chizish1" elementining "X" xususiyatining qiymatini "43" ga qo'ying (6 -rasm).
  7. Ob'ekt inspektorida "Matnni chizish1" elementining "Y" xususiyatining qiymatini "278" ga qo'ying (6 -rasm).

5 -qadam: Visuino -da: Oldingi matn uchun Draw Text elementini qo'shing

Visuino -da: Oldingi matn uchun Draw Text elementini qo'shing
Visuino -da: Oldingi matn uchun Draw Text elementini qo'shing
Visuino -da: Oldingi matn uchun Draw Text elementini qo'shing
Visuino -da: Oldingi matn uchun Draw Text elementini qo'shing
Visuino -da: Oldingi matn uchun Draw Text elementini qo'shing
Visuino -da: Oldingi matn uchun Draw Text elementini qo'shing
Visuino -da: Oldingi matn uchun Draw Text elementini qo'shing
Visuino -da: Oldingi matn uchun Draw Text elementini qo'shing

Endi biz matnni chizish uchun grafik elementni qo'shamiz:

  1. Elements muharririda "Matnni chizish" -ni tanlang va ikkinchisini qo'shish uchun "+" tugmasini bosing (1 -rasm) (2 -rasm)
  2. Ob'ekt inspektorida "Matnni chizish1" elementining "Hajmi" xususiyatining qiymatini "4" ga qo'ying (2 -rasm).
  3. Ob'ekt inspektorida "Matnni chizish1" elementining "Matn" xususiyatining qiymatini "Visuino" ga o'rnating (3 -rasm).
  4. Ob'ekt inspektorida "Matnni chizish1" elementining "X" xususiyatining qiymatini "40" ga qo'ying (4 -rasm).
  5. Ob'ekt inspektorida "Matnni chizish1" elementining "Y" xususiyatining qiymatini "275" ga qo'ying (4 -rasm).

6 -qadam: Visuino -da: Animatsiya uchun chizilgan bitmap elementini qo'shing

Visuino -da: Animatsiya uchun chizilgan bitmap elementini qo'shing
Visuino -da: Animatsiya uchun chizilgan bitmap elementini qo'shing
Visuino -da: Animatsiya uchun chizilgan bitmap elementini qo'shing
Visuino -da: Animatsiya uchun chizilgan bitmap elementini qo'shing
Visuino -da: Animatsiya uchun chizilgan bitmap elementini qo'shing
Visuino -da: Animatsiya uchun chizilgan bitmap elementini qo'shing

Keyin biz bitmapni chizish uchun grafik elementni qo'shamiz:

  1. Elements muharririda "Bitmapni chizish" -ni tanlang va "+" tugmasini bosing (1 -rasm), birini qo'shish uchun (2 -rasm).
  2. Ob'ekt inspektorida "Bitmap muharriri" ni ochish uchun "Draw Bitmap1" elementining "Bitmap" xususiyatining qiymati yonidagi "…" tugmasini bosing (3 -rasm).
  3. "Bitmap muharriri" da "Yuklash …" tugmasini bosing (3 -rasm), faylni ochish muloqot oynasini oching (4 -rasm).
  4. Faylni ochish muloqot oynasida chizish uchun bitmapni tanlang va "Ochish" tugmasini bosing (4 -rasm). Agar fayl juda katta bo'lsa, u Arduino xotirasiga sig'masligi mumkin. Agar siz kompilyatsiya paytida xotira xatosidan qutulsangiz, kichikroq bitmapni tanlashingiz kerak bo'ladi
  5. "Bitmap muharriri" da "OK" ni bosing. muloqot oynasini yopish uchun tugma (5 -rasm)

7 -qadam: Visuino -da: chizilgan bitmap elementining X va Y xususiyatlariga pin qo'shing

Visuino -da: Chizma bitmap elementining X va Y xususiyatlari uchun pin qo'shing
Visuino -da: Chizma bitmap elementining X va Y xususiyatlari uchun pin qo'shing
Visuino -da: Bitmap chizish elementining X va Y xususiyatlari uchun pin qo'shing
Visuino -da: Bitmap chizish elementining X va Y xususiyatlari uchun pin qo'shing
Visuino -da: Bitmap chizish elementining X va Y xususiyatlari uchun pin qo'shing
Visuino -da: Bitmap chizish elementining X va Y xususiyatlari uchun pin qo'shing
Visuino -da: Bitmap chizish elementining X va Y xususiyatlari uchun pin qo'shing
Visuino -da: Bitmap chizish elementining X va Y xususiyatlari uchun pin qo'shing

Bitmapni jonlantirish uchun biz uning X va Y pozitsiyasini nazorat qilishimiz kerak. Buning uchun biz X va Y xususiyatlari uchun pinlarni qo'shamiz:

  1. Ob'ekt inspektorida "Bitmap1 chizish" elementining "X" xossasi oldidagi "Pin" tugmasini bosing (1 -rasm) va "Integer SinkPin" -ni tanlang (2 -rasm).
  2. Ob'ekt inspektorida "Bitmap1 chizish" elementining "Y" xususiyati oldidagi "Pin" tugmasini bosing (3 -rasm) va "Integer SinkPin" -ni tanlang (4 -rasm).

8 -qadam: Visuino -da: 2 ta butun sinusli generatorlarni qo'shing va birinchisini sozlang

Visuino -da: 2 ta butun sinusli generatorlarni qo'shing va birinchisini sozlang
Visuino -da: 2 ta butun sinusli generatorlarni qo'shing va birinchisini sozlang
Visuino -da: 2 ta butun sinusli generatorlarni qo'shing va birinchisini sozlang
Visuino -da: 2 ta butun sinusli generatorlarni qo'shing va birinchisini sozlang
Visuino -da: 2 ta butun sinusli generatorlarni qo'shing va birinchisini sozlang
Visuino -da: 2 ta butun sinusli generatorlarni qo'shing va birinchisini sozlang
Visuino -da: 2 ta butun sinusli generatorlarni qo'shing va birinchisini sozlang
Visuino -da: 2 ta butun sinusli generatorlarni qo'shing va birinchisini sozlang

Bitmap harakatini jonlantirish uchun biz 2 ta Integer sinus generatoridan foydalanamiz:

  1. Komponentlar asboblar qutisining Filtr qutisiga "sinus" yozing, so'ngra "Sinusli butun generator" komponentini tanlang (1 -rasm) va ulardan ikkitasini dizayn maydoniga qo'ying.
  2. Ob'ekt inspektorida SineIntegerGenerator1 komponentining "Amplitude" xususiyatining qiymatini "96" ga o'rnating (2 -rasm).
  3. Ob'ekt inspektorida SineIntegerGenerator1 komponentining "Ofset" xususiyatining qiymatini "96" ga o'rnating (3 -rasm).
  4. Ob'ekt inspektorida SineIntegerGenerator1 komponentining "Chastotasi" xususiyatining qiymatini "0,2" ga o'rnating (4 -rasm).

9 -qadam: Visuino -da: Ikkinchi sinus generatorini sozlang va sinus generatorlarini Bitmapning X va Y koordinata pinlariga ulang

Visuino -da: Ikkinchi sinus generatorini sozlang va sinus generatorlarini Bitmapning X va Y koordinatali pinlariga ulang
Visuino -da: Ikkinchi sinus generatorini sozlang va sinus generatorlarini Bitmapning X va Y koordinatali pinlariga ulang
Visuino -da: Ikkinchi sinus generatorini sozlang va sinus generatorlarini Bitmapning X va Y koordinatali pinlariga ulang
Visuino -da: Ikkinchi sinus generatorini sozlang va sinus generatorlarini Bitmapning X va Y koordinatali pinlariga ulang
Visuino -da: Ikkinchi sinus generatorini sozlang va sinus generatorlarini Bitmapning X va Y koordinatali pinlariga ulang
Visuino -da: Ikkinchi sinus generatorini sozlang va sinus generatorlarini Bitmapning X va Y koordinatali pinlariga ulang
  1. Ob'ekt inspektorida SineIntegerGenerator2 komponentining "Amplitude" xususiyatining qiymatini "120" ga o'rnating (1 -rasm).
  2. Ob'ekt inspektorida SineIntegerGenerator2 komponentining "Ofset" xususiyatining qiymatini "120" ga o'rnating (2 -rasm).
  3. Ob'ekt inspektorida SineIntegerGenerator2 komponentining "Chastotasi" xususiyatining qiymatini "0,03" ga o'rnating (3 -rasm).
  4. SineIntegerGenerator1 komponentining "Chiqish" chiqish pinini Arduino komponentining "Shields. TFT Sisplay. Elements. Draw Bitmap1" elementining "X" kirish piniga ulang (4 -rasm)
  5. SineIntegerGenerator2 komponentining "Chiqish" chiqish pinini Arduino komponentining "Shields. TFT Display. Elements. Draw Bitmap1" elementining "Y" kirish piniga ulang (5 -rasm)

10 -qadam: Visuino -da: Ko'p manbali komponentlarni qo'shish va ulash

Visuino -da: Ko'p manbali komponentlarni qo'shish va ulash
Visuino -da: Ko'p manbali komponentlarni qo'shish va ulash
Visuino -da: Ko'p manbali komponentlarni qo'shish va ulash
Visuino -da: Ko'p manbali komponentlarni qo'shish va ulash
Visuino -da: Ko'p manbali komponentlarni qo'shish va ulash
Visuino -da: Ko'p manbali komponentlarni qo'shish va ulash

Har safar X va Y pozitsiyasi yangilanganida bitmapni ko'rsatish uchun biz "Bitmap1 chizish" elementiga soat signalini yuborishimiz kerak. Pozitsiyalar o'zgartirilgandan keyin buyruq yuborish uchun biz voqealarni sinxronlashtirishga muhtojmiz. Buning uchun biz voqealarni doimiy ravishda takrorlash uchun Takrorlash komponentidan foydalanamiz va 2 voqeani ketma -ket yaratish uchun "Ko'p manbali soat". Birinchi tadbirda sinus generatorlari X va Y pozitsiyalarini yangilaydi, ikkinchisi esa "Bitmap1 chizish" soatini ko'rsatadi:

  1. Komponentlar asboblar qutisining Filtr maydoniga "takrorlash" ni kiriting, so'ngra "Takrorlash" komponentini tanlang (1 -rasm) va uni dizayn maydoniga qo'ying (2 -rasm).
  2. Komponentlar asboblar qutisining Filtr qutisiga "multi" ni kiriting, so'ngra "Ko'p manbali soat" komponentini tanlang (2 -rasm) va uni dizayn maydoniga qo'ying (3 -rasm).
  3. Repeat1 komponentining "chiqish" chiqish pinini ClockMultiSource1 komponentining "kirish" piniga ulang (3 -rasm).
  4. ClockMultiSource1 komponentining "Chiqish" pinlarining "Pin [0]" chiqish pinini SineIntegerGenerator1 komponentining "In" kirish piniga ulang (4 -rasm)
  5. ClockMultiSource2componentining "Chiqish" pinlarining "Pin [0]" chiqish pinini SineIntegerGenerator1 komponentining "In" kirish piniga ulang (5 -rasm)
  6. Arduino komponentining "Shields. TFT Display. Elements. Draw Bitmap1" elementining "Soat" kirish pinining "Pin [1]" chiqish pinini ulang (6 -rasm)

11 -qadam: Arduino kodini yaratish, kompilyatsiya qilish va yuklash

Arduino kodini yaratish, kompilyatsiya qilish va yuklash
Arduino kodini yaratish, kompilyatsiya qilish va yuklash
Arduino kodini yaratish, kompilyatsiya qilish va yuklash
Arduino kodini yaratish, kompilyatsiya qilish va yuklash
  1. Visuino -da F9 tugmasini bosing yoki Arduino kodini yaratish uchun 1 -rasmda ko'rsatilgan tugmani bosing va Arduino IDE -ni oching.
  2. Arduino IDE -da kodni kompilyatsiya qilish va yuklash uchun Yuklab olish tugmasini bosing (2 -rasm).

12 -qadam: Va o'ynang …

Image
Image
Va o'ynang …
Va o'ynang …
Va o'ynang …
Va o'ynang …

Tabriklaymiz! Siz loyihani yakunladingiz.

2, 3, 4 va 5 -rasmlar va Video ulangan va quvvatlangan loyihani ko'rsatadi. Siz Bitmapni ILI9341 asosidagi TFT sensorli ekranli qalqoni atrofida aylanayotganini ko'rasiz.

1 -rasmda siz Visuino -ning to'liq diagrammasini ko'rishingiz mumkin, shuningdek, men Visuino -ning ushbu ko'rsatma uchun yaratgan loyihasi va Visuino logotipi bilan bitmapni biriktiramiz. Siz uni Visuino -da yuklab olishingiz va ochishingiz mumkin:

Tavsiya: