Arduino Uno: Bitmapová animácia na dotykovom displeji TFI ILI9341 TFT s Visuino: 12 krokov (s obrázkami)

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 12:00

Štítky TFT s dotykovým displejom založené na ILI9341 sú veľmi obľúbené lacné zobrazovacie štíty pre Arduino. Visuino má pre nich podporu už nejaký čas, ale nikdy som nemal možnosť napísať návod, ako ich používať. Nedávno si však málo ľudí kládlo otázky o používaní displejov s Visuinom, a tak som sa rozhodol urobiť návod.

V tomto návode vám ukážem, aké jednoduché je pripojiť štít k Arduinu a naprogramovať ho pomocou programu Visuino na animáciu bitmapy na pohyb po displeji.

Krok 1: Komponenty

1. Jedna doska kompatibilná s Arduino Uno (môže fungovať aj s Mega, ale štít som s ním ešte netestoval)
2. Jeden 2,4 -palcový dotykový štít TFT ILI9341 pre Arduino

Krok 2: Pripojte dotykový displejový štít ILI9341 TFT k Arduinu

Pripojte štít TFT k vrchu Arduino Uno, ako je znázornené na obrázkoch

Krok 3: Spustite Visuino a pridajte štít displeja TFT

Ak chcete začať programovať Arduino, budete musieť mať nainštalované Arduino IDE tu:

Uistite sa, že inštalujete 1.6.7 alebo vyšší, inak tento návod nebude fungovať

Je tiež potrebné nainštalovať Visuino:

1. Spustite Visuino, ako je znázornené na prvom obrázku
2. Kliknutím na tlačidlo „Šípka nadol“na komponente Arduino otvoríte rozbaľovaciu ponuku (obrázok 1)
3. V ponuke vyberte „Pridať štíty …“(obrázok 1)
4. V dialógovom okne „Štíty“rozbaľte kategóriu „Displeje“a zvoľte „Štít TFT farebného dotykového displeja ILI9341 štít“, potom ho pridajte kliknutím na tlačidlo „+“(obrázok 2)

Krok 4: Vo Visuine: Pridajte prvok kresby textu pre tieň textu

Ďalej musíme pridať grafické prvky na vykreslenie textu a bitmapy. Najprv pridáme grafický prvok na nakreslenie tieňa textu:

1. V nástroji Object Inspector kliknite na tlačidlo „…“vedľa hodnoty vlastnosti „Prvky“prvku „TFT Display“(obrázok 1)
2. V editore prvkov zvoľte „Nakresliť text“a potom kliknutím na tlačidlo „+“(obrázok 2) jeden pridajte (obrázok 3)
3. V nástroji Object Inspector nastavte hodnotu vlastnosti „Color“prvku „Draw Text1“na „aclSilver“(obrázok 3)
4. V nástroji Object Inspector nastavte hodnotu vlastnosti „Veľkosť“prvku „Nakresliť text1“na „4“(obrázok 4). Vďaka tomu je text väčší
5. V nástroji Object Inspector nastavte hodnotu vlastnosti „Text“prvku „Draw Text1“na „Visuino“(obrázok 5)
6. V nástroji Object Inspector nastavte hodnotu vlastnosti „X“prvku „Draw Text1“na „43“(obrázok 6)
7. V nástroji Object Inspector nastavte hodnotu vlastnosti „Y“prvku „Draw Text1“na „278“(obrázok 6)

Krok 5: Vo Visuine: Pridajte prvok textu kresby do popredia textu

Teraz pridáme grafický prvok na kreslenie textu:

1. V editore prvkov zvoľte „Nakresliť text“a potom kliknutím na tlačidlo „+“(obrázok 1) pridáte druhé (obrázok 2)
2. V nástroji Object Inspector nastavte hodnotu vlastnosti „Size“prvku „Draw Text1“na „4“(obrázok 2)
3. V nástroji Object Inspector nastavte hodnotu vlastnosti „Text“prvku „Draw Text1“na „Visuino“(obrázok 3)
4. V nástroji Object Inspector nastavte hodnotu vlastnosti „X“prvku „Draw Text1“na „40“(obrázok 4)
5. V nástroji Object Inspector nastavte hodnotu vlastnosti „Y“prvku „Draw Text1“na „275“(obrázok 4)

Krok 6: Vo Visuine: Pridajte prvok Kresliť bitmapu do animácie

Ďalej pridáme grafický prvok na nakreslenie bitmapy:

1. V editore prvkov zvoľte „Nakresliť bitmapu“a potom kliknutím na tlačidlo „+“(obrázok 1) jeden pridajte (obrázok 2)
2. V nástroji Object Inspector kliknutím na tlačidlo „…“vedľa hodnoty vlastnosti „Bitmapa“prvku „Draw Bitmap1“(obrázok 2) otvoríte „Bitmap Editor“(obrázok 3).
3. V „Bitmapovom editore“kliknite na tlačidlo „Načítať …“(obrázok 3) a otvorí sa dialógové okno Otvoriť súbor (obrázok 4)
4. V dialógovom okne Otvoriť súbor vyberte bitovú mapu, ktorú chcete nakresliť, a kliknite na tlačidlo „Otvoriť“(obrázok 4). Ak je súbor príliš veľký, nemusí sa zmestiť do pamäte Arduino. Ak sa vám počas kompilácie vyskytne chyba pamäte, možno budete musieť vybrať menšiu bitovú mapu
5. V „Bitmapovom editore“kliknite na „OK“. dialógové okno zatvoríte tlačidlom (Obrázok 5)

Krok 7: Vo Visuine: Pridajte piny pre vlastnosti X a Y prvku Kresliť bitmapu

Na animáciu bitmapy potrebujeme ovládať jej polohu X a Y. Za týmto účelom pridáme piny pre vlastnosti X a Y:

1. V nástroji Object Inspector kliknite na tlačidlo „Pin“pred vlastnosťou „X“prvku „Draw Bitmap1“(obrázok 1) a vyberte „Integer SinkPin“(obrázok 2)
2. V nástroji Object Inspector kliknite na tlačidlo „Pin“pred vlastnosťou „Y“prvku „Draw Bitmap1“(obrázok 3) a vyberte „Integer SinkPin“(obrázok 4)

Krok 8: Vo Visuine: Pridajte 2 celočíselné sínusové generátory a nakonfigurujte prvý

Na animáciu pohybu bitmapy použijeme 2 celočíselné sínusové generátory:

1. Do poľa Filter na paneli nástrojov súčastí zadajte „sine“, potom vyberte komponent „Generátor sínusového čísla“(obrázok 1) a dva z nich umiestnite do oblasti návrhu.
2. V nástroji Object Inspector nastavte hodnotu vlastnosti „Amplitude“komponentu SineIntegerGenerator1 na „96“(obrázok 2)
3. V nástroji Object Inspector nastavte hodnotu vlastnosti „Offset“komponentu SineIntegerGenerator1 na „96“(obrázok 3)
4. V nástroji Object Inspector nastavte hodnotu vlastnosti „Frekvencia“komponentu SineIntegerGenerator1 na „0,2“(obrázok 4)

Krok 9: V programe Visuino: Konfigurujte druhý generátor sínusov a pripojte generátory sínusu k súradnicovým kolíkom X a Y bitmapy

1. V nástroji Object Inspector nastavte hodnotu vlastnosti „Amplitude“komponentu SineIntegerGenerator2 na „120“(obrázok 1)
2. V nástroji Object Inspector nastavte hodnotu vlastnosti „Offset“komponentu SineIntegerGenerator2 na „120“(obrázok 2)
3. V nástroji Object Inspector nastavte hodnotu vlastnosti „Frekvencia“komponentu SineIntegerGenerator2 na „0,03“(obrázok 3)
4. Pripojte výstupný kolík „Out“komponentu SineIntegerGenerator1 k vstupnému kolíku „X“prvku „Shields. TFT Sisplay. Elements. Draw Bitmap1“komponentu Arduino (obrázok 4)
5. Pripojte výstupný kolík „Out“komponentu SineIntegerGenerator2 k vstupnému kolíku „Y“prvku „Shields. TFT Display. Elements. Draw Bitmap1“komponentu Arduino (obrázok 5)

Krok 10: Vo Visuino: Pridajte a pripojte štart a hodiny komponentov viacerých zdrojov

Na vykreslenie bitmapy zakaždým, keď sa aktualizujú pozície X a Y, musíme vyslať hodinový signál do prvku „Draw Bitmap1“. Na odoslanie príkazu po zmene pozícií potrebujeme spôsob synchronizácie udalostí. Na to použijeme komponent Repeat na neustále generovanie udalostí a Clock Multi Source na generovanie 2 udalostí v poradí. Prvá udalosť bude taktovať generátory sínusov na aktualizáciu polôh X a Y a druhá bude taktovať „Draw Bitmap1“:

1. Do poľa Filter na paneli nástrojov komponentov zadajte „opakovať“, potom vyberte komponent „Opakovať“(obrázok 1) a umiestnite ho do oblasti návrhu (obrázok 2)
2. Do poľa Filter na paneli nástrojov súčiastky zadajte „viac“, potom vyberte komponent „Viac hodinový zdroj“(obrázok 2) a umiestnite ho do oblasti návrhu (obrázok 3)
3. Pripojte výstupný kolík „Out“komponentu Repeat1 k vstupnému kolíku „In“komponentu ClockMultiSource1 (obrázok 3)
4. Pripojte výstupný kolík „Pin [0]“pinov „Out“komponentu ClockMultiSource1 k vstupnému kolíku „In“komponentu SineIntegerGenerator1 (obrázok 4)
5. Pripojte výstupný kolík „Pin [0]“pinov „Out“komponentu ClockMultiSource2 k vstupnému kolíku „In“komponentu SineIntegerGenerator1 (obrázok 5)
6. Pripojte výstupný kolík „Pin [1]“vstupného kolíka „Clock“prvku „Shields. TFT Display. Elements. Draw Bitmap1“komponentu Arduino (obrázok 6)

Krok 11: Generujte, kompilujte a nahrajte kód Arduino

1. Vo Visuine vygenerujte kód Arduino stlačením klávesu F9 alebo kliknutím na tlačidlo zobrazené na obrázku 1 a otvorte Arduino IDE
2. V Arduino IDE kliknite na tlačidlo Nahrať a zostavte a nahrajte kód (obrázok 2)

Krok 12: A hrajte…

Gratulujem Dokončili ste projekt.

Obrázky 2, 3, 4 a 5 a video zobrazujú pripojený a zapnutý projekt. Uvidíte bitmapu, ako sa pohybuje okolo štítu TFT dotykového displeja TFT na báze ILI9341, ako je vidieť na videu.

Na obrázku 1 môžete vidieť kompletný diagram Visuino. Tiež je pripojený projekt Visuino, ktorý som vytvoril pre tento Instructable, a bitmapa s logom Visuino. Môžete si ho stiahnuť a otvoriť v programe Visuino: