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.
En este artículo:
Lo que necesitarás
- Placa microcontroladora Arduino Due
- TFT de 240 x 320 con ST7789VI o IC equivalente (NHD-2.4-240320AF-CSXP)
- Una placa de conexión FFC de 40 pines y 0,5 mm de paso (NHD-FFC40)
- Una tarjeta SD
- Una placa de conexión para tarjetas SD
- Una placa de pruebas
- Cables de puente
- Un cable USB para el microcontrolador.
- Software Arduino IDE
- Software LCD Image Converter
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.
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:
- Abre el software LCD Image Converter.
- 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.
- Vaya a Opciones -> Conversión y asegúrese de que esté seleccionado el ajuste preestablecido «Color R5G6B5».
- 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».
- En la parte inferior izquierda de la ventana, haz clic en «Mostrar vista previa».
- Copia y pega los valores hexadecimales en un editor de texto y guarda el archivo como «image1.txt».
- 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.
- Conecta el Arduino a tu PC con el cable USB-B.
- En el IDE de Arduino, selecciona la placa y el puerto.
- 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.
Más información
Para más tutoriales e información, consulta nuestras otras publicaciones:
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!
Haga clic para ampliar