Агуулгын хүснэгт:

Arduino Uno: Visuino -тай ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбай дээрх Bitmap Animation: 12 алхам (зурагтай)
Arduino Uno: Visuino -тай ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбай дээрх Bitmap Animation: 12 алхам (зурагтай)

Видео: Arduino Uno: Visuino -тай ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбай дээрх Bitmap Animation: 12 алхам (зурагтай)

Видео: Arduino Uno: Visuino -тай ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбай дээрх Bitmap Animation: 12 алхам (зурагтай)
Видео: Arduino TFT LCD Touch Screen Tutorial (2.8" ILI9341 Driver) also for ESP32 2024, Долдугаар сарын
Anonim
Image
Image

ILI9341 дээр суурилсан TFT мэдрэгчтэй дэлгэцийн бамбай нь Arduino -ийн хямд үнэтэй дэлгэцийн бамбай юм. Visuino нь тэднийг удаан хугацаанд дэмжиж байсан боловч тэдгээрийг хэрхэн ашиглах талаар заавар бичих боломж надад байгаагүй. Саяхан цөөхөн хүн Visuino -тай дэлгэц ашиглах талаар асуулт асуусан тул би хичээл хийхээр шийдлээ.

Энэхүү гарын авлагад би Shield -ийг Arduino -той холбож, Visuino -той програмчилж, Bitmap -ийг дэлгэц дээр шилжүүлэх нь хэр хялбар болохыг харуулах болно.

Алхам 1: бүрэлдэхүүн хэсгүүд

ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбайг Arduino руу холбоно уу
ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбайг Arduino руу холбоно уу
  1. Нэг Arduino Uno нийцтэй самбар (Энэ нь Mega -тэй ажиллах боломжтой, гэхдээ би бамбайгаа хараахан туршиж үзээгүй байна)
  2. Arduino -д зориулсан ILI9341 2.4 "TFT мэдрэгчтэй дэлгэцийн нэг бамбай

Алхам 2: ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбайг Arduino руу холбоно уу

ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбайг Arduino руу холбоно уу
ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбайг Arduino руу холбоно уу
ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбайг Arduino руу холбоно уу
ILI9341 TFT мэдрэгчтэй дэлгэцийн бамбайг Arduino руу холбоно уу

TFT бамбайг зурган дээрх шиг Arduino Uno дээр залгаарай

Алхам 3: Visuino -г эхлүүлж, TFT Display Shield нэмнэ үү

Visuino -г эхлүүлж, TFT Display Shield -ийг нэмнэ үү
Visuino -г эхлүүлж, TFT Display Shield -ийг нэмнэ үү
Visuino -г эхлүүлж, TFT Display Shield -ийг нэмнэ үү
Visuino -г эхлүүлж, TFT Display Shield -ийг нэмнэ үү

Arduino програмчлах ажлыг эхлүүлэхийн тулд та Arduino IDE -г эндээс суулгасан байх шаардлагатай:

1.6.7 эсвэл түүнээс дээш хувилбарыг суулгасан эсэхээ шалгаарай, эс тэгвээс энэ заавар ажиллахгүй болно

Visuino: https://www.visuino.com мөн суулгах шаардлагатай.

  1. Эхний зурагт үзүүлсэн шиг Visuino -г эхлүүлнэ үү
  2. Arduino бүрэлдэхүүн хэсгийн "Arrow Down" товчлуур дээр дарж унах цэсийг нээнэ үү (Зураг 1)
  3. Цэснээс "Бамбай нэмэх …" -г сонгоно уу (Зураг 1)
  4. "Shields" харилцах цонхонд "Displays" категорийг өргөжүүлж, "TFT өнгөт мэдрэгчтэй дэлгэц ILI9341 Shield" -ийг сонгоод "+" товчийг дарж нэмж оруулна уу (Зураг 2)

Алхам 4: Visuino дээр: Текстийн сүүдэрт зурах текст элементийг нэмнэ үү

Visuino дээр: Текстийн сүүдэрт зурах текст элементийг нэмнэ үү
Visuino дээр: Текстийн сүүдэрт зурах текст элементийг нэмнэ үү
Visuino -д: Текстийн сүүдэрт зурах текст элементийг нэмнэ үү
Visuino -д: Текстийн сүүдэрт зурах текст элементийг нэмнэ үү
Visuino дээр: Текстийн сүүдэрт зурах текст элементийг нэмнэ үү
Visuino дээр: Текстийн сүүдэрт зурах текст элементийг нэмнэ үү

Дараа нь бид текст болон битийн зургийг гаргахын тулд Графикийн элементүүдийг нэмэх хэрэгтэй. Эхлээд бид текстийн сүүдрийг зурахын тулд график элемент нэмнэ.

  1. Объектын байцаагч дээр "TFT Display" элементийн "Elements" шинж чанарын утгын хажууд байгаа "…" товчийг дарна уу (Зураг 1)
  2. Elements засварлагчаас "Текст зурах" -ыг сонгоод "+" товчлуур дээр дарна уу (Зураг 2) нэгийг нэмнэ үү (Зураг 3)
  3. Объектын байцаагч дээр "Текст зурах1" элементийн "Өнгө" шинж чанарын утгыг "aclSilver" болгож тохируулна уу (Зураг 3)
  4. Объектын байцаагч дээр "Текст зурах1" элементийн "Хэмжээ" шинж чанарын утгыг "4" болгож тохируулна уу (Зураг 4). Энэ нь текстийг илүү том болгож өгдөг
  5. Объектын байцаагч дээр "Текст зурах1" элементийн "Текст" шинж чанарын утгыг "Visuino" болгож тохируулна уу (Зураг 5)
  6. Объектын байцаагч дээр "Текст зурах1" элементийн "X" шинж чанарын утгыг "43" болгож тохируулна уу (Зураг 6)
  7. Объектын байцаагч дээр "Текст зурах1" элементийн "Y" шинж чанарын утгыг "278" болгож тохируулна уу (Зураг 6)

Алхам 5: Visuino дээр: Текстийн урд хэсэгт Draw Text элементийг нэмнэ үү

Visuino дээр: Текстийн урд хэсэгт Draw Text элементийг нэмнэ үү
Visuino дээр: Текстийн урд хэсэгт Draw Text элементийг нэмнэ үү
Visuino дээр: Текстийн урд хэсэгт Draw Text элементийг нэмнэ үү
Visuino дээр: Текстийн урд хэсэгт Draw Text элементийг нэмнэ үү
Visuino -д: Текстийн урд хэсэгт Draw Text элементийг нэмнэ үү
Visuino -д: Текстийн урд хэсэгт Draw Text элементийг нэмнэ үү
Visuino -д: Текстийн урд хэсэгт Draw Text элементийг нэмнэ үү
Visuino -д: Текстийн урд хэсэгт Draw Text элементийг нэмнэ үү

Одоо бид текст зурахын тулд график элемент нэмж оруулах болно.

  1. Элемент засварлагчаас "Текст зурах" гэснийг сонгоод "+" товчлуур дээр дарна уу (Зураг 1), хоёрдугаарт нэмэх (Зураг 2)
  2. Объектын байцаагч дээр "Текст зурах1" элементийн "Хэмжээ" шинж чанарын утгыг "4" болгож тохируулна уу (Зураг 2)
  3. Объектын байцаагч дээр "Текст зурах1" элементийн "Текст" шинж чанарын утгыг "Visuino" болгож тохируулна уу (Зураг 3)
  4. Объектын байцаагч дээр "Текст зурах1" элементийн "X" шинж чанарын утгыг "40" болгож тохируулна уу (Зураг 4)
  5. Объектын байцаагч дээр "Текст зурах1" элементийн "Y" шинж чанарын утгыг "275" болгож тохируулна уу (Зураг 4)

Алхам 6: Visuino -д: Анимейшнд зурах Bitmap элементийг нэмнэ үү

Visuino -д: Анимэйшнд зориулж зургийн зургийн элементийг нэмнэ үү
Visuino -д: Анимэйшнд зориулж зургийн зургийн элементийг нэмнэ үү
Visuino -д: Анимэйшнд зориулж зургийн зургийн элементийг нэмнэ үү
Visuino -д: Анимэйшнд зориулж зургийн зургийн элементийг нэмнэ үү
Visuino дээр: Анимейшнд зориулж Bitmap Draw зургийн элементийг нэмнэ үү
Visuino дээр: Анимейшнд зориулж Bitmap Draw зургийн элементийг нэмнэ үү

Дараа нь бид bitmap зурахын тулд график элемент нэмнэ.

  1. Elements засварлагч дээр "Bitmap зурах" -ыг сонгоод "+" товчлуур дээр дарна уу (Зураг 1) (Зураг 2)
  2. Объектын байцаагч дээр "Bitmap1 зурах" элементийн "Bitmap" шинж чанарын утгын хажууд байгаа "…" товчийг дарж "Bitmap Editor" -г нээнэ үү (Зураг 3)
  3. "Bitmap Editor" дээр "Ачаалах …" товчлуур дээр дарна уу (Зураг 3) Файлыг нээх харилцах цонхыг нээнэ үү (Зураг 4)
  4. Файлыг нээх харилцах цонхонд зурах bitmap -ийг сонгоод "Нээх" товчийг дарна уу (Зураг 4). Хэрэв файл хэт том байвал Arduino санах ойд багтахгүй байж магадгүй юм. Хэрэв та эмхэтгэх явцад санах ойн алдаанаас гарвал илүү жижиг bitmap сонгох шаардлагатай болж магадгүй юм
  5. "Bitmap Editor" дээр "OK" дээр дарна уу. товчлуур (Зураг 5) харилцах цонхыг хаах

Алхам 7: Visuino дээр: Draw Bitmap элементийн X ба Y шинж чанаруудын зүүг нэмнэ үү

Visuino дээр: Draw Bitmap элементийн X ба Y шинж чанаруудын зүүг нэмнэ үү
Visuino дээр: Draw Bitmap элементийн X ба Y шинж чанаруудын зүүг нэмнэ үү
Visuino дээр: Draw Bitmap элементийн X ба Y шинж чанаруудын зүүг нэмнэ үү
Visuino дээр: Draw Bitmap элементийн X ба Y шинж чанаруудын зүүг нэмнэ үү
Visuino дээр: Draw Bitmap элементийн X ба Y шинж чанаруудын зүүг нэмнэ үү
Visuino дээр: Draw Bitmap элементийн X ба Y шинж чанаруудын зүүг нэмнэ үү
Visuino дээр: Draw Bitmap элементийн X ба Y шинж чанаруудын зүүг нэмнэ үү
Visuino дээр: Draw Bitmap элементийн X ба Y шинж чанаруудын зүүг нэмнэ үү

Bitmap -ийг хөдөлгөөнт болгохын тулд бид түүний X ба Y байрлалыг хянах хэрэгтэй. Үүний тулд бид X ба Y шинж чанаруудын тээглүүрийг нэмж оруулах болно.

  1. Объектын байцаагч дээр "Bitmap1 зурах" элементийн "X" шинж чанарын урд талын "Pin" товчийг дарна уу (Зураг 1), "Integer SinkPin" -ийг сонгоно уу (Зураг 2)
  2. Объектын байцаагч дээр "Bitmap1 зурах" элементийн "Y" шинж чанарын урд талын "Pin" товчийг дарна уу (Зураг 3), "Integer SinkPin" -ийг сонгоно уу (Зураг 4)

Алхам 8: Visuino -д: 2 бүхэл синус үүсгэгчийг нэмж, эхнийхийг тохируулна уу

Visuino дээр: 2 бүхэл синус үүсгэгчийг нэмж, эхнийхийг нь тохируулна уу
Visuino дээр: 2 бүхэл синус үүсгэгчийг нэмж, эхнийхийг нь тохируулна уу
Visuino дээр: 2 бүхэл синус үүсгэгчийг нэмж, эхнийхийг нь тохируулна уу
Visuino дээр: 2 бүхэл синус үүсгэгчийг нэмж, эхнийхийг нь тохируулна уу
Visuino дээр: 2 бүхэл синус үүсгэгчийг нэмж, эхнийхийг нь тохируулна уу
Visuino дээр: 2 бүхэл синус үүсгэгчийг нэмж, эхнийхийг нь тохируулна уу
Visuino дээр: 2 бүхэл синус үүсгэгчийг нэмж, эхнийхийг нь тохируулна уу
Visuino дээр: 2 бүхэл синус үүсгэгчийг нэмж, эхнийхийг нь тохируулна уу

Бид битийн зургийн хөдөлгөөнийг идэвхжүүлэхийн тулд 2 бүхэл синус генераторыг ашиглах болно.

  1. Бүрэлдэхүүн хэсгүүдийн хэрэгслийн хайрцгийн Шүүлтүүрийн хайрцагт "синус" гэж бичээд "Синус бүхэл тоо үүсгэгч" бүрэлдэхүүн хэсгийг сонгоно уу (Зураг 1), тэдгээрийн хоёрыг дизайны талбарт оруулна уу.
  2. Объектын байцаагч дээр SineIntegerGenerator1 бүрэлдэхүүн хэсгийн "Amplitude" шинж чанарын утгыг "96" болгож тохируулна уу (Зураг 2)
  3. Объектын байцаагч дээр SineIntegerGenerator1 бүрэлдэхүүн хэсгийн "Offset" шинж чанарын утгыг "96" болгож тохируулна уу (Зураг 3)
  4. Объектын байцаагч дээр SineIntegerGenerator1 бүрэлдэхүүн хэсгийн "Давтамж" шинж чанарын утгыг "0.2" болгож тохируулна уу (Зураг 4)

Алхам 9: Visuino -д: Хоёр дахь синус үүсгэгчийг тохируулж, синус генераторуудыг Bitmap -ийн X ба Y координатын зүүтэй холбоно уу

Visuino -д: Хоёр дахь синус үүсгэгчийг тохируулж, синус генераторуудыг Bitmap -ийн X ба Y координатын зүүтэй холбоно уу
Visuino -д: Хоёр дахь синус үүсгэгчийг тохируулж, синус генераторуудыг Bitmap -ийн X ба Y координатын зүүтэй холбоно уу
Visuino -д: Хоёр дахь синус үүсгэгчийг тохируулж, синус генераторуудыг Bitmap -ийн X ба Y координатын зүүтэй холбоно уу
Visuino -д: Хоёр дахь синус үүсгэгчийг тохируулж, синус генераторуудыг Bitmap -ийн X ба Y координатын зүүтэй холбоно уу
Visuino -д: Хоёр дахь синус генераторыг тохируулж, синус генераторуудыг Bitmap -ийн X ба Y координатын зүү рүү холбоно уу
Visuino -д: Хоёр дахь синус генераторыг тохируулж, синус генераторуудыг Bitmap -ийн X ба Y координатын зүү рүү холбоно уу
  1. Объектын байцаагч дээр SineIntegerGenerator2 бүрэлдэхүүн хэсгийн "Amplitude" шинж чанарын утгыг "120" болгож тохируулна уу (Зураг 1)
  2. Объектын байцаагч дээр SineIntegerGenerator2 бүрэлдэхүүн хэсгийн "Offset" шинж чанарын утгыг "120" болгож тохируулна уу (Зураг 2)
  3. Объектын байцаагч дээр SineIntegerGenerator2 бүрэлдэхүүн хэсгийн "Давтамж" шинж чанарын утгыг "0.03" болгож тохируулна уу (Зураг 3)
  4. SineIntegerGenerator1 бүрэлдэхүүн хэсгийн "Out" гаралтын зүүг Arduino бүрэлдэхүүн хэсгийн "Shields. TFT Sisplay. Elements. Draw Bitmap1" элементийн "X" оролтын зүүтэй холбоно уу (Зураг 4)
  5. SineIntegerGenerator2 бүрэлдэхүүн хэсгийн "Out" гаралтын зүүг Arduino бүрэлдэхүүн хэсгийн "Shields. TFT Display. Elements. Draw Bitmap1" элементийн "Y" оролтын зүүтэй холбоно уу (Зураг 5)

Алхам 10: Visuino -д: Олон эх үүсвэрийн бүрэлдэхүүн хэсгүүдийг нэмж, холбоно уу

Visuino -д: Эхлэл ба цагийн олон эх үүсвэрийн бүрэлдэхүүн хэсгүүдийг нэмж холбоно уу
Visuino -д: Эхлэл ба цагийн олон эх үүсвэрийн бүрэлдэхүүн хэсгүүдийг нэмж холбоно уу
Visuino -д: Эхлэл ба цагийн олон эх үүсвэрийн бүрэлдэхүүн хэсгүүдийг нэмж холбоно уу
Visuino -д: Эхлэл ба цагийн олон эх үүсвэрийн бүрэлдэхүүн хэсгүүдийг нэмж холбоно уу
Visuino -д: Эхлэл ба цагийн олон эх үүсвэрийн бүрэлдэхүүн хэсгүүдийг нэмж холбоно уу
Visuino -д: Эхлэл ба цагийн олон эх үүсвэрийн бүрэлдэхүүн хэсгүүдийг нэмж холбоно уу

X ба Y байрлалыг шинэчлэх бүрд битийн зургийг гаргахын тулд бид "Draw Bitmap1" элемент рүү цагийн дохио илгээх хэрэгтэй. Байрлал өөрчлөгдсөний дараа командыг илгээхийн тулд бид үйл явдлыг синхрончлох арга хэрэгтэй болно. Үүний тулд бид давталтын бүрэлдэхүүн хэсгүүдийг ашиглан үйл явдлуудыг байнга үүсгэж, олон эх сурвалжийг ашиглан 2 үйл явдлыг дараалан үүсгэх болно. Эхний арга хэмжээ нь синус генераторуудыг X ба Y байрлалыг шинэчлэх бөгөөд хоёр дахь нь "Bitmap1 зурах" цагийг харах болно.

  1. Бүрэлдэхүүн хэсгүүдийн хэрэгслийн хайрцгийн Шүүлтүүрийн хайрцагт "давтах" гэж бичээд "Дахин давтах" хэсгийг сонгоно уу (Зураг 1), дизайны талбарт оруулна уу (Зураг 2)
  2. Бүрэлдэхүүн хэсгүүдийн хэрэгслийн хайрцгийн Шүүлтүүрийн хайрцагт "олон" гэж бичээд "Цагны олон эх үүсвэр" бүрэлдэхүүн хэсгийг сонгоно уу (Зураг 2), дизайны талбарт оруулна уу (Зураг 3)
  3. Repeat1 бүрэлдэхүүн хэсгийн "Out" гаралтын зүүг ClockMultiSource1 бүрэлдэхүүн хэсгийн "In" оролтын зүүтэй холбоно уу (Зураг 3)
  4. ClockMultiSource1 бүрэлдэхүүн хэсгийн "Out" тээглүүрийн "Pin [0]" гаралтын зүүг SineIntegerGenerator1 бүрэлдэхүүн хэсгийн "In" оролтын зүү рүү холбоно уу (Зураг 4)
  5. ClockMultiSource2component -ийн "Out" тээглүүрийн "Pin [0]" гаралтын зүүг SineIntegerGenerator1 бүрэлдэхүүн хэсгийн "In" оролтын зүү рүү холбоно уу (Зураг 5)
  6. Arduino бүрэлдэхүүн хэсгийн "Shields. TFT Display. Elements. Draw Bitmap1" элементийн "Цаг" оролтын зүү "Pin [1]" гаралтын зүүг холбоно уу (Зураг 6)

Алхам 11: Arduino кодыг үүсгэх, хөрвүүлэх, байршуулах

Arduino кодыг үүсгэх, хөрвүүлэх, байршуулах
Arduino кодыг үүсгэх, хөрвүүлэх, байршуулах
Arduino кодыг үүсгэх, хөрвүүлэх, байршуулах
Arduino кодыг үүсгэх, хөрвүүлэх, байршуулах
  1. Visuino дээр F9 товчийг дарна уу эсвэл 1 -р зурагт үзүүлсэн товчлуур дээр дарж Arduino кодыг үүсгээд Arduino IDE -ийг нээнэ үү.
  2. Arduino IDE дээр Upload товчийг дарж кодыг эмхэтгэн байршуулна уу (Зураг 2)

Алхам 12: Тэгээд тогло …

Image
Image
Тэгээд тогло …
Тэгээд тогло …
Тэгээд тогло …
Тэгээд тогло …

Баяр хүргэе! Та төслийг дуусгасан.

2, 3, 4, 5 -р зураг болон Видео нь холбогдсон, асаалттай төслийг харуулж байна. Та Bitmap -ийг ILI9341 дээр суурилсан TFT мэдрэгчтэй дэлгэцийн бамбай дээр тойрон хөдөлж байгааг харах болно.

Зураг 1 -ээс Visuino диаграмыг бүрэн харж болно. Мөн энэ зааварт зориулж бүтээсэн Visuino төсөл болон Visuino логотой битийн зургийг хавсаргав. Та үүнийг Visuino дээрээс татаж аваад нээж болно:

Зөвлөмж болгож буй: