Arduino Uno: animație bitmap pe ecranul ecranului tactil ILI9341 TFT cu Visuino: 12 pași (cu imagini)

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:46

Ecranele de afișare TFT cu ecran tactil bazate pe ILI9341 sunt foarte populare ecranele de afișare cu cost redus pentru Arduino. Visuino le susține de ceva vreme, dar nu am avut niciodată șansa să scriu un tutorial despre cum să le folosesc. Recent, însă puțini oameni au pus întrebări despre utilizarea ecranelor cu Visuino, așa că am decis să fac un tutorial.

În acest tutorial, vă voi arăta cât de ușor este să conectați Shield la Arduino și să îl programați cu Visuino pentru a anima o Bitmap pentru a vă deplasa pe ecran.

Pasul 1: Componente

1. O placă compatibilă Arduino Uno (poate funcționa și cu Mega, dar nu am testat încă scutul cu el)
2. Un ILI9341 2.4 "TFT Touchscreen Shield pentru Arduino

Pasul 2: Conectați ecranul tactil ILI9341 TFT cu ecran tactil la Arduino

Conectați ecranul TFT de deasupra Arduino Uno așa cum se arată în imagini

Pasul 3: Porniți Visuino și adăugați TFT Display Shield

Pentru a începe programarea Arduino, va trebui să aveți Arduino IDE instalat de aici:

Asigurați-vă că instalați 1.6.7 sau o versiune ulterioară, în caz contrar acest instructabil nu va funcționa

Visuino: https://www.visuino.com trebuie, de asemenea, să fie instalat.

1. Porniți Visuino așa cum se arată în prima imagine
2. Faceți clic pe butonul „Săgeată în jos” al componentei Arduino pentru a deschide meniul derulant (Imaginea 1)
3. Din meniu selectați „Adăugați scuturi…” (Imaginea 1)
4. În dialogul „Scuturi” extindeți categoria „Afișează” și selectați „Afișaj ecran TFT color Touch ILI9341 Shield”, apoi faceți clic pe butonul „+” pentru ao adăuga (Imaginea 2)

Pasul 4: În Visuino: Adăugați element de text Draw pentru umbra de text

În continuare, trebuie să adăugăm elemente grafice pentru a reda text și bitmap. Mai întâi vom adăuga element grafic pentru a desena umbra textului:

1. În Inspectorul de obiecte, faceți clic pe butonul „…” de lângă valoarea proprietății „Elemente” a elementului „Afișaj TFT” (Imaginea 1)
2. În editorul Elements selectați „Draw Text”, apoi faceți clic pe butonul „+” (Imaginea 2) pentru a adăuga unul (Imaginea 3)
3. În Inspectorul de obiecte, setați valoarea proprietății „Culoare” a elementului „Desenează Text1” la „aclSilver” (Imaginea 3)
4. În Inspectorul de obiecte, setați valoarea proprietății „Dimensiune” a elementului „Desenează text1” la „4” (Imaginea 4). Acest lucru mărește textul
5. În Inspectorul de obiecte setați valoarea proprietății „Text” a elementului „Draw Text1” la „Visuino” (Imaginea 5)
6. În Inspectorul de obiecte setați valoarea proprietății "X" a elementului "Draw Text1" la "43" (Imaginea 6)
7. În Inspectorul de obiecte setați valoarea proprietății „Y” a elementului „Draw Text1” la „278” (Imaginea 6)

Pasul 5: În Visuino: Adăugați element de text Draw pentru primul plan al textului

Acum vom adăuga element grafic pentru a desena textul:

1. În editorul Elements selectați „Draw Text”, apoi faceți clic pe butonul „+” (Imaginea 1) pentru a adăuga al doilea (Imaginea 2)
2. În Inspectorul de obiecte, setați valoarea proprietății „Dimensiune” a elementului „Trageți Text1” la „4” (Imaginea 2)
3. În Inspectorul de obiecte setați valoarea proprietății „Text” a elementului „Draw Text1” la „Visuino” (Imaginea 3)
4. În Inspectorul de obiecte setați valoarea proprietății "X" a elementului "Draw Text1" la "40" (Imaginea 4)
5. În Inspectorul de obiecte setați valoarea proprietății "Y" a elementului "Draw Text1" la "275" (Imaginea 4)

Pasul 6: În Visuino: Adăugați elementul Bitmap Draw pentru animație

Apoi vom adăuga element grafic pentru a desena bitmap-ul:

1. În editorul Elements selectați „Draw Bitmap”, apoi faceți clic pe butonul „+” (Imaginea 1) pentru a adăuga una (Imaginea 2)
2. În Inspectorul de obiecte, faceți clic pe butonul „…” de lângă valoarea proprietății „Bitmap” a elementului „Draw Bitmap1” (Imaginea 2) pentru a deschide „Editorul Bitmap” (Imaginea 3)
3. În „Bitmap Editor” faceți clic pe butonul „Încărcați…” (Imaginea 3) pentru a deschide fereastra de dialog Deschidere fișier (Imaginea 4)
4. În dialogul Deschidere fișier, selectați harta de biți de desenat și faceți clic pe butonul „Deschidere” (Imaginea 4). Dacă fișierul este prea mare, este posibil să nu poată intra în memoria Arduino. Dacă scăpați de eroare de memorie în timpul compilării, poate fi necesar să selectați o hartă de biți mai mică
5. În „Bitmap Editor” faceți clic pe „OK”. (Imaginea 5) pentru a închide caseta de dialog

Pasul 7: În Visuino: Adăugați pinii pentru proprietățile X și Y ale elementului Draw Bitmap

Pentru a anima Bitmap-ul, trebuie să-i controlăm poziția X și Y. Pentru aceasta vom adăuga pini pentru proprietățile X și Y:

1. În Inspectorul de obiecte, faceți clic pe butonul „Pin” din fața proprietății „X” a elementului „Draw Bitmap1” (Imaginea 1) și selectați „Integer SinkPin” (Imaginea 2)
2. În Inspectorul de obiecte, faceți clic pe butonul „Pin” din fața proprietății „Y” a elementului „Draw Bitmap1” (Imaginea 3) și selectați „Integer SinkPin” (Imaginea 4)

Pasul 8: În Visuino: Adăugați 2 Generatoare Sine întregi și configurați primul

Vom folosi 2 generatoare sinusoidale întregi pentru a anima mișcarea bitmap:

1. Tastați „sinus” în caseta de filtrare a casetei de instrumente pentru componente, apoi selectați componenta „Generator întreg întreg sinus” (Imaginea 1) și plasați două dintre ele în zona de proiectare
2. În Inspectorul de obiecte, setați valoarea proprietății „Amplitudine” a componentei SineIntegerGenerator1 la „96” (Imaginea 2)
3. În Inspectorul de obiecte, setați valoarea proprietății "Offset" a componentei SineIntegerGenerator1 la "96" (Imaginea 3)
4. În Inspectorul de obiecte, setați valoarea proprietății "Frecvență" a componentei SineIntegerGenerator1 la "0,2" (Imaginea 4)

Pasul 9: În Visuino: configurați al doilea generator de sinusuri și conectați generatoarele de sinusuri la pinii de coordonată X și Y ai bitmap-ului

1. În Inspectorul de obiecte, setați valoarea proprietății „Amplitudine” a componentei SineIntegerGenerator2 la „120” (Imaginea 1)
2. În Inspectorul de obiecte, setați valoarea proprietății "Offset" a componentei SineIntegerGenerator2 la "120" (Imaginea 2)
3. În Inspectorul de obiecte, setați valoarea proprietății „Frecvență” a componentei SineIntegerGenerator2 la „0,03” (Imaginea 3)
4. Conectați pinul de ieșire "Out" al componentei SineIntegerGenerator1 la pinul de intrare "X" al elementului "Shields. TFT Sisplay. Elements. Draw Bitmap1" al componentei Arduino (Imaginea 4)
5. Conectați pinul de ieșire "Out" al componentei SineIntegerGenerator2 la pinul de intrare "Y" al elementului "Shields. TFT Display. Elements. Draw Bitmap1" al componentei Arduino (Imaginea 5)

Pasul 10: În Visuino: Adăugați și conectați componente Start și Clock Multi Source

Pentru a reda bitmap-ul de fiecare dată când sunt actualizate pozițiile X și Y, trebuie să trimitem un semnal de ceas către elementul "Draw Bitmap1". Pentru a trimite comanda după schimbarea pozițiilor, avem nevoie de o modalitate de sincronizare a evenimentelor. Pentru aceasta vom folosi componenta Repeat pentru a genera în mod constant evenimente și Clock Multi Source pentru a genera 2 evenimente în ordine. Primul eveniment va semnaliza generatoarele de sinusuri pentru a actualiza pozițiile X și Y, iar al doilea va marca „Draw Bitmap1”:

1. Tastați „repetați” în caseta Filtru a casetei de instrumente pentru componente, apoi selectați componenta „Repetați” (Imaginea 1) și plasați-o în zona de proiectare (Imaginea 2)
2. Tastați „multi” în caseta de filtrare a casetei de instrumente pentru componente, apoi selectați componenta „Clock Multi Source” (imaginea 2) și plasați-o în zona de proiectare (imaginea 3)
3. Conectați pinul de ieșire "Out" al componentei Repeat1 la pinul de intrare "In" al componentei ClockMultiSource1 (Imaginea 3)
4. Conectați pinul de ieșire „Pin [0]” al pinilor „Out” ai componentei ClockMultiSource1 la pinul de intrare „In” al componentei SineIntegerGenerator1 (Imaginea 4)
5. Conectați pinul de ieșire „Pin [0]” al pinilor „Out” ai componentei ClockMultiSource2 la pinul de intrare „In” al componentei SineIntegerGenerator1 (Imaginea 5)
6. Conectați pinul de ieșire „Pin [1]” al pinului de intrare „Clock” al elementului „Shields. TFT Display. Elements. Draw Bitmap1” al componentei Arduino (Imaginea 6)

Pasul 11: Generați, compilați și încărcați codul Arduino

1. În Visuino, apăsați F9 sau faceți clic pe butonul afișat în imaginea 1 pentru a genera codul Arduino și deschideți IDE-ul Arduino
2. În IDE-ul Arduino, faceți clic pe butonul Încărcare, pentru a compila și încărca codul (Imaginea 2)

Pasul 12: Și joacă …

Felicitări! Ați finalizat proiectul.

Imaginile 2, 3, 4 și 5 și videoclipul arată proiectul conectat și alimentat. Veți vedea Bitmap-ul mișcându-se în jurul ecranului TFT cu ecran tactil bazat pe ILI9341, așa cum se vede în videoclip.

În imaginea 1 puteți vedea diagrama completă Visuino. De asemenea, atașat este proiectul Visuino, pe care l-am creat pentru acest instructabil, și bitmap-ul cu sigla Visuino. Puteți să o descărcați și să o deschideți în Visuino: