Arduino Uno: animazione bitmap su schermo touchscreen TFT ILI9341 con Visuino: 12 passaggi (con immagini)

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

Gli schermi display touchscreen TFT basati su ILI9341 sono schermi display a basso costo molto popolari per Arduino. Visuino li supporta da un po' di tempo, ma non ho mai avuto la possibilità di scrivere un Tutorial su come usarli. Di recente, tuttavia, poche persone hanno fatto domande sull'utilizzo dei display con Visuino, quindi ho deciso di realizzare un tutorial.

In questo Tutorial, ti mostrerò quanto è facile collegare lo Shield ad Arduino e programmarlo con Visuino per animare una Bitmap da spostare sul Display.

Passaggio 1: componenti

1. Una scheda compatibile con Arduino Uno (può funzionare anche con Mega, ma non ho ancora testato lo shield con essa)
2. Uno schermo touchscreen TFT ILI9341 da 2,4 "per Arduino

Passaggio 2: collegare lo schermo touchscreen TFT ILI9341 ad Arduino

Collega il TFT Shield sopra Arduino Uno come mostrato nelle immagini

Passaggio 3: avvia Visuino e aggiungi lo schermo TFT

Per iniziare a programmare Arduino, dovrai installare l'IDE Arduino da qui:

Assicurati di installare 1.6.7 o versioni successive, altrimenti questo Instructable non funzionerà

Anche il Visuino: https://www.visuino.com deve essere installato.

1. Avvia Visuino come mostrato nella prima immagine
2. Fare clic sul pulsante "Freccia giù" del componente Arduino per aprire il menu a discesa (Immagine 1)
3. Dal Menu seleziona "Aggiungi Scudi…" (Immagine 1)
4. Nella finestra di dialogo "Scudi" espandere la categoria "Display" e selezionare "Display touchscreen a colori TFT ILI9341 Shield", quindi fare clic sul pulsante "+" per aggiungerlo (Immagine 2)

Passaggio 4: in Visuino: aggiungi un elemento di testo di disegno per l'ombra del testo

Successivamente abbiamo bisogno di aggiungere elementi grafici per il rendering di testo e bitmap. Per prima cosa aggiungeremo un elemento grafico per disegnare l'ombra del testo:

1. In Object Inspector, cliccare sul pulsante "…" accanto al valore della proprietà "Elements" dell'Elemento "TFT Display" (Immagine 1)
2. Nell'editor di elementi selezionare "Disegna testo", quindi fare clic sul pulsante "+" (Immagine 2) per aggiungerne uno (Immagine 3)
3. In Object Inspector impostare il valore della proprietà "Color" dell'elemento "Draw Text1" su "aclSilver" (Immagine 3)
4. In Object Inspector impostare il valore della proprietà "Size" dell'elemento "Draw Text1" su "4" (Figura 4). Questo rende il testo più grande
5. In Object Inspector impostare il valore della proprietà "Text" dell'elemento "Draw Text1" su "Visuino" (Figura 5)
6. In Object Inspector impostare il valore della proprietà "X" dell'elemento "Draw Text1" su "43" (Figura 6)
7. In Object Inspector impostare il valore della proprietà "Y" dell'elemento "Draw Text1" su "278" (Figura 6)

Passaggio 5: In Visuino: aggiungi un elemento di testo di disegno per il primo piano del testo

Ora aggiungeremo l'elemento grafico per disegnare il testo:

1. Nell'editor degli elementi selezionare "Disegna testo", quindi fare clic sul pulsante "+" (Immagine 1) per aggiungerne un secondo (Immagine 2)
2. In Object Inspector impostare il valore della proprietà "Size" dell'elemento "Draw Text1" su "4" (Immagine 2)
3. In Object Inspector impostare il valore della proprietà "Text" dell'elemento "Draw Text1" su "Visuino" (Immagine 3)
4. In Object Inspector impostare il valore della proprietà "X" dell'elemento "Draw Text1" su "40" (Figura 4)
5. In Object Inspector impostare il valore della proprietà "Y" dell'elemento "Draw Text1" su "275" (Figura 4)

Passaggio 6: In Visuino: aggiungi l'elemento Disegna bitmap per l'animazione

Successivamente aggiungeremo l'elemento grafico per disegnare la bitmap:

1. Nell'editor di elementi selezionare "Disegna bitmap", quindi fare clic sul pulsante "+" (Immagine 1) per aggiungerne uno (Immagine 2)
2. In Object Inspector, fare clic sul pulsante "…" accanto al valore della proprietà "Bitmap" dell'elemento "Draw Bitmap1" (Immagine 2) per aprire l'"Editor bitmap" (Immagine 3)
3. Nell'"Editor bitmap" fare clic sul pulsante "Carica…" (Immagine 3) per aprire la finestra di dialogo Apri file (Immagine 4)
4. Nella finestra di dialogo Apri file, seleziona la bitmap da disegnare e fai clic sul pulsante "Apri" (Immagine 4). Se il file è troppo grande potrebbe non essere in grado di adattarsi alla memoria di Arduino. Se si ottiene un errore di memoria durante la compilazione, potrebbe essere necessario selezionare una bitmap più piccola
5. Nell'"Editor bitmap" fai clic su "OK". pulsante (Figura 5) per chiudere la finestra di dialogo

Passaggio 7: In Visuino: aggiungere pin per le proprietà X e Y dell'elemento Draw Bitmap

Per animare la Bitmap, dobbiamo controllarne la posizione X e Y. Per questo aggiungeremo i pin per le proprietà X e Y:

1. In Object Inspector fai clic sul pulsante "Pin" davanti alla proprietà "X" dell'elemento "Draw Bitmap1" (Immagine 1) e seleziona "Integer SinkPin" (Immagine 2)
2. In Object Inspector, fai clic sul pulsante "Pin" davanti alla proprietà "Y" dell'elemento "Draw Bitmap1" (Immagine 3) e seleziona "Integer SinkPin" (Immagine 4)

Passaggio 8: In Visuino: aggiungi 2 generatori sinusoidali interi e configura il primo

Useremo 2 generatori di seno intero per animare il movimento della bitmap:

1. Digitare "sine" nella casella Filtro della casella degli strumenti del componente, quindi selezionare il componente "Sine Integer Generator" (Immagine 1) e rilasciarne due nell'area di progettazione
2. In Object Inspector, imposta il valore della proprietà "Amplitude" del componente SineIntegerGenerator1 su "96" (Immagine 2)
3. In Object Inspector, imposta il valore della proprietà "Offset" del componente SineIntegerGenerator1 su "96" (Immagine 3)
4. In Object Inspector, imposta il valore della proprietà "Frequency" del componente SineIntegerGenerator1 su "0.2" (Immagine 4)

Passaggio 9: In Visuino: configurare il secondo generatore di seno e collegare i generatori di seno ai pin delle coordinate X e Y della bitmap

1. In Object Inspector, imposta il valore della proprietà "Amplitude" del componente SineIntegerGenerator2 su "120" (Immagine 1)
2. In Object Inspector, imposta il valore della proprietà "Offset" del componente SineIntegerGenerator2 su "120" (Immagine 2)
3. In Object Inspector, imposta il valore della proprietà "Frequency" del componente SineIntegerGenerator2 su "0.03" (Immagine 3)
4. Collegare il pin di output "Out" del componente SineIntegerGenerator1 al pin di input "X" dell'elemento "Shields. TFT Sisplay. Elements. Draw Bitmap1" del componente Arduino (Immagine 4)
5. Collegare il pin di output "Out" del componente SineIntegerGenerator2 al pin di input "Y" dell'elemento "Shields. TFT Display. Elements. Draw Bitmap1" del componente Arduino (Immagine 5)

Passaggio 10: In Visuino: aggiungere e collegare i componenti Start e Clock Multi Source

Per eseguire il rendering della bitmap ogni volta che le posizioni X e Y vengono aggiornate, è necessario inviare un segnale di clock all'elemento "Draw Bitmap1". Per inviare il comando dopo che le posizioni sono state modificate, abbiamo bisogno di un modo per sincronizzare gli eventi. Per questo utilizzeremo il componente Repeat per generare costantemente eventi e Clock Multi Source per generare 2 eventi in sequenza. Il primo evento sincronizza i generatori di seno per aggiornare le posizioni X e Y, e il secondo sincronizza il "Draw Bitmap1":

1. Digita "ripeti" nella casella Filtro della casella degli strumenti del componente, quindi seleziona il componente "Ripeti" (Immagine 1) e rilascialo nell'area di disegno (Immagine 2)
2. Digitare "multi" nella casella Filtro della casella degli strumenti dei componenti, quindi selezionare il componente "Clock Multi Source" (Immagine 2) e rilasciarlo nell'area di progettazione (Immagine 3)
3. Collegare il pin di uscita "Out" del componente Repeat1 al pin di ingresso "In" del componente ClockMultiSource1 (Immagine 3)
4. Collegare il pin di uscita "Pin[0]" dei pin "Out" del componente ClockMultiSource1 al pin di ingresso "In" del componente SineIntegerGenerator1 (Immagine 4)
5. Collegare il pin di uscita "Pin[0]" dei pin "Out" del componente ClockMultiSource2 al pin di ingresso "In" del componente SineIntegerGenerator1 (Immagine 5)
6. Collegare il pin di output "Pin[1]" del pin di input "Clock" dell'elemento "Shields. TFT Display. Elements. Draw Bitmap1" del componente Arduino (Figura 6)

Passaggio 11: genera, compila e carica il codice Arduino

1. In Visuino, premere F9 o fare clic sul pulsante mostrato in Figura 1 per generare il codice Arduino e aprire l'IDE Arduino
2. Nell'IDE di Arduino, fare clic sul pulsante Carica, per compilare e caricare il codice (Immagine 2)

Passaggio 12: e gioca…

Congratulazioni! Hai completato il progetto.

Le immagini 2, 3, 4 e 5 e il video mostrano il progetto connesso e acceso. Vedrai la bitmap muoversi attorno allo schermo touchscreen TFT basato su ILI9341 come mostrato nel video.

Nella Figura 1 potete vedere il diagramma completo di Visuino. In allegato c'è anche il progetto Visuino, che ho creato per questo Instructable, e la bitmap con il logo di Visuino. Puoi scaricarlo e aprirlo in Visuino: