Arduino Uno: Bitmapová animace na ILI9341 TFT dotykový displej štít s Visuino: 12 kroků (s obrázky)

2025 Autor: John Day | [email protected]. Naposledy změněno: 2025-01-13 06:57

Štíty dotykových displejů TFT založené na ILI9341 jsou velmi oblíbené levné štíty displeje pro Arduino. Visuino pro ně má podporu už nějakou dobu, ale nikdy jsem neměl šanci napsat návod, jak je používat. Nedávno se však málo lidí ptalo na používání displejů s Visuinem, a tak jsem se rozhodl udělat tutoriál.

V tomto tutoriálu vám ukážu, jak snadné je připojit Shield k Arduinu a naprogramovat jej pomocí Visuina k animaci bitmapy pro pohyb po displeji.

Krok 1: Součásti

1. Jedna deska kompatibilní s Arduino Uno (Může fungovat i s Mega, ale štít jsem s ní zatím netestoval)
2. Jeden 2,4palcový dotykový štít TFT ILI9341 pro Arduino

Krok 2: Připojte dotykový displejový štít ILI9341 TFT k Arduinu

Připojte TFT štít na horní část Arduino Uno, jak je znázorněno na obrázcích

Krok 3: Spusťte Visuino a přidejte TFT Display Shield

Chcete -li začít programovat Arduino, musíte mít nainstalované Arduino IDE zde:

Ujistěte se, že instalujete 1.6.7 nebo vyšší, jinak tento Instructable nebude fungovat

Je také třeba nainstalovat Visuino:

1. Spusťte Visuino, jak je znázorněno na prvním obrázku
2. Kliknutím na tlačítko „Šipka dolů“na komponentě Arduino otevřete rozbalovací nabídku (obrázek 1)
3. V nabídce vyberte „Přidat štíty…“(obrázek 1)
4. V dialogu "Štíty" rozbalte kategorii "Displeje" a vyberte "TFT barevný dotykový displej ILI9341 štít", poté jej přidejte kliknutím na tlačítko "+" (obrázek 2)

Krok 4: Ve Visuinu: Přidejte nakreslený textový prvek pro textový stín

Dále musíme přidat grafické prvky k vykreslení textu a bitmapy. Nejprve přidáme grafický prvek k vykreslení stínu textu:

1. V inspektoru objektů klikněte na tlačítko „…“vedle hodnoty vlastnosti „Prvky“prvku „Zobrazení TFT“(obrázek 1)
2. V editoru Prvky vyberte „Nakreslit text“a poté klikněte na tlačítko „+“(obrázek 2) a jeden přidejte (obrázek 3)
3. V Object Inspector nastavte hodnotu vlastnosti „Color“prvku „Draw Text1“na „aclSilver“(obrázek 3)
4. V inspektoru objektů nastavte hodnotu vlastnosti „Velikost“prvku „Nakreslit text1“na „4“(obrázek 4). Tím je text větší
5. V Object Inspector nastavte hodnotu vlastnosti „Text“prvku „Draw Text1“na „Visuino“(obrázek 5)
6. V inspektoru objektů nastavte hodnotu vlastnosti „X“prvku „Draw Text1“na „43“(obrázek 6)
7. V inspektoru objektů nastavte hodnotu vlastnosti „Y“prvku „Draw Text1“na „278“(obrázek 6)

Krok 5: Ve Visuinu: Přidejte kreslený textový prvek do popředí textu

Nyní přidáme grafický prvek k vykreslení textu:

1. V editoru prvků vyberte „Nakreslit text“a poté kliknutím na tlačítko „+“(obrázek 1) přidejte druhý (obrázek 2)
2. V inspektoru objektů nastavte hodnotu vlastnosti „Velikost“prvku „Nakreslit text1“na „4“(obrázek 2)
3. V Object Inspector nastavte hodnotu vlastnosti „Text“prvku „Draw Text1“na „Visuino“(obrázek 3)
4. V inspektoru objektů nastavte hodnotu vlastnosti „X“prvku „Draw Text1“na „40“(obrázek 4)
5. V inspektoru objektů nastavte hodnotu vlastnosti „Y“prvku „Draw Text1“na „275“(obrázek 4)

Krok 6: Ve Visuinu: Přidejte prvek kreslení bitmapy pro animaci

Dále přidáme grafický prvek k vykreslení bitmapy:

1. V editoru Prvky vyberte „Nakreslit bitmapu“a poté klikněte na tlačítko „+“(obrázek 1) a přidejte jej (obrázek 2)
2. V inspektoru objektů kliknutím na tlačítko „…“vedle hodnoty vlastnosti „Bitmap“prvku „Draw Bitmap1“(obrázek 2) otevřete „Bitmap Editor“(obrázek 3)
3. V „Bitmap Editor“klikněte na tlačítko „Načíst…“(obrázek 3) a otevřete dialogové okno Otevřít soubor (obrázek 4)
4. V dialogu Otevřít soubor vyberte bitmapu, kterou chcete nakreslit, a klikněte na tlačítko „Otevřít“(obrázek 4). Pokud je soubor příliš velký, nemusí se vejít do paměti Arduina. Pokud během kompilace dojde k chybě paměti, možná budete muset vybrat menší bitmapu
5. V „Editoru bitmap“klikněte na „OK“. tlačítko (Obrázek 5) zavřete dialog

Krok 7: Ve Visuinu: Přidejte piny pro vlastnosti X a Y prvku Kreslení bitmapy

Abychom mohli animovat bitmapu, musíme ovládat její polohu X a Y. Za tímto účelem přidáme piny pro vlastnosti X a Y:

1. V inspektoru objektů klikněte na tlačítko „Pin“před vlastností „X“prvku „Draw Bitmap1“(obrázek 1) a vyberte „Integer SinkPin“(obrázek 2)
2. V inspektoru objektů klikněte na tlačítko „Pin“před vlastností „Y“prvku „Draw Bitmap1“(obrázek 3) a vyberte „Integer SinkPin“(obrázek 4)

Krok 8: Ve Visuinu: Přidejte 2 celočíselné sinusové generátory a nakonfigurujte první

K animaci pohybu bitmapy použijeme 2 celočíselné sinusové generátory:

1. Do pole Filtr nástroje Component Toolbox zadejte „sine“, poté vyberte komponentu „Sine Integer Generator“(obrázek 1) a dva z nich vložte do oblasti návrhu
2. V inspektoru objektů nastavte hodnotu vlastnosti „Amplitude“komponenty SineIntegerGenerator1 na „96“(obrázek 2)
3. V Object Inspector nastavte hodnotu vlastnosti „Offset“komponenty SineIntegerGenerator1 na „96“(obrázek 3)
4. V inspektoru objektů nastavte hodnotu vlastnosti „Frekvence“komponenty SineIntegerGenerator1 na „0,2“(obrázek 4)

Krok 9: Ve Visuinu: Konfigurujte druhý generátor sinusů a připojte generátory sinus k souřadnicovým pinům X a Y bitmapy

1. V inspektoru objektů nastavte hodnotu vlastnosti „Amplitude“komponenty SineIntegerGenerator2 na „120“(obrázek 1)
2. V Object Inspector nastavte hodnotu vlastnosti „Offset“komponenty SineIntegerGenerator2 na „120“(obrázek 2)
3. V inspektoru objektů nastavte hodnotu vlastnosti „Frekvence“komponenty SineIntegerGenerator2 na „0,03“(obrázek 3)
4. Připojte výstupní pin „Out“komponenty SineIntegerGenerator1 ke vstupnímu kolíku „X“prvku „Shields. TFT Sisplay. Elements. Draw Bitmap1“komponenty Arduino (obrázek 4)
5. Připojte výstupní pin „Out“komponenty SineIntegerGenerator2 ke vstupnímu kolíku „Y“prvku „Shields. TFT Display. Elements. Draw Bitmap1“komponenty Arduino (obrázek 5)

Krok 10: Ve Visuinu: Přidejte a připojte Start a Clock Multi Source komponenty

Abychom vykreslili bitmapu pokaždé, když se aktualizují pozice X a Y, musíme poslat hodinový signál do prvku „Draw Bitmap1“. K odeslání příkazu po změně pozic potřebujeme způsob, jak synchronizovat události. K tomu použijeme komponentu Repeat k neustálému generování událostí a Clock Multi Source pro generování 2 událostí v pořadí. První událost bude taktovat generátory sinusů, aby aktualizovaly pozice X a Y, a druhá bude taktovat „Draw Bitmap1“:

1. Do pole Filtr v Component Toolboxu zadejte „opakovat“, poté vyberte komponentu „Opakovat“(obrázek 1) a umístěte jej do oblasti návrhu (obrázek 2)
2. Do pole Filtr nástroje Component Toolbox zadejte „multi“, poté vyberte komponentu „Clock Multi Source“(obrázek 2) a umístěte jej do oblasti návrhu (obrázek 3)
3. Připojte výstupní kolík „Out“komponenty Repeat1 ke vstupnímu pinu „In“komponenty ClockMultiSource1 (obrázek 3)
4. Připojte výstupní kolík „Pin [0]“pinů „Out“komponenty ClockMultiSource1 ke vstupnímu pinu „In“komponenty SineIntegerGenerator1 (obrázek 4)
5. Připojte výstupní kolík „Pin [0]“kolíků „Out“komponenty ClockMultiSource2 ke vstupnímu pinu „In“komponenty SineIntegerGenerator1 (obrázek 5)
6. Připojte výstupní pin „Pin [1]“vstupního pinu „Clock“prvku „Shields. TFT Display. Elements. Draw Bitmap1“komponenty Arduino (obrázek 6)

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

1. Ve Visuinu vygenerujte kód Arduino stisknutím klávesy F9 nebo kliknutím na tlačítko zobrazené na obrázku 1 a otevřete Arduino IDE
2. V Arduino IDE klikněte na tlačítko Nahrát pro kompilaci a nahrání kódu (obrázek 2)

Krok 12: A hrajte…

Gratulujeme! Dokončili jste projekt.

Obrázky 2, 3, 4 a 5 a video ukazují připojený a napájený projekt. Uvidíte bitmapu pohybující se kolem dotykového displeje TFT s dotykovým displejem založeného na ILI9341, jak je vidět na videu.

Na obrázku 1 můžete vidět kompletní diagram Visuino. Připojen je také projekt Visuino, který jsem vytvořil pro tento Instructable, a bitmapa s logem Visuino. Můžete si jej stáhnout a otevřít ve Visuinu: