Calculadora de pantalla táctil Arduino: 7 pasos

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

¡Hola! Este es un proyecto para hacer una calculadora con pantalla táctil usando un Arduino Uno y un protector TFT LCD. Se me ocurrió el concepto de mi clase de programación de educación en casa, y la experiencia en la construcción de este proyecto fue muy interesante. Esta calculadora puede realizar las cuatro operaciones matemáticas simples (suma, resta, multiplicación y división). También muestra hasta dos puntos decimales para las respuestas de división que los tienen. ¡Vamos a sumergirnos! Los suministros para este proyecto se enumeran a continuación.

Suministros

- Arduino Uno

- 2.4 TFT LCD Shield (aquí es donde lo compré:

- Cable USB A a B (cable para conectar Arduino a la computadora)

- Computadora con Arduino IDE instalado

- También deberá descargar dos bibliotecas: MCUFRIEND_kbv y Touchscreen. El primero lo puedes encontrar en github (enlace: https://github.com/prenticedavid/MCUFRIEND_kbv) o puedes usar el archivo zip de la biblioteca que he incluido a continuación. El segundo está en el administrador de la biblioteca Arduino para su instalación.

Paso 1: Conexiones de hardware

La conexión del protector de la pantalla táctil al Arduino Uno es simple y rápida. Todo lo que tiene que hacer es alinear los pines más bajos en el escudo con los pines más bajos en el Arduino y empujar el escudo en los pines. El pin superior de 5V y el pin sin etiqueta en el lado de alimentación no deberían tener pines del escudo en ellos, con los mismos parámetros que se aplican a los pines etiquetados como SCL y SDA en el otro lado de la placa. ¡Ahora estamos listos para codificar!

Paso 2: El Código: Definiciones globales y configuración

#incluir

MCUFRIEND_kbv tft; // cableado para los escudos UNO de todos modos

#incluir

#define YP A3

#define XM A2

#define YM 9

#define XP 8

Pantalla táctil ts = Pantalla táctil (XP, YP, XM, YM, 300);

#define MINPRESSURE 10

Este es el comienzo del código, donde incluimos bibliotecas (MCUFRIEND_kbv y pantalla táctil), definimos los pines X e Y, configuramos los parámetros de la pantalla táctil y definimos la presión mínima necesaria para que Arduino registre la pulsación de un usuario.

int ID;

int user_selection;

flotador número_salvado = 0;

término flotante1;

int op_num;

resultado flotante;

int cursorLocX = 5;

int cursorLocY = 20;

Justo antes de la configuración, necesitamos configurar algunas variables globales. La identificación ayuda a poner en funcionamiento la pantalla táctil. user_selection contiene un número que corresponde a la tecla que el usuario selecciona al presionar la pantalla táctil. Saved_number es la variable que imprimimos en la pantalla después de una entrada de usuario (más sobre esto en el ciclo). Es un flotante, por lo que puede contener tanto números decimales como enteros. término1 es la variable en la que se guarda el primer número de la ecuación después de seleccionar un operando. op_num guarda el operando como un número (1 para la suma, 2 para la resta, 3 para la multiplicación y 4 para la división). El resultado es la variable que se imprime en la pantalla después de que el usuario ha presionado el signo igual. También es un flotador. cursorLocX y cursorLocY son los puntos de mapeo en la pantalla táctil donde el cursor se establece en varias veces (se encuentra en la barra gris en la parte superior, también conocida como el campo de resultados).

configuración vacía () {

tft.reset ();

ID = tft.readID ();

tft.begin (ID);

tft.setRotation (0);

tft.fillScreen (TFT_DARKGREY);

cuadrícula();

números();

tft.setTextSize (3);

tft.setTextColor (TFT_BLUE, TFT_DARKGREY);

}

Nuestra función de configuración primero contiene la inicialización del protector de la pantalla táctil (líneas 1-3). La orientación del escudo se establece mediante el comando tft.setRotation (), con 0 en posición vertical. Toda la pantalla es de color gris oscuro con el comando tft.fillScreen (), que escribiremos en la parte superior (excepto en el campo de resultados). Las funciones de cuadrados () y números () dibujan los cuadrados de la calculadora, colorean los cuadrados en blanco y negro en un patrón de tablero de ajedrez y escriben números / operandos en los cuadrados en azul. Llegaremos a esos en el siguiente paso. El comando tft.setTextSize () establece el tamaño del texto del campo de resultados en 3, que es una fuente mediana. El comando tft.setTextColor () establece el color del texto del campo de resultados en azul, que se escribe sobre el campo gris oscuro.

Paso 3: el código: bucle

bucle vacío () {numberSelect ();

retraso (100);

if (user_selection == 16) {

;

}demás{

if (user_selection <10) {

número_salvado = número_salvado * 10 + selección_usuario;

tft.setCursor (cursorLocX, cursorLocY);

tft.print (número_guardado);

} else if (user_selection> 10) {

switch (user_selection) {

caso 11:

op_num = 1;

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("+");

término1 = número_salvado;

número_salvado = 0;

rotura;

caso 12:

op_num = 2;

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("-");

término1 = número_salvado;

número_salvado = 0;

rotura;

caso 13:

op_num = 3;

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("X");

término1 = número_salvado;

número_salvado = 0;

rotura;

caso 14:

op_num = 4;

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("/");

término1 = número_salvado;

número_salvado = 0;

rotura;

caso 15:

número_salvado = 0;

término1 = 0;

op_num = 0;

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("");

rotura;

}

tft.setCursor (cursorLocX, cursorLocY);

Esto es mucho para masticar, así que explicaré lo que está arriba. Comenzamos llamando a la función numberSelect (), que asigna un número a cada cuadrado de la pantalla táctil. Cuando un usuario presiona uno de esos cuadrados, la función establece la variable user_selection en el número del cuadrado. La primera instrucción if solo se ejecutará a través del bucle si se ha realizado una selección de usuario válida. Si es así, la siguiente instrucción if pregunta si user_selection tiene un número menor que 10 guardado en él (los números 0-9). Si es así, Saved_number se multiplica por 10 y el número en user_selection se agrega a Saved_number, que se imprime en el campo de resultados de la pantalla táctil. Si no es así, la siguiente instrucción if pregunta si user_selection tiene un número mayor que 10 guardado en él (los números de operando: 11 para +, 12 para -, 13 para X, 14 para / y 15 para el cuadrado de pantalla transparente). Una función de cambio se encarga de cada caso (determinado por user_selection). A la variable op_num se le asigna un número que corresponde al operando que se seleccionó (1 para +, 2 para -, 3 para X y 4 para /). El valor de Saved_number se guarda en la variable term1 para que la variable Saved_number se pueda utilizar para la segunda mitad de la ecuación. El símbolo del operando se imprime en la pantalla junto con la eliminación de cualquier número en el campo de resultados. La única excepción es el cuadrado de pantalla transparente, que restablece todas las variables de cálculo y borra el campo de resultados de cualquier cosa en él.

}demás{

switch (op_num) {

caso 1:

resultado = término1 + número_salvado;

tft.setCursor (cursorLocX, cursorLocY);

tft.print (doble (resultado));

rotura;

caso 2:

resultado = término1 - número_salvado;

tft.setCursor (cursorLocX, cursorLocY);

tft.print (doble (resultado));

rotura;

caso 3:

resultado = término1 * número_salvado;

tft.setCursor (cursorLocX, cursorLocY);

tft.print (doble (resultado));

rotura;

caso 4:

resultado = flotante (término1) / flotante (número_de_salvado);

tft.setCursor (cursorLocX, cursorLocY);

tft.print (resultado);

rotura;

}

tft.setCursor (cursorLocX, cursorLocY);

número_salvado = resultado;

término1 = 0;

op_num = 0;

retraso (1000);

}

}

}

La última parte del ciclo trata del evento en el que el usuario selecciona el signo igual (user_selection == 10). Otra función de interruptor funciona a través de las cuatro funciones matemáticas (determinadas por op_num). El caso de suma (caso 1) agrega term1 y Saved_number juntos y guarda el número en la variable de resultado. El resultado se imprime en el campo de resultados como un doble. El caso de resta (caso 2) resta el número_de_salvado del término1 y guarda el número en la variable de resultado. El resultado se imprime en el campo de resultados como un doble. El caso de multiplicación (caso 3) multiplica término1 por número_de_salvado y guarda el número en la variable de resultado. El resultado se imprime en el campo de resultados como un doble. El caso de división (caso 4) divide term1 por número_de_salvado juntos y guarda el número en la variable de resultado. El resultado se imprime en el campo de resultados como un flotante (porque las respuestas de la división pueden ser números decimales). Después del evento de que se imprima un número, operando o resultado en la pantalla, el cursor se reinicia, el número_ guardado se establece en el resultado anterior y term1 & op_num se restablecen.

Algunas notas: el usuario no puede ingresar números decimales en la calculadora debido a la falta de un cuadrado de punto decimal. Además, el usuario solo puede hacer una ecuación a la vez. No puede calcular un resultado y luego sumar / restar / multiplicar / dividir ese resultado. En la función numberSelect (), hay una función que borra la pantalla después de que se ha impreso un resultado si un usuario ha presionado otro cuadrado.

Paso 4: el código: función cuadrados

cuadrados vacíos () {

// los cuadrados blancos y negros se alternan en cada fila y la primera y tercera filas tienen un patrón opuesto al de la segunda y cuarta filas

tft.fillRect (0, 60, 60, 65, TFT_BLACK); // comienza la primera fila de cuadrados, negro a blanco tft.fillRect (60, 60, 60, 65, TFT_WHITE);

tft.fillRect (120, 60, 60, 65, TFT_BLACK);

tft.fillRect (180, 60, 60, 65, TFT_WHITE); // termina la primera fila de cuadrados

tft.fillRect (0, 125, 60, 65, TFT_WHITE); // comienza la segunda fila de cuadrados, de blanco a negro tft.fillRect (60, 125, 60, 65, TFT_BLACK);

tft.fillRect (120, 125, 60, 65, TFT_WHITE);

tft.fillRect (180, 125, 60, 65, TFT_BLACK); // finaliza la segunda fila de cuadrados

tft.fillRect (0, 190, 60, 65, TFT_BLACK); // comienza la tercera fila de cuadrados, negro a blanco tft.fillRect (60, 190, 60, 65, TFT_WHITE);

tft.fillRect (120, 190, 60, 65, TFT_BLACK);

tft.fillRect (180, 190, 60, 65, TFT_WHITE); // Termina la tercera fila de cuadrados

tft.fillRect (0, 255, 60, 65, TFT_WHITE); // comienza la cuarta fila de cuadrados, de blanco a negro tft.fillRect (60, 255, 60, 65, TFT_BLACK);

tft.fillRect (120, 255, 60, 65, TFT_WHITE);

tft.fillRect (180, 255, 60, 65, TFT_BLACK); // finaliza la cuarta fila de cuadrados

}

La función squares () es bastante sencilla. El comando tft.fillRect (X1, Y1, X2, Y2, TFT_COLOR) dibuja un rectángulo de acuerdo con los parámetros que se le pasan, que son las primeras posiciones de xey, las segundas posiciones de xey, y el color con el que se rellena el rectángulo. Esta función dibuja las cuatro filas de cuadrados (técnicamente rectángulos) y llena cada cuadrado con el color que se le ha pasado.

Paso 5: El código: función de números

números vacíos () {

tft.setTextColor (TFT_BLUE); // establece el color del número / carácter en azul

tft.setTextSize (5); // establece el tamaño del número / carácter en 5

tft.setCursor (18, 75); // coloca el cursor para la primera línea de números / caracteres

tft.print ("7 8 9 /"); // imprime la primera línea de números / caracteres

tft.setCursor (18, 140); // coloca el cursor para la segunda línea de números / caracteres

tft.print ("4 5 6 X"); // imprime la segunda línea de números / caracteres

tft.setCursor (18, 205); // coloca el cursor para la tercera línea de números / caracteres

tft.print ("1 2 3 -"); // imprime la tercera línea de números / caracteres

tft.setCursor (18, 270); // coloca el cursor para la cuarta línea de números / caracteres

tft.print ("C 0 = +"); // imprime la cuarta línea de números / caracteres

}

La función números () también es sencilla. Las dos primeras líneas establecen el tamaño del texto más grande y el color en azul. El comando tft.setCursor () coloca el cursor en la posición en cada fila desde donde comienza la escritura de los números. Luego, el comando tft.print () imprime los números / caracteres sobre los cuadrados.

Paso 6: El Código: Función NumberSelect

void numberSelect () {

TSPoint p = ts.getPoint ();

pinMode (XM, SALIDA);

pinMode (YP, SALIDA);

if (p.z> MINPRESSURE) {

p.x = mapa (p.x, 250, 845, 0, 239);

p.y = mapa (p.y, 245, 860, 0, 319);

if (resultado! = 0) {

resultado = 0;

número_salvado = 0;

tft.print ("BORRAR VALORES");

retraso (500);

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("");

tft.setCursor (cursorLocX, cursorLocY);

}

Para iniciar la función numberSelect (), solicitamos la entrada del usuario desde la pantalla táctil con el comando ts.getPoint (). Una vez recopilados esos datos, comprobamos si se ha superado la presión mínima (o, en otras palabras, si el usuario ha pulsado en algún lugar de la pantalla táctil). Si es así, las coordenadas xey se asignan desde coordenadas cartesianas a coordenadas específicas de la pantalla táctil. (0, 0) es la esquina superior izquierda de la pantalla táctil, con el eje x cruzando y el eje y bajando. La siguiente parte comprueba si hay un número guardado en el resultado. Si lo hay, el resultado y el número_guardado se restablecen a 0. El mensaje "BORRAR VALORES" se imprime sobre el campo de resultados y la pantalla se borra con el cursor de regreso a su posición inicial.

if (p.y 60) {// primera fila de cuadrados

si (p.x <60)

user_selection = 7;

si no (p.x <120)

user_selection = 8;

más si (p.x <180)

user_selection = 9;

else selección_usuario = 14;

} else if (p.y 125) {// segunda fila de cuadrados

si (p.x <60)

user_selection = 4;

si no (p.x <120)

user_selection = 5;

más si (p.x <180)

user_selection = 6;

else selección_usuario = 13;

} else if (p.y 190) {// tercera fila de cuadrados

si (p.x <60)

user_selection = 1;

si no (p.x <120)

user_selection = 2;

más si (p.x <180)

user_selection = 3;

else selección_usuario = 12;

} else if (p.y> 255) {// cuarta fila de cuadrados

si (p.x <60)

user_selection = 15;

si no (p.x <120)

user_selection = 0;

más si (p.x <180)

user_selection = 10;

else selección_usuario = 11;

}

}demás{

selección_usuario = 16; // user_selection se establece en 16 (nada variable)

}

}

Esta es la parte que determina qué botón se ha seleccionado. Comenzando con la fila superior de cuadrados y terminando con la fila inferior, Arduino busca dónde se presionó realmente la pantalla. Luego le asigna un número al cuadrado y lo guarda en user_selection. Los números 0-9 corresponden a los cuadrados numéricos, los números 11-15 corresponden a los cuadrados del operando y al cuadrado claro, y el número 10 corresponde al cuadrado del signo igual. Si no se ha seleccionado ningún cuadrado, entonces user_selection se establece en 16, lo que hará que el bucle comience de nuevo (ver función de bucle).

Paso 7: ¡Disfrute de su proyecto terminado

¡Ahí tienes! Ahora tiene una calculadora con pantalla táctil que puede hacer sumas, restas, multiplicaciones y divisiones. Este proyecto cambió por completo la forma en que pensé que funcionaba una calculadora. Mientras trabajaba en este proyecto, recuerdo haberle dicho a mi instructor en clase: "¡Nunca volveré a mirar una calculadora de la misma manera!" Las funciones que usted, como usuario, cree que son fáciles, son algo difíciles cuando está detrás de la computadora tratando de emular su idea. Espero que haya disfrutado del proyecto y espero que también haya cambiado su forma de pensar sobre cómo funciona una calculadora.

Aquí está el código completo para su conveniencia. Está lleno de comentarios, así que si tienes algún problema, ellos deberían mostrarte lo que hace cada línea.