Calculadora de pantalla táctil Arduino usando tft lcd

Arduino siempre ha ayudado a construir proyectos fácilmente y hacer que parezcan más atractivos. Programar una pantalla LCD con opción de pantalla táctil puede parecer una tarea complicada, pero las bibliotecas y los escudos de Arduino lo han hecho realmente fácil. En este proyecto usaremos una pantalla LCD TFT Arduino de 2.4 ” para construir nuestra propia calculadora de pantalla táctil Arduino que podría realizar todos los cálculos básicos como suma, resta, división y multiplicación.

Materiales necesarios:

Arduino Uno
Pantalla LCD TFT de 2,4 ”Shield
Batería de 9V.

Conociendo el módulo de pantalla LCD TFT:

Antes de sumergirnos realmente en el proyecto, es importante saber cómo funciona este módulo LCD TFT de 2,4 ” y cuáles son los tipos presentes en él. Echemos un vistazo a los pines de este módulo de pantalla LCD TFT de 2.4 ”.

Como puede ver, hay 28 pines que encajarán perfectamente en cualquier placa Arduino Uno / Arduino Mega. En la siguiente tabla se ofrece una pequeña clasificación de estos pines.

Como puede ver, los pines se pueden clasificar en cuatro clasificaciones principales, como pines de comando LCD, pines de datos LCD, pines de tarjeta SD y pines de alimentación. No necesitamos saber mucho sobre el funcionamiento detallado de estos pines, ya que serán atendidos por nuestra biblioteca Arduino.

También puede encontrar una ranura para tarjeta SD en la parte inferior del módulo que se muestra arriba, que se puede usar para cargar una tarjeta SD con archivos de imagen bmp, y estas imágenes se pueden mostrar en nuestra pantalla LCD TFT usando el Programa Arduino.

Otra cosa importante a tener en cuenta es su interfaz IC. Hay muchos tipos de módulos TFT disponibles en el mercado, desde el módulo original Adafruit TFT LCD hasta clones chinos baratos. Es posible que un programa que funcione perfectamente para su escudo Adafruit no funcione de la misma manera para las placas de conexión chinas. Por lo tanto, es muy importante saber qué tipo de pantalla LCD tiene en la mano. Este detalle debe obtenerse del proveedor. Si tiene un clon barato como el mío, lo más probable es que esté utilizando el controlador IC ili9341. Puede seguir este tutorial de interfaz TFT LCD con Arduino para probar algunos programas de ejemplo básicos y familiarizarse con la pantalla LCD. Consulte también nuestros otros proyectos de TFT LCD con Arduino aquí:

Cómo utilizar la tira de LED NeoPixel con Arduino y TFT LCD
Bloqueo de código digital controlado por teléfono inteligente usando Arduino

Calibración de la pantalla LCD TFT para pantalla táctil:

Si planea utilizar la función de pantalla táctil de su módulo TFT LCD, entonces debe calibrarlo para que funcione correctamente. Es poco probable que una pantalla LCD sin calibración funcione, por ejemplo, puede tocar en un lugar y el TFT puede responder por un toque en otro lugar. Los resultados de estas calibraciones no serán similares para todas las placas y, por lo tanto, debe hacer esto solo.

La mejor manera de calibrar es usar el programa de ejemplo de calibración (viene con la biblioteca) o usar el monitor serial para detectar su error. Sin embargo, para este proyecto, dado que el tamaño de los botones es grande, la calibración no debería ser un gran problema y también explicaré cómo puede calibrar su pantalla en la sección de programación a continuación.

Conexiones de TFT LCD con Arduino:

La pantalla LCD TFT de 2.4 ”es un Arduino Shield perfecto. Puede empujar directamente la pantalla LCD en la parte superior del Arduino Uno y se combinará perfectamente con los pines y se deslizará. Sin embargo, por cuestiones de seguridad cubre el terminal de Programación de tu Arduino UNO con una pequeña cinta aislante, por si el terminal entra en contacto con tu pantalla LCD TFT. La pantalla LCD ensamblada en UNO se verá así a continuación.

Programación de su Arduino para TFT LCD:

Estamos usando la biblioteca SPFD5408 para que este código de calculadora arduino funcione. Esta es una biblioteca modificada de Adafruit y puede funcionar sin problemas con nuestro módulo LCD TFT. Puede consultar el programa completo al final de este artículo.

Nota: Es muy importante que instale esta biblioteca en su IDE de Arduino o este programa para compilar sin ningún error.

