Lilygo T-Display S3

T-Display-S3 es una placa de desarrollo cuyo chip de control principal es ESP32-S3. Está equipado con una pantalla LCD a color de 1,9 pulgadas y dos botones programables. Comunicación mediante la interfaz I8080 Conserva el mismo diseño de diseño que T-Display. Puede usar directamente ESP32S3 para comunicación o programación USB.

T-Display-S3 is a development board whose main control chip is ESP32-S3. It is equipped with a 1.9-inch LCD color screen and two programmable buttons.Communication using I8080 interface Retains the same layout design as T-Display. You can directly use ESP32S3 for USB communication or programming.

GitHub:

• https://github.com/Xinyuan-LilyGO/T-Display-S3

Esquemático--Schematic:

• https://github.com/Xinyuan-LilyGO/T-Display-S3/blob/main/schematic/T_Display_S3.pdf

Abrimos el--Open the IDE

Si queremos podemos ver como detecta--We can see how Arduino IDE detect our--nuestra T-Display S3 mediante la opción--with the option Get Board Info

Tras conectarse exitosamente veremos la hora y que en segundos se colocara correctamente. Y al presionar el botón KEY podremos cambiar a la Imagen animada del fabricante, si pulsamos nuevamente veremos la información sobre el chip, PSRAM, Flash y la tensión suministrada por la fuente de alimentación, en este caso el puerto USB de la Raspberry Pi.

After connecting successfully we will see the time and that in seconds it will be placed correctly. And by pressing the KEY button we can change to the Animated Image of the manufacturer, if we press again we will see the information about the chip, PSRAM, Flash and the voltage supplied by the power supply, in this case the USB port of the Raspberry Pi.

Listo, hemos compilado nuestro primer ejemplo.

Done!, we have sucessfully compile our first example.

Abrimos el--Open the IDE

Verificamos, compilamos y subimos el código.--Verify and Upload the code.

Listo, hemos compilado nuestro segundo ejemplo.

Done!, we have sucessfully compile our second example.

Firmwares:

MicroPython + S3LCD Display Driver Compilation

Fonts

Vector fonts:

Bitmap fonts:

Códigos de Ejemplo--Code's example

MicroPython code

Teoría sobre la librería S3LCD

Constantes de color S3LCD:

La librería define varias constantes de color que puedes usar al dibujar texto, formas, o gráficos en la pantalla. Estas constantes están predefinidas en s3lcd y son comunes para manejar pantallas de este tipo.

• s3lcd.BLACK

• s3lcd.WHITE

• s3lcd.RED

• s3lcd.GREEN

• s3lcd.BLUE

• s3lcd.CYAN

• s3lcd.MAGENTA

• s3lcd.YELLOW

Métodos del objeto S3LCD: 

Cuando creamos un objeto tft con tft_config.config(), obtenemos una instancia de la clase S3LCD. Este objeto tiene varios métodos que podemos usar para interactuar con la pantalla, como dibujar texto, formas, rellenar áreas, desplazar la pantalla, etc. Aquí hay algunos métodos clave:

• tft.init(): 

Inicializa el controlador de la pantalla.

• tft.off(): 

Apaga la pantalla.

• tft.on(): 

Enciende la pantalla.

• tft.width(): 

Devuelve el ancho de la pantalla.

• tft.rotation(r):

Establece la rotación de la pantalla lógica en dirección contraria a las agujas del reloj.

• • • r: 

Un entero que determina la rotación de la pantalla:

• • • • 0: Retrato (0 grados)

      • 1: Paisaje (90 grados)

      • 2: Retrato invertido (180 grados)

      • 3: Paisaje invertido (270 grados)

Ejemplo:

Requiere from tft_config import config, import vga1_16x16 as font

• • • tft = config(0)

    • tft.init()

    • tft.rotation(1)

    • tft.text(font,"hola",0,0)

    • tft.rotation(2)

    • tft.text(font,"hola",0,0)

    • tft.rotation(3)

    • tft.text(font,"hola",0,0)

    • tft.rotation(0)

    • tft.text(font,"hola",0,0)

• tft.height(): 

Devuelve el alto de la pantalla.

• tft.pixel(x, y, color): 

Dibuja un solo píxel en la posición (x, y) con el color especificado.

• • • Ejemplo: tft.pixel(10, 10, s3lcd.YELLOW)

• tft.fill(color): 

Llena toda la pantalla con el color especificado.

• • • Ejemplo: tft.fill(s3lcd.BLACK)

• tft.text(font, text, x, y, color): 

Dibuja texto en la pantalla usando una fuente específica, coordenadas (x, y), y un color.

• • • Ejemplo: tft.text(font, "Raspberry Pi Buenos Aires", 0, 0, s3lcd.WHITE)

• write(bitmap_font, s, x, y, fg, bg, background_tuple, fill_flag): 

Permite mostrar texto en la pantalla utilizando un módulo de fuente de tipo bitmap.

• • • Parámetros:

      • bitmap_font: Requiere import chango_16 as bitmap_font por ejemplo.

El módulo de fuente bitmap que deseas utilizar para el texto. Este puede ser un módulo creado con la utilidad font2bitmap.

• • • • s: 

La cadena de texto que deseas mostrar en la pantalla. Asegúrate de que esté codificada en UTF-8.

• • • • x: 

La coordenada x para el punto superior izquierdo donde se dibujará el texto.

• • • • y: 

La coordenada y para el punto superior izquierdo donde se dibujará el texto.

• • • • fg (opcional): 

Color del primer plano (texto). Por defecto, es blanco.

• • • • bg (opcional): 

Color del fondo. Por defecto, es negro.

• • • • background_tuple (opcional): 

Una tupla que contiene un buffer de bitmap, ancho y alto para simular transparencia.

• • • • fill_flag (opcional): 

Este parámetro permite definir cómo se maneja el fondo del texto.

Ejemplo: 

• tft.write(bitmap_font, "Raspberry Pi Buenos Aires", 5, 5, s3lcd.BLACK, s3lcd.WHITE)

• tft.draw(vector_font, s, x, y, fg, scale): 

Dibuja algo en las coordenadas (x, y) usando los datos proporcionados.

• • Parámetros:

    • vector_font: Requiere import music as vector_font por ejemplo.

El módulo de fuente vectorial que deseas utilizar para el texto. Este módulo debe ser compatible y se puede crear usando utilidades específicas para fuentes.

• • • s: 

La cadena de texto que deseas mostrar en la pantalla. Este texto se mostrará en la ubicación especificada.

• • • x: 

La coordenada X para el punto inferior izquierdo donde se dibujará el texto.

• • • y: 

La coordenada Y para el punto inferior izquierdo donde se dibujará el texto.

• • • fg (opcional): 

Color del primer plano (texto). Si no se proporciona, el color predeterminado es blanco.

• • • scale (opcional): 

Valor que determina el tamaño del texto. Este valor debe ser mayor que 0 y puede ser un valor de punto flotante o un entero. El valor predeterminado es 1.0.

Ejemplo: 

• • • • tft.draw(vector_font, "Raspberry Pi Buenos Aires", 0, 10, s3lcd.WHITE, 0.5)

• tft.draw_len(vector_font, s, scale): 

Define la longitud de los datos que deseas dibujar.

• tft.hline(x, y, width, color): 

Dibuja una línea horizontal en la posición (x, y) con el ancho y color especificado.

Ejemplo: 

• • • tft.hline(10, 20, 100, s3lcd.RED)

• tft.vline(x, y, height, color): 

Dibuja una línea vertical en la posición (x, y) con la altura y color especificado.

Ejemplo: 

• • • tft.vline(10, 10, 100, s3lcd.GREEN)

• tft.rect(x, y, width, height, color): 

Dibuja un rectángulo en las coordenadas (x, y) con dimensiones width x , height y sin rellenar.

Ejemplo: 

• • • tft.rect(10, 10, 50, 50, s3lcd.BLUE)

• tft.fill_rect(x, y, width, height, color): 

Llena un rectángulo en las coordenadas (x, y) con dimensiones y un color específico.

Ejemplo: 

• • • tft.fill_rect(10, 10, 50, 50, s3lcd.BLUE)

• tft.circle(x, y, r, color): 

Dibuja un círculo centrado en (x, y) con radio r y un color determinado.

Ejemplo: 

• • • tft.circle(60, 60, 30, s3lcd.RED)

• tft.fill_circle(x, y, r, color): 

Llena un círculo con color, centrado en (x, y) con radio r.

Ejemplo: 

• • • tft.fill_circle(60, 60, 30, s3lcd.GREEN)

• tft.polygon(polygon, x, y, color, angle, center_x, center_y):  

Dibuja un polígono en la pantalla en función de los parámetros especificados. 

• • Parámetros:

    • polygon: 

Una lista de tuplas que representan las coordenadas de los vértices del polígono. Por ejemplo, [(x1, y1), (x2, y2), (x3, y3), (x1, y1)].

• • • x:

La coordenada X en la que se dibujará el polígono. Esto puede ser el desplazamiento inicial en el eje X.

• • • y: 

La coordenada Y en la que se dibujará el polígono. Esto puede ser el desplazamiento inicial en el eje Y.

• • • color: 

El color con de los lados del polígono.

• • • angle: 

El ángulo de rotación del polígono, en grados. Esto permite rotar el polígono en torno a su centro.

• • • center_x: 

La coordenada X del punto central alrededor del cual se rotará el polígono.

• • • center_y: 

La coordenada Y del punto central alrededor del cual se rotará el polígono.

Ejemplo:

• • Definir los vértices de un triángulo, repitiendo el punto de origen y luego el polígono.

    • vertices = [(10, 10), (20, 30), (30, 10), (10, 10)].

    • tft.polygon(vertices, 0, 0, s3lcd.BLUE, 45, 15, 15).

• tft.fill_polygon([(x, y)], x, y, color, angle, center_x, center_y): 

Dibuja y rellena un polígono con los puntos proporcionados.

• • • Parámetros:

      • polygon: 

Una lista de tuplas que representan las coordenadas de los vértices del polígono. Por ejemplo, [(x1, y1), (x2, y2), (x3, y3), (x1, y1)]. 

• • • • x:

La coordenada X en la que se dibujará el polígono. Esto puede ser el desplazamiento inicial en el eje X.

• • • • y: 

La coordenada Y en la que se dibujará el polígono. Esto puede ser el desplazamiento inicial en el eje Y.

• • • • color: 

El color con el que se rellenará el polígono.

• • • • angle: Requiere import math 

El ángulo de rotación del polígono, en radian [grados * (math.pi/180)]. Esto permite rotar el polígono en torno a su centro.

• • • • center_x (opcional): 

La coordenada X del punto central alrededor del cual se rotará el polígono.

• • • • center_y (opcional): 

La coordenada Y del punto central alrededor del cual se rotará el polígono.

Ejemplo: 

• • • tft.fill_polygon([(10, 10), (50, 50), (10, 50), (10, 10)], 0, 0, s3lcd.MAGENTA)

Ejemplo con rotación: 

• • • tft.fill_polygon([(10, 10), (50, 50), (10, 50), (10, 10)], 0, 0, s3lcd.YELLOW,45*(math.pi/180),50,80)

• tft.blit_buffer(buffer, x, y, width, height): 

Copia un buffer de píxeles directamente en la pantalla.

• tft.bitmap(x, y, index): 

Dibuja un bitmap desde un archivo en las coordenadas (x, y). index o file Requiere ser convertido por imgtobitmap.py o monofont2bitmap.py. 

Ejemplo: 

• • • tft.bitmap(0, 0, 'imagen.bmp')

• tft.bounding(): 

Define un área limitante (bounding box) para gráficos. (Uso específico puede variar).

¿Qué es el protocolo de buffer?

• tft.blit_buffer(buffer, x, y, width, height): Copia un buffer de píxeles directamente en la pantalla.

El "buffer protocol" en MicroPython se refiere a objetos que exponen su memoria como una secuencia continua de bytes. Los tipos de datos que cumplen con este protocolo son:

• bytes

• bytearray

• array (Del módulo array de MicroPython)

Para usar tft.blit_buffer(), el buffer debe ser uno de estos tipos, donde cada píxel está representado en el formato de color requerido (probablemente RGB565 o RGB888).

Blit Buffer Protocol:

Debemos crear un buffer en el formato correcto. Normalmente, esto sería un bytearray que contiene los datos de los píxeles que deseas "blitear" a la pantalla.

S3LCD Codes