Desarrollo de prototipo. Cuestionario interactivo con imágenes Matemáticas

(1)

(2)

Desarrollo de prototipo

Cuestionario interactivo con imágenes Matemáticas

Resumen:

Este documento trata acerca del diseño, desarrollo y construcción de un prototipo de cuestionario electrónico gráfico, con el fin de reforzar el aprendizaje en los alumnos de cuarto año de primaria, utilizando preguntas con imágenes de una manera diferente, y poder lograr el interés en los alumnos.

Autores:

M.T. Ma. Del Carmen Zozaya Ayuso.

M. en C. Enrique Ayala Franco.

Br. Italo Zabdi Cruz

(3)

Contenido

Objetivo ... 1

Introducción ... 1

Descripción. ... 1

Problemática. ... 2

Metodología: ... 2

Diseño de características y funcionamiento general ... 3

Circuitos esquemáticos y pictóricos: ... 7

Conclusión. ... 19

Referencias: ... 19

Anexos: ... 20

Programa. ... 20

Hoja técnica del Arduino Mega ... 5

Hoja técnica de la pantalla HX8357 ... 6

(4)

Figura 1. Arduino Mega 2560 ... 3

Figura 2. Pantalla HX8357 ... 4

Figura 3. Push button (arcade) ... 4

Figura 4. Leds... 5

Figura 5. Resistencia de 10KΩ y 320 Ω ... 5

Figura 6. Protoboard ... 6

Figura 7. Buzzer ... 6

Figura 8. Tarjeta SD ... 7

Figura 9. Crgador de Celular USB ... 7

Figura 10. Circuitos esquemáticos de las conexiones del Arduino Mega y la pantalla. ... 7

Figura 11. Circuito con el programa fritzing ... 8

Figura 12. Circuito esquemático de los botones con sus respectivas resistencias. ... 9

Figura 13. Circuito pictórico de las conexiones de los Push boton ... 9

Figura 14. Circuito esquemático de las conexiones de los leds ... 10

Figura 15. Circuito pictórico de las conexiones de los leds ... 10

Figura 16. Circuito esquemático de la conexion dl buzzer. ... 11

Figura 17. Circuito esquemático completo del prototipo ... 11

Figura 18. Circuito pictórico completo del prototipo. ... 12

Figura 19. Pines de la LCD ... 12

Figura 20. Ensamblado del LCD con el ArduinoMega ... 13

Figura 21. Conecxiones internas del prototipo ... 13

Figura 22. Alimentación del prototipo por medio del puerto usb de la computadora. ... 14

Figura 23. Alimentación del prototipo por medio de un cargador de celular a la corriente eléctrica. ... 14

Figura 24. Primera pantalla... 15

Figura 25. Segunda pantalla... 15

Figura 26. Tercera pantalla. ... 16

Figura 27. Pantallas con ejemplos de algunas preguntas. ... 16

Figura 28. Pantallas con ejemplos derespuesta correcta. ... 17

Figura 29. Pantalla con ejemplo de respuesta incorrecta. ... 17

Figura 30. Pantalla con ejemplo de la calificación final.. ... 18

Figura 31. Pantallas con ejemplo del reinicio del prototipo.. ... 18

(5)

Objetivo

Crear un prototipo con el fin de mejorar el aprendizaje en la asignatura de las matemáticas a niños de cuarto grado de primaria, utilizando imágenes para que sea entretenido y práctico.

Introducción

Un cuestionario electrónico es un sistema que permite realizar preguntas a un individuo por medio de algún dispositivo electrónico, que contiene una pantalla por medio de la cual aparecen diferentes preguntas de lo que se está interesado que la persona aprenda o refuerce.

Los temas que abarca este cuestionario son del plan de estudios de matemáticas de nuestro país para niños de cuarto grado de primaria, el cual se limitará al reforzamiento del aprendizaje de los tipos de ángulos, trángulos, formato de hora, representación de fracciones de figuras, comparación de superfiies, métodos de suma, resta de fracciones, multiplicación con rectangulos.

En este documento se propone el desarrollo de un prototipo interactivo, en el cual alumnos de cuarto de primaria podrán reforzar temas de matemática, de una manera fácil y divertida.

Descripción.

Se desarrolló el prototipo de un cuestionario de opciones múltiples, utilizando imágenes.

Las preguntas son para niños de cuarto grado de primaria, dichas preguntas se tomaron del libro desafíos matemáticos de cuarto grado. El juego es compacto, fácil de transportar y de usar. Es un sistema de “plug & play”, conectar y jugar.

El prototipo tiene varios temas de matemáticas para cuarto año incluyendo suma y resta, fracciones, multiplicación, división y 25 preguntas que promueven el razonamiento lógico matemático. Cada pregunta fue seleccionada cuidadosamente del libro de cuarto año, se utilizaron diversas preguntas de todos los bloques, por ejemplo, que tipo de triángulo es que se encuentra en el bloque I, que fracción es, el cual está en el bloque II del libro, multiplicación con rectangulos del bloque III, área y superficie bloque IV, etc.

La parte física del prototipo se diseñó con un tema atractivo para niños de cuarto año, como se mencionó anteriormente, se construyó de un tamaño fácil de transportar. Cuenta con una pantalla LCD a color de 3.2 pulgadas y con resolución de 480x320 megapíxeles. Esta pantalla nos da la posibilidad de utilizar imágenes a color para poder ampliar el entretenimiento. Para poder escoger la respuesta se utiliza botones tipo árcade´(para juegos), lo cual apoya al tema de la parte del diseño para poder mantener la atención de los estudiantes. También cuenta con luces de que indicaran si la respuesta es correcta o incorrecta. Se construyó en una caja de madera, la cual se pintó de varios colores, para que se vea atractiva, se le imprimió una hoja con imágenes de caricaturas, la cual se pegó en la parte de arriba de la caja. También se le añadió un botón para reiniciar el cuestionario y cuenta con una pequeña bocina.

(6)

Problemática.

El aprendizaje de las matemáticas siempre han sido un problema a nivel nacional. Muchos de nosotros podemos admitir que siempre fue difícil aprender en las clases de matemáticas.

En realidad, no a todos les agrada esa asignatura, porque algunos se le es difícil aprender.

Las clases se pueden tornar aburridas, en algunas ocasiones se debe a que el maestro no atrae la atención de los alumnos o le es muy difícil hacerlo, sobre todo a los niños de primaria.

Para aprender las matemáticas hay que poner en práctica lo que se ve en el salón de clases.

Cuando el profesor marca alguna tarea, muchas veces el alumno realiza los ejercicios por cumplir y en algunas ocasiones no cumple el objetivo de la tarea.

Actualmente las generaciones de alumnos son más tecnológicos, por ende, en muchas ocasiones es más fácil atraer su atención utilizando un video juego o algún dispositivo electrónico para que el estudiante aprenda y comprenda algunos conceptos de diversas materias, en nuestro caso nos enfocamos a las matemáticas.

Metodología:

Para realizar este prototipo se requirió trabajar en varias etapas, las cuales se enumeran a continuación:

1. Investigación de temas en el área de las matemáticas de cuarto año de primaria.

2. Métodos de interactividad con el dispositivo

3. Programación del sistema con el Arduinomega y el display.

4. Integración del sistema.

Investigación de temas en el área de las matemáticas de cuarto grado de primaria.

Se verificó el plan de estudio del libro de la SEP (Secretaría de Educación Pública) de nivel primaria de cuarto grado desafíos matemáticos.

Se seleccionaron treinta preguntas del área de matemáticas, utilizando 5 preguntas de cada bloque en que se divide el libro (5 bloques).

Métodos de interactividad con el dispositivo

Mientras se recababa la información, se estuvo decidiendo como interactuar el sistema con los niños, que componentes utilizar con el LCD, la capacidad de la tarjeta, que tipo de preguntas, los formatos de las imágenes a utilizar, se decidió utilizar preguntas de opción múltiple, las respuestas se seleccionan con botones “árcade“ para juegos de diferentes colores, para que se vea más atractivo para los alumnos. En esta esta etapa se comenzó con el diseño del circuito.

Programación.

Una vez que se tuvo el circuito ya definido y armado, en esta etapa se realizó la programación del sistema, se tuvieron algunos problemas al realizar la conectividad con la pantalla LCD con el Arduino Mega, ya que se requirieron buscar la librería adecuada para la programación.

En esta parte se generaron las preguntas e imágenes que se utilizaron en el cuestionario,

(7)

Integración del sistema.

En esta parte se integró el sistema programado con el circuito que se había diseñado y desarrollado, al igual se armó la caja de madera donde se puso prototipo.

Diseño de características y funcionamiento general

A continuación, se va nombrar y se dará una explicación de todos los componentes utilizados para la creación de este prototipo.

Arduino Mega 2560:

El Arduino Mega es una placa de circuito basada en el microcontrolador ATmega2560. Este dispositivo contiene 54 pins digitales y 16 pins análogos para entradas y salida de datos.

Cada uno de los 54 operan con 5 volts y pueden alimentar o recibir una corriente máxima de 40mA y contiene un resistor pull-up de 20-50 kOhms. Alguno de esos pins tiene funciones especiales. A continuación, se explica alguno de esas funciones. Por ejemplo, hay 4 pares de pins para comunicación serial, 6 pares para interrupciones externas, 16 pins que soportan señales PWM, 4 pins que soportan comunicación SPI, 2 pins que soportan comunicación I2C, y un pin que contiene un LED integrada. También contiene un oscilador de 16MHz, conexión USB, entrada para alimentación de poder y un Botón de reset. El Arduino mega tiene un voltaje de operación de 5 volts lo cual puede ser alimentada vía USB o vía una fuente externa lo cual sería un adaptador AC – DC. La placa puede operar con una fuente externa de 6 a 20 volts, pero si es alimentado con una fuente menor a 7 volts, los pins de 5V podrían quedar inestables y no daría sus 5 volts de salida. Si se utiliza más de 12V el regulador de voltaje se sobrecalienta y daña la placa. Es por eso que se recomienda una fuente de alimentación entre 7 a 12 volts. El Mega cuenta también con pins de 5V y de 3.3V. La de 5V utiliza la fuente de poder conectada via USB o externa y es regulada hacia el pin. El voltaje en el pin de 3.3V es generado por un chip FTDI lo cual su máxima corriente que utiliza es de 50mA

El micro controlador Atmega1280 que utiliza el Arduino contiene 128k de memoria flash para guardar el código, 4kb de ROM y 8kb de memoria estática.

El Arduino puede ser programada utilizando el software lo cual puede ser descargada desde la página de Arduino. El ATmega1280 ya viene pregrabada con un cargador de arranque cual permite subir código escrito por el usuario. Al momento de subir un programa no hay necesidad de aplicarle un reset a Arduino ya que esto lo hace automáticamente.

Figura 1. Arduino Mega 2560

(8)

Pantalla HX8357.

Esta es una pantalla de 3.2 pulgadas con resolución de 320 x480 pixeles. La pantalla tiene apoyo para Arduino Mega2560 ya que se inserta directamente en los pins disponibles.

Contiene un chip de conversión integrada de 5V/3.3V compatibles con el nivel de tensión de 3.3/5V disponibles en la placa de Arduino. Esta pantalla también viene integrada con una ranura para tarjeta SD con circuito flash de SPI.

El tipo de pantalla es TFT-LCD (Thin Film Transistor-Liquid Crystal Display) pantalla de cristal líquido de transistores de película fina) es una variante de pantalla de cristal líquido (LCD) que usa tecnología de transistor de película delgada (TFT). Cuenta con el chip de control ILI9481 y utiliza comunicación paralela de 16 bits para su interfaz.

Figura 2. Pantalla HX8357

Push-Buttons(arcade)

Estos botones de tipo “maquinita” básicamente son microswitches. Estos switches detectan un cambio de estado ya que al presionarlo retornar un valor 0 o 1 dependiendo como está conectado. Contiene tres patitas de conexión. Uno es el pin común o tierra, y los otras dos son la NO(normally-open) y NC(normally-closed). Dependiendo en cómo se conectan estos dos últimos pines determina el funcionamiento del botón.

Figura 3. Push button (arcade)

(9)

LEDS

Un LED(light emitting diode) constituye un tipo especial de semiconductor cual su especialidad principal es la conversión de corriente eléctrica de bajo voltaje en luz que atraviesa su chip.

Figura 4. Leds

Resistencias

Las resistencias son componentes eléctricos lo cual tienen un valor especifico de resistencia eléctrica. Un resistor trabaja limitando el flujo de electrones en un circuito. Estos componentes solo consumen energía, no pueden generarlo lo cual se consideran como componentes pasivos..

Las resistencias comunes que vienen con sus patitas largas de plomo tienen una codificación de color para determinar su valor de resistencias eléctrica que tienen.

Normalmente son una banda de 4 colores. Las primeras 2 bandas representas los dos dígitos más significativos. La tercera banda es el valor de peso que multiplica los dos dígitos más significativos a una potencia de 10. La ultima banda representa la tolerancia del resistor. En otras palabras, su margen de error que tienen a lo que es su valor nominal.

Esto depende del proceso de fabricación de cada resistor.

Las resistencias que se utilizaron en el prototipo son tres de 10 KΩ y 2 de 320 Ω

Figura 5. Resistencia de 10KΩ y 320 Ω

Protoboard.

Las protoboard son pequeñas tablas con perforaciones en toda su área, en las cuales se colocan diversos componentes electrónicos, se distinguen por tener filas y columnas con lo

(10)

que se puede saber en qué ubicación posicionar cada pieza, también cuentan con 2 rieles a los lados, los cuales se usaran como las líneas positivas y negativas de nuestro circuito.

La línea azul que es el negativo, también llamada: tierra. La línea roja es el positivo, también llamada corriente

Figura 6. Protoboard

Buzzer o bocina

Dispositivo que cumple el papel de una bocina es capaz de reproducir sonidos en diferentes tonos dependiendo de la corriente que le sea suministrada. En el prototipo se utilizó una del modelo de las siguiente figura.

Figura 7. Buzzer

Tarjeta SD.

Las siglas SD vienen del estándar Secure Digital. Sirve para liberar espacio de la preciada memoria interna de nuestros dispositivos, almacenando todo tipo de archivos: fotografías, música, vídeos, documentos, libros electrónicos...

Las tarjetas de memoria SD son un soporte con una buena relación precio/espacio, además de ser bastante fiables, duraderas y cómodas de utilizar.

En el prototipo se utilizó una memoria de 2Gb como la que se muestra en la siguiente imagen.

(11)

Figura 8. Tarjeta SD

Cargador de móvil.

Renueva la carga de la batería una vez agotada su capacidad. Para cable USB, los conectores USB tienen 4 conectores y los cables USB llevan 4 hilos por su interior.

Este cargador debe de ser de 5 volts y al menos 1 Amper.

Figura 9. Crgador de Celular USB

Circuitos esquemáticos y pictóricos:

A continuación, en las siguientes figuras, se presentan los circuitos esquemáticos de las conexiones.

En esta imagen nos muestra el cableado entre el Arduino Mega y la pantalla

Figura 10. Circuitos esquemáticos de las conexiones del Arduino Mega y la pantalla.

(12)

Hay que tomar en cuenta que la pantalla que se muestra en el esquemático no es la misma que se utilizó en el prototipo ya que proteus no cuenta con ese modelo de pantalla. Entonces las conexiones no son la misma.

A continuación, se visualiza la figura del esquemático con el programa Fritzing

Figura 11. Circuito con el programa fritzing

Nota: la imagen de la pantalla representada en el esquemático no es la misma ya que Fritzing no viene con el modelo de la pantalla que se utilizó en el prototipo.

El tft hx8357 encaja en los pines digitales del Arduino Mega, lo cual facilita su conexión en el prototipo.

En las siguientes figuras se presenta el esquemático para la conexión de los botones con proteus y fritzing.

(13)

Figura 12. Circuito esquemático de los botones con sus respectivas resistencias.

Figura 13. Circuito pictórico de las conexiones de los Push boton

Estos botones se utilizaron para seleccionar una de tres posibles respuestas. Los botones se conectan de la siguiente manera, en los pines digitales 2, 3,4. Una patita del botón se conecta al pin del Arduino. Esa misma patita se conecta a una resistencia de 10kΩ, esto es para asegurar que el Arduino detecte un cambio de estado cuando se presione el botón. La otra pata del botón está conectada al riel de 5V del protoboard.

A continuación, vemos los esquemáticos de la conexión de los Leds al Arduino Mega.

(14)

Figura 14. Circuito esquemático de las conexiones de los leds

Figura 15. Circuito pictórico de las conexiones de los leds

Los leds son más simples para conectar. Se utilizó los pines 5 y 6 para conectar dos leds, uno verde y uno rojo, estos nos indican una respuesta correcta o incorrecta respectivamente. El pin positivo del led (la pata más larga) se conecta al pin del Arduino directamente. El otro pin del led se conecta al riel de tierra del protoboard en serie con una resistencia de 320 ohms.

(15)

Figura 16. Circuito esquemático de la conexion dl buzzer.

Para darle un poco de entretenimiento auditivo se le agregó un buzzer. Se conecta una patita a la tierra común y la otro se conecta a un pin del Arduino, para el prototipo se utilizó el pin 9.

En las siguientes figuras se muestra el circuito completo esquemático y pictorico realizado en proteus y fritzing respectivamente.

Figura 17. Circuito esquemático completo del prototipo

(16)

Figura 18. Circuito pictórico completo del prototipo.

Funcionamiento General:

El prototipo construido es simple de conectar, programar y ejecutar. Las imágenes anteriores nos indican como se conectan cada parte en la protoboard, a excepción de la pantalla. La pantalla está diseñada para intercalar perfectamente en los pines digitales del Arduino como se muestra en la figura siguiente.

.

Figura 19. Pines de la LCD

Cada pin en el LCD les pertenece a los pines 22-53 respectivamente. Entonces para conectarlo es fácil, pues ya sabemos en dónde va cada pin. Para programar cada pin se utiliza la librería. Esta librería se investigó y se pudo descargada de una fuente en internet.

(17)

Figura 20. Ensamblado del LCD con el ArduinoMega

Como vemos en las dos imágenes anteriores, así se coloca la pantalla en el Arduino Mega.

En nuestro caso por el tipo de diseño que tiene el prototipo uniremos cada pin con un cable cada uno.

Como se mencionó anteriormente es un juego de opción múltiple. En la tarjeta SD están grabadas imágenes de las preguntas de matemáticas, estas se van desplegar aleatoriamente. Cada pregunta está programada con su respuesta, esta se selecciona con uno de los tres botones etiquetados A, B y C. Cuando se presiona la respuesta correcta, el Arduino manda las señales hacia los controladores de la pantalla para desplegar un mensaje que dice “Respuesta correcta” con fondo de pantalla verde. Al mismo tiempo se manda una señal para que se encienda el Led verde. Si se presiona una respuesta equivocada, el Arduino manda las señales para que el controlador de la pantalla despliegue un mensaje programada donde indica que se seleccionó una respuesta incorrecta. Igual se manda una señal a Led rojo para que se encienda y sirva de auxiliar también. Más adelante se mostrará imágenes del funcionamiento del prototipo.

Figura 21. Conecxiones internas del prototipo

(18)

Implementación del prototipo:

A continuación, se mostrará imágenes del prototipo desde su encendido hasta su funcionamiento.

La alimentación que se requiere para el prototipo es de 5 volts, por lo que se necesita un cargador de celular o conectarlo al puerto USB de una computadora.

Figura 22. Alimentación del prototipo por medio del puerto usb de la computadora.

Figura 23. Alimentación del prototipo por medio de un cargador de celular a la corriente eléctrica.

Seguidamente de encender el prototipo comenzaremos a ver tres pantallas de introduccón, antes de comienzar las preguntas.

(19)

Figura 24. Primera pantalla.

Figura 25. Segunda pantalla.

(20)

Figura 26. Tercera pantalla.

Después que sale la tercera pantalla, aparece la primera pregunta del juego. Recordando que cada vez que se reinicie el juego se cambia la orden de las preguntas. Las preguntas como se mencionó anteriormente son de opción múltiple, una pregunta y tres posibles respuestas como se muestran en las siguientes imagen.

(21)

El alumno escoge su respuesta utilizando uno de los 3 botones (A, B o C )

Figura 28. Pantallas con ejemplos derespuesta correcta.

Si la respuesta es correcta, la pantalla muestra las palabras “RESPUESTA CORRECTA”

con fondo verde y se enciende el LED verde. Como se puede ver en la anterior figura.

En caso de seleccionar una respuesta incorrecta, se muestra en la pantalla la palabra

“RESPUESTA INCORRECTA” con fondo rojo y se encenderá el LED rojo.

Figura 29. Pantalla con ejemplo de respuesta incorrecta.

Al terminar todo el cuestionario se mostrara la calificación con base en cien.

(22)

Figura 30. Pantalla con ejemplo de la calificación final..

El juego se puede reiniciar utilizando el botón de reset Al apretar el botón se muestran de nuevo las tres pantallas de incio.

(23)

Conclusión.

Este prototipo fue diseñado para cubrir una necesidad, la de mejorar el aprendizaje por medio de un método diferente de reforzamiento de la enseñanza que sea más entretenido y que llame la atención de los alumnos de cuarto año.

Se puede utilizar como una herramienta que complemente el aprendizaje de los niños, ya que es un método interactivo para los alumnos.

Este prototipo se estuvo realizando del 4 julio al 19 octubre de 2017.

Se utilizó en el Laboratorio de Mantenimiento de Equipo de Cómputo y como parte de las clases en la materia de electrónica básica del 6 al 23 de noviembre de 2017.

Anteriormente se había realizado un prototipo, pero se utilizó una pantalla que solo permitía poner texto, con este nuevo prototipo se pudo combinar texto con imágenes, otra de las ventajas que se pueden manejar diferentes colores.

Al utilizar un microcontrolador Arduino Mega este nos permite realizar de manera sencilla varias actualizaciones y modificaciones al prototipo. El costo del prototipo se mantuvo bajo, su funcionamiento para su uso es muy sencillo y el mantenimiento no es complicado.

Este prototipo se puede implementar para diversas materias, también se puede mejorar o seguir desarrollando más código. Agregar más preguntas, música e inclusive la pantalla puede ser táctil.

El trabajo realizado se hizo de manera colaborativa en la parte de la investigación , el diseño y desarrollo del prototipo, esto es de gran utilidad ya que vamos aprendiendo con las diversas opiniones o puntos de vista.

Referencias:

https://www.arduino.cc/en/Main/arduinoBoardMega https://www.arduino.cc/en/Main/Software

https://www.arduino.cc/en/Tutorial/Button https://github.com/Bodmer/TFT_HX8357

https://stackoverflow.com/questions/5064379/generating-unique-random-numbers- in-c

http://www.cs.yale.edu/homes/aspnes/pinewiki/C(2f)Randomization.html https://www.programiz.com/c-programming/c-arrays

https://www.tutorialspoint.com/cprogramming/c_arrays.html http://fritzing.org/download/

http://www.circuitosimpresos.org/2013/04/05/montaje-de-arduino-en-una- protoboard-o-placa-entrenadora/

https://cdn-learn.adafruit.com/downloads/pdf/adafruit-3-5-color-320x480-tft- touchscreen-breakout.pdf

(24)

Anexos:

Programa.

A continuación, se verá el anexado del programa utilizada para el prototipo.

En esta primera parte se muestra el inicio del programa, en donde se hace las declaraciones de los pins de los LEDS y botones y se incluye las librerías de la pantalla descargadas.

#

include <TFT_HX8357.h> // Hardware-specific library

TFT_HX8357 tft = TFT_HX8357(); // Invoke custom library

// SD Card library, comment out next line if the SdFat library is used

#include <SD.h>

// We can use the SdFat library instead and it will be a bit faster, uncomment next 2 lines

//#include <SdFat.h> // Use the SdFat library for the Due

//SdFat SD; // Permit SD function call compatibility with no sketch changes :-)

// SD chip select

#define SDC_CS 53

// These are used when calling drawBMP() function

#define BU_BMP 1 // Temporarily flip the TFT coords for standard Bottom-Up bit maps

#define TD_BMP 0 // Draw inverted Top-Down bitmaps in standard coord frame

int V1,V2,V3; // declaracion de variables de botones int next = 0;

int inPin1=2; //declaracion de pins de botones int inPin2=3;

int inPin3=4;

int redled = 6; //declaracion de pins y variables para los leds

int greenled = 5;

int buttonPushCounter = 0;//counter for # of right answers

int buttonState=0;

/***************************************************************

** Function name: setup

** Descriptions: To set things up

****************************************************************/

