null
Cómo mostrar imágenes en una pantalla LCD TFT

Cómo mostrar imágenes en una pantalla LCD TFT

2 de abril de 2024

Las pantallas LCD TFT, o pantallas de cristal líquido con transistores de película delgada, son un tipo de pantalla LCD que se utiliza habitualmente en diversos dispositivos, como teléfonos inteligentes, tabletas y televisores. Las pantallas LCD TFT son conocidas por su alta calidad de imagen, sus rápidos tiempos de respuesta y su bajo consumo energético.

Una de las aplicaciones más comunes de las pantallas LCD TFT es la visualización de imágenes. Esto las hace ideales para diversos proyectos, como marcos de fotos digitales, señalización digital y proyectos de bricolaje. En este artículo, le mostraremos cómo visualizar imágenes en una pantalla LCD TFT utilizando una tarjeta SD y Arduino Due.



Lo que necesitarás


Tabla de pinout

Descripción completa de las conexiones y los pines para la conexión entre la pantalla LCD TFT, la placa de conexión para tarjetas SD y el Arduino Due.

TFT LCD y pinout de Arduino Due

Pin LCD Símbolo Conexión
1 GND GND
2 NC NC
3 NC NC
4 NC NC
5 NC NC
6 SDO NC
7 VDD 3.3V
8 VDDI 3.3V
9 SDA NC
10 CSX GND
11 DCX Pin 2 de Arduino
12 WRX Pin 11 de Arduino
13 RDX 3.3V
14 DB0 NC
15 DB1 NC
16 DB2 NC
17 DB3 NC
18 DB4 NC
19 DB5 NC
20 DB6 NC
21 DB7 NC
22 DB8 Pin 33 de Arduino
23 DB9 Pin 34 de Arduino
24 DB10 Pin 35 de Arduino
25 DB11 Pin 36 de Arduino
26 DB12 Pin 37 de Arduino
27 DB13 Pin 38 de Arduino
28 DB14 Pin 39 de Arduino
29 DB15 Pin 40 de Arduino
30 RESX 3.3V
31 IM0 3.3V
32 IM2 GND
33 GND GND
34 LED-K1 GND
35 LED-K2 GND
36 LED-K3 GND
37 LED-K4 GND
38 LED-A 3.3V
39 GND GND
40 TE NC

Pinout de la placa de conexión para tarjetas SD:

Pin de ruptura SD Conexión
GND Pin 6 SPI de Arduino Due
MISO Pin SPI 1 de Arduino Due
SCK Pin 3 SPI de Arduino Due
MOSI Pin 4 SPI de Arduino Due
CS Pin 49 de Arduino Due
5V Pin SPI 2 de Arduino Due
3.3V NC

Diagrama de cableado

El siguiente diagrama de cableado muestra cómo conectar la pantalla LCD TFT y la tarjeta SD al Arduino Due para mostrar gráficos y acceder a la tarjeta SD.

Diagrama de cableado entre una pantalla LCD TFT, una tarjeta SD y Arduino Due para mostrar una imagen en la pantalla. Expandir icono Haga clic para ampliar
Diagrama de cableado entre una pantalla LCD TFT, una tarjeta SD y Arduino Due para mostrar una imagen en la pantalla.

Convertir imagen a archivo de texto y guardar en tarjeta SD

La mayoría de las pantallas LCD no interpretan directamente formatos de imagen estándar como JPEG o PNG. En su lugar, utilizan datos de píxeles sin procesar, a menudo representados en formato hexadecimal. Primero debemos convertir la imagen en una matriz de datos de imagen descargando el software LCD Image Converter y siguiendo estos pasos:

  1. Abre el software LCD Image Converter.
  2. Vaya a Imagen -> Importar y abra la imagen que desea mostrar en la pantalla LCD. La resolución del archivo de imagen debe coincidir con la resolución de la pantalla LCD.
  3. Vaya a Opciones -> Conversión y asegúrese de que esté seleccionado el ajuste preestablecido «Color R5G6B5».
  4. Haga clic en la pestaña «Imagen». En la sección «Común», desmarque «Dividir en filas» y establezca el tamaño del bloque en «8 bits».
  5. En la parte inferior izquierda de la ventana, haz clic en «Mostrar vista previa».
  6. Copia y pega los valores hexadecimales en un editor de texto y guarda el archivo como «image1.txt».
  7. Transfiera el archivo de texto a una tarjeta SD e inserte la tarjeta SD en la placa de conexión.

Copiar el código de ejemplo al IDE de Arduino

Abre el IDE de Arduino y crea un nuevo boceto. Borra cualquier código preexistente y, a continuación, copia y pega el código que se proporciona a continuación.

/*
/Newhaven Display invierte tiempo y recursos en proporcionar este código abierto.
/¡Apoye a Newhaven Display comprando productos de Newhaven Display! 
*
* Este código se proporciona solo a modo de ejemplo y sin ninguna garantía por parte de Newhaven Display. 
* Newhaven Display no se hace responsable de ningún problema que pueda derivarse de su uso.
* El desarrollador de la aplicación final que incorpore cualquier parte de este 
* código de muestra es responsable de garantizar su funcionamiento seguro y correcto
* y de cualquier consecuencia derivada de su uso. 
* Consulte la Licencia Pública General de GNU para obtener más detalles.
*/
#include 
#include 
#include 
/****************************************************
*         PINOUT: Arduino Due -> 2.4" TFT           *
*****************************************************/
#define    RS   2     
#define    WR  11
const char slave = 0x38;
const int ChipSelect = 49;
int image_value = 0;
File myFile;
/****************************************************
*                 Function Commands                  *
******************************************************/
void comm_out(unsigned char c)
{
  PIOB -> PIO_CODR = 1 << 25;   //RS LOW
  REG_PIOC_ODSR = c << 1; 
  PIOD -> PIO_CODR = 1 << 7;    //WR LOW
  PIOD -> PIO_SODR = 1 << 7;    //WR HIGH
}
void data_out(unsigned char d)
{
  PIOB -> PIO_SODR = 1 << 25;   //RS HIGH
  REG_PIOC_ODSR = d << 1;
  PIOD -> PIO_CODR = 1 << 7;    //WR LOW
  PIOD -> PIO_SODR = 1 << 7;    //WR HIGH
}
//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
//  Window Set Function
//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
void window_set(unsigned s_x, unsigned e_x, unsigned s_y, unsigned e_y)
{
  comm_out(0x2a);    //SET column address
  data_out((s_x)>>8);     //SET start column address
  data_out(s_x);
  data_out((e_x)>>8);     //SET end column address
  data_out(e_x);
  comm_out(0x2b);    //SET page address
  data_out((s_y)>>8);     //SET start page address
  data_out(s_y);
  data_out((e_y)>>8);     //SET end page address
  data_out(e_y);
}
/****************************************************
*         Initialization and Setup Routine          *
*****************************************************/
void setup()
{
  delay(100);
  pinMode(RS,OUTPUT);  
  pinMode(WR,OUTPUT);  
  PIOC->PIO_OER = 0xFFFFFFFF;
  digitalWrite(WR, LOW);
  comm_out(0x28);  //display off
  comm_out(0x11);  //exit SLEEP mode
  delay(100);
  comm_out(0x36);  //MADCTL: memory data access control
  data_out(0x10);  //changing from 0x88
  comm_out(0x21);  //display inversion
  comm_out(0x3A);  //COLMOD: Interface Pixel format  *** 65K-colors in 16bit/pixel (5-6-5) format when using 16-bit interface to allow 1-byte per pixel
  data_out(0x55);  //0x55 = 65k   //0x65 = 262k
  comm_out(0xB2);  //PORCTRK: Porch setting
  data_out(0x0C);
  data_out(0x0C);
  data_out(0x00);
  data_out(0x33);
  data_out(0x33);
  comm_out(0xB7);  //GCTRL: Gate Control
  data_out(0x35);
  comm_out(0xBB);  //VCOMS: VCOM setting
  data_out(0x2B);
  comm_out(0xC0);  //LCMCTRL: LCM Control
  data_out(0x2C);
  comm_out(0xC2);  //VDVVRHEN: VDV and VRH Command Enable
  data_out(0x01);
  data_out(0xFF);
  comm_out(0xC3);  //VRHS: VRH Set
  data_out(0x11);
  comm_out(0xC4);  //VDVS: VDV Set
  data_out(0x20);
  comm_out(0xC6);  //FRCTRL2: Frame Rate control in normal mode
  data_out(0x0F);
  comm_out(0xD0);  //PWCTRL1: Power Control 1
  data_out(0xA4);
  data_out(0xA1);
  comm_out(0xE0);  //PVGAMCTRL: Positive Voltage Gamma control  
  data_out(0xD0);
  data_out(0x00);
  data_out(0x05);
  data_out(0x0E);
  data_out(0x15);
  data_out(0x0D);
  data_out(0x37);
  data_out(0x43);
  data_out(0x47);
  data_out(0x09);
  data_out(0x15);
  data_out(0x12);
  data_out(0x16);
  data_out(0x19);
  comm_out(0xE1);  //NVGAMCTRL: Negative Voltage Gamma control  
  data_out(0xD0);
  data_out(0x00);
  data_out(0x05);
  data_out(0x0D);
  data_out(0x0C);
  data_out(0x06);
  data_out(0x2D);
  data_out(0x44);
  data_out(0x40);
  data_out(0x0E);
  data_out(0x1C);
  data_out(0x18);
  data_out(0x16);
  data_out(0x19);
  comm_out(0x2A);  //X address set
  data_out(0x00);
  data_out(0x00);
  data_out(0x00);
  data_out(0xEF);
  comm_out(0x2B);  //Y address set
  data_out(0x00);
  data_out(0x00);
  data_out(0x01);
  data_out(0x3F);
  delay(10);
  comm_out(0x29);  //display ON
  delay(10);
  SD.begin(ChipSelect);
}
/*****************************************************
*           Loop Function, to run repeatedly         *
*****************************************************/
void loop()
{ 
  SD_Card_Image(1);
  delay(5000);
  //SD_Card_Image(2);
  //delay(5000);
  //SD_Card_Image(3);
  //delay(5000);
  //SD_Card_Image(4);
  //delay(5000);
  //SD_Card_Image(5);
  //delay(5000);
}
void SD_Card_Image(unsigned char image){       /*The images used are in a textfile*/
    unsigned char dummy;
    unsigned int incr =0;
    switch (image){
      case 1: 
        image_value=1;
        myFile = SD.open("image1.txt");  
        break;
      case 2:
        image_value=2;
        myFile =SD.open("image2.txt");    
        break;    
      case 3:
        image_value=3;
        myFile = SD.open("image3.txt");   
        break;     
      case 4:
        image_value=4;
        myFile = SD.open("image4.txt");   
        break; 
      case 5:
        image_value=5;
        myFile = SD.open("image5.txt");   
        break;           
    }
  comm_out(0x2A);  /*X address set*/
  data_out(0x00);
  data_out(0x00);
  data_out(0x00);
  data_out(0xEF);
  comm_out(0x2B);  /*Y address set*/
  data_out(0x00);
  data_out(0x00);
  data_out(0x01);
  data_out(0x3F);      
  comm_out(0x2C);  /*command to begin writing to frame memory     */
  byte  data_in1,data_in2,data_in,data_out_value;
  uint8_t data_send;
  char data_conv[1]={0};
  int i;  
  int track ;
  while (myFile.available()){ /*convert the input char data to integers*/
        dummy = myFile.read(); 
        dummy = myFile.read(); 
        data_in1 = myFile.read(); 
        data_in2 = myFile.read(); 
        data_in=data_in1;
        if(data_in >=48 && data_in<=57){    /*if values are in range of 0-9 values*/
            data_in1 = data_in-48;
            track=1;
          }
          if(data_in <=102 && data_in>=97){ /*if values are in range of a-f*/
            data_in1 = data_in - 87; 
            track=1;
          }
          if( data_in ==32/*Space*/ || data_in==44 /*comma*/ || data_in == 120 /*x*/){
            dummy =data_in;
            track=0;
            data_in1 =0;
            data_in2 =0;
          }      
        data_in=data_in2;
        if(data_in >=48 && data_in<=57){   /*if values are in range of 0-9 values*/
            data_in2 = data_in-48;
            track=1;
          }
          if(data_in <=102 && data_in>=97){/*if values are in range of a-f*/
            data_in2 = data_in - 87; 
            track=1;
          }
          if( data_in ==32/*Space*/ || data_in==44 /*comma*/ || data_in == 120 /*x*/){/*skip dummy data*/
            dummy =data_in;
            track=0;
            data_in1 =0;
            data_in2 =0;
          }              
        dummy = myFile.read(); 
        dummy = myFile.read();  
        data_out_value = data_in1<<4 | data_in2;  
        data_out(data_out_value);
      }
      myFile.close();   
}
	

Cargue el código en Arduino.

El último paso es cargar el código en el IDE de Arduino.

  1. Conecta el Arduino a tu PC con el cable USB-B.
  2. En el IDE de Arduino, selecciona la placa y el puerto.
  3. Haga clic en el botón «Cargar» para programar el Arduino con su código.

Una vez que el código se haya cargado correctamente, la imagen debería aparecer en la pantalla LCD.

Diagrama de cableado entre una pantalla LCD TFT, una tarjeta SD y Arduino Due para mostrar una imagen en la pantalla.
Una pantalla LCD TFT Newhaven que muestra una imagen procedente de una tarjeta SD, con el procesamiento y la representación de la imagen gestionados por un Arduino Due.

Conclusión

Tanto si estás aprendiendo, creando prototipos o simplemente quieres divertirte jugando con la electrónica, este tutorial describe los conceptos básicos para leer datos de imagen hexadecimales desde una tarjeta SD y mostrarlos en una pantalla LCD TFT. Esto es solo el punto de partida, y las posibilidades de ampliación son infinitas. ¡Esperamos que hayas disfrutado de este tutorial!