Tutorial Display y Draw: dibujar en pantalla con JARU

PrincipianteDisplayDrawWindows VMESP32

Este tutorial se centra en la parte gráfica de JARU: abrir una pantalla, preparar una superficie de dibujo y construir una interfaz sencilla usando los módulos Display y Draw: texto, tarjetas, barras de estado, rectángulos y círculos.

La idea no es hacer una demo compleja, sino aprender el flujo base que luego aparece en juegos, paneles IoT y aplicaciones gráficas: abrir el display, limpiar el fondo, dibujar primitivas y actualizar la pantalla.

Lo que vas a construir

Vas a crear una pantalla de 320×240 con dos tarjetas de datos, un indicador circular y dos barras de estado. Es una base sencilla para un dashboard IoT, una pantalla de estado o el menú inicial de un juego.

Lo que necesitas

• JARU IDE instalado en Windows.
• El módulo Display, disponible en JARU.
• No necesitas pantalla física para completar el tutorial: puedes ejecutarlo en la VM de Windows.
• (Opcional) Un ESP32 con pantalla configurada para probar el resultado en hardware real.

---

Paso 1: Crear el archivo

Abre JARU IDE, crea un nuevo archivo llamado display_draw.aru y escribe este programa completo:

display_draw.aru

use Display

const SCREEN_W = 320
const SCREEN_H = 240

Display.open(SCREEN_W, SCREEN_H)
Display.mode(2)

var draw = Display.draw
draw.colorBG = 0x101820

func DrawHeader()
    draw.text(16, 14, "JARU Display Demo", 0x00FFAA)
    draw.color = 0x203040
    draw.line(16, 36, 304, 36)
end

func DrawCard(x, y, w, h, title, value, color)
    draw.color = 0x172536
    draw.rect(x, y, w, h, true)

    draw.color = color
    draw.rect(x, y, w, h, false)

    draw.text(x + 10, y + 10, title, 0xA8C0D8)
    draw.text(x + 10, y + 30, value, color)
end

func DrawDashboard()
    draw.cls()

    DrawHeader()
    DrawCard(18, 52, 130, 56, "TEMP", "24 C", 0x00FFAA)
    DrawCard(172, 52, 130, 56, "WIFI", "OK", 0x66AAFF)

    draw.color = 0xFFCC00
    draw.circle(80, 164, 34, false)
    draw.circle(80, 164, 22, true)
    draw.text(68, 160, "RUN", 0x101820)

    draw.text(150, 126, "System status", 0xFFFFFF)

    draw.text(150, 136, "CPU", 0xA8C0D8)
    draw.color = 0x33445C
    draw.rect(150, 148, 138, 14, true)
    draw.color = 0x00FFAA
    draw.rect(150, 148, 96, 14, true)

    draw.text(150, 164, "VM", 0xA8C0D8)
    draw.color = 0x33445C
    draw.rect(150, 176, 138, 14, true)
    draw.color = 0x66AAFF
    draw.rect(150, 176, 118, 14, true)

    draw.text(150, 206, "Graphics test OK", 0xA8C0D8)

    Display.update()
end

DrawDashboard()
pause(5000)
Display.close()

---

Paso 2: Abrir el display

La primera parte importa el módulo y abre una ventana gráfica de 320×240:

use Display

const SCREEN_W = 320
const SCREEN_H = 240

Display.open(SCREEN_W, SCREEN_H)
Display.mode(2)

Display.open(320, 240) crea la pantalla. En la VM de Windows se abre una ventana con ese tamaño. En ESP32, la resolución real depende de la configuración de pantalla del dispositivo.

Display.mode(2) activa el doble buffer. Es el modo más cómodo para interfaces, animaciones y juegos porque dibujas en memoria y luego muestras todo de golpe con Display.update().

Paso 3: Obtener Draw y limpiar la pantalla

Draw se obtiene desde Display.draw. No se abre por separado:

var draw = Display.draw
draw.colorBG = 0x101820

draw.colorBG define el color de fondo que usará draw.cls(). En este caso usamos un azul oscuro para que los colores de la interfaz contrasten bien.

Dentro de DrawDashboard() la primera llamada es:

draw.cls()

Eso borra la pantalla antes de dibujar el nuevo frame.

Paso 4: Dibujar texto, líneas y tarjetas

La función DrawHeader() enseña tres operaciones básicas:

draw.text(16, 14, "JARU Display Demo", 0x00FFAA)
draw.color = 0x203040
draw.line(16, 36, 304, 36)

draw.text() escribe texto en una posición concreta. draw.line() dibuja una línea entre dos puntos usando el color activo de draw.color.

La función DrawCard() reutiliza la misma estructura para crear tarjetas:

draw.color = 0x172536
draw.rect(x, y, w, h, true)

draw.color = color
draw.rect(x, y, w, h, false)

El último parámetro de draw.rect() indica si el rectángulo va relleno. Con true dibujas el fondo de la tarjeta; con false dibujas solo el borde.

Paso 5: Actualizar la pantalla

Al final de DrawDashboard() aparece la llamada más importante:

Display.update()

Sin Display.update(), el contenido puede quedarse en el buffer y no aparecer en pantalla. Una buena regla práctica es dibujar todo el frame primero y llamar a Display.update() una sola vez al final.

Paso 6: Probarlo en la VM de Windows

1. Guarda el archivo como display_draw.aru.
2. Pulsa Run o F5 en JARU IDE.
3. Deberías ver una ventana de 320×240 con el dashboard.
4. Espera 5 segundos: el programa llama a Display.close() y cierra la ventana.

Si quieres que la ventana se quede abierta indefinidamente mientras pruebas colores o posiciones, cambia el final por:

while (true)
    pause(100)
end

Paso 7: Llevarlo a ESP32

El mismo programa sirve como base para una pantalla física en ESP32, pero hay un detalle importante: en hardware real la pantalla se inicializa con la configuración del dispositivo. Revisa que tu boot.cfg o configuración de placa tenga definido el controlador, resolución, pines y orientación adecuados.

Para una primera prueba en ESP32:

1. Comprueba que tu firmware de JARU incluye soporte para tu pantalla.
2. Conecta la placa por USB.
3. Selecciona el puerto COM en JARU IDE.
4. Flashea el proyecto.
5. Si la orientación no coincide, prueba Display.orientation(1) después de Display.open().

Recomendación

Empieza probando interfaces estáticas como esta antes de pasar a animaciones o sprites. Es más fácil validar colores, coordenadas, tamaño de texto y orientación.

---

Desafío extra

Modifica el dashboard para que parezca un proyecto real:

• Cambia TEMP por BPM, HUM o BAT.
• Añade una tercera tarjeta más pequeña.
• Cambia el color de fondo con draw.colorBG.
• Sustituye el texto Graphics test OK por el nombre de tu placa ESP32.
• Duplica una barra de estado y prueba distintos anchos para representar porcentajes.

Resumen

En este tutorial has aprendido a abrir una pantalla con Display.open, activar doble buffer con Display.mode(2), obtener el objeto de dibujo con Display.draw, limpiar la pantalla con draw.cls, dibujar texto, líneas, rectángulos y círculos, y actualizar el resultado con Display.update().

Para profundizar, revisa la referencia de Display y Draw.