TFT+LCD TOUCH 2,4´´

 TFT/LCD TOUCH 2,4´´ 
ili9325_18x240x320 para LCD y ili9341 para TFT

http://www.naylampmechatronics.com/blog/26_Tutorial-pantalla-TFT-t%C3%A1ctil-con-Arduino.html
ÍNDICE
0.- TEORÍA.
1.- VISUALIZACIÓN DE TEXTOS.
2.- VISUALIZACIÓN DE TEXTOS Y FORMAS.
3.- PANTALLA TÁCTIL
4.- VISUALIZACIÓN DE IMÁGENES EN LA LCD.

https://electronicavm.net/2015/03/05/tft-lcd-touch-2-4-shield-para-arduino-uno/


0.- TEORÍA

PANTALLAS TFT


Thin-film transistor o TFT («transistor de películas finas») es un tipo especial de transistor de efecto campo
Cada píxel en una pantalla TFT es respaldada por un pequeño transistor, que es mucho más eficiente que los monitores antiguos (de tubos de rayos catódicos). Las pantallas TFT de LCD (pantalla de cristal líquido) pueden mostrar texto nítido, colores vívidos, animaciones rápidas y gráficos complejos. Esta tecnología de transistores múltiples también permite un rápido re-trazado de la pantalla de manera que la imagen no parpadee ni haga bandas.

Los transistores están integrados en el propio panel, lo que reduce la diafonía entre píxeles y mejorar la estabilidad de la imagen.
Desde 2008, muchos monitores y televisores LCD a color utilizan esta tecnología. Las pantallas TFT son muy utilizados en radiografía digital y aplicaciones de radiografía general.

El aspecto más beneficioso de la tecnología TFT es un transistor para cada píxel en la pantalla. A medida que cada transistor disminuye, lo hace también la cantidad de carga necesaria para el control. Esto permite un redibujo muy rápido de la pantalla.
Antes de la TFT, las pantallas LCD de matriz pasiva no podían mostrar con fluidez imágenes en movimiento rápido. Un puntero arrastrado a través de la pantalla, por ejemplo, del punto A al punto B, parece desaparecer entre los dos puntos. En un monitor TFT se puede realizar el seguimiento del puntero, lo que resulta en una pantalla que se puede utilizar para vídeo juegos y otras formas de multimedia.
LCD y TFT LCD La tecnología LCD utiliza moléculas de cristal líquido colocadas entre diferentes capas que los polarizan y los rotan según si se quiere mostrar un color u otro. Su principal ventaja, además de su reducido tamaño, es el ahorro de energía. Cuando estas pantallas usan transistores TFT entonces estamos hablando de TFT LCDs, los cuáles son los modelos más extendidos 

Las pantallas táctiles de TFT son utilizadas en varias unidades de LCD. Las pantallas de TFT ofrecen una interfaz de usuario más simple y pueden ser utilizadas en lugar de las pantallas táctiles tradicionales.



LA PANTALLA TFT LCD TOUCH 2,4´´ PARA ARDUINO.

Siempre he dicho que todo proyecto por simple o complejo que sea, debería llevar una pantalla, y si esa pantalla es LCD TFT de 2.4”, táctil, con lector de tarjetas MicroSD y encima, en formato Shield para Arduino UNO,estamos ante un producto de infinitas posibilidades


TFTFrontBack-p

Como hemos dicho, este shield para Arduino UNO, tiene 3 funciones principales:
Pantalla LCD para visualización de gráficos o texto
Panel táctil sobre la pantalla LCD
Lector de tarjetas MicroSD para datalogging o almacenamiento de imágenes.


Las características principales del shield son las siguientes:
  • Pantalla LCD TFT de 2,4”
  • Chip controlador LCD ILI9341 (Enlace para descargar el Datasheet ILI9341): (OJO! EN NUESTRO CASO ESTE NO ES TAMPOCO EL CHIP  DE NUESTRA PANTALLA).
  • 320×240 pixeles de resolución y 262.000 colores
  • Panel táctil resistivo de 4 hilos
  • Compatible con tensión de 5V ya que dispone de regulador de tensión en placa
  • Conexión Shield para Arduino UNO
  • Tamaño: 71 x 52 x 7 mm (L x A x H)




LIBRERÍAS NECESARIAS.
Para poder usar todas las funciones del shield, necesitamos varias librerías con algunas modificaciones de código que he tenido que hacerles para poder utilizar el shield, por lo que no disponen de los ejemplos oficiales que traen las librerías por defecto, sino unos ejemplos que he preparado para poder poner en funcionamiento el shield TFT:
  •  Librería Adafruit_TFTLCD: Esta es la librería Adafruit_TFTLCD original, que incluye drivers de varias pantallas con diferentes chips (ILI9325, ILI9341,HX8347G, HX8357) , por lo que debemos seleccionar el chip correcto en el código del sketch para poder visualizar texto, gráficos e imágenes en nuestra pantalla LCD.
  • Librería Adafruit_GFX: Esta librería de Adafruit es la que nos proporcionará el código necesario para la realización de gráficos en la pantalla (puntos, círculos, lineas, etc)
  • Librería TouchScreen: Librería que se encarga de traducir e interpretar las coordenadas, para poder trabajar con el panel táctil resistivo de 4 hilos que incluye nuestro shield.
  • Librería SD: Es la librería que incluye el entorno de Arduino por defecto para el acceso y comunicación con tarjetas SD, o en nuestro caso, MicroSD.
  • Librería SPI: Las tarjetas SD o MicroSD se comunican mediante el bus SPI con nuestro Arduino, por lo que es necesaria esta librería para poder acceder a la tarjeta.

Descarga las librerías desde aqui: LIBRERÍAS PARA TFT SD 2.4″ SHIELD 

Es muy importante descargar TODAS las librerías y colocarlas correctamente en la carpeta de librerías del IDE de Arduino (Arduino>Libraries), si no están todas las librerías y bien situadas, el shield TFT LCD no funcionará.






1.- VISUALIZACIÓN DE TEXTOS (OJO: QUITAR EN EL CÓDIGO EL CONTENIDO DE TFT.BEGIN() )

Para que funcione el programa primero añade las librerías en formato zip y en el código de ejemplo deja en blanco el contenido de la instrucción que hace referencia al tipo de chip de nuestra pantalla: tft.begin(9325)  //en uso como LCD

A continuación mostramos el código simple para visuallizar un texto en la pantalla de LCD



CÓDIGO:
#include <Adafruit_GFX.h>  
#include <Adafruit_TFTLCD.h>
Adafruit_TFTLCD tft (A3, A2, A1, A0, A4);
#define        BLACK   0x0000  // Definimos algunos colores                 
#define        RED     0xF800 
#define       GREEN   0x07E0
#define       WHITE   0xFFFF
#define       BLUE    0x001F
#define       CYAN    0x07FF
#define       YELLOW  0xFFE0
#define       MAGENTA 0xF81F
void setup() {
  tft.begin(0X9325);     //SEGUN EL CHIP DE NUESTRA PANTALLA ili9325 o ili9341
  tft.fillScreen(RED);   //ponemos un color de fondo
  tft.setRotation(0);   //0,1,2,3 horizontal,vertical...
  tft.setCursor(0, 0);  //posición
  tft.setTextSize(3);   
  tft.setTextColor(BLACK);  
  tft.println("HOLA ME LLAMO RICARDO");     
  }
void loop() {                
}


ACTIVIDADES:
1.- Modifica el código para que aparezcan otros colores, otro  texto y otra posición.





2.- VISUALIZACIÓN DE TEXTOS Y FORMAS




Ahora vamos a probar con el código que  la IDE nos pone de ejemplo (Ejemplos>Adafruit>EjemploGráfico).
En el archivo Ejemplo_Grafico.ino que cargamos en nuestro Arduino, al final del código están todas las funciones con las descripciones de los parámetros necesarios para la realización de gráficos y texto a modo de “chuleta”. Podremos dibujar a placer en nuestro LCD.


CÓGIGO:
#include <Adafruit_GFX.h>              // Libreria de graficos
#include <Adafruit_TFTLCD.h>          // Libreria de LCD
Adafruit_TFTLCD tft(A3,A2,A1,A0,A4); // Instancia del LCD
#define    NEGRO 0x0022                            
#define    ROJO  0xF800             
#define    VERDE 0x07E0
#define BLANCO 0xFFFF
#define AZUL  0x001F
#define CYAN  0x07FF
#define AMARILLO 0xFFE0
#define MAGENTA 0xF81F
void setup(){
  tft.begin(0x9325);  //según CHIP pantalla ili9325 o ili 9341
  tft.fillScreen(NEGRO);
  tft.setRotation(0); // Establecemos la posición de la pantalla Vertical u Horizontal
  tft.setCursor(40, 10);  // Posicionamos el cursor (240,320)máximo.                        
  tft.setTextSize(5); // Definimos tamaño del texto del 1 al 10  
  tft.setTextColor(CYAN); // Definimos el color del texto
 tft.println("Texto"); // Escribimos nuestro texto en el LCD.
 tft.drawLine(20,70,200,70,VERDE); //PuntoInicio X,PuntoInicioY, PuntoFinal X, PuntoFinal Y,Color
 int X = tft.width( );   // Almacenamos en la variable entera X el ancho del LCD en pixeles
 int Y = tft.height( );  // Almacenamos en la variable entera Y el alto del LCD en pixeles
 tft.setCursor(15, 90); // Situamos el cursor en una nueva posicion del LCD
 tft.setTextSize(3); // Definimos tamaño del texto.
 tft.setTextColor(ROJO); // Definimos el color del texto
 tft.print("X=");
 tft.print(X,DEC); // Imprimimos por pantalla el valor de las variables en decimal
 tft.print("Y=");
 tft.println(Y,DEC);
 tft.drawRect(20, 125, 200, 25, AMARILLO); // Dibujamos un cuadrado/rectangulo sin color de relleno  
tft.fillRect(20, 165, 60, 60, AZUL); // Dibujamos un cuadrado/rectangulo relleno de color      
tft.drawCircle(120, 195, 30, BLANCO); // Dibujamos un circulo sin color de relleno                                         
tft.fillCircle(120, 195, 20, BLANCO); // Dibujamos un circulo relleno de color (x,y,radio,color)
tft.drawTriangle(190,163,160,225,222,225,CYAN); //  Triángulo con vértices  
 tft.fillTriangle(190,240,160,302,222,302, MAGENTA); //Triángulo con vértices y color de relleno
tft.drawRoundRect(20, 245, 130, 60, 20, ROJO); // Dibujamos un cuadrado/rectangulo con los bordes redondeados                                                  
tft.fillRoundRect(35, 255, 100, 40, 15, AMARILLO); // Dibujamos cuadrado/rectangulo con vertices redondeados y relleno
}
void loop(){   
 }




ACTIVIDADES:
1.- Ahora modifica tu el código para poner nuevas formas geométricas. 

Para ello,  podrás fijarte de los tipos de instrucciones que esta librería soporta:



INSTRUCCIONES PARA PROGRAMAR TFT-LCD:

/* TFT Graphic functions
BLACK   0x0000  // Color codes for background, text or filled circles, squares or triangles.                
   RED     0xF800
   GREEN   0x07E0 
   WHITE   0xFFFF 
   BLUE    0x001F
   CYAN    0x07FF
   YELLOW  0xFFE0
   MAGENTA 0xF81F

 - tft.reset();     // Reset Screen
 - tft.begin(identifier); // Set LCD driver (identifier = 0x9325; 0x9328; 0x7575; 0x9341; 0x8357)
 - tft.width();              // Returns lcd width in pixels (240)
 - tft.height();       // Returns lcd height in pixels (320)
 - tft.setRotation(A);        // Rotate screen (A = 0; 1; 2; 3;)
 - tft.fillScreen(color);    // Set LCD Background color (See colour codes a few lines up)
 - tft.setCursor(X, Y);            // Set cursor on lcd X, Y coordinates in pixels
 - tft.setTextSize(A);                   // Set text size (A = 1; 2; 3; 4; .... 100? )
 - tft.setTextColor(color);         // Set text colour (see colour codes a few lines up)
 - tft.print("text");                      // Write on LCD some "text"
 - tft.println("text");                 // Write on LCD some "text" and set cursor on a new line
 - tft.drawLine(Xs, Ys, Xf, Yf, color);   // Draw a line (Start X coordinate, start Y coordinate, end X coordinate, end Y coordinate, color)
 - tft.drawRect(Xs, Ys, width, height, color);    // Draw a square/rectangle (Start X coordinate, start Y coordinate, Square width, square height, color)
 - tft.fillRect(Xs, Ys, width, height, color);     // Draw a filled square/rectangle (Start x coordinate, start Y coordinate, Square width, square height, color)
 - tft.drawCircle(Xs, Ys, Radius, color);     // Draw a circle (Start X coordinate, Start Y coordinate, circle radius, color)
 - tft.fillCircle(Xs, Ys, Radius, color);      // Draw a filled circle (Start X coordinate, Start Y coordinate, circle radius, color)
 - tft.drawTriangle(Xs, Ys, Xl, Yl, Xr, Yr, color);
// Draw a triangle (Top vertex X coordinate, Top vertex Y coordinate, Bottom left vertex X coordinate, Bottom left vertex Y coordinate, Bottom right vertex X coordinate, Bottom right vertex Y coordinate, color)
 - tft.fillTriangle(Xs, Ys, Xl, Yl, Xr, Yr, color);
// Draw a filled triangle (Top vertex X coordinate, Top vertex Y coordinate, Bottom left vertex X coordinate,  Bottom left vertex Y coordinate, Bottom right vertex X coordinate, Bottom right vertex Y coordinate, color)
 - tft.drawRoundRect(20, 245, 130, 60, 15, RED);    // Draw a round corners square (Start X coordinate, start Y coordinate, Square width, square height, corners radius, color)
 - tft.fillRoundRect(40, 260, 90, 30, 10, GREEN);   // Draw a filled round corners square (Start X coordinate, start Y coordinate, Square width, square height, corners radius, color)
*/





3.-PANTALLA TÁCTIL

Este shield incluye sobre la pantalla un panel táctil resistivo de 4 hilos que nos permitirá obtener las coordenadas X e Y donde pulsemos sobre la pantalla, y por tanto, poder realizar acciones que van desde pintar sobre nuestro LCD como si fuera un “lienzo digital” o dibujar botones en nuestro LCD que al pulsar sobre ellos realicen una determinada acción.



PANTALLA TÁCTIL RESISTIVA

Pues bien, una pantalla táctil resistiva consiste principalmente en dos capas separadas de material plástico conductor con una determinada resistencia a la corriente eléctrica, que al pulsar en un punto determinado de la capa exterior, ésta hace contacto con la capa interior y midiendo la resistencia calcula el punto exacto donde se ha pulsado en un eje de coordenadas X e Y.

Algunos tipos de pantallas resistivas permiten también la medición de un eje Z, es decir, la presión que se está realizando sobre el punto en concreto de la pantalla.

Para poder utilizar el panel táctil de nuestro shield TFT,  nos dirigimos en el IDE de Arduino 1.0 a File > Examples > Adafruit_TFTLCD > Ejemplo_Tactil
Para que funcione el programa primero añade las librerías en formato zip y en el código de ejemplo deja en blanco el contenido de la instrucción que hace referencia al tipo de chip de nuestra pantalla: tft.begin()


Además de las librerías de los gráficos y del LCD que hemos visto anteriormente, debemos incorporar la librería TouchScreen.h para poder “leer” las pulsaciones que realizamos sobre el panel táctil.


Tenemos dos variables MINPRESSURE y MAXPRESSURE que podemos modificar al gusto para establecer la presión mínima o máxima que debemos hacer sobre la pantalla para detectar la pulsación, puesto que este panel táctil también es capaz de detectar “el eje Z”.

Seguido, la declaración de la instancia del panel táctil, donde apreciamos que debemos colocar los pines que utilizará el panel táctil previamente declarados y en último lugar, debemos colocar el valor de la resistencia a la corriente eléctrica que tiene el panel. Cuanto más preciso sea este valor respecto a la resistencia real que tiene nuestro panel, mejor respuesta dará a la hora de detectar las pulsaciones.

TouchScreen ts = TouchScreen(XP, YP, XM, YM, 364);

Bien, para medir la resistencia del eje X de nuestro panel, si miramos los pines del panel táctil, vemos que el pin XP = Digital 6 y pin XM = Analógico 2, por lo que procedemos a hacer la medición de la resistencia con un multímetro de la siguiente manera:

En mi caso, la resistencia es de 364 Ω y lo colocamos en la instancia del Touchscreen.

Si queremos visualizar elementos en la pantalla LCD, debemos declarar, igual que en el ejemplo gráfico, los pines de utilización del LCD, y su instancia, etc.


El código importante de este sketch es la siguiente parte, la función lecturaPanel();


void lecturaPanel()
{
 digitalWrite(13, HIGH);
 TSPoint p = ts.getPoint(); // Realizamos lectura de las coordenadas
 digitalWrite(13, LOW);
 // La librería utiliza estos pines como entrada y salida
 pinMode(XM, OUTPUT); // por lo que es necesario declararlos
 pinMode(YP, OUTPUT); // como salida justo despues de realizar una
                      //  lectura de coordenadas.
 // Mapeamos los valores analogicos leidos del panel tactil (0-1023)
 // y los convertimos en valor correspondiente a la medida del LCD
 X = map(p.x, TS_MAXX, TS_MINX, tft.width(), 0);
 Y = map(p.y, TS_MAXY, TS_MINY, tft.height(), 0);
 Z = p.z;
}

Como vemos, realizamos la lectura constantemente del panel, para poder detectar las pulsaciones en todo momento, por lo que debemos llamar a esta función desde el void loop().

La funcion ts.getPoint(); devuelve las coordenadas X e Y de la pulsación detectada, y utilizando estas coordenadas devueltas desde el ADC en un valor comprendido entre 0 y 1023
(8 bits), simplemente las mapeamos para convertir dicho valor en un valor comprendido entre 0 y 240 para el eje X, y un valor comprendido entre 0 y 320 para el eje Y, que corresponderían con el tamaño en pixeles de nuestra pantalla.

En el void loop(); simplemente dibujo un cuadrado con texto “Botón” que al pulsar en las coordenadas que se encuentran dentro de este cuadrado, cambie de color y muestre otro texto diferente y a su vez, encienda el led que tenemos conectado en el pin digital 5. Si volvemos a pulsar el botón, el led se apagará y el botón volverá a su “estado de reposo”.

El otro ejemplo que incluye la librería, Ejemplo_Pintar, es una modificación y traducción de comentarios al español que he hecho del ejemplo TFTPaint de la librería de Adafruit, y que nos permite pintar con diferentes colores sobre el LCD como si fuera un “lienzo digital”:
Ejemplos>Adafruit>Pintar
Para que funcione el programa primero añade las librerías en formato zip y en el código de ejemplo deja en blanco el contenido de la instrucción que hace referencia al tipo de chip de nuestra pantalla: tft.begin()




CÓDIGO: (El TFT funciona con ili9341 y como LCD de antes era en ili9325)

// Paint example specifically for the TFTLCD breakout board.
// If using the Arduino shield, use the tftpaint_shield.pde sketch instead!
// DOES NOT CURRENTLY WORK ON ARDUINO LEONARDO
//TFTLCD 240X320
#include <Adafruit_GFX.h>    // Libreria de graficos
#include <Adafruit_TFTLCD.h> // Libreria de LCD
#include <TouchScreen.h>     // Libreria del panel tactil

 // Pines necesarios para los 4 pines del panel tactil
#define YP A1  // Pin analogico A1 para ADC
#define XM A2  // Pin analogico A2 para ADC
#define YM 7
#define XP 6

short TS_MINX = 150; // Coordenadas del panel tactil para delimitar
short TS_MINY = 120; // el tamaño de la zona donde podemos presionar
short TS_MAXX = 850; // y que coincida con el tamaño del LCD
short TS_MAXY = 891;

// Definimos la presion máxima y minima que podemos realizar sobre el panel
#define MINPRESSURE 1
#define MAXPRESSURE 1000

// Para mejor precision de la presion realizada, es necesario
// medir la resistencia entre los pines X+ y X-.
// En Shield TFT 2.4" LCD se mide entre los pines A2 y 6
// Instancia del panel tactil (Pin XP, YP, XM, YM, Resistencia del panel)
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 364);

#define    BLACK   0x0000  // Definimos los colores
#define    BLUE    0x001F  // que utilizaremos para
#define    RED     0xF800  // el texto y los elementos graficos
#define    GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF

#define LCD_CS A3   // Definimos los pines del LCD
#define LCD_CD A2   // para poder visualizar elementos graficos
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RESET A4

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); // Instancia LCD
#define BOXSIZE 40 // Tamaño de los cajetines de colores
#define BOXSIZEY 40 // Tamaño de los cajetines de colores
#define PENRADIUS 2 // Tamaño del cursor a la hora de pintar
int oldcolor, currentcolor; // Colores del cursor

void setup(void) {
  tft.begin(0x9341); // Iniciamos el LCD especificando el controlador ILI9341.
  tft.setRotation(3);   //0,1,2,3 horizontal,vertical...
  tft.fillRect(0, 0, BOXSIZE, BOXSIZEY, RED);  // Dibujamos los cajetines de los colores
  tft.fillRect(BOXSIZE, 0, BOXSIZE, BOXSIZEY, YELLOW);
  tft.fillRect(BOXSIZE*2, 0, BOXSIZE, BOXSIZEY, GREEN);
  tft.fillRect(BOXSIZE*3, 0, BOXSIZE, BOXSIZEY, CYAN);
  tft.fillRect(BOXSIZE*4, 0, BOXSIZE, BOXSIZEY, BLUE);
  tft.fillRect(BOXSIZE*5, 0, BOXSIZE, BOXSIZEY, MAGENTA);
  tft.fillRect(0, BOXSIZEY, 320, 240, BLACK);
  tft.drawRect(10, BOXSIZEY, 300, 190, WHITE);
  currentcolor = RED; // Color seleccionado
  pinMode(13, OUTPUT);
}
void loop(){
  digitalWrite(13, HIGH);
  TSPoint p = ts.getPoint(); // Obtenemos la lectura del panel
  digitalWrite(13, LOW);
  pinMode(XM, OUTPUT);
  pinMode(YP, OUTPUT);
  // Si se detecta presion sobre el panel
  if (p.z > MINPRESSURE && p.z < MAXPRESSURE) {
    // Si la pulsacion es el en cuadro blanco,
    if ((p.x < 300) && (p.y < 200))     {                   
      // Pintamos la pantalla de negro para "borrar" el dibujo
      tft.fillRect(0, BOXSIZE, tft.width(), tft.height()-BOXSIZEY, WHITE);
    }
 
    // Mapeamos los valores analogicos leidos del panel tactil (0-1023)
    // y los convertimos en valor correspondiente a la medida del LCD 320x240
    p.x = map(p.x, TS_MAXX, TS_MINX, 0, 320);
    p.y = map(p.y, TS_MAXY, TS_MINY, 240, 0);

    if (p.y < BOXSIZE) // Si pulsamos en un cajetin, asignamos el color de dicho cajetin
    {                  // al color actual seleccionado
   
       oldcolor = currentcolor;

       if (p.x < BOXSIZE)
       {
         currentcolor = RED;
         tft.drawRect(0, 10, BOXSIZE, BOXSIZEY, WHITE);
       }
       else if (p.x < BOXSIZE*2)
       {
         currentcolor = YELLOW;
         tft.drawRect(BOXSIZE, 10, BOXSIZE, BOXSIZEY, WHITE);
       }
       else if (p.x < BOXSIZE*3)
       {
         currentcolor = GREEN;
         tft.drawRect(BOXSIZE*2, 10, BOXSIZE, BOXSIZEY, WHITE);
       }
       else if (p.x < BOXSIZE*4)
       {
         currentcolor = CYAN;
         tft.drawRect(BOXSIZE*3, 10, BOXSIZE, BOXSIZEY, WHITE);
       }
       else if (p.x < BOXSIZE*5)
       {
         currentcolor = BLUE;
         tft.drawRect(BOXSIZE*4, 10, BOXSIZE, BOXSIZEY, WHITE);
       }
       else if (p.x < BOXSIZE*6)
       {
         currentcolor = MAGENTA;
         tft.drawRect(BOXSIZE*5, 10, BOXSIZE, BOXSIZEY, WHITE);
       }

       if (oldcolor != currentcolor)
       {
          if (oldcolor == RED) tft.fillRect(0, 10, BOXSIZE, BOXSIZEY, RED);
          if (oldcolor == YELLOW) tft.fillRect(BOXSIZE, 10, BOXSIZE, BOXSIZEY, YELLOW);
          if (oldcolor == GREEN) tft.fillRect(BOXSIZE*2, 10, BOXSIZE, BOXSIZEY, GREEN);
          if (oldcolor == CYAN) tft.fillRect(BOXSIZE*3, 10, BOXSIZE, BOXSIZEY, CYAN);
          if (oldcolor == BLUE) tft.fillRect(BOXSIZE*4, 10, BOXSIZE, BOXSIZEY, BLUE);
          if (oldcolor == MAGENTA) tft.fillRect(BOXSIZE*5, 10, BOXSIZE, BOXSIZEY, MAGENTA);
       }
    }
    if (((p.y-PENRADIUS) > BOXSIZE) && ((p.y+PENRADIUS) < tft.height()))
    {
      tft.fillCircle(p.x, p.y, PENRADIUS, currentcolor); // Dibujamos circulos con el color y tamaño seleccionado
    }
  }
}



4.- VISUALIZACIÓN IMÁGENES BMP EN EL LCD

Por último pero no menos importante, vamos a visualizar en el LCD, imágenes en formato BMP de 24 bits almacenadas en la tarjeta MicroSD del shield.
Como podemos observar en la siguiente imagen, el shield incluye un lector de tarjetas MicroSD conectado a los pines correspondientes al bus SPI, ya que utilizan este bus para comunicarse.
(Clic aqui para conocer como se comunican las tarjeta SD y Arduino)
Los pines del bus SPI se corresponden con los siguientes:
– Pin digital 10 – CS / SS (En librería Arduino SD / Este pin es configurable vía software)
– Pin digital 11 – MOSI
– Pin digital 12 – MISO
– Pin digital 13 – CLK


A tener en cuenta que las imágenes que almacenemos en nuestra MicroSD, deben ser imágenes en formato BMP de 24 bits y de tamaño máximo 320 x 240 pixeles.
Otro tipo de formatos de imagen NO los reconocerá.

Almacenamos varias imágenes en nuestra MicroSD recordando los nombres exactos que les dimos para cargarlas desde el código del sketch, e introducimos la MicroSD en nuestro Shield. 
Procedemos a cargar el ejemplo:
 File > Examples > Adafruit_TFTLCD > Ejemplo_ImagenesSD


Vemos y analizamos por partes el código hasta el void loop()

En este caso, debemos añadir además de las librerías ya utilizadas para realización de gráficos y utilización del LCD, las librerías correspondientes a la tarjeta, <SD.h> y al bus SPI, <SPI.h>


#include <Adafruit_GFX.h> // Libreria de graficos
#include <Adafruit_TFTLCD.h> // Libreria de LCD
#include <SD.h> // Libreria de tarjeta SD
#include <SPI.h> // Libreria bus SPI
#define LCD_CS A3 // Definimos los pines del LCD
#define LCD_CD A2 // para poder visualizar elementos graficos
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RESET A4
// Los pines del puerto SPI vienen configurados por libreria, 
// debemos colocar el pin correspondiente al Chip Select del
// bus SPI correspondiente a la conexion con la tarjeta SD
#define SD_CS 10
Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);



Por tanto, comprobamos y el shield tiene el pin CS en el correspondiente al pin Digital 10.


void setup()
{
 Serial.begin(9600); // Iniciamos el puerto serie para comprobar 
                     // la comunicacion con la tarjeta microSD 
 tft.begin(0x9341); // Iniciamos el LCD controlador ILI9341.
 Serial.print(F("Inicializando tarjeta SD..."));
 if (!SD.begin(SD_CS)) // Si se produce un error al intentar acceder
 {                     // a tarjeta SD, mostramos por Serial Monitor
    Serial.println(F("Error!"));
    return;
 }
   Serial.println(F("OK!"));
}


Iniciamos el Serial Monitor para poder obtener resultados del proceso de comunicación con la tarjeta SD y comprobar que todo ha sido correcto.
Inicializamos el LCD con el driver correcto e intentamos acceder a la tarjeta SD mediante la funcion SD.begin(SD_CS); Si todo va bien, veremos un “OK!” en el Serial Monitor y podremos acceder a nuestro SD para visualizar nuestras imágenes.

Y por último, vemos el void loop()

void loop(){
  tft.setRotation(0); // Establecemos posicion del LCD Vertical
  bmpDraw("1.bmp", 0, 0); // Mostramos imagen en las coordenadas 0,0
  delay(1000); // Tiempo de espera para mostrar la imagen
  tft.setRotation(3); // Establecemos posicion del LCD Horizontal
  bmpDraw("2.bmp",0,0); // Mostramos imagen en las coordenadas 0,0
  delay(1000); // Tiempo de espera para mostrar la imagen
}
En este caso, establecemos la rotación de la pantalla, en vertical u horizontal mediante la función tft.setRotation(0); en función de las imágenes que vayamos a mostrar por el LCD.
Y para visualizar las imágenes, llamamos a la función bmpDraw(“NombreImagen.bmp”, X, Y);, pasando como parámetros el nombre EXACTO que tiene nuestra imagen almacenada en la MicroSD y las coordenadas X e Y de donde queremos mostrarla en la pantalla.
Esta función viene incluida en el sketch tftbmp de la librería de Adafruit y funciona muy bien.
Y así podemos visualizar imágenes almacenadas en la tarjeta microSD.