- Micropython: Usando la placa TTGO T-Display de Lilygo. Parte 1
- Micropython: Usando la placa TTGO T-Display de Lilygo. Parte 2
- Micropython: Usando la placa TTGO T-Display de Lilygo. Parte 3
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.