Arduino Uno: Bitmap Animation sa ILI9341 TFT Touchscreen Display Shield With Visuino: 12 Hakbang (na may Mga Larawan)

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:15

Ang nakabase sa ILI9341 na TFT Touchscreen Display Shields ay napakapopular sa mga Display Shield na may mababang gastos para sa Arduino. Ang Visuino ay mayroong suporta para sa kanila sa loob ng mahabang panahon, ngunit hindi ako nagkaroon ng pagkakataong magsulat ng isang Tutorial sa kung paano gamitin ang mga ito. Kamakailan lamang maraming mga tao ang nagtanong tungkol sa paggamit ng mga display sa Visuino, kaya't nagpasya akong gumawa ng isang tutorial.

Sa Tutorial na ito, ipapakita ko sa iyo kung gaano kadali ito, upang ikonekta ang Shield sa Arduino, at i-program ito sa Visuino upang buhayin ang isang Bitmap upang gumalaw sa Display.

Hakbang 1: Mga Bahagi

1. Isang katugmang board ng Arduino Uno (Maaari itong gumana sa Mega din, ngunit hindi ko pa nasubok ang kalasag kasama nito)
2. Isang ILI9341 2.4 "TFT Touchscreen Shield para sa Arduino

Hakbang 2: Ikonekta ang ILI9341 TFT Touchscreen Display Shield sa Arduino

I-plug ang TFT Shield sa tuktok ng Arduino Uno tulad ng ipinakita sa mga larawan

Hakbang 3: Simulan ang Visuino at Magdagdag ng TFT Display Shield

Upang simulang i-program ang Arduino, kakailanganin mong magkaroon ng naka-install na Arduino IDE mula dito:

Tiyaking nag-install ka ng 1.6.7 o mas mataas, kung hindi man ay hindi gagana ang Instructable na ito

Ang Visuino: https://www.visuino.com kailangan ding mai-install.

1. Simulan ang Visuino tulad ng ipinakita sa unang larawan
2. Mag-click sa pindutang "Arrow Down" ng bahagi ng Arduino upang buksan ang Drop Down Menu (Larawan 1)
3. Mula sa Menu piliin ang "Magdagdag ng Mga Shield …" (Larawan 1)
4. Sa dialog na "Shields" palawakin ang kategoryang "Ipinapakita", at piliin ang "TFT Color Touch Screen Display ILI9341 Shield", pagkatapos ay mag-click sa pindutang "+" upang idagdag ito (Larawan 2)

Hakbang 4: Sa Visuino: Magdagdag ng Elemento ng Draw Text para sa Text Shadow

Susunod na kailangan namin upang magdagdag ng mga elemento ng Graphics upang mag-render ng teksto at bitmap. Una ay magdagdag kami ng elemento ng graphics upang iguhit ang anino ng teksto:

1. Sa Object Inspector, mag-click sa pindutang "…" sa tabi ng halaga ng pag-aari ng "Mga Elemento" ng Elementong "TFT Display" (Larawan 1)
2. Sa editor ng Mga Elemento piliin ang "Gumuhit ng Teksto", at pagkatapos ay mag-click sa pindutang "+" (Larawan 2) upang magdagdag ng isa (Larawan 3)
3. Sa Object Inspector itakda ang halaga ng "Kulay" na pag-aari ng "Draw Text1" na elemento sa "aclSilver" (Larawan 3)
4. Sa Object Inspector itakda ang halaga ng "Laki" na pag-aari ng "Draw Text1" na elemento sa "4" (Larawan 4). Pinapalaki nito ang teksto
5. Sa Object Inspector itakda ang halaga ng "Text" na pag-aari ng "Draw Text1" na elemento sa "Visuino" (Larawan 5)
6. Sa Object Inspector itakda ang halaga ng "X" na pag-aari ng "Draw Text1" na elemento sa "43" (Larawan 6)
7. Sa Object Inspector itakda ang halaga ng "Y" na pag-aari ng "Draw Text1" na elemento sa "278" (Larawan 6)

Hakbang 5: Sa Visuino: Magdagdag ng Elemento ng Draw Text para sa Tekstong Walang Hanggan

Ngayon ay magdagdag kami ng elemento ng graphics upang iguhit ang teksto:

1. Sa editor ng Mga Elemento piliin ang "Gumuhit ng Teksto", at pagkatapos ay mag-click sa pindutang "+" (Larawan 1) upang magdagdag ng pangalawa (Larawan 2)
2. Sa Object Inspector itakda ang halaga ng "Laki" na pag-aari ng "Draw Text1" na elemento sa "4" (Larawan 2)
3. Sa Object Inspector itakda ang halaga ng "Text" na pag-aari ng "Draw Text1" na elemento sa "Visuino" (Larawan 3)
4. Sa Object Inspector itakda ang halaga ng "X" na pag-aari ng "Draw Text1" na elemento sa "40" (Larawan 4)
5. Sa Object Inspector itakda ang halaga ng "Y" na pag-aari ng "Draw Text1" na elemento sa "275" (Larawan 4)

Hakbang 6: Sa Visuino: Magdagdag ng Elemento ng Draw ng Bitmap para sa Animation

Susunod na idaragdag namin ang elemento ng graphics upang iguhit ang bitmap:

1. Sa editor ng Mga Elemento piliin ang "Draw Bitmap", at pagkatapos ay mag-click sa pindutang "+" (Larawan 1) upang magdagdag ng isa (Larawan 2)
2. Sa Object Inspector, mag-click sa pindutang "…" sa tabi ng halaga ng "Bitmap" na pag-aari ng "Draw Bitmap1" Element (Larawan 2) upang buksan ang "Bitmap Editor" (Larawan 3)
3. Sa "Bitmap Editor" mag-click sa pindutang "Load…" (Larawan 3) upang buksan ang File Open Dialog (Larawan 4)
4. Sa File Open Dialog, piliin ang bitmap upang iguhit, at mag-click sa pindutang "Buksan" (Larawan 4). Kung ang file ay masyadong malaki maaaring hindi ito magkasya sa memorya ng Arduino. Kung makalabas ka sa error sa memorya habang pinagsama-sama, maaaring kailanganin mong pumili ng isang mas maliit na bitmap
5. Sa "Bitmap Editor" mag-click sa "OK." pindutan (Larawan 5) upang isara ang dayalogo

Hakbang 7: Sa Visuino: Magdagdag ng Mga Pin para sa X at Y Mga Katangian ng Draw na Bitmap Element

Upang buhayin ang Bitmap, kailangan naming makontrol ang posisyon na X at Y. Para sa mga ito ay magdagdag kami ng mga pin para sa mga katangian ng X at Y:

1. Sa Object Inspector mag-click sa pindutang "Pin" sa harap ng "X" na pag-aari ng "Draw Bitmap1" na elemento (Larawan 1), at piliin ang "Integer SinkPin" (Larawan 2)
2. Sa Object Inspector mag-click sa pindutang "Pin" sa harap ng "Y" na pag-aari ng "Draw Bitmap1" na elemento (Larawan 3), at piliin ang "Integer SinkPin" (Larawan 4)

Hakbang 8: Sa Visuino: Magdagdag ng 2 Integer Sine Generators, at I-configure ang Una

Gagamitin namin ang 2 mga generator ng Integer sine upang buhayin ang paggalaw ng bitmap:

1. I-type ang "sine" sa Filter box ng Component Toolbox pagkatapos ay piliin ang sangkap na "Sine Integer Generator" (Larawan 1), at i-drop ang dalawa sa mga ito sa lugar ng disenyo
2. Sa Object Inspector, itakda ang halaga ng "Amplitude" na pag-aari ng sangkap na SineIntegerGenerator1 sa "96" (Larawan 2)
3. Sa Object Inspector, itakda ang halaga ng "Offset" na pag-aari ng sangkap na SineIntegerGenerator1 sa "96" (Larawan 3)
4. Sa Object Inspector, itakda ang halaga ng "Frequency" na pag-aari ng sangkap na SineIntegerGenerator1 sa "0.2" (Larawan 4)

Hakbang 9: Sa Visuino: I-configure ang Pangalawang Sine Generator, at ikonekta ang Mga Sine Generator sa X at Y Coordinate Pins ng Bitmap

