Animação de bitmap em ILI9341 TFT Touchscreen Display Shield

Aplicativos e serviços online

	Visuino - Ambiente de desenvolvimento gráfico para Arduino
	Arduino IDE

Sobre este projeto

Etapa 1:componentes

• Um Arduino Uno placa compatível (pode funcionar com Mega também, mas ainda não testei o escudo com ela)

• Um ILI9341 2.4 "TFT Touchscreen Shield para Arduino

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

Etapa 3:inicie o Visuino e adicione o Display Shield TFT

• Inicie o Visuino como mostrado na primeira foto

• Clique em " Seta para baixo "do componente Arduino para abrir o menu suspenso ( Figura 1 )

• No menu, selecione " Adicionar escudos ... "( Imagem 1 )

• Na seção " Escudos "expanda a caixa de diálogo" Monitores "categoria e selecione a categoria" Tela de toque colorida TFT ILI9341 Shield "e, a seguir, clique em" + "para adicioná-lo ( Imagem 2 )

Etapa 4:no Visuino:adicione o elemento Desenhar texto para a sombra do texto

• No Inspetor de objetos, clique em " ... "ao lado do valor dos" Elementos "propriedade do" Display TFT Elemento "( Imagem 1 )

• No editor de elementos, selecione “ Desenhar texto ”E, a seguir, clique em" + botão "( Imagem 2 ) para adicionar um ( Imagem 3 )

• No Inspetor de objetos, defina o valor da " Cor "propriedade do" Desenhar Texto1 "elemento para" aclSilver "( Figura 3 )

• No Inspetor de objetos, defina o valor de " Tamanho "propriedade do" Desenhar Texto1 elemento "para" 4 "( Imagem 4 ) Isso torna o texto maior

• No Inspetor de objetos, defina o valor do " Texto "propriedade do" Desenhar Texto1 elemento "para" Visuino "( Figura 5 )

• No Inspetor de objetos, defina o valor de " X "propriedade do" Desenhar Texto1 elemento "para" 43 "( Figura 6 )

• No Inspetor de objetos, defina o valor de " Y "propriedade do" Desenhar Texto1 elemento "para" 278 "( Figura 6 )

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

• No editor de elementos, selecione “ Desenhar texto ”E, a seguir, clique no botão" "( Figura 1 ) para adicionar o segundo ( Imagem 2 )

• No Inspetor de objetos, defina o valor de " Tamanho "propriedade do" Desenhar Texto1 elemento "para" 4 "( Imagem 2 )

• No Inspetor de objetos, defina o valor do " Texto "propriedade do" Desenhar Texto1 elemento "para" Visuino "( Figura 3 )

• No Inspetor de objetos, defina o valor de " X "propriedade do" Desenhar Texto1 elemento "para" 40 "( Imagem 4 )

• No Inspetor de objetos, defina o valor de " Y "propriedade do" Desenhar Texto1 elemento "para" 275 "( Imagem 4 )

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

• No editor de elementos, selecione “ Desenhar bitmap ”E, a seguir, clique no botão" "( Figura 1 ) para adicionar um ( Imagem 2 )

• No Inspetor de objetos, clique em " ... "botão ao lado do valor de" Bitmap propriedade "do" Draw Bitmap1 Elemento "( Figura 2 ) para abrir o " Editor de bitmap "( Figura 3 )

• No " Editor de bitmap "clique em" Carregar ... botão "( Imagem 3 ) para abrir a caixa de diálogo de abertura de arquivo ( Figura 4 )

• Na caixa de diálogo Abrir arquivo, selecione o bitmap a ser desenhado e clique no botão " Abrir botão "( Imagem 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

• No " Editor de bitmap "clique em" OK . "( Imagem 5 ) para fechar a caixa de diálogo

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

• No Inspetor de objetos, clique em " Fixar "botão na frente do" X propriedade "do" Draw Bitmap1 elemento "( Imagem 1 ) e selecione " Integer SinkPin "( Imagem 2 )

• No Inspetor de objetos, clique em " Fixar "botão na frente do" Y propriedade "do" Draw Bitmap1 elemento "( Figura 3 ) e selecione " Integer SinkPin "( Imagem 4 )

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

• Digite " seno "na caixa Filtro da caixa de ferramentas do componente e selecione" Gerador de seno inteiro componente "( Figura 1 ) e solte dois deles na área de design

• No Inspetor de objetos, defina o valor de " Amplitude "propriedade do SineIntegerGenerator1 componente para " 96 "( Imagem 2 )

• No Inspetor de objetos, defina o valor de " Deslocamento "propriedade do SineIntegerGenerator1 componente para " 96 "( Figura 3 )

• No Inspetor de objetos, defina o valor de " Frequência "propriedade do SineIntegerGenerator1 componente para " 0,2 "( Imagem 4 )

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

• No Inspetor de objetos, defina o valor de " Amplitude "propriedade do SineIntegerGenerator2 componente para " 120 "( Imagem 1 )

• No Inspetor de objetos, defina o valor de " Deslocamento "propriedade do SineIntegerGenerator2 componente para " 120 "( Imagem 2 )

• No Inspetor de objetos, defina o valor de " Frequência "propriedade do SineIntegerGenerator2 componente para " 0,03 "( Figura 3 )

• Conecte o " Saída "pino de saída do SineIntegerGenerator1 componente para o " X "pino de entrada do" Shields.TFT Sisplay.Elements.Draw Bitmap1 "elemento do Arduino componente ( Figura 4 )

• Conecte o " Saída "pino de saída do SineIntegerGenerator2 componente para o " Y "pino de entrada do" Shields.TFT Display.Elements.Draw Bitmap1 "elemento do Arduino componente ( Figura 5 )

Etapa 10:No Visuino:adicione e conecte os componentes Start e Clock Multi Source

• Digite " repetir "na caixa Filtro da caixa de ferramentas de componentes e, em seguida, selecione" Repetir componente "( Figura 1 ), e solte-o na área de design ( Figura 2 )

• Digite " multi "na caixa Filtro da caixa de ferramentas do componente e, a seguir, selecione" Fonte múltipla do relógio componente "( Figura 2 ), e solte-o na área de design ( Figura 3 )

• Conecte o " Saída "pino de saída do Repetir1 componente para o " In "pino de entrada do ClockMultiSource1 componente ( Figura 3 )

• Conecte o " pino [0] "pino de saída do" Saída "pinos do ClockMultiSource1 componente para o " In "pino de entrada do SineIntegerGenerator1 componente ( Figura 4 )

• Conecte o " pino [0] "pino de saída do" Saída "pinos do ClockMultiSource2 componente para o " In "pino de entrada do SineIntegerGenerator1 componente ( Figura 5 )

• Conecte o " pino [1] "pino de saída do" Relógio "pino de entrada do" Shields.TFT Display.Elements.Draw Bitmap1 "elemento do Arduino componente ( Figura 6 )

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

• No Visuino , Pressione F9 ou clique no botão mostrado na Figura 1 para gerar o código do Arduino e abrir o IDE do Arduino

• No Arduino IDE , clique em Upload botão, para compilar e enviar o código ( Figura 2 )

Etapa 12:e brincar ...