void setup() {

Serial.begin(38400); // For debug messages delay(4000);

tft.init(); // Initialise the display (various parameters configured)

Serial.print(F("Initialising SD card..."));

if (!SD.begin(SDC_CS)) { Serial.println(F("failed!"));

randomSeed(analogRead(A0)); //para el random de las preguntas

pinMode(inPin1, INPUT);

pinMode(redled, OUTPUT);

pinMode(greenled, OUTPUT);

pinMode(res, INPUT);

}

/****************************************************************

** Function name: loop

** Descriptions: Infinite loop

****************************************************************/

void loop() // Aqui comienza el programa del juego {

tft.setRotation(1);

drawBMP("escudo.bmp",0,0,BU_BMP); //esta seccion carga la introduccion

delay(2500); // del juego.

drawBMP("mate.bmp",0,0,BU_BMP);

tft.setTextColor(TFT_YELLOW);

tft.setTextSize(2);

tft.setCursor(10, 20, 4);

tft.println("FACULTAD");

tft.setCursor(70,100,4);

tft.println("DE");

tft.println("MATEMATICAS");

delay(1500);

drawBMP("mate.bmp",0,0,BU_BMP);

tft.setTextSize(2);

tft.setCursor(20, 20, 4);

tft.println("Cuestionario De");

tft.println("Cuarto");

tft.println("Grado");

delay(2500);

fourth(); //Aqui se llama la function donde se encuentra la preguntas

tft.setRotation(1); // de cuarto Grado

tft.fillScreen(TFT_YELLOW); //carga el mensaje de fin del juego

tft.setTextSize(5);

(25)

A continuación es la función que se utiliza para cargar una imagen en la pantalla. Cada imagen es guarda en formato Bitmap utilizando el programa Paint o también se puede utilizar otro programa si lo desea. Cada vez que se quiera mandar una imagen a la pantalla se llama esta función ‘DrawBMP’.

Es bueno recordar que esta función vino con la librería descargada en internet. Es parte de uno de los ejemplos que vino con la librería.

#define BUFF_SIZE 80

void drawBMP(char *filename, int x, int y, boolean flip) { if ((x >= tft.width()) || (y >= tft.height())) return;

File bmpFile;

int16_t bmpWidth, bmpHeight; // Image W+H in pixels //uint8_t bmpDepth; // Bit depth (must be 24) but we dont use this uint32_t bmpImageoffset; // Start address of image data in file uint32_t rowSize; // Not always = bmpWidth; may have padding uint8_t sdbuffer[3 * BUFF_SIZE]; // SD read pixel buffer (8 bits each R+G+B per pixel)

uint16_t tftbuffer[BUFF_SIZE]; // TFT pixel out buffer(16-bit per pixel) uint8_t sd_ptr = sizeof(sdbuffer); // sdbuffer pointer (so BUFF_SIZE must be less than 86)

boolean goodBmp = false; // Flag set to true on valid header parse int16_t w, h, row, col; // to store width, height, row and column //uint8_t r, g, b; // brg encoding line concatenated for speed so not used uint8_t rotation; // to restore rotation

uint8_t tft_ptr = 0; // buffer pointer // Check file exists and open it Serial.println(filename);

if ((bmpFile = SD.open(filename)) == NULL) {

Serial.println(F(" File not found")); // Can comment out if not needed return;

}

// Parse BMP header to get the information we need

if (read16(bmpFile) == 0x4D42) { // BMP file start signature check read32(bmpFile); // Dummy read to throw away and move on read32(bmpFile); // Read & ignore creator bytes

bmpImageoffset = read32(bmpFile); // Start of image data read32(bmpFile); // Dummy read to throw away and move on bmpWidth = read32(bmpFile); // Image width

bmpHeight = read32(bmpFile); // Image height //if (read16(bmpFile) == 1) {

// Only proceed if we pass a bitmap file check

// Number of image planes -- must be '1', depth 24 and 0 (uncompressed format)

if ((read16(bmpFile) == 1) && (read16(bmpFile) == 24) &&

(read32(bmpFile) == 0)) {

//goodBmp = true; // Supported BMP format -- proceed!

// BMP rows are padded (if needed) to 4-byte boundary rowSize = (bmpWidth * 3 + 3) & ~3;

// Crop area to be loaded w = bmpWidth;

h = bmpHeight;

// We might need to alter rotation to avoid tedious pointer manipulation // Save the current value so we can restore it later

rotation = tft.getRotation();

// Use TFT SGRAM coord rotation if flip is set for 25% faster rendering if (flip) tft.setRotation((rotation + (flip<<2)) % 8); // Value 0-3 mapped to 4- 7

// We might need to flip and calculate new y plot coordinate // relative to top left corner as well...

switch (rotation) { case 0:

if (flip) y = tft.height() - y - h; break;

case 1:

y = tft.height() - y - h; break;

break;

case 2:

if (flip) y = tft.height() - y - h; break;

break;

case 3:

y = tft.height() - y - h; break;

break;

}

// Set TFT address window to image bounds

// Currently, image will not draw or will be corrputed if it does not fit // TODO -> efficient clipping, but I don't need it to be idiot proof ;-) tft.setWindow(x, y, x + w - 1, y + h - 1);

// Finally we are ready to send rows of pixels, writing like this avoids slow 32 bit multiply

for (uint32_t pos = bmpImageoffset; pos < bmpImageoffset + h * rowSize ; pos += rowSize) {

// Seek if we need to on boundaries and arrange to dump buffer and start again

if (bmpFile.position() != pos) { bmpFile.seek(pos);

sd_ptr = sizeof(sdbuffer);

}

// Fill the pixel buffer and plot

for (col = 0; col < w; col++) { // For each column...

// Time to read more pixel data?

if (sd_ptr >= sizeof(sdbuffer)) { // Push tft buffer to the display if (tft_ptr) {

// Here we are sending a uint16_t array to the function tft.pushColors(tftbuffer, tft_ptr);

tft_ptr = 0; // tft_ptr and sd_ptr are not always in sync...

}

// Finally reading bytes from SD Card bmpFile.read(sdbuffer, sizeof(sdbuffer));

sd_ptr = 0; // Set buffer index to start }

// Convert pixel from BMP 8+8+8 format to TFT compatible 16 bit word // Blue 5 bits, green 6 bits and red 5 bits (16 bits total) // Is is a long line but it is faster than calling a library fn for this tftbuffer[tft_ptr] = (sdbuffer[sd_ptr++] >> 3) ;

tftbuffer[tft_ptr] |= ((sdbuffer[sd_ptr++] & 0xFC) << 3);

tftbuffer[tft_ptr] |= ((sdbuffer[sd_ptr++] & 0xF8) << 8);

tft_ptr++;

} // Next row } // All rows done

// Write any partially full buffer to TFT if (tft_ptr) tft.pushColors(tftbuffer, tft_ptr);

} // End of bitmap access } // End of bitmap file check //} // We can close the file now bmpFile.close();

//if(!goodBmp) Serial.println(F("BMP format not recognized."));

tft.setRotation(rotation); // Put back original rotation }

/****************************************************************************

** Function name: Support functions for drawBMP()

** Descriptions: Read 16 and 32-bit types from the SD card file

****************************************************************/

// BMP data is stored little-endian, Arduino is little-endian too.

// May need to reverse subscript order if porting elsewhere.

uint16_t read16(File &f) { uint16_t result;

((uint8_t *)&result)[0] = f.read(); // LSB ((uint8_t *)&result)[1] = f.read(); // MSB return result;

}

uint32_t read32(File &f) { uint32_t result;

((uint8_t *)&result)[0] = f.read(); // LSB ((uint8_t *)&result)[1] = f.read();

((uint8_t *)&result)[2] = f.read();

((uint8_t *)&result)[3] = f.read(); // MSB return result;

}

(26)

En esta sección se tiene la función fourth(), donde se tienen las preguntas y respuestas, las cuales se visualizan en la pantalla. Además se tienen los programas y funciones para la interacción de los botones y leds con el Arduino.

// Contiene las preguntas para los de grado 4

#include <stdio.h>

#include <stdlib.h>

#include <time.h>

long question;

void fourth() {

// Standard BMP files are usually stored with a raster scan of pixel values from bottom up // File names MUST use the 8.3 file name format (8 chars + . + any 3 extension letters) // By convention bitmap files end in .bmp // Bit maps MUST be in 24 bit colout (not 16 or 8 bit greyscale)

// Landscape mode tft.setRotation(1);

tft.fillScreen(TFT_BLACK);

int array[30] = {};

int i=0;

int j;

int x;

int p;

int r;

while(i<27){

r=random(27)+1; //Aqui se genera numero aleatorio de 0 a 30 y se guarda en un array.

for(x=0;x<i;x++){

if(array[x]==r){

break;

} } if(x==i){

array[i++]=r;

} }

for( j=0;j<27;j++){ // aqui se llama lo elementos del array, cada

switch(array[j]){ // elemento es asignada a una imagen.

case 1:

drawBMP("g4_1.bmp", 0,0,BU_BMP);//llama la función para desplegar

boton(); // imagen en la pantalla.

if(V2 == HIGH){ // para cada imagen se programa el botón con la

digitalWrite(greenled,1); //respuesta correcta tft.setRotation(1);

tft.fillScreen(TFT_GREEN);

tft.setTextColor(TFT_MAGENTA); //para que muestra en la pantalla

tft.setTextSize(5); // que se selecciono la respuesta

tft.setCursor(70,50,2); // correcta y se encienda el led

tft.println("RESPUESTA"); // verde tft.setCursor(70,150,2);

tft.println("CORRECTA");

delay(1000);

contador(); //

delay(1000);

digitalWrite(greenled,0);

} else{

digitalWrite(redled,1);

tft.setRotation(1);

tft.fillScreen(TFT_RED);

tft.setTextColor(TFT_YELLOW); // para que muestre en la pantalla

tft.setTextSize(5); // que se seleccino la respuesta

tft.setCursor(70,50,2); // incorrrecta y se encienda el led

tft.println("RESPUESTA"); // roj.

tft.println("INCORRECTA");

delay(1000);

} break;

case 2:

drawBMP("g4_2.bmp",0,0,BU_BMP);

boton();

if(V3 == HIGH){

tft.setRotation(1);

tft.setTextColor(TFT_MAGENTA);

tft.setTextSize(5);

tft.println("RESPUESTA");

tft.setTextSize(5);

delay(1000);

} break;

case 3:

drawBMP("g4_3.bmp",0,0,BU_BMP);

boton();

if(V2 == HIGH){

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

contador();

delay(1000);

} else{

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

} break;

case 4:

drawBMP("g4_4.bmp", 0,0, BU_BMP);

boton();

if(V3 == HIGH){

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

contador();

delay(1000);

} else{

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

} break;

case 5:

boton();

if(V3 == HIGH){

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

contador();

delay(1000);

} else{

} break;

case 6:

boton();

if(V1 == HIGH){

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

contador();

delay(1000);

} else{

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

} break;

case 7:

boton();

if(V3 == HIGH){

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

contador();

delay(1000);

} else{

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

} break;

case 8:

boton();

if(V2 == HIGH){

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

contador();

delay(1000);

} else{

tft.setRotation(1);

tft.setTextSize(5);

if(V2 == HIGH){

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

contador();

delay(1000);

} else{

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

} break;

case 10:

boton();

if(V3 == HIGH){

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

contador();

delay(1000);

} else{

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

} break;

case 11:

boton();

if(V1 == HIGH){

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

contador();

delay(1000);

} else{

tft.setRotation(1);

tft.setTextSize(5);

delay(1000);

} break;