Para instalar esta biblioteca, simplemente puede hacer clic en el enlace de arriba que lo llevará a una página de Github. Allí haga clic en clonar o descargar y seleccione "Descargar ZIP". Se descargará un archivo zip.

Ahora, abra Arduino IDE y seleccione Sketch -> Incluir Librarey -> Agregar biblioteca.ZIP. Se abrirá una ventana del navegador, navegue hasta el archivo ZIP y haga clic en "Aceptar". Debería notar "Biblioteca agregada a sus bibliotecas" en la esquina inferior izquierda de Arduino, si tiene éxito. En el Tutorial de interfaz se proporciona una guía detallada para hacer lo mismo.

Ahora, puede usar el código siguiente en su IDE de Arduino y cargarlo en su Arduino UNO para que funcione la calculadora de pantalla táctil. Más abajo, he explicado el código en pequeños segmentos.

Necesitamos tres bibliotecas para que este programa funcione; Todas estas tres bibliotecas se proporcionaron en el archivo ZIP que descargó del enlace proporcionado anteriormente. Simplemente los he incluido en el código como se muestra a continuación.

#incluir // Biblioteca de gráficos centrales #include // Biblioteca específica de hardware #include

Como se dijo anteriormente, necesitamos calibrar la pantalla LCD para que funcione como se esperaba, pero no se preocupe, los valores dados aquí son casi universales. Las variables TS_MINX, TS_MINY, TS_MAXX y TS_MAXY deciden la calibración de la pantalla. Puede jugar alrededor de ellos si cree que la calibración no es satisfactoria.

#define TS_MINX 125 #define TS_MINY 85 #define TS_MAXX 965 #define TS_MAXY 905

Como sabemos, la pantalla TFT LCD puede mostrar muchos colores, todos estos colores deben ingresarse en valor hexadecimal. Para hacerlo más legible, asignamos estos valores a una variable como se muestra a continuación.

#define BLANCO 0x0000 // Negro-> Blanco #define AMARILLO 0x001F // Azul-> Amarillo #define CYAN 0xF800 // Rojo-> Cyan #define PINK 0x07E0 // Verde-> Rosa #define ROJO 0x07FF // Cyan -> Rojo #define VERDE 0xF81F // Rosa -> Verde #define AZUL 0xFFE0 // Amarillo-> Azul #define BLACK 0xFFFF // Blanco-> Negro

Bien, podemos entrar en la parte de programación. Hay tres secciones involucradas en este programa. Uno es crear una interfaz de usuario de una calculadora con botones y pantalla. Luego, detectando los botones en función del toque de los usuarios y finalmente calculando los resultados y visualizándolos. Repasemos uno por uno.

1. Creación de una interfaz de usuario de Calculadora:

Aquí es donde puede utilizar gran parte de su creatividad para diseñar la interfaz de usuario de la calculadora. Simplemente hice un diseño básico de una calculadora con 16 botones y una unidad de visualización. Tienes que construir el diseño como dibujarás algo en MS Paint. Las bibliotecas agregadas le permitirán dibujar líneas, rectángulos, círculos, caracteres, cadenas y mucho más de cualquier color preferido. Puede comprender las funciones disponibles en este artículo.

He utilizado las habilidades de dibujo de líneas y cuadros para diseñar una interfaz de usuario que se parece mucho a la calculadora de los 90. Cada cuadro tiene un ancho y un alto de 60 píxeles.

// Dibuja el cuadro de resultados tft.fillRect (0, 0, 240, 80, CYAN); // Dibujar la primera columna tft.fillRect (0,260,60,60, RED); tft.fillRect (0,200,60,60, NEGRO); tft.fillRect (0,140,60,60, NEGRO); tft.fillRect (0,80,60,60, NEGRO); // Dibujar la tercera columna tft.fillRect (120,260,60,60, VERDE); tft.fillRect (120,200,60,60, NEGRO); tft.fillRect (120,140,60,60, NEGRO); tft.fillRect (120,80,60,60, NEGRO); // Dibujar segunda y cuarta columna para (int b = 260; b> = 80; b- = 60) {tft.fillRect (180, b, 60,60, BLUE); tft.fillRect (60, b, 60,60, BLACK);} // Dibujar líneas horizontales para (int h = 80; h <= 320; h + = 60) tft.drawFastHLine (0, h, 240, BLANCO); // Dibujar líneas verticales para (int v = 0; v <= 240; v + = 60) tft.drawFastVLine (v, 80, 240, WHITE); // Mostrar las etiquetas del teclado para (int j = 0; j <4; j ++) {for (int i = 0; i <4; i ++) {tft.setCursor (22 + (60 * i), 100 + (60 * j)); tft.setTextSize (3); tft.setTextColor (BLANCO); tft.println (símbolo);

2. Detectando los botones:

Otra tarea desafiante es detectar el toque del usuario. Cada vez que el usuario toque en algún lugar podremos ver dónde están las posiciones X e Y del píxel que tocó. Este valor se puede mostrar en el monitor en serie utilizando println como se muestra a continuación.

TSPoint p = waitTouch (); X = py; Y = px; Serial.print (X); Serial.print (','); Serial.println (Y); // + "" + Y);

Ya que hemos diseñado la caja con ancho y alto de 60 píxeles cada uno y tenemos cuatro Filas y para columnas a partir de (0,0). La posición de cada cuadro se puede predecir como se muestra en la imagen de abajo.

Pero en un caso práctico, este no será el resultado. Habrá una gran diferencia entre el valor esperado y el real debido al problema de calibración.

Entonces, para predecir la posición exacta de la caja, debe hacer clic en la línea y verificar su posición correspondiente en el monitor de serie. Puede que esta no sea la forma más profesional de hacerlo, pero aún así funciona perfectamente. Medí la posición de todas las líneas y obtuve los siguientes valores.

Ahora, ya que conocemos la posición de todas las casillas. Cuando un usuario toca cualquier lugar, podemos predecir dónde ha tocado comparando sus valores (X, Y) con el valor de cada cuadro como se muestra a continuación.

if (X <105 && X> 50) // Detectando botones en la columna 2 {if (Y> 0 && Y <85) {Serial.println ("Botón 0"); // El botón 0 se presiona si (Número == 0) Número = 0; más Número = (Número * 10) + 0; // Presionado dos veces} if (Y> 85 && Y <140) {Serial.println ("Botón 2"); si (Número == 0) Número = 2; más Número = (Número * 10) + 2; // Presionado dos veces}

3. Visualización de números y cálculo del resultado:

El último paso es calcular el resultado y mostrarlo en la pantalla LCD TFT. Esta calculadora arduino puede realizar operaciones con 2 números solamente. Estos dos números se denominan variables "Num1" y "Num2". La variable "Número" da y toma valor de Num1 y Num2 y también lleva el resultado.

Cuando un usuario presiona un botón, se agrega un dígito al número. Cuando se presiona otro botón, el dígito anterior se multiplica por 10 y se agrega el nuevo número con él. Por ejemplo, si presionamos 8 y luego presionamos 5 y luego presionamos 7. Entonces primero la variable contendrá 8 luego (8 * 10) + 5 = 85 luego (85 * 10) +7 = 857. Entonces finalmente la variable tendrá el valor 857 con él.

if (Y> 192 && Y <245) {Serial.println ("Botón 8"); si (Número == 0) Número = 8; más Número = (Número * 10) + 8; // Presionado de nuevo}

Cuando realizamos cualquier operación como suma, cuando los usuarios presionan el botón de suma, el valor de Número se transferirá a Num1 y luego Número se hará cero para que esté listo para tomar la entrada para el segundo número.

Cuando se presiona Igual el valor en Número se enviará a Num2 y luego se realizará el cálculo respectivo (en este caso la suma) y el resultado se almacenará nuevamente en la variable “Número”.

Finalmente, este valor se mostrará en la pantalla LCD.

Trabajando:

El funcionamiento de esta calculadora de pantalla táctil Arduino es simple. Debe cargar el código que se indica a continuación en su Arduino y encenderlo. Obtienes la calculadora mostrada en tu pantalla LCD.

Ahora, puede ingresar cualquier número y realizar sus cálculos. Está limitado a solo dos operandos y solo operador por ahora. Pero puedes modificar el código para que tenga muchas opciones.

Tienes que presionar la “C” para borrar el valor en la pantalla cada vez después de realizar un cálculo. Espero que haya entendido el proyecto y haya disfrutado construyendo algo similar. Si tiene alguna duda, no dude en publicarla en foros o en la sección de comentarios a continuación. Nos vemos la próxima vez con otro proyecto interesante hasta entonces feliz informática !!

Consulte también el video de demostración a continuación.