Display TFT ST7735S SPI 160x128 pixles


Hace algunas semanas compré un Display TFT de 1.8 puldadas a color en AliExpress, me costó aproximadamente $57 pesos mexicanos en el 2020 que ha de ser el equivalente a 4Kg de Tortilas, más el costo del envío claro. El display es pequeñito, como para un control remoto, un instrumento de medición. En la parte trasera se tiene un slot para colocar una memoria SD, donde podemos poner las fotos en formato BMP para mostrarlas en el display.


El display requiere que se encienda la luz del led de fondo para qu se muestre la imagen. No es un display para colocarlo a funcionar con baterías o por lo meno no todo el tiempo. Las mediciones oficiales son de 45.7mm x 28.03mm. pero a continuación les mostramos la hoja de datos con todas las dimensiones:


Las especificaciones que proporcionó el vendedor fueron las siguientes:

Display Color16BIT RGB 65K color
SKUMAR1801
Screen Size1.8(inch)
TypeTFT
Driver ICST7735S
Resolution128*160 (Pixel)
Module Interface4-wire SPI interface
Backlight2 White Led
Active Area28.03x35.04 (mm)
Module PCB Size38.30x62.48 (mm)
Operating Temperature-20°~60°
Storage Temperature-30°~70°
Operating Voltage5V/3.3V
Rough Weight(Package containing)18 (g)

Para hacer uso de este display hay que conectarlo. Nosotros vamos a probar primero con un Arduino Uno, y las conexiones son las siguientes:

DisplayArduino
LED+3.3VBacklight LED Control Input.
Can be controlled using 3.3V PWM output
Se puede utilizar un potenciometro como divisor de voltaje, sin embargo en la práctica para que se vea el valor tiene que estar cercano a los 3volts.
SCKD13 (Pin 19, PB5, SCK)SPI SCK Clock Input****
SDAD11 (Pin 17, PB3, MOSI)SPI MOSI Data Input
A0D8Data or Command Select Register Input (D/C)
RESETD9RESET: Reset inputEn este caso se puede poner un arreglo resistencia capacitor para que esté normalmente a positivo y solo cuando se enciende a negativo.
CSD10CS: Chip Select for SPI interfaceEste debe de estar a cero para activarlo y te puedes ahorrar este pin, si y solo si es el único dispositivo SPI en la tarjeta.
GNDGNDGND : 0V Power Input
VCC+5vVCC : 5V Power Input

Inicialización del Display de Arduino


Para programar el display necesitamos cargar dos librerías en Arduino:
  • SPI.h
  • Ucglib.h
La librería SPI es para utilizar el protocolo Serial Peripheral Interface (SPI) que son las líneas SCK, MOSI o SDA, CS. Y la librería específica para el display TFT con el Driver ST7735S es la Ucg y que en esta página vamos a descifrar sus comandos.

La primera lína que se pone antes de SETUP o LOOP es la de inicialización del Driver:

Ucglib_ST7735_18x128x160_HWSPI ucg([A0], [CS],[Reset]);

Que para este caso en particular, conforme a las conexiones que establecimos:

Ucglib_ST7735_18x128x160_HWSPI ucg(8, 10,9);

Pantalla y Fondo de Pantalla


La pantalla tiene una resolución de 128 pixeles x 160 pixles. Para limpiar la pantalla debemos de colocar el siguiente comando:
ucg.clearScreen();

Para obtener el Ancho de la Pantalla debemos de escribir el siguiente comando:
ucg.getWidth();
y hay que almacenarlo en una variable:
byte ANCHO_DISPLAY;
ANCHO_DISPLAY = ucg.getWidth();

Igualmente para saber el Largo de la Pantalla del Display utilizamos el comando:
ucg.getHeight();
y hay que almacenarlo en alguna variable:
byte ALTO_DISPLAY;
ALTO_DISPLAY = ucg.getHeight();

Resumen de los comandos relacionados con la Pantalla:
ComandoDescripciónSintaxisEjemplo
ucg.clearScreen(); Limpia la Pantalla del Display ucg.clearScreen(); ucg.clearScreen();
ucg.getWidth(); Obtiene el valor del ancho de la Pantalla medido en Pixeles. ucg.getWidth(); byte ANCHO_DISPLAY;
ANCHO_DISPLAY = ucg.getWidth();
ucg.getHeight(); Obtiene el valor de lo alto de la Pantalla medido en Pixeles ucg.getHeight(); byte ALTO_DISPLAY;
ALTO_DISPLAY = ucg.getHeight();
ucg.drawGradientBox(); Rellena con un gradiente definido por 4 colores el área delimitada por las corenadas (Xo,Yo) y (Xf,Yf). Se eligen los cuatros colores antes de invocar el comando y cada color representa una esquina del rectángulo ucg.drawGradientBox(Xo,Yo,Xf,Yf); ucg.setColor(0, 255, 255, 255);
ucg.setColor(1, 65, 105, 225);
ucg.setColor(2, 25, 25, 112);
ucg.setColor(3, 43, 72, 112);
ucg.drawGradientBox(0, 0, 128, 160);

Textos


Podemos tener dos modos de operación del Display, si se requeire que cada vez que se escriba un caracter se rellene el fondo se deberá escribir:
ucg.begin(UCG_FONT_MODE_SOLID);
con esto se previene de que se vayan a sobrescribir caracteres. Pero si por ejemplo tenemos un fondo de una imágen bonita y requerimos de escribir sobre esa imagen, tal vez nos conviene que no se le ponga fondo a las letras, para ello debemos de utilizar el comando:
ucg.begin(UCG_FONT_MODE_TRANSPARENT);

Antes de poder escribir algún texto se debe de cargar algunas de las siguientes fuentes, entre otras:
  • ucg_font_helvB08_hr
  • ucg_font_helvB08_tr
  • ucg_font_amstrad_cpc_8r
  • ucg_font_5x8_tf
  • ucg_font_courB08_tf
  • ucg_font_ncenR14_hr

para más detalle proporcionaron el siguiente documento con el listado de fuentes: Listado de Fuentes y Ejemplos. Para ello hay que utilizar el siguiente comando:

ucg.setFont([Fuente]);

Así por ejemplo, si queremos escribir en ncenR14 debemos escribir el comando:

ucg.setFont(ucg_font_ncenR14_hr);


Resumen de los comandos de texto:
ComandoDescripciónSintaxisEjemplo
ucg.begin(); Establece el modo en como se escribirán los caractéres, si se escribirán y además se escribirá el fondo o si el fondo será transparente ucg.begin([Modo]);
el modo puede ser:
UCG_FONT_MODE_SOLID
UCG_FONT_MODE_TRANSPARENT
ucg.begin(UCG_FONT_MODE_TRANSPARENT);
ucg.setFont(); Establece el tipo de fuente de letra que se va a emplear para escribir ucg.setFont([Fuente]); ucg.setFont(ucg_font_ncenR14_hr);
ucg.setPrintPos(); Establece el cursor sobre las coordenadas X,Y de la Pantalla ucg.setPrintPos(X,Y); ucg.setPrintPos(2,38);
ucg.print(); Imprime un texto en la pantalla del display ucg.print(String); ucg.print("Ancho Display:");


Autor: Maestro en Ciencias
Salvador Macías Hernández
Salvador@MaciasHernandez.com
http://salvador.maciashernandez.com