BluBerriSix: un tutorial de pantalla táctil TFT / Arduino: 12 pasos (con imágenes)

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

¡2019 es el 20 aniversario del RIM Blackberry 850! Este pequeño invento canadiense cambió la forma en que el mundo se comunica. Hace mucho que se fue, ¡pero su legado continúa!

En este instructivo, aprenderá cómo usar el protector de pantalla TFT de 2.4 de MCUfriend.com para el Uno / Mega. Aprenderá a mostrar objetos gráficos y texto y cómo recibir toques y actuar en los eventos táctiles. Esto La pantalla es muy similar a Adafruit y otros escudos / pantallas TFT, así que si estás aquí, quédate para ver el espectáculo.

Construiremos una versión simplificada de 2 aplicaciones de mi boceto de bluBerriSIX.

¡Empecemos!

Paso 1: BluBerriSIX - Descripción general

La aplicación bluBerriSIX es un proyecto TFT de seis funciones.

Incluye:

Una linterna

Una aplicación Saucy '7' (como una bola mágica '8')

Una calculadora

Una aplicación de medición de distancia que utiliza el sensor de distancia ultrasónico SR-04

Una aplicación de temperatura y humedad que también registra datos en tiempo real hasta 1,5 km con el transceptor HC-12

Una aplicación de mensajes de texto con HC-12.

Este proyecto tomó 1100 líneas de código. Construiremos una versión considerablemente más simple que aún demuestra los conceptos de pantalla TFT y detección táctil.

Paso 2: ¿Qué se necesita?

- Un Arduino Uno o Mega 2560

- Un escudo TFT MCUfriend de 2,4"

Las siguientes bibliotecas:

- Biblioteca Adafruit_GFX

- Biblioteca de pantalla táctil Adafruit

- Biblioteca MCUFRIEND_kbv

Estas bibliotecas se pueden instalar con el Administrador de bibliotecas dentro del IDE de Arduino.

Para cargar una biblioteca, vaya a la opción de menú Sketch -> Incluir biblioteca -> Administrar bibliotecas….

En el campo 'filtrar su búsqueda …', ingrese los primeros caracteres del nombre de la biblioteca y luego seleccione e instale la biblioteca apropiada. Cuando termine, simplemente salga de esta pantalla.

Al montar el protector TFT en el Uno / Mega, TENGA MUCHO CUIDADO para asegurarse de que está alineando los pines correctamente. Desalineé mi primer escudo y lo frí. Pasé dos semanas de creciente frustración tratando de encontrar las bibliotecas correctas antes de darme cuenta de que la pantalla estaba muerta. ¡TEN CUIDADO

Paso 3: nuestro proyecto

Construiremos una versión más simple del boceto de bluBerriSIX.

Tendrá, - una pantalla de bienvenida

- una pantalla de menú principal con dos botones

- una aplicación Saucy 7

- una aplicación de entrada de texto simplificada

También podrá regresar al menú principal presionando el ícono 'Inicio' en la parte inferior izquierda de esta pantalla en particular. Si no tiene un icono de este tipo, solo tendrá que definir una región de "inicio" de su pantalla. Aprenderá a determinar las regiones táctiles de la pantalla en este tutorial.

Aunque este es un proyecto simplificado, todavía es bastante largo. Proporcionaré versiones de los bocetos de Arduino en cada etapa principal para que pueda cargarlos si lo desea.

Paso 4: Código de encabezado, variables globales, configuración de pantalla

Todo el proyecto está muy documentado. Pero los detalles siguen.

Inicie un nuevo proyecto de Arduino y llámelo 'tft demo' o cualquier otro nombre que desee.

El primer panel de código de arriba nos muestra la definición de variables globales. También agregamos las bibliotecas que necesitaremos usar tanto para la función de visualización de la pantalla como para la detección táctil de la pantalla.

También definimos los pines analógicos con referencia a sus propósitos específicos de pantalla.

Definimos el objeto tft (display) y el objeto ts (touch) como referencias para sus respectivas funciones.

Definimos algunas constantes de color de 16 bits para facilitar la representación de los colores de la pantalla y de los objetos de texto y gráficos. Notará que hay una URL a un sitio web que tiene un selector de color y un convertidor para convertir los colores visibles a sus valores hexadecimales de 16 bits. Es una herramienta muy útil.

En el segundo panel de código, definimos las variables globales para los propósitos específicos de nuestra aplicación.

Las cadenas y matrices cString, letter y letterX y letterY se utilizan para a) mostrar las letras en los botones para la aplicación de entrada de texto yb) hacer coincidir las coordenadas xey de un toque con las coordenadas xey de cada letra respectiva en el teclado. Más sobre esto cuando lleguemos a esa sección del boceto.

funcX , funcY y func son matrices que funcionan para determinar qué botón de la aplicación se presionó en la pantalla del menú principal y luego usan esa información para iniciar la aplicación respectiva.

lastTouch y tThresh se usan en los métodos táctiles para asegurarnos de que no recibamos múltiples toques al presionar la pantalla por mucho tiempo. Más sobre eso más tarde.

La variable de modo controlará qué pantalla se muestra y la variable tMode controlará qué métodos táctiles se están utilizando en un momento dado.

En el bloque setup (), abrimos un canal serial si queremos usar los comandos Serial.println () para depurar. No necesita esta línea si no desea realizar la depuración de Serial Monitor.

Las siguientes cuatro líneas son solo el código de configuración para el objeto tft.

A continuación, configuramos la orientación de la pantalla en modo Retrato.

El comando randomSeed () simplemente inicia el generador de números aleatorios para su uso posterior por la aplicación Saucy 7.

Finalmente llamamos al método de la pantalla de bienvenida.

Paso 5: Creación de la pantalla Spash y comprensión de la visualización frente al mapeo táctil

Ahora comenzaremos a construir la pantalla spash.

Pero primero, mire la imagen para ver la pantalla y el mapeo táctil. Tenga en cuenta que los orígenes se encuentran en diferentes ubicaciones. Para la visualización, el origen (0, 0) está en la parte superior izquierda de la pantalla (cuando el botón RESET está en la parte superior) y crece de izquierda a derecha y de arriba a abajo.

Para la detección táctil, el origen está en la esquina inferior izquierda de la pantalla y crece de izquierda a derecha y de abajo hacia arriba.

Por lo tanto, los MAPAS DE PANTALLA Y TÁCTIL SE DEFINEN POR SEPARADO y tienen diferentes resoluciones. La pantalla tiene una resolución de 240 por 320 y el toque tiene una resolución mucho más alta, como pronto verá.

Vaya a un área de su boceto debajo del método loop () {} e ingresaremos el código del método splash ().

Comenzamos haciendo un comando fillScreen () para llenar la pantalla con el color BLANCO que definimos en el código del encabezado.

Luego, configuramos el tamaño del texto en '5'. Este es un tamaño de texto básico relativamente grande. Establecemos la posición xey para el cursor de texto y establecemos el color del texto. Finalmente, el comando de impresión ("TFT") realmente dibuja el texto azul, tamaño '5' en la posición especificada.

A medida que aumenta el tamaño del texto, verá que los caracteres se vuelven cada vez más gruesos. Por lo tanto, superar el 5 probablemente no sea útil. Al final de este tutorial, le mostraré cómo usar fuentes de mapa de bits para obtener un texto de mejor apariencia en sus aplicaciones. La compensación es que el uso de conjuntos de fuentes de mapa de bits ocupa mucha memoria en su Arduino, lo que limitará el tamaño de sus bocetos

Repetimos comandos similares para los otros dos elementos de texto en la pantalla de inicio.

Finalmente, demoramos 2.5 segundos para darle al usuario la oportunidad de leer el contenido de la pantalla antes de que la aplicación se mueva a la pantalla del menú principal.

Continúe y cargue este boceto en su Arduino. Debería mostrar la pantalla de bienvenida.

Paso 6: creación de una herramienta de diagnóstico de mapeo táctil

El método showTouch () es muy útil para ayudarlo a obtener las coordenadas táctiles de diferentes partes de la pantalla. Deberá hacer esto para definir las regiones táctiles para sus botones.

Continúe e ingrese este método debajo de su método splash () hecho anteriormente.

Así es como funciona.

La sentencia if determina si ha pasado suficiente tiempo desde el último toque. Toma el tiempo actual del sistema milis () y resta el tiempo de lastTouch. Si es mayor que el valor tThresh (200 milisegundos), acepta el toque. De lo contrario, ignorará los eventos multitáctiles accidentales.

A continuación, el comando getpoint () obtiene las coordenadas x, y y z del toque. La coordenada z es una medida de la presión táctil.

Si la presión está dentro de las constantes máxima y mínima que definimos en el encabezado del boceto, el método primero cambiará los pines YP y XM a SALIDA, poniendo la pantalla en modo PANTALLA.

A continuación, dibujará un rectángulo blanco para borrar las coordenadas que se hayan mostrado anteriormente.

Luego, el boceto establece la fuente en tamaño 2, color negro y muestra las coordenadas x (p.x) e y (p.y) en la pantalla. Luego, puede tomar nota de estas ubicaciones para ayudarlo a programar sus zonas táctiles para sus propios bocetos.

La instrucción if en la parte inferior del método verifica si se presionó el botón 'Inicio' en la pantalla. los operadores '<=' permiten el ancho y alto del botón Inicio. Las coordenadas especificadas son las coordenadas del centro xy del centro y del botón Inicio. Si se presiona, el modo se establece en 0, lo que eventualmente significará 'Ir a la pantalla del menú principal'. Más sobre eso más tarde.

Finalmente, actualizamos lastTouch a la hora actual del sistema milis () para prepararnos para un evento táctil posterior.

Ahora vaya al bloque loop () y agregue la línea showTouch ();

En este punto, cargue su boceto y pruébelo. Dibujará la pantalla de bienvenida y si comienza a tocar la pantalla, las coordenadas TOUCH xey se mostrarán en la pantalla.

Antes de continuar, revisemos dos líneas importantes de código:

pinMode (YP, SALIDA); // restaurar los pines de control TFT

pinMode (XM, OUTPUT); // para visualización después de detectar un toque

Cada vez que desee mostrar algo en la pantalla, DEBE ejecutar estos dos comandos para cambiar la pantalla del modo TÁCTIL al modo PANTALLA. De lo contrario, sus comandos de pantalla no funcionarán.

¡Bien hecho hasta ahora! ¡Tomar un descanso!

Paso 7: Cree la pantalla del menú principal

Ahora crearemos nuestra pantalla de menú principal con dos botones que puede presionar para activar cada aplicación. El método se llama menuScreen ().

Empezamos poniendo la pantalla en modo DISPLAY.

Luego configuramos el tamaño, el color y la posición de la fuente e imprimimos el texto del 'Menú principal'.

Ahora dibujamos dos rectángulos que son los botones.

Todos los comandos gráficos tienen una estructura similar:

graphicShape (coordenada x, coordenada y, ancho, alto, COLOR)

- coordenada x - arriba a la izquierda para objetos rectangulares, centro para círculos

- coordenada y - arriba a la izquierda para objetos rectangulares, centro para círculos

- ancho - ancho del objeto en píxeles

- COLOR: una constante de color que definimos en el encabezado

Finalmente, llamamos a dos métodos para dibujar el icono de Saucy 7 y el icono de entrada de texto QWERTY. Esos son métodos separados.

El método draw7icon (0) toma un parámetro entero que es el desplazamiento y para dibujar la bola. Hacemos esto para poder usar el mismo método para dibujar la bola en la pantalla del menú Y en la pantalla de la aplicación Saucy 7. El desplazamiento solo nos permite ajustar programáticamente la coordenada y de la bola hacia arriba o hacia abajo.

El método draw7Ball (0) se llama desde dentro de draw7Icon (0). También lleva un parámetro que nos permite ajustar la posición vertical de la bola en función de si la dibujamos en la pantalla del menú o en la pantalla de la aplicación.

El comando fillCircle () toma 4 argumentos.

- coordenada x del centro del círculo

- coordenada y del centro del círculo

- radio del círculo (en píxeles)

- COLOR: una constante de color que definimos en el encabezado

Finalmente, se llama al método drawTextIcon () para dibujar el icono de la aplicación Text Entry.

Puede intentar ejecutar el método comentando el método splash () en setup () y agregando menuScreen ().

¡Sube el boceto a tu Arduino y pruébalo!

Paso 8: La aplicación Saucy 7 y los métodos del menú principal

El método sevenScreen () dibujará la pantalla de la aplicación, lo que incluye dibujar la pelota y luego mostrar las instrucciones.

El método sevenInstr () muestra las instrucciones y borra la pantalla de las respuestas anteriores. También dibuja el botón 'Respuesta'.

El método show7Response () se encarga de borrar el método de respuesta anterior de la pantalla, mostrar un mensaje animado "pensando …" y luego mostrar el mensaje de respuesta elegido al azar.

read7Touch () es el método que espera a que un evento táctil produzca el mensaje generado aleatoriamente. El código táctil es muy similar al método de diagnóstico showTouch () descrito anteriormente. Para simplificar, el método aceptará un toque en cualquier parte de la pantalla como el toque del botón 'Responder'.

En la parte superior del método, definimos una matriz de cadenas de respuesta que son los mensajes que se pueden generar a partir de un evento táctil.

Si se presiona el botón Inicio, finalizará la aplicación y volverá a la pantalla del menú principal. De lo contrario, el método generará un número aleatorio entre 0 y 7 (exclusivo) y pasará el mensaje de texto correspondiente de la matriz response al método show7Response ().

Finalmente, el método backToMenu () busca un toque del botón Inicio y devuelve el control a la pantalla del menú principal.

El método readMenuTouch () busca un evento táctil cuando estás en la pantalla del menú principal. Cuando se detecta un toque, pasa las coordenadas xey al método getFunc (x, y) que busca en las matrices funcX y funcY para que coincida con las coordenadas xey del toque. Luego devuelve el número de la matriz func para la aplicación que se seleccionó. '1' es Saucy 7 y '2' es la aplicación de entrada de texto. Luego establece el modo en el valor de esa aplicación para que se ejecute.

Paso 9: El bloque Loop ()

Ahora comenzaremos a construir el código de bloque loop () para manejar la visualización de la pantalla apropiada y luego llamar a los métodos táctiles apropiados basados en la opción actualmente seleccionada.

El método loop () consta de dos estructuras switch ().

La estructura del interruptor superior se encarga de mostrar la pantalla adecuada según la opción seleccionada. También establece el valor de tMode para que se ejecute el método táctil apropiado para la opción seleccionada actualmente. Finalmente, establece el valor de modo en 9 para que la pantalla de visualización no se vuelva a dibujar interminablemente.

La estructura del interruptor inferior controla qué métodos táctiles se están ejecutando en función de la opción de aplicación seleccionada por el usuario representada por el valor de tMode.

Cargue el boceto en su Arduino y debería poder seleccionar y usar la aplicación Saucy 7.

¡Has trabajado mucho! Tomar un descanso:-)

Paso 10: La aplicación de entrada de texto: ¡estamos en la recta final

Ahora incorporaremos los métodos de la aplicación de entrada de texto.

makeKbd () dibuja el teclado en la pantalla.

Dibuja seis rectángulos redondeados rellenos y luego superpone la letra apropiada en cada 'clave' obteniendo la letra de la cadena cString que imprime en la pantalla sobre la clave. Observe que el penúltimo parámetro de un comando fillRoundedRect () es el radio de cada esquina en píxeles. Cuanto mayor sea este valor, más redondeadas serán las esquinas.