1. Sa Object Inspector, itakda ang halaga ng "Amplitude" na pag-aari ng sangkap na SineIntegerGenerator2 sa "120" (Larawan 1)
2. Sa Object Inspector, itakda ang halaga ng "Offset" na pag-aari ng sangkap na SineIntegerGenerator2 sa "120" (Larawan 2)
3. Sa Object Inspector, itakda ang halaga ng "Frequency" na pag-aari ng sangkap na SineIntegerGenerator2 sa "0.03" (Larawan 3)
4. Ikonekta ang "Out" na output pin ng bahagi ng SineIntegerGenerator1 sa "X" input pin ng "Shields. TFT Sisplay. Elemen. Gumuhit ng Bitmap1" na elemento ng sangkap ng Arduino (Larawan 4)
5. Ikonekta ang "Out" na output pin ng bahagi ng SineIntegerGenerator2 sa input na "Y" ng "Shields. TFT Display. E Element. Gumuhit ng Bitmap1" na elemento ng sangkap ng Arduino (Larawan 5)

Hakbang 10: Sa Visuino: Magdagdag at Ikonekta ang Start at Clock Multi Source Components

Upang mai-render ang bitmap sa tuwing nai-update ang posisyon ng X at Y kailangan naming magpadala ng signal ng orasan sa elemento na "Iguhit ang Bitmap1". Upang maipadala ang utos matapos mabago ang mga posisyon, kailangan namin ng isang paraan upang mai-synchronize ang mga kaganapan. Para dito gagamitin namin ang Ulitin ang sangkap upang patuloy na makabuo ng mga kaganapan, at Clock Multi Source upang makabuo ng 2 mga kaganapan nang magkakasunod. Susubukan ng unang kaganapan ang mga generator ng sine upang mai-update ang mga posisyon na X at Y, at ang pangalawa ay magpapasulat sa "Iguhit ang Bitmap1":

1. I-type ang "ulitin" sa Filter box ng Component Toolbox, pagkatapos ay piliin ang sangkap na "Ulitin" (Larawan 1), at i-drop ito sa lugar ng disenyo (Larawan 2)
2. I-type ang "multi" sa Filter box ng Component Toolbox, pagkatapos ay piliin ang sangkap na "Clock Multi Source" (Larawan 2), at i-drop ito sa lugar ng disenyo (Larawan 3)
3. Ikonekta ang "Out" na output pin ng bahagi ng Repeat1 sa input na "In" na input ng bahagi ng ClockMultiSource1 (Larawan 3)
4. Ikonekta ang "Pin [0]" output pin ng "Out" na mga pin ng ClockMultiSource1component sa "In" input pin ng bahagi ng SineIntegerGenerator1 (Larawan 4)
5. Ikonekta ang "Pin [0]" output pin ng "Out" na mga pin ng ClockMultiSource2component sa "In" input pin ng bahagi ng SineIntegerGenerator1 (Larawan 5)
6. Ikonekta ang "Pin [1]" output pin ng "Clock" input pin ng "Shields. TFT Display. Elemen. Gumuhit ng Bitmap1" na elemento ng sangkap ng Arduino (Larawan 6)

Hakbang 11: Bumuo, Mag-compile, at Mag-upload ng Arduino Code

1. Sa Visuino, Pindutin ang F9 o mag-click sa pindutang ipinakita sa Larawan 1 upang makabuo ng Arduino code, at buksan ang Arduino IDE
2. Sa Arduino IDE, mag-click sa pindutang Mag-upload, upang makatipon at mai-upload ang code (Larawan 2)

Hakbang 12: At Maglaro…

Binabati kita! Nakumpleto mo na ang proyekto.

Ang mga larawan 2, 3, 4 at 5 at ang Video ay nagpapakita ng nakakonekta at pinalakas na proyekto. Makikita mo ang Bitmap na gumagalaw sa paligid ng ILI9341 batay sa TFT Touchscreen Display Shield tulad ng nakikita sa Video.

Sa Larawan 1 makikita mo ang kumpletong diagram ng Visuino. Nakalakip din ang proyekto ng Visuino, na nilikha ko para sa Instructable na ito, at ang bitmap na may logo ng Visuino. Maaari mong i-download at buksan ito sa Visuino: