Micropython: Usando la placa TTGO T-Display de Lilygo. Parte 2

En el artículo anterior de esta serie vimos las características generales de la placa TTGO T-Display, como instalar el firmware personalizado de Micropython y como preparar las librerías para empezar a usar el display. En esta segunda parte veremos mas en detalle los distintos métodos que tenemos a nuestra disposición para mostrar distintos elementos gráficos y textos en pantalla.

Métodos gráficos

pixel

pixel (x, y, color)

Establece el color de un pixel en la posición x, y.

El origen del sistema de coordenadas se sitúa en el ángulo superior izquierdo de la pantalla. El valor de x va de 0 a 134 y el de y de 0 a 239.

line

line (x0, y0, x1, y1, color)

Dibuja una línea desde el punto (x0, y0) al (x1, y1) con el color especificado.

hline

hline (x, y, longitud, color)

Dibuja una línea horizontal del color especificado desde el punto x, y con la longitud especificada en pixeles.

vline

vline (x, y, length, color)

Dibuja una línea vertical del color especificado desde el punto x, y con una longitud especificada en pixeles.

Los métodos hline y vline son mas rápidos que line y deben utilizarse siempre que sea posible.

fill

fill (color)

Rellena la pantalla completa con el color especificado

rect

rect (x, y, ancho, alto, color)

Dibuja un rectángulo desde el punto x, y con el ancho, alto y color especificado.

fill_rect

fill_rect (x, y, width, height, color)

Dibuja un rectángulo relleno desde el punto x, y con el ancho, alto y color especificado.

El siguiente programa es un ejemplo de algunos de los métodos anteriores:

#Dibuja algunas líneas y un rectangulo relleno

from machine import Pin, SPI
import st7789

spi = SPI(1, baudrate=30000000, polarity=1, phase=1, sck=Pin(18), mosi=Pin(19))
display = st7789.ST7789(
    spi, 
    135,
    240,
    reset=Pin(23, Pin.OUT),
    cs=Pin(5, Pin.OUT),
    dc=Pin(16, Pin.OUT),
    backlight=Pin(4, Pin.OUT),
    rotation=0)

display.init ()

display.hline (0,0,135, st7789.RED)
display.vline (134, 0, 240, st7789.RED)
display.line (0,0,134, 239, st7789.RED)
   
display.fill_rect (10,100, 100,50, st7789.BLUE)

Escribiendo texto

Veamos a continuación los métodos disponibles para mostrar texto en el display

text

text (fuente, texto, x, y[, color_frente, color_fondo])

Escribe texto en el display usando la fuente especificada a partir de las coordenadas x, y. Estas coordenadas corresponden a la esquina superior izquierda del texto. Los colores color_frente y color_fondo del texto son opcionales, si no se especifican se usan los colores WHITE y BLACK respectivamente.

Este método usa fuentes del tipo mapa de bits (bitmaps o monospace) de las cuales se incluyen varios modelos, tanto de 128 como de 256 caracteres, que ya se encuentran precargados en el firmware. Para utilizar el seleccionado debemos importarlo al comienzo del programa.

Todas las fuentes están en la carpeta fonts/bitmap/ del repositorio y también se pueden agregar otras. En el siguiente ejemplo podemos ver como se pueden combinar textos con distintas fuentes:

#Imprime texto con distintas fuentes bitmap

from machine import Pin, SPI
import st7789

#Importa fuentes
import vga1_bold_16x32 as font1
import vga1_16x16 as font2

spi = SPI(1, baudrate=30000000, polarity=1, phase=1, sck=Pin(18), mosi=Pin(19))
display = st7789.ST7789(
    spi, 
    135,
    240,
    reset=Pin(23, Pin.OUT),
    cs=Pin(5, Pin.OUT),
    dc=Pin(16, Pin.OUT),
    backlight=Pin(4, Pin.OUT),
    rotation=0)

display.init ()

display.text (font1, "Hola!", 0, 0)
display.text (font2, "mundo", 0,34, st7789.RED, st7789.WHITE)

write

write (fuente, texto, x, y [, color_frente, color_fondo])

Escribe texto en el display usando la fuente especificada a partir de las coordenadas x, y. Estas coordenadas corresponden a la esquina superior izquierda del texto. Los colores color_frente y color_fondo del texto son opcionales, si no se especifican se usan los colores WHITE y BLACK respectivamente.

La diferencia entre este método y text es que la fuente puede ser tanto bitmap (monospace) como proporcional (de ancho variable).

En la carpeta fonts/truetype/ del repositorio se pueden encontrar algunas fuentes proporcionales listas para usar. Usando la herramienta font2bitmap que se encuentra en la carpeta utils del mismo repositorio se pueden convertir otras fuentes.

En el siguiente ejemplo se puede ver como usar la fuente NotoSans-Regular que está en la carpeta fonts/truetype ya convertida a módulo “.py”. Para utilizarla debemos cargarla en la memoria de la placa (no está precargada como las fuentes anteriores) e importarla desde el código (se la debe guardar quitando el símbolo “-” del nombre para que no de error).

#Imprime texto con fuente proporcional

from machine import Pin, SPI
import st7789

#Importa fuentes
import NotoSansRegular as font

spi = SPI(1, baudrate=30000000, polarity=1, phase=1, sck=Pin(18), mosi=Pin(19))
display = st7789.ST7789(
    spi, 
    135,
    240,
    reset=Pin(23, Pin.OUT),
    cs=Pin(5, Pin.OUT),
    dc=Pin(16, Pin.OUT),
    backlight=Pin(4, Pin.OUT),
    rotation=0)

display.init ()

#Imprime la cantidad de pixeles que ocupara el texto
print (display.write_len(font, "Hello"))

display.write (font, "Hello", 0, 0)

write_len

write_len (fuente, texto)

Devuelve el ancho en pixeles de la imagen correspondiente al texto si se mostrara con la fuente especificada. Es útil para saber si un texto que queremos imprimir entrará o no en el área del display que queremos utilizar.

draw

draw (fuente, texto, x, y[, fg, bg])

Escribe texto en el display usando la fuente especificada a partir de las coordenadas x, y. Estas coordenadas corresponden a la esquina inferior izquierda del texto. Los colores color_frente y color_fondo del texto son opcionales, si no se especifican se usan los colores WHITE y BLACK respectivamente. La diferencia de este método con los anteriores es que se usan fuentes vectoriales gratuitas tipo Hershey.

En la carpeta /fonts/vector/ del repositorio pueden encontrarse varias fuentes de este tipo listas para usar. Algunas están ya precargadas en el firmware.

Recuerden que siempre podemos conocer los módulos incluidos en el firmware empleando el comando help (“modules”) en la consola:

En el siguiente ejemplo se usan algunas fuentes vectoriales que están en el firmware.

from machine import Pin, SPI
import st7789

#Importa fuentes
import greekc 
import greekp
import romanc
import scriptc
import symbol

fuentes = [greekc, greekp, romanc, scriptc, symbol]

spi = SPI(1, baudrate=30000000, polarity=1, phase=1, sck=Pin(18), mosi=Pin(19))
display = st7789.ST7789(
    spi, 
    135,
    240,
    reset=Pin(23, Pin.OUT),
    cs=Pin(5, Pin.OUT),
    dc=Pin(16, Pin.OUT),
    backlight=Pin(4, Pin.OUT),
    rotation=0)

display.init ()

y=32    #Posicion inicial

for font in fuentes:
    display.draw (font, "Hola", 0, y, st7789.RED)
    y+=32

Rotación

Hasta ahora he utilizado en todos los ejemplos el display en posición vertical. También se lo puede usar horizontalmente si se lo rota con el método rotation.

rotation

rotation (r)

Rota lógicamente el display en dirección horaria: 0-Portrait (0 grados), 1-Landscape (90 grados), 2-Portrait invertido (180 grados), 3-Landscape invertido (270 grados)

from machine import Pin, SPI
import st7789

import scriptc

spi = SPI(1, baudrate=30000000, polarity=1, phase=1, sck=Pin(18), mosi=Pin(19))
display = st7789.ST7789(
    spi, 
    135,
    240,
    reset=Pin(23, Pin.OUT),
    cs=Pin(5, Pin.OUT),
    dc=Pin(16, Pin.OUT),
    backlight=Pin(4, Pin.OUT),
    rotation=0)

display.init ()
display.rotation (1)

display.draw (scriptc, "Profe Tolocka", 0, 20, st7789.YELLOW)

Conclusión

En este artículo vimos como usar algunos elementos gráficos simples como puntos, líneas y rectángulos y como mostrar texto usando distintos tipos de fuentes.

En el siguiente nos enfocaremos en los métodos disponibles para usar imágenes y seguiremos aprendiendo a sacarle provecho a esta placa tan interesante.