El método readKbdTouch () funciona de manera similar a los otros métodos de detección táctil.

Si se detecta un toque que NO está en el botón Inicio, pasa las coordenadas xey al método curChar (x, y) que devuelve el carácter que corresponde a esa ubicación xey en la pantalla. El mensaje que se ha 'escrito' se muestra en la pantalla utilizando el método 'displayMsg (theChar).

El método curChar (x, y) busca a través de las matrices letterX y letterY para intentar encontrar una coincidencia que esté cerca de las coordenadas xey pasadas desde readKbdTouch (). Si encuentra una coincidencia, devuelve la letra correspondiente al método readKbdTouch. Observe que inicializamos la variable theChar a 32, que es el código ASCII para un carácter de espacio ''. Hacemos esto para que si el usuario toca un área fuera del teclado, no se mostrarán los caracteres no disponibles.

El método displayMsg (theChar) toma el carácter devuelto por curChar (x, y) y lo agrega a la cadena msg. Luego muestra el mensaje en la pantalla.

Finalmente, actualizaremos el bloque loop () para aceptar la selección de la aplicación de entrada de texto.

Sube el boceto de tftDemo a tu Arduino y deberías poder usar la aplicación completa.

¡Felicidades! ¡Ha creado una aplicación de pantalla táctil TFT! ¡Tómate el resto del día libre!

Paso 11: ¡Ponte elegante! - Uso de fuentes de mapa de bits de Adafruit en su boceto

El conjunto de fuentes tft estándar está bien. Pero es mejor si podemos usar fuentes de mapa de bits adecuadas en nuestros bocetos TFT.

La desventaja es que cargar conjuntos de fuentes en la memoria Arduino ocupa un espacio significativo. De hecho, es muy fácil llenar su boceto con tantas fuentes que no se cargará en el Arduino.

Las fuentes están disponibles dentro de la carpeta de la biblioteca Adafruit_GFX que ya instaló para este proyecto. En este sitio encontrará un excelente tutorial sobre el uso de fuentes.

En el área de Encabezado de su boceto, agregue la referencia de fuente para la fuente que desea usar. Usaremos la fuente FreeSerifBoldItalic18p7b para este ejemplo.

#incluir

En su método splash (), comente el tft.setTextSize (); mando.

Agregue el siguiente comando,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Ahora cualquier comando print () usará la fuente especificada actualmente. Para cambiar a una fuente diferente, usaría otro comando tft.setFont () con la siguiente fuente que le gustaría usar.

Para volver a establecer la fuente en la fuente tft estándar, simplemente use un tft.setFont (); comando sin parámetro.

Sube el boceto a tu Arduino y deberías ver que la pantalla de inicio ahora usa la fuente de mapa de bits para representar el texto en la pantalla. Notará que el tamaño del boceto es significativamente mayor ahora que ha incluido una fuente.

Paso 12: Pensamientos finales

Hay muchos otros comandos de objetos gráficos disponibles. Incluyen:

tft.drawRect (x, y, ancho, alto, COLOR);

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

Los siguientes ejemplos utilizan el método tft.color565 para permitirle especificar el color en función de los valores de rojo, verde y azul. Esta es una forma alternativa de usar los valores de color HEX definidos constantes que usamos en nuestro boceto.

tft.drawRoundRect (x, y, ancho, alto, radio, tft.color565 (255, 0, 0)); // esto sería rojo

tft.drawCircle (x, y, radio, tft.color565 (0, 255, 0)); // esto sería 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);

Juegue con estos comandos y explore cómo se pueden agregar a sus proyectos TFT.

Aprender a usar una pantalla TFT es un desafío y debe estar orgulloso de sí mismo por tomarse el tiempo para aprender estos primeros pasos.

Las pantallas TFT pueden agregar un aspecto atractivo y útil de la interfaz gráfica de usuario a sus proyectos Arduino.

Gracias por trabajar en este tutorial.

¡AHORA SAL Y HAZ ALGO MARAVILLOSO!