Guia Profissional de Animação de Bitmap no Shield TFT Touchscreen ILI9341 2,4″ com Arduino

Componentes e Materiais

Arduino UNO	×	1
Shield TFT Touchscreen ILI9341 2,4″ para Arduino	×	1

Aplicativos e Serviços Online

• Visuino – Ambiente de Desenvolvimento Gráfico para Arduino
• Arduino IDE (versão 1.6.7 ou superior)

Sobre o Projeto

Os Shields de Display TFT Touchscreen baseados no ILI9341 são displays de baixo custo muito populares para Arduino. O Visuino já oferece suporte a eles há algum tempo, mas eu ainda não tinha criado um tutorial sobre como utilizá-los. Recentemente, várias pessoas perguntaram sobre o uso de displays com o Visuino, então decidi criar este guia passo a passo.

Neste tutorial, mostrarei como é fácil conectar o shield ao Arduino e programá-lo com o Visuino para animar um bitmap movendo-se pela tela.

Passo 1: Componentes

• Uma placa Arduino Uno compatível (pode funcionar com Mega, mas não testado)
• Um Shield TFT Touchscreen ILI9341 2,4″ para Arduino

Passo 2: Conectar o Shield TFT ILI9341 ao Arduino

Simplesmente encaixe o Shield TFT sobre o Arduino Uno conforme mostrado nas imagens.

Passo 3: Iniciar o Visuino e Adicionar o Shield de Display TFT

1. Inicie o Visuino
2. Clique no botão "Seta para Baixo" do componente Arduino para abrir o menu suspenso
3. Selecione "Add Shields..." (Adicionar Shields)
4. Na janela "Shields", expanda a categoria "Displays" e selecione "TFT Color Touch Screen Display ILI9341 Shield", depois clique no botão "+" para adicioná-lo

Passo 4: No Visuino – Adicionar Elemento "Draw Text" para Sombra do Texto

1. No Inspector de Objetos, clique no botão "..." ao lado da propriedade "Elements" do elemento "TFT Display"
2. No editor de elementos, selecione "Draw Text" e clique no botão "+" para adicionar
3. Defina a propriedade Color como aclSilver (prata)
4. Defina a propriedade Size como 4 (texto maior)
5. Defina a propriedade Text como "Visuino"
6. Defina X = 43 e Y = 278 (posição da sombra)

Passo 5: No Visuino – Adicionar Elemento "Draw Text" para Texto em Primeiro Plano

1. Adicione um segundo elemento "Draw Text"
2. Defina Size = 4, Text = "Visuino"
3. Defina X = 40 e Y = 275 (ligeiramente deslocado da sombra para efeito 3D)

Passo 6: No Visuino – Adicionar Elemento "Draw Bitmap" para Animação

1. No editor de elementos, selecione "Draw Bitmap" e adicione
2. Clique no botão "..." na propriedade Bitmap para abrir o Bitmap Editor
3. Clique em "Load...", selecione o arquivo bitmap desejado e clique em "Open"
4. Nota: Se o arquivo for muito grande, pode não caber na memória do Arduino. Em caso de erro de memória na compilação, use um bitmap menor.
5. Clique em "OK" para fechar o editor

Passo 7: No Visuino – Adicionar Pinos para Propriedades X e Y do Bitmap

1. No Inspector, clique no botão "Pin" na frente da propriedade X do elemento "Draw Bitmap1" e selecione "Integer SinkPin"
2. Repita para a propriedade Y, selecionando também "Integer SinkPin"

Passo 8: No Visuino – Adicionar 2 Geradores de Seno Inteiro e Configurar o Primeiro

1. Na caixa de filtro da Toolbox, digite "sine" e selecione "Sine Integer Generator". Arraste dois para a área de design
2. Configure o SineIntegerGenerator1:
   • Amplitude = 96
   • Offset = 96
   • Frequency = 0.2

Passo 9: Configurar o Segundo Gerador de Seno e Conectar aos Pinos X e Y

1. Configure o SineIntegerGenerator2:
   • Amplitude = 120
   • Offset = 120
   • Frequency = 0.03
2. Conecte a saída Out do SineIntegerGenerator1 ao pino de entrada X do elemento "Draw Bitmap1"
3. Conecte a saída Out do SineIntegerGenerator2 ao pino de entrada Y do elemento "Draw Bitmap1"

Passo 10: No Visuino – Adicionar e Conectar Componentes "Start" e "Clock Multi Source"

Para renderizar o bitmap sempre que as posições X e Y forem atualizadas, precisamos enviar um sinal de clock ao elemento "Draw Bitmap1". Para sincronizar os eventos (primeiro atualizar posição, depois desenhar), usamos um componente Repeat para gerar eventos contínuos e um Clock Multi Source para gerar dois eventos em sequência.

1. Adicione um componente Repeat (digite "repeat" no filtro da Toolbox)
2. Adicione um componente Clock Multi Source (digite "multi" no filtro)
3. Conecte Out do Repeat1 à entrada In do ClockMultiSource1
4. Conecte Pin[0] do ClockMultiSource1 à entrada In do SineIntegerGenerator1
5. Conecte Pin[1] do ClockMultiSource1 à entrada In do SineIntegerGenerator2
6. Conecte Pin[2] do ClockMultiSource1 ao pino Clock do elemento "Draw Bitmap1"

Passo 11: Gerar, Compilar e Fazer Upload do Código Arduino

1. No Visuino, pressione F9 ou clique no botão de geração de código para gerar o código Arduino e abrir a Arduino IDE
2. Na Arduino IDE, clique em Upload para compilar e carregar o código

Passo 12: Divirta-se!

Parabéns! Você concluiu o projeto. O bitmap se moverá pela tela do Shield TFT Touchscreen ILI9341 conforme mostrado no vídeo e nas imagens.

O projeto completo do Visuino e o bitmap com o logotipo estão disponíveis para download: https://www.visuino.com