Módulo Display

El módulo Display es la biblioteca en JARU que proporciona funciones y atributos para controlar una pantalla gráfica (TFT). Este módulo es especialmente útil para la programación de dispositivos electrónicos, como microcontroladores y placas de desarrollo, que requieren de interfaces gráficas para interactuar con el usuario o mostrar información.

El módulo Display permite iniciar una pantalla TFT, configurar sus características y mostrar imágenes o animaciones en ella. Además, también proporciona funciones para rotar la pantalla, encender o apagar la luz de fondo, gestionar fondos de pantalla y cerrar la pantalla cuando ya no se necesita.

Uso

use Display

Para utilizar el módulo Display, es necesario importarlo al programa JARU. Luego, se debe iniciar la pantalla gráfica utilizando la función open() y configurar sus propiedades, como el ancho y alto de la pantalla y la orientación. Una vez abierta la pantalla, se pueden mostrar imágenes o animaciones utilizando la función update().

Funciones

open

La función open(ancho, alto) del módulo Display permite abrir una pantalla gráfica con el tamaño especificado por los parámetros.

use Display

Display.open(320, 240)

En este ejemplo, se importa el módulo Display y se llama a la función open() para crear una pantalla gráfica de 320×240 píxeles.

Nota sobre ESP32

La función open() del módulo Display con una pantalla TFT conectada a un ESP32 o RISC-V utiliza la configuración definida en el archivo boot.cfg del dispositivo. La resolución real será determinada por el controlador de la pantalla y la interfaz de esta.

En el caso de la VM de Windows, la resolución de la pantalla se establecerá en el alto y ancho indicados como parámetros.

close

La función close() del módulo Display se utiliza para cerrar la pantalla TFT o la ventana (en Windows) que se ha abierto previamente utilizando la función open().

La función close() tiene como objetivo liberar los recursos que se asignaron para la pantalla durante su uso.

Display.close()

Importante

La función close debe ser llamada siempre después de haber terminado de utilizar la pantalla TFT, ya que de lo contrario los recursos asignados no serán liberados.

update

La función update() del módulo Display se utiliza para actualizar el contenido de la pantalla TFT que se ha abierto previamente.

La función update() tiene como objetivo refrescar la pantalla para mostrar cualquier cambio que se haya realizado en el contenido de la pantalla desde la última vez que se actualizó.

Display.update()

Rendimiento

La función update() debe ser llamada después de que se hayan realizado los cambios en el contenido de la pantalla, de lo contrario no habrá nada que actualizar, cargando al sistema con una llamada que consume bastantes recursos.

orientation

El comando orientation() del módulo Display se utiliza para definir la orientación de la pantalla TFT.

Valor	Orientación	Descripción
0	0 grados	Modo retrato
1	90 grados	Modo paisaje
2	180 grados	Modo retrato invertido
3	270 grados	Modo paisaje invertido

var valor = 1
Display.orientation(valor)  // Establece la orientación en modo paisaje

info

En ESP32, cambiar la orientación después de inicializar el display actualizará automáticamente las propiedades width y height del módulo.

backlight

La función backlight del módulo Display se utiliza para controlar la iluminación de fondo (backlight) de la pantalla TFT.

Display.backlight(false)  // Apaga la luz de fondo del TFT
Display.backlight(true)   // Enciende la luz de fondo del TFT

El parámetro puede ser true, false, o un número entero. Un valor de 0 apagará completamente la luz de fondo, mientras que un valor distinto de 0 encenderá la luz.

info

El parámetro backlight no está disponible en todas las pantallas TFT y su implementación puede variar según el tipo de pantalla y la interfaz utilizada. En ESP32, el control de brillo utiliza valores de 0 a 255.

mode

La función mode() permite establecer u obtener el modo de dibujo del display. JARU soporta diferentes modos de renderizado para optimizar el rendimiento según las necesidades de la aplicación.

Modo	Descripción
0	Modo directo - Dibuja directamente en la pantalla
1	Modo directo con color sólido de fondo
2	Modo doble buffer (por defecto) - Usa un buffer intermedio para evitar parpadeos

// Obtener el modo actual
var modoActual = Display.mode()

// Establecer modo de doble buffer
Display.mode(2)

Rendimiento

El modo de doble buffer (2) es recomendado para animaciones y juegos, ya que evita el parpadeo de la pantalla. El modo directo (0 o 1) puede ser más rápido para aplicaciones que no requieren actualizaciones frecuentes.

loadBackground

La función loadBackground(fileName) carga una imagen BMP como fondo de la pantalla. El fondo se dibujará automáticamente en cada llamada a update().

Display.loadBackground("fondo.bmp")

Parámetro	Descripción
fileName	Nombre del archivo BMP a cargar (debe estar en la carpeta Data)

Ubicación de archivos

• En Windows: Los archivos deben estar en ../JaruVM/Data/
• En ESP32: Los archivos deben estar en /Data/ del sistema de archivos (SPIFFS/LittleFS o SD)

backPosition

La función backPosition(x, y) establece la posición del fondo cargado con loadBackground().

// Establecer posición con coordenadas
Display.backPosition(10, 20)

// También acepta una lista
Display.backPosition([10, 20])

Parámetro	Descripción
x	Posición X del fondo
y	Posición Y del fondo

drawDirect

La función drawDirect() carga una imagen BMP directamente en la memoria del display, sin usar el buffer intermedio. Es útil para mostrar imágenes estáticas como skins o marcos de interfaz.

// Cargar imagen en posición por defecto (0, 0)
Display.drawDirect("skin.bmp")

// Cargar imagen en una posición específica
Display.drawDirect(50, 100, "logo.bmp")

Parámetro	Descripción
x	Posición X donde dibujar (opcional)
y	Posición Y donde dibujar (opcional)
fileName	Nombre del archivo BMP a cargar

Uso recomendado

Usa drawDirect() para elementos estáticos de la interfaz que no cambian frecuentemente, como marcos o fondos decorativos. Esto libera memoria del buffer para otros elementos dinámicos.

viewWidth

La función viewWidth() permite obtener o establecer el ancho del área de visualización (view). El view es una región rectangular dentro de la pantalla donde se realizan las operaciones de dibujo.

// Obtener el ancho actual del view
var ancho = Display.viewWidth()

// Establecer un nuevo ancho
Display.viewWidth(280)

viewHeight

La función viewHeight() permite obtener o establecer el alto del área de visualización (view).

// Obtener el alto actual del view
var alto = Display.viewHeight()

// Establecer un nuevo alto
Display.viewHeight(200)

Concepto de View

El View es un concepto importante en JARU. Permite definir un área de dibujo que puede ser menor que la pantalla completa. Por defecto, el view se centra automáticamente en la pantalla. Esto es útil para:

• Crear áreas de juego con bordes decorativos
• Simular diferentes resoluciones en una pantalla más grande
• Optimizar el rendimiento dibujando solo en un área reducida

Propiedades

width

Devuelve el ancho de la pantalla en píxeles.

var ancho = Display.width
println("Ancho de pantalla: ", ancho)

height

Devuelve el alto de la pantalla en píxeles.

var alto = Display.height
println("Alto de pantalla: ", alto)

draw

Referencia al módulo Draw para acceder a las funciones de dibujo de primitivas gráficas.

var draw = Display.draw
draw.circlefill(100, 100, 50, 0xFF0000)

Ejemplo completo

use Display

// Abrir display en modo paisaje
Display.open(320, 240)
Display.orientation(1)

// Configurar modo de doble buffer
Display.mode(2)

// Cargar un fondo
Display.loadBackground("fondo.bmp")
Display.backPosition(0, 0)

// Obtener referencia a Draw
var draw = Display.draw

// Bucle principal
while (true)
    // Dibujar elementos
    draw.circlefill(160, 120, 30, 0x00FF00)
    draw.rect(50, 50, 270, 190, 0xFFFFFF)
    
    // Actualizar pantalla
    Display.update()
    
    pause(16)  // ~60 FPS
end

// Cerrar display al terminar
Display.close()