BluBerriSix - um TFT TouchScreen / Arduino Tutorial: 12 etapas (com imagens)

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

2019 é o 20º aniversário do RIM Blackberry 850! Esta pequena invenção canadense mudou a forma como o mundo se comunica. Já se foi, mas seu legado continua!

Neste instrutível, você aprenderá a usar o escudo de tela TFT de 2,4 do MCUfriend.com para o Uno / Mega. Você aprenderá como exibir objetos gráficos e texto e como receber toques e agir nos eventos de toque. A tela é muito semelhante ao Adafruit e outros escudos / telas TFT. Então, se você estiver aqui, fique por perto para assistir ao show.

Vamos construir uma versão simplificada de 2 aplicativos do meu esboço bluBerriSIX.

Vamos começar!

Etapa 1: BluBerriSIX - Visão geral

O aplicativo bluBerriSIX é um projeto TFT de seis funções.

Inclui:

Uma lanterna

Um aplicativo picante '7' (como uma bola mágica '8')

Uma calculadora

Um aplicativo de medição de distância usando o sensor de distância ultrassônico SR-04

Um aplicativo de temperatura e umidade que também registra dados em tempo real de até 1,5 km com o transceptor HC-12

Um aplicativo de mensagens de texto usando HC-12.

Este projeto ocupou 1100 linhas de código. Vamos construir uma versão consideravelmente mais simples que ainda demonstra conceitos de tela TFT e sensor de toque.

Etapa 2: o que é necessário?

- Um Arduino Uno ou Mega 2560

- Um escudo TFT de 2,4 MCUfriend

As seguintes bibliotecas:

- Biblioteca Adafruit_GFX

- Biblioteca Touchscreen Adafruit

- Biblioteca MCUFRIEND_kbv

Essas bibliotecas podem ser instaladas com o Library Manager dentro do Arduino IDE.

Para carregar uma biblioteca, vá para a opção de menu Sketch -> Incluir Biblioteca -> Gerenciar Bibliotecas….

No campo 'filtrar sua pesquisa…', insira os primeiros caracteres do nome da biblioteca e, em seguida, selecione e instale a biblioteca apropriada. Quando terminar, basta voltar para fora desta tela.

Ao montar a blindagem TFT no Uno / Mega, TENHA MUITO CUIDADO para certificar-se de alinhar os pinos corretamente. Desalinhei meu primeiro escudo e o fritei. Passei duas semanas de crescente frustração tentando encontrar as bibliotecas corretas antes de perceber que a tela estava morta. TOME CUIDADO

Etapa 3: Nosso Projeto

Vamos construir uma versão mais simples do esboço bluBerriSIX.

Vai ter, - uma tela inicial

- uma tela de menu principal com dois botões

- um aplicativo Saucy 7

- um aplicativo de entrada de texto simplificado

Você também poderá retornar ao menu principal pressionando o ícone 'Home' no canto inferior esquerdo desta tela em particular. Se você não tiver esse ícone, você apenas terá que definir uma região 'inicial' de sua tela. Você aprenderá como determinar as regiões de toque da tela neste tutorial.

Embora este seja um projeto simplificado, ainda é um pouco longo. Fornecerei versões dos esboços do Arduino em cada estágio principal para que você possa carregá-los, se desejar.

Etapa 4: código do cabeçalho, variáveis globais, configuração da tela

Todo o projeto é altamente documentado. Mas os detalhes seguem.

Inicie um novo projeto do Arduino e chame-o de 'tft demo' ou qualquer outro nome que desejar.

O primeiro painel de código acima nos mostra a definição de variáveis globais. Também adicionamos as bibliotecas que precisaremos usar para a função de exibição da tela e a detecção de toque da tela.

Também definimos os pinos analógicos com referência a seus propósitos específicos de tela.

Definimos o objeto tft (display) e o objeto ts (toque) como referências para suas respectivas funções.

Definimos algumas constantes de cores de 16 bits para facilitar a renderização das cores da tela e de objetos de texto e gráficos. Você notará que há um URL para um site que possui um Seletor de cores e um conversor para converter as cores visíveis em seus valores hexadecimais de 16 bits. É uma ferramenta muito útil.

No segundo painel de código, definimos as variáveis globais para nossos propósitos específicos do aplicativo.

As strings e matrizes cString, letter e letterX e letterY são usadas para a) exibir as letras nos botões do aplicativo de entrada de texto eb) combinar as coordenadas xey de um toque com as coordenadas xey de cada letra respectiva em o teclado. Mais sobre isso quando chegarmos a essa seção do esboço.

funcX , funcY e func são matrizes que funcionam para determinar qual botão do aplicativo foi pressionado na tela do menu principal e, em seguida, usar essas informações para iniciar o respectivo aplicativo.

lastTouch e tThresh são usados nos métodos de toque para garantir que não recebamos vários toques ao pressionar a tela por muito tempo. Mais sobre isso mais tarde.

A variável de modo controlará qual tela é exibida e a variável tMode controlará quais métodos de toque estão sendo usados a qualquer momento.

No bloco setup (), abrimos um canal Serial se quisermos usar os comandos Serial.println () para depuração. Você não precisa desta linha se não desejar fazer a depuração do Serial Monitor.

As próximas quatro linhas são apenas códigos de configuração para o objeto tft.

Em seguida, definimos a orientação da tela para o modo Retrato.

O comando randomSeed () apenas inicia o gerador de números aleatórios para uso posterior pelo aplicativo Saucy 7.

Por fim, chamamos o método da tela inicial.

Etapa 5: Construindo a Tela Spash e Entendendo Display versus Mapeamento por Toque

Agora vamos começar a construir a tela spash.

Mas primeiro, olhe para a imagem para mapeamento de tela e toque. Observe que as origens estão em locais diferentes. Para exibição, a origem (0, 0) está no canto superior esquerdo da tela (quando o botão RESET está no topo) e cresce da esquerda para a direita e de cima para baixo.

Para detecção de toque, a origem está no canto esquerdo inferior da tela e cresce da esquerda para a direita e de baixo para cima.

Portanto, os MAPAS DE EXIBIÇÃO E DE TOQUE SÃO DEFINIDOS SEPARADAMENTE e têm resoluções diferentes. A tela tem uma resolução de 240 por 320 e o toque tem uma resolução muito maior como você verá em breve.

Vá para uma área do seu esboço abaixo do método loop () {} e nós inseriremos o código do método splash ().

Começamos fazendo um comando fillScreen () para preencher a tela com a cor BRANCA que definimos no código do cabeçalho.

Em seguida, definimos o tamanho do texto para '5'. Este é um tamanho de texto básico relativamente grande. Definimos a posição xey para o cursor de texto e definimos a cor do texto. Finalmente, o comando print ("TFT") realmente desenha o texto azul, tamanho '5' na posição especificada.

Conforme você aumenta o tamanho do texto, você verá que os caracteres ficam cada vez mais grossos. Portanto, ir acima de 5 provavelmente não é útil. No final deste tutorial, mostrarei como usar fontes de bitmap para obter um texto de aparência mais agradável em seus aplicativos. A desvantagem é que o uso de conjuntos de fontes de bitmap ocupa muita memória em seu Arduino, o que limitará os tamanhos de seu esboço

Repetimos comandos semelhantes para os outros dois itens de texto na tela inicial.

Por fim, atrasamos 2,5 segundos para dar ao usuário a chance de ler o conteúdo da tela antes que o aplicativo vá para a tela do menu principal.

Vá em frente e carregue este esboço em seu Arduino. Ele deve exibir a tela inicial.

Etapa 6: Fazendo uma ferramenta de diagnóstico de mapeamento de toque

O método showTouch () é muito útil para ajudá-lo a obter as coordenadas de toque de diferentes partes da tela. Você precisará fazer isso para definir as regiões de toque para seus botões.

Vá em frente e insira este método abaixo do método splash () feito anteriormente.

É assim que funciona.

A instrução if determina se um tempo suficiente passou desde o último toque. Leva o tempo atual do sistema em milis () e subtrai o tempo do último toque. Se for maior que o valor de tThresh (200 milissegundos), ele aceita o toque. Caso contrário, ele desconsiderará eventos multitoque acidentais.

Em seguida, o comando getpoint () obtém as coordenadas x, y e z do toque. A coordenada z é uma medida de pressão de toque.

Se a pressão estiver dentro das constantes máx. E mín. Que definimos no cabeçalho do esboço, o método primeiro mudará os pinos YP e XM de volta para SAÍDA, colocando a tela no modo DISPLAY.

Em seguida, ele desenhará um retângulo branco para apagar quaisquer coordenadas que possam ter sido exibidas anteriormente.

O esboço então define a fonte para o tamanho 2, cor preta e exibe as coordenadas x (p.x) ey (p.y) na tela. Você pode então anotar esses locais para ajudá-lo a programar suas zonas de toque para seus próprios esboços.

A instrução if na parte inferior do método verifica se o botão 'Home' na tela foi pressionado. os operadores '<=' permitem a largura e a altura do botão Home. As coordenadas especificadas são as coordenadas x-center e y-center do botão Home. Se for pressionado, o modo será definido como 0, o que significará 'Ir para a tela do menu principal'. Mais sobre isso mais tarde.

Por fim, atualizamos lastTouch para os milis () de tempo do sistema atual para nos prepararmos para um evento de toque posterior.

Agora vá para o bloco loop () e adicione a linha showTouch ();

Neste ponto, carregue seu esboço e experimente. Ele desenhará a tela inicial e se você começar a tocar na tela, as coordenadas TOUCH xey serão exibidas na tela.

Antes de prosseguirmos, vamos revisitar duas linhas importantes de código:

pinMode (YP, OUTPUT); // restaura os pinos de controle TFT

pinMode (XM, OUTPUT); // para exibição após detectar um toque

Sempre que quiser exibir algo na tela, você DEVE executar esses dois comandos para mudar a tela do modo TOUCH para o modo DISPLAY. Caso contrário, seus comandos de exibição não funcionarão.

Muito bem até agora! Dar um tempo!

Etapa 7: construir a tela do menu principal

Agora vamos construir nossa tela do menu principal com dois botões que você pode pressionar para ativar cada aplicativo. O método é denominado menuScreen ().

Começamos colocando a tela no modo DISPLAY.

Em seguida, definimos o tamanho, a cor e a posição da fonte e imprimimos o texto do 'Menu Principal'.

Agora desenhamos dois retângulos que são os botões.

Todos os comandos gráficos têm uma estrutura semelhante:

graphicShape (coordenada x, coordenada y, largura, altura, COR)

- coordenada x - canto superior esquerdo para objetos retangulares, centro para círculos

- coordenada y - canto superior esquerdo para objetos retangulares, centro para círculos

- largura - largura do objeto em pixels

- COR - uma constante de cor que definimos no cabeçalho

Por fim, chamamos dois métodos para desenhar o ícone do Saucy 7 e o ícone de entrada de texto QWERTY. Esses são métodos separados.

O método draw7icon (0) usa um parâmetro inteiro que é o deslocamento y para desenhar a bola. Fazemos isso para que possamos usar o mesmo método para desenhar a bola na tela do menu E na tela do aplicativo Saucy 7. O deslocamento apenas nos permite ajustar programaticamente a coordenada y da bola para cima ou para baixo.

O método draw7Ball (0) é chamado de draw7Icon (0). Também leva um parâmetro que nos permite ajustar a posição vertical da bola dependendo se a desenhamos na tela do menu ou na tela do app.

O comando fillCircle () leva 4 argumentos.

- coordenada x do centro do círculo

- coordenada y do centro do círculo

- raio do círculo (em pixels)

- COR - uma constante de cor que definimos no cabeçalho

Finalmente, o método drawTextIcon () é chamado para desenhar o ícone para o aplicativo Text Entry.

Você pode tentar executar o método comentando o método splash () em setup () e adicionando menuScreen ().

Faça upload do esboço para o seu Arduino e experimente!

Etapa 8: O aplicativo Saucy 7 e os métodos do menu principal

O método sevenScreen () desenhará a tela para o aplicativo, incluindo desenhar a bola e, em seguida, exibir as instruções.

O método sevenInstr () exibe as instruções e também limpa a tela das respostas anteriores. Ele também desenha o botão 'Resposta'.

O método show7Response () trata de limpar o método de resposta anterior da tela, exibindo uma mensagem animada 'pensando …' e, em seguida, exibindo a mensagem de resposta escolhida aleatoriamente.

read7Touch () é o método que espera por um evento de toque para produzir a mensagem gerada aleatoriamente. O código de toque é muito semelhante ao método de diagnóstico showTouch () descrito anteriormente. Para simplificar, o método aceitará um toque em qualquer lugar da tela como o toque do botão 'Responder'.

No início do método, definimos um array response de strings que são as mensagens que podem ser geradas a partir de um evento de toque.

Se o botão Home for pressionado, o aplicativo será encerrado e retornará à tela do menu principal. Caso contrário, o método irá gerar um número aleatório entre 0 e 7 (exclusivo) e passar a mensagem de texto correspondente do array response para o método show7Response ().

Finalmente, o método backToMenu () observa um toque no botão Home e retorna o controle para a tela do menu principal.

O método readMenuTouch () observa um evento de toque quando você está na tela do menu principal. Quando um toque é detectado, ele passa as coordenadas xey para o método getFunc (x, y) que procura nos arrays funcX e funcY para coincidir com as coordenadas xey do toque. Em seguida, ele retorna o número da matriz func para o aplicativo que foi selecionado. '1' é o Saucy 7 e '2' é o aplicativo de entrada de texto. Em seguida, ele define o modo para o valor desse aplicativo para que o aplicativo seja executado.

Etapa 9: O Bloco Loop ()

Agora vamos começar a construir o código de bloco loop () para lidar com a exibição da tela apropriada e, em seguida, chamar os métodos de toque apropriados com base na opção selecionada no momento.

O método loop () consiste em duas estruturas switch ().

A estrutura da chave superior lida com a exibição da tela apropriada, dependendo da opção selecionada. Ele também define o valor tMode para o método de toque apropriado a ser executado para a opção selecionada no momento. Finalmente, ele define o valor do modo como 9 para que a tela de exibição não seja continuamente redesenhada.

A estrutura do switch inferior controla quais métodos de toque estão sendo executados com base na opção de aplicativo selecionada pelo usuário, conforme representado pelo valor de tMode.

Carregue o esboço em seu Arduino e você poderá selecionar e usar o aplicativo Saucy 7.

Você trabalhou muito! Dar um tempo:-)

Etapa 10: O aplicativo de inserção de texto - estamos em casa

Agora vamos incorporar os métodos do aplicativo de entrada de texto.

makeKbd () desenha o teclado na tela.

Ele desenha seis retângulos arredondados preenchidos e, em seguida, sobrepõe a letra apropriada em cada 'tecla', obtendo a letra da string cString que é impressa na tela sobre a tecla. Observe que o penúltimo parâmetro em um comando fillRoundedRect () é o raio de cada vértice em pixels. Quanto mais alto for esse valor, mais arredondados serão os cantos.

O método readKbdTouch () funciona de maneira semelhante aos outros métodos de detecção de toque.

Se for detectado um toque que NÃO está no botão Home, ele passa as coordenadas xey para o método curChar (x, y) que retorna o caractere que corresponde àquela localização xey na tela. A mensagem que foi 'digitada' é então exibida na tela usando o método 'displayMsg (theChar).

O método curChar (x, y) pesquisa os arrays letterX e letterY para tentar encontrar uma correspondência próxima às coordenadas xey passadas de readKbdTouch (). Se encontrar uma correspondência, ele retornará a letra correspondente ao método readKbdTouch. Observe que inicializamos a variável theChar para 32, que é o código ASCII para um caractere de espaço, ''. Fazemos isso para que, se o usuário tocar em uma área longe do teclado, ele não exiba caracteres indisponíveis.

O método displayMsg (theChar) pega o caractere retornado de curChar (x, y) e o anexa à string msg. Em seguida, exibe a mensagem na tela.

Por fim, atualizaremos o bloco loop () para aceitar a seleção do aplicativo de entrada de texto.

Faça upload do esboço tftDemo para o seu Arduino e você poderá usar o aplicativo completo.

Parabéns! você construiu um aplicativo touchscreen TFT! Tire o resto do dia de folga!

Etapa 11: Obtendo o Slick! - Usando fontes de bitmap Adafruit em seu esboço

O conjunto de fontes tft padrão está correto. Mas é melhor se pudermos usar fontes de bitmap adequadas em nossos esboços TFT.

A desvantagem é que carregar conjuntos de fontes na memória do Arduino ocupa um espaço significativo. Na verdade, é muito fácil preencher seu esboço com tantas fontes que ele não carregará no Arduino.

As fontes estão disponíveis na pasta da biblioteca Adafruit_GFX que você já instalou para este projeto. Um excelente tutorial sobre como usar fontes está neste site.

Na área do cabeçalho do seu esboço, adicione a referência da fonte para a fonte que deseja usar. Usaremos a fonte FreeSerifBoldItalic18p7b para este exemplo.

#incluir

Em seu método splash (), comente o tft.setTextSize (); comando.

Adicione o seguinte comando,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Agora, qualquer comando print () usará a fonte atualmente especificada. Para mudar para uma fonte diferente, você deve usar outro comando tft.setFont () com a próxima fonte que deseja usar.

Para definir a fonte de volta para a fonte tft padrão, basta usar um tft.setFont (); comando sem parâmetro.

Carregue o esboço em seu Arduino e você verá que a tela inicial agora usa a fonte bitmap para renderizar o texto na tela. Você notará que o tamanho do esboço é significativamente maior agora que você incluiu uma fonte.

Etapa 12: Considerações Finais

Existem muitos outros comandos de objetos gráficos disponíveis para você. Eles incluem:

tft.drawRect (x, y, largura, altura, COR);

tft.drawLine (x1, y1, x2, y2, COR);

Os exemplos a seguir usam o método tft.color565 para permitir que você especifique a cor com base nos valores de vermelho, verde e azul. Esta é uma maneira alternativa de usar os valores de cor HEX constantes e definidos que usamos em nosso esboço.

tft.drawRoundRect (x, y, largura, altura, raio, tft.color565 (255, 0, 0)); // isso seria vermelho

tft.drawCircle (x, y, raio, tft.color565 (0, 255, 0)); // isso seria verde

tft.drawTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (0, 0, 255)); // azul

tft.fillTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (255, 0, 0);

Brinque com esses comandos e explore como eles podem ser adicionados aos seus projetos TFT.

Aprender a usar uma tela TFT é um desafio e você deve se orgulhar de dedicar seu tempo para aprender esses primeiros passos.

As telas TFT podem adicionar um aspecto de interface gráfica do usuário atraente e útil aos seus projetos do Arduino.

Obrigado por trabalhar com este tutorial.

AGORA SAIA E FAÇA ALGO MARAVILHOSO!