Arduino Uno: Animação de bitmap em ILI9341 TFT Touchscreen Display Shield com Visuino: 12 etapas (com imagens)

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

As proteções de tela de toque TFT baseadas em ILI9341 são telas de proteção de baixo custo muito populares para Arduino. Visuino tem suporte para eles há um bom tempo, mas eu nunca tive a chance de escrever um Tutorial de como usá-los. Recentemente, porém, poucas pessoas fizeram perguntas sobre o uso de monitores com Visuino, então decidi fazer um tutorial.

Neste Tutorial, vou mostrar como é fácil conectar o Shield ao Arduino e programá-lo com o Visuino para animar um Bitmap para se mover no Display.

Etapa 1: Componentes

1. Uma placa compatível com Arduino Uno (pode funcionar com Mega também, mas ainda não testei o escudo com ela)
2. Um ILI9341 2.4 "TFT Touchscreen Shield para Arduino

Etapa 2: conectar a tela de toque TFT ILI9341 TFT ao Arduino

Conecte o escudo TFT na parte superior do Arduino Uno, conforme mostrado nas fotos

Etapa 3: inicie o Visuino e adicione o escudo de tela TFT

Para iniciar a programação do Arduino, você precisará ter o IDE do Arduino instalado aqui:

Certifique-se de instalar 1.6.7 ou superior, caso contrário, este Instructable não funcionará

O Visuino: https://www.visuino.com também precisa ser instalado.

1. Inicie o Visuino como mostrado na primeira imagem
2. Clique no botão "Seta para baixo" do componente Arduino para abrir o menu suspenso (Figura 1)
3. No Menu, selecione "Adicionar Escudos …" (Figura 1)
4. Na caixa de diálogo "Escudos", expanda a categoria "Monitores" e selecione "Escudo TFT colorido da tela de toque ILI9341" e clique no botão "+" para adicioná-lo (Figura 2)

Etapa 4: No Visuino: Adicionar Elemento Desenhar Texto para a Sombra do Texto

Em seguida, precisamos adicionar elementos gráficos para renderizar texto e bitmap. Primeiro vamos adicionar elementos gráficos para desenhar a sombra do texto:

1. No Inspetor de Objetos, clique no botão "…" ao lado do valor da propriedade "Elementos" do Elemento "Display TFT" (Figura 1)
2. No editor de Elementos selecione “Desenhar Texto” e clique no botão "+" (Figura 2) para adicionar um (Figura 3)
3. No Object Inspector defina o valor da propriedade "Color" do elemento "Draw Text1" para "aclSilver" (Figura 3)
4. No Object Inspector defina o valor da propriedade "Size" do elemento "Draw Text1" para "4" (Figura 4). Isso torna o texto maior
5. No Object Inspector defina o valor da propriedade "Text" do elemento "Draw Text1" para "Visuino" (Figura 5)
6. No Object Inspector, defina o valor da propriedade "X" do elemento "Draw Text1" para "43" (Figura 6)
7. No Object Inspector, defina o valor da propriedade "Y" do elemento "Draw Text1" para "278" (Figura 6)

Etapa 5: No Visuino: adicione o elemento Desenhar texto para o primeiro plano do texto

Agora vamos adicionar elementos gráficos para desenhar o texto:

1. No editor de Elementos, selecione “Desenhar Texto” e clique no botão "+" (Figura 1) para adicionar um segundo (Figura 2)
2. No Object Inspector defina o valor da propriedade "Size" do elemento "Draw Text1" para "4" (Figura 2)
3. No Object Inspector defina o valor da propriedade "Text" do elemento "Draw Text1" para "Visuino" (Figura 3)
4. No Object Inspector, defina o valor da propriedade "X" do elemento "Draw Text1" para "40" (Figura 4)
5. No Object Inspector, defina o valor da propriedade "Y" do elemento "Draw Text1" para "275" (Figura 4)

Etapa 6: No Visuino: adicione o elemento Draw Bitmap para a animação

Em seguida, adicionaremos o elemento gráfico para desenhar o bitmap:

1. No editor de Elementos selecione “Desenhar Bitmap” e clique no botão "+" (Figura 1) para adicionar um (Figura 2)
2. No Object Inspector, clique no botão "…" ao lado do valor da propriedade "Bitmap" do Elemento "Draw Bitmap1" (Figura 2) para abrir o "Editor de Bitmap" (Figura 3)
3. No "Editor de Bitmap" clique no botão "Carregar …" (Figura 3) para abrir a caixa de diálogo Abrir Arquivo (Figura 4)
4. Na caixa de diálogo Abrir arquivo, selecione o bitmap a desenhar e clique no botão "Abrir" (Figura 4). Se o arquivo for muito grande, pode não caber na memória do Arduino. Se você obtiver um erro de memória insuficiente durante a compilação, pode ser necessário selecionar um bitmap menor
5. No "Editor de Bitmap", clique no botão "OK". botão (Figura 5) para fechar a caixa de diálogo

Etapa 7: No Visuino: adicione pinos para as propriedades X e Y do elemento Draw Bitmap

Para animar o Bitmap, precisamos controlar sua posição X e Y. Para isso, adicionaremos pinos para as propriedades X e Y:

1. No Object Inspector clique no botão "Pin" na frente da propriedade "X" do elemento "Draw Bitmap1" (Figura 1), e selecione "Integer SinkPin" (Figura 2)
2. No Object Inspector clique no botão "Pin" na frente da propriedade "Y" do elemento "Draw Bitmap1" (Figura 3), e selecione "Integer SinkPin" (Figura 4)

Etapa 8: No Visuino: adicione 2 geradores de seno inteiros e configure o primeiro

Usaremos 2 geradores de seno inteiros para animar o movimento do bitmap:

1. Digite "seno" na caixa de filtro da caixa de ferramentas do componente e selecione o componente "Gerador de seno inteiro" (Figura 1), e solte dois deles na área de design
2. No Object Inspector, defina o valor da propriedade "Amplitude" do componente SineIntegerGenerator1 para "96" (Figura 2)
3. No Object Inspector, defina o valor da propriedade "Offset" do componente SineIntegerGenerator1 para "96" (Figura 3)
4. No Object Inspector, defina o valor da propriedade "Frequency" do componente SineIntegerGenerator1 para "0.2" (Figura 4)

Etapa 9: No Visuino: configure o segundo gerador de seno e conecte os geradores de seno aos pinos coordenados X e Y do bitmap

1. No Object Inspector, defina o valor da propriedade "Amplitude" do componente SineIntegerGenerator2 para "120" (Figura 1)
2. No Object Inspector, defina o valor da propriedade "Offset" do componente SineIntegerGenerator2 para "120" (Figura 2)
3. No Object Inspector, defina o valor da propriedade "Frequency" do componente SineIntegerGenerator2 para "0,03" (Figura 3)
4. Conecte o pino de saída "Out" do componente SineIntegerGenerator1 ao pino de entrada "X" do elemento "Shields. TFT Sisplay. Elements. Draw Bitmap1" do componente Arduino (Figura 4)
5. Conecte o pino de saída "Out" do componente SineIntegerGenerator2 ao pino de entrada "Y" do elemento "Shields. TFT Display. Elements. Draw Bitmap1" do componente Arduino (Figura 5)

Etapa 10: No Visuino: Adicionar e conectar componentes de fonte múltipla de início e relógio

Para renderizar o bitmap sempre que as posições X e Y são atualizadas, precisamos enviar um sinal de clock para o elemento "Draw Bitmap1". Para enviar o comando após as posições terem sido alteradas, precisamos de uma forma de sincronizar os eventos. Para isso, usaremos o componente Repeat para gerar eventos constantemente, e Clock Multi Source para gerar 2 eventos em sequência. O primeiro evento irá cronometrar os geradores de seno para atualizar as posições X e Y, e o segundo irá cronometrar o "Draw Bitmap1":

1. Digite "repetir" na caixa Filtro da caixa de ferramentas do componente, selecione o componente "Repetir" (Figura 1) e solte-o na área de design (Figura 2)
2. Digite "multi" na caixa Filter da Component Toolbox, selecione o componente "Clock Multi Source" (Figura 2) e solte-o na área de design (Figura 3)
3. Conecte o pino de saída "Out" do componente Repeat1 ao pino de entrada "In" do componente ClockMultiSource1 (Figura 3)
4. Conecte o pino de saída "Pin [0]" dos pinos "Out" do componente ClockMultiSource1 ao pino de entrada "In" do componente SineIntegerGenerator1 (Figura 4)
5. Conecte o pino de saída "Pin [0]" dos pinos "Out" do componente ClockMultiSource2 ao pino de entrada "In" do componente SineIntegerGenerator1 (Figura 5)
6. Conecte o pino de saída "Pin [1]" do pino de entrada "Clock" do elemento "Shields. TFT Display. Elements. Draw Bitmap1" do componente Arduino (Figura 6)

Etapa 11: gerar, compilar e fazer upload do código do Arduino

1. No Visuino, pressione F9 ou clique no botão mostrado na Figura 1 para gerar o código do Arduino e abra o IDE do Arduino
2. No IDE do Arduino, clique no botão Upload, para compilar e fazer upload do código (Figura 2)

Etapa 12: e jogar …

Parabéns! Você concluiu o projeto.

As imagens 2, 3, 4 e 5 e o Vídeo mostram o projeto conectado e ligado. Você verá o bitmap movendo-se ao redor da tela de toque TFT com base em ILI9341, conforme mostrado no vídeo.

Na Figura 1 você pode ver o diagrama completo do Visuino. Também está anexado o projeto Visuino, que criei para este Instructable, e o bitmap com o logotipo Visuino. Você pode fazer o download e abri-lo em Visuino: