Instalación y arranque

Instalar

Copia la carpeta completa SimpleUI dentro de la carpeta libraries del sketchbook de Processing. El archivo cargado por Processing es SimpleUI/library/SimpleUI.jar. Reinicia el IDE después de instalar o actualizar la librería.

Elegir el import

// Processing Desktop
import simpleui.desktop.*;

// Processing for Android
import simpleui.android.*;

// SimpleCore es común a las dos plataformas
import simplecore.*;

Esqueleto mínimo

import simpleui.desktop.*;

void settings() {
  size(800, 600);
}

void setup() {
  SimpleUI.initUI(this, "SansSerif", 18);
  SimpleUI.setMode(800, 600);
}

void draw() {
  background(SimpleUI.currentTheme.backgroundColor);
  SimpleUI.updateAndDrawUI();
}

Orden de dibujo

updateAndDrawUI() debe ejecutarse después del fondo y del contenido que tenga que quedar detrás de la interfaz. Si necesitas separar ambas fases, utiliza updateUI() y drawUI().

Eventos automáticos

initUI() instala un puente de eventos mediante el ciclo de vida de Processing. No es necesario declarar mousePressed(), mouseDragged(), mouseReleased(), keyPressed() ni keyTyped() en el sketch.

Recibir eventos

SimpleUI.setUIEventHandler(new UIEventHandler() {
  public void onUIEvent(UIElement element, String action, Object data) {
    println(element.id + " → " + action + " → " + data);

    if (element.id.equals("guardar") && action.equals("clicked")) {
      guardarDatos();
    }
  }
});

Control manual y teclado Android

Desktop y Android

Las dos implementaciones viven en el mismo JAR, pero en paquetes separados para evitar dependencias Android al compilar un sketch Desktop.

Contrato común desde 0.5.0

• Controles y modelos: todas las clases ofrecen los mismos constructores y métodos públicos en los dos paquetes.
• Resolución virtual: setMode(), UIScaleMode y las conversiones de coordenadas funcionan igual en Desktop y Android.
• UISwitch: ofrece una selección booleana compacta y emite changed.
• UIDropdown: emite changed.
• UISlider: emite changed durante el movimiento y released al terminar.
• Modales: admiten tanto actionId con handler como callbacks Runnable.
• chatArea: admite footer y recibo de lectura en ambas plataformas.

SimpleUI

SimpleUI mantiene el host de Processing, la colección de controles, el tema, la escala, los estados de interacción y el receptor global de eventos.

API de uso habitual

Estado público útil

currentTheme, uiScale, scaleMode, designWidth, designHeight, logicalWidth, logicalHeight, viewportOffsetX, viewportOffsetY, modeConfigured, uiElements, activeDropdown, activeTextField y activeUIModal permiten inspección avanzada. Para enseñanza inicial es preferible usar los métodos de alto nivel.

SimpleUI.LIBRARY_AUTHOR devuelve "Luis lopez martinez" y SimpleUI.LIBRARY_LICENSE devuelve "MIT". Las mismas constantes están disponibles en simplecore.Core.

Resolución virtual y escala

Diseña una sola vez con una resolución lógica —por ejemplo 1280 × 720— y deja que SimpleUI adapte dibujo, controles, modales y entrada a la ventana o pantalla real.

SimpleUI.initUI(this, "SansSerif", 18);
SimpleUI.setMode(1280, 720, UIScaleMode.RESPONSIVE);

void draw() {
  background(SimpleUI.currentTheme.backgroundColor);
  SimpleUI.updateAndDrawUI();
}

Modos disponibles

API del viewport

Estado resuelto del viewport

Layout adaptable

SimpleUI escala automáticamente cada control, pero no decide cómo repartir el espacio adicional de RESPONSIVE. Cuando cambien getLogicalWidth() o getLogicalHeight(), usa setPosition() y setSize() para ampliar tablas, paneles o áreas gráficas.

UIElement

UIElement(String id, int x, int y, int width, int height)

Es la base de todos los controles. Define posición, dimensiones, identificador, visibilidad, activación y anclaje.

Temas y configuración

UIColorTheme contiene los valores DARK y LIGHT. UIConfig representa los seis colores resueltos del tema.

SimpleUI.setTheme(UIColorTheme.DARK);
background(SimpleUI.currentTheme.backgroundColor);

int acento = SimpleUI.currentTheme.accentColor;
int texto   = SimpleUI.currentTheme.textColor;

Varios controles proporcionan setColors(), setTextColor() o setBorderColor() para sobrescribir localmente el tema.

UIButton y UIImageButton

UIButton(id, x, y, w, h, label, fontSize)
UIImageButton(id, x, y, w, h, PImage imagen)
UIImageButton(id, x, y, w, h, PImage imagen, imageW, imageH)

UIButton representa una acción textual. UIImageButton hereda su comportamiento y reemplaza la presentación por una imagen.

Evento clicked, con data == null.

UIButton guardar = new UIButton("guardar", 30, 30, 160, 46, "Guardar", 18);
SimpleUI.addUIElement(guardar);

// En onUIEvent:
if (element == guardar && action.equals("clicked")) {
  println("Datos guardados");
}

UILabel y UIIndicator

UILabel(id, x, y, w, h, texto, fontSize)
UIIndicator(id, x, y, size)

UILabel muestra texto no interactivo; UIIndicator dibuja un testigo circular de estado.

UILabel estado = new UILabel("estado", 60, 30, 260, 30, "Conectado", 18);
UIIndicator led = new UIIndicator("led", 30, 33, 20);
led.setIndicatorColor(color(30, 190, 100));
SimpleUI.addUIElement(estado);
SimpleUI.addUIElement(led);

UICheckbox y UISwitch

UICheckbox(id, x, y, size, label, fontSize)
UISwitch(id, x, y, w, h, label, initialValue, fontSize)

Ambos controles representan un valor booleano. UICheckbox usa una casilla tradicional; UISwitch ofrece un interruptor compacto con pista, cursor y etiqueta, integrado con escala, temas y eventos.

Evento Los dos emiten changed; data contiene el nuevo boolean.

UICheckbox sonido = new UICheckbox("sonido", 30, 40, 24, "Activar sonido", 17);
sonido.setChecked(true);
SimpleUI.addUIElement(sonido);

UISwitch ordenar = new UISwitch(
  "ordenar", 30, 85, 250, 38,
  "Ordenar por intensidad", false, 16
);
SimpleUI.addUIElement(ordenar);

// En onUIEvent:
if (element == sonido && action.equals("changed")) {
  boolean activo = (Boolean)data;
}
if (element == ordenar && action.equals("changed")) {
  println((Boolean)data ? "Orden RSSI" : "Orden topológico");
}

UISlider y UIProgressBar

UISlider(id, x, y, w, h, min, max, initialValue, fontSize)

UIProgressBar(id, x, y, w, h)

UISlider emite changed con un float durante el movimiento y released al finalizar.

UISlider volumen = new UISlider("volumen", 30, 50, 280, 34, 0, 100, 50, 16);
UIProgressBar nivel = new UIProgressBar("nivel", 30, 105, 280, 18);
SimpleUI.addUIElement(volumen);
SimpleUI.addUIElement(nivel);

// En onUIEvent:
if (element == volumen && action.equals("changed")) {
  nivel.setProgress(((Float)data) / 100.0);
}

UIDropdown y UITabs

UIDropdown(id, x, y, w, h, String[] options, fontSize)
UITabs(id, x, y, w, h, String[] tabs, fontSize)

UIDropdown

Evento changed con el texto elegido.

UITabs

Evento tabChanged con la etiqueta elegida.

String[] modos = { "Básico", "Avanzado", "Experto" };
UIDropdown selector = new UIDropdown("modo", 30, 40, 220, 44, modos, 17);
UITabs tabs = new UITabs("secciones", 30, 110, 360, 42,
  new String[]{ "Inicio", "Datos", "Ajustes" }, 16);
SimpleUI.addUIElement(selector);
SimpleUI.addUIElement(tabs);

UIList y UITable

UIList(id, x, y, w, h, fontSize)
UITable(id, x, y, w, h, String[] headers, float[] columnWidths, fontSize)

UIList

Evento itemSelected con el texto.

UITable

Evento rowSelected con la fila como String[].

Cuando hay desbordamiento, la tabla muestra automáticamente un rail vertical y un cursor proporcional: cuanto mayor sea la parte visible del contenido, mayor será el cursor. Puede desplazarse con rueda, arrastre del contenido, arrastre del cursor o clic sobre el rail.

UITable alumnos = new UITable("alumnos", 30, 40, 520, 260,
  new String[]{ "Nombre", "Curso", "Nota" },
  new float[]{ .45, .30, .25 }, 16);
alumnos.addRow(new String[]{ "Ada", "Processing", "9.5" });
alumnos.addRow(new String[]{ "Alan", "Java", "8.7" });
SimpleUI.addUIElement(alumnos);

UITextField y UITextArea

UITextField(id, x, y, w, h, placeholder, fontSize)
UITextArea(id, x, y, w, h, placeholder, fontSize)

UITextField introduce una sola línea. UITextArea admite varias líneas, ajuste de texto y desplazamiento interno.

Eventos changed durante la edición y submitted al confirmar; ambos entregan el texto.

UITextField nombre = new UITextField("nombre", 30, 40, 300, 44, "Tu nombre", 17);
nombre.setMaxLen(40);
UITextArea notas = new UITextArea("notas", 30, 105, 420, 150, "Observaciones", 16);
SimpleUI.addUIElement(nombre);
SimpleUI.addUIElement(notas);

UINumberField

UINumberField(id, x, y, w, h, placeholder, fontSize)

Eventos changed entrega texto; submitted entrega Float o null.

UINumberField nota = new UINumberField("nota", 30, 40, 180, 44, "0 a 10", 17);
nota.setAllowDecimal(true);
nota.setAllowNegative(false);
nota.setRange(0, 10);
SimpleUI.addUIElement(nota);

UIPanel

UIPanel(id, x, y, w, h)

Superficie visual para agrupar controles. No contiene automáticamente otros elementos: el programador coloca los controles sobre sus coordenadas y debe añadir primero el panel para que quede detrás.

UIPanel panel = new UIPanel("datos", 20, 20, 420, 180);
panel.setTitle("Datos del alumno", 18);
SimpleUI.addUIElement(panel); // Primero: queda detrás
SimpleUI.addUIElement(new UITextField("nombre", 40, 70, 300, 42, "Nombre", 16));

chatArea

chatArea(id, x, y, w, h)

Área desplazable que presenta mensajes como burbujas a izquierda o derecha. El nombre público de la clase comienza en minúscula por compatibilidad con el código original.

chatArea chat = new chatArea("chat", 20, 30, 440, 300);
chat.addMessage(0, "¿Preparado para empezar?");
chat.addMessage(1, "Sí, vamos allá.");
chat.scrollToBottom();
SimpleUI.addUIElement(chat);

UISignalMeter

UISignalMeter(id, x, y, w, h, label)

Representa intensidad de señal a partir de RSSI en dBm y la traduce a segmentos y etiqueta de S-meter.

UISignalMeter señal = new UISignalMeter("rssi", 30, 30, 300, 70, "LoRa");
señal.setRssi(-92);
SimpleUI.addUIElement(señal);

UIView y UIViewManager

Una UIView agrupa controles que deben aparecer y desaparecer juntos. UIViewManager prepara vistas, cambia la vista activa y enruta sus eventos.

Ciclo de vida de una vista

UIViewManager

UIViewManager paginas = new UIViewManager("principal");

class InicioView extends UIView {
  InicioView() { super("inicio", paginas); }

  public void initialize() {
    addControl(new UIButton("continuar", 30, 40, 180, 44, "Continuar", 17));
  }
}

InicioView inicio = new InicioView();
paginas.show(inicio);

Modales

Alertas rápidas

SimpleUI.showAlertModal("Información", "Los cambios se han guardado.", "Aceptar");

Confirmación

Ambas plataformas permiten usar showConfirmModal(título, mensaje, aceptar, cancelar, actionId) con setModalResultHandler(), o la variante con dos callbacks Runnable.

SimpleUI.showConfirmModal("Borrar", "¿Eliminar el registro?", "Sí", "No",
  new Runnable() { public void run() { borrar(); } },
  new Runnable() { public void run() { println("Cancelado"); } }
);

UIModal personalizado

Subclasifica UIModal, implementa initialize(), añade controles con addControl() y usa show()/hide(). Los hooks onShow() y onHide() permiten reaccionar al ciclo de vida.

UICalendar

UICalendar(id, x, y, w, h)
UICalendar(id, x, y, w, h, UIDate initialDate)

Navegación y selección

Eventos de agenda

Eventos dateSelected → UICalendarSelection; selectionCleared; monthChanged, yearChanged y viewChanged → UIDate.

UICalendar calendario = new UICalendar("agenda", 30, 30, 430, 350);
UIDate hoy = SimpleUI.getUIToday();
calendario.addEvent("clase", hoy, "Clase de Processing")
          .setColor(color(37, 99, 235))
          .setData("Aula 2");
SimpleUI.addUIElement(calendario);

// En onUIEvent:
if (element == calendario && action.equals("dateSelected")) {
  UICalendarSelection seleccion = (UICalendarSelection)data;
  println(seleccion.date + " · " + seleccion.events.size() + " eventos");
}

UICalendarEvent

Expone getId(), getTitle(), getStart(), getEnd(), getColor(), getData() e isVisible(). Sus setters encadenables son setTitle(), setColor(), setData(), setVisible() y setInterval(). También ofrece occursOn(), hasStarted(), hasFinished(), isActiveAt() y getDuration().

Fechas y tiempo

UIDate

UIDate(year, month, day)
UIDate(otraFecha)

Fecha inmutable con campos year, month y day. Valida la fecha al construirla.

UIDateTime

UIDateTime(y, m, d, hour, minute, second)
UIDateTime(y, m, d, hour, minute, second, millisecond, timeZoneId)

Fecha y hora inmutable. Ofrece getDate(), comparaciones, toEpochMilliseconds(), difference() y differenceInMilliseconds().

UITimeSpan

UITimeSpan(totalMilliseconds)

Duración con totales en milisegundos, segundos, minutos, horas o días; partes de días/horas/minutos/segundos; isNegative() y absolute().

UIDate inicio = new UIDate(2026, 9, 15);
UIDate examen = inicio.plusDays(30);
println(inicio.differenceInDays(examen));

UIDateTime entrada = new UIDateTime(2026, 9, 15, 9, 0, 0);
UIDateTime salida  = new UIDateTime(2026, 9, 15, 11, 30, 0);
UITimeSpan duracion = salida.difference(entrada);
println(duracion.getTotalMinutes()); // 150

UIDateComparator, UIDateTimeComparator y UICalendarEventDateComparator son comparadores auxiliares usados para ordenar colecciones.

Core

Core coordina tareas en cada fotograma. Solo puede existir una instancia ligada a un único PApplet.

Señales

Representación

El renderizado automático está activo. Usa setAutomaticRendering(false) y llama renderTasks() cuando necesites controlar las capas. setTaskCanvasScale() aplica una escala común a todas las tareas gráficas.

Task

Una tarea encapsula estado y comportamiento actualizado por fotogramas. Se registra automáticamente al ejecutar su constructor.

Ciclo de vida que se sobrescribe

import simplecore.*;

class Pelota extends Task {
  Pelota(PImage imagen) {
    setGraph(imagen).setPosition(80, 120).setZ(10);
  }

  protected void initialize() {
    priority = 5;
  }

  protected void frame() {
    advance(0, 2);        // 0° = derecha
    setAngle(angle + 1);
    if (x > width + 50) kill();
  }

  protected void onDestroy() {
    println("Pelota destruida: " + id);
  }
}

void setup() {
  size(640, 360);
  Core.start(this);
  new Pelota(loadImage("pelota.png"));
}

Estado y API

52 sketches: 26 parejas Desktop y Android

Cada ejercicio Desktop tiene una versión Android equivalente. Los nombres y la estructura se mantienen para que el alumno pueda comparar ambas plataformas línea por línea.

Convención de nombres

Por ejemplo, Desktop06Slider y Android06Slider forman una pareja. Cada carpeta contiene un sketch independiente cuyo archivo principal tiene el mismo nombre que la carpeta.

Principios didácticos

• Variables con nombres que explican su función.
• Un único concepto nuevo por ejemplo de control.
• Sin recursos externos: iconos y sprites se generan por código.
• Sin callbacks manuales de ratón o teclado; se utiliza el puente automático de SimpleUI.

Catálogo completo de clases

La tabla distingue las clases pensadas para sketches de las clases de soporte que normalmente usa la propia biblioteca.

Tipos de soporte

UIScrollState mantiene desplazamiento y objetivo; UIGestureState registra el gesto capturado; UIGestureAxis clasifica su eje; UIGestureTarget representa el destino; UITextInputBase normaliza la interfaz de inputs. Son públicos por compatibilidad, pero no es necesario instanciarlos para el uso normal.

Recetas y buenas prácticas

Un identificador único por control

El campo id permite localizar controles y depurar eventos. Usa nombres semánticos como "guardarAlumno" y evita reutilizarlos.

Orden de capas

Los controles se dibujan en el orden en que se añaden. Añade primero paneles y fondos; después campos y botones. Dropdowns y modales reciben tratamiento especial para quedar accesibles.

Comprueba acción y elemento

public void onUIEvent(UIElement element, String action, Object data) {
  if (element.id.equals("edad") && action.equals("submitted")) {
    Float edad = (Float)data;
    if (edad != null) println("Edad: " + edad);
  }
}

Actualiza, no recrees

Crea los controles en setup() o en UIView.initialize(). Durante draw(), modifica su contenido con setters. No construyas y registres controles en cada fotograma.

Define una resolución de diseño

Escoge un ancho y un alto lógicos —por ejemplo 1280 × 720— y llama a setMode(1280, 720). Usa UIScaleMode.RESPONSIVE si el layout debe aprovechar el espacio adicional de ventanas redimensionables o pantallas con otra proporción.

Reorganiza solo cuando cambie el viewport

En un layout responsive, guarda el último valor de getLogicalWidth() y getLogicalHeight(). Recalcula posiciones y tamaños únicamente cuando cambien; evita hacerlo innecesariamente cada fotograma.

Limpieza

SimpleUI.detach() y Core.shutdown() existen para reinicios controlados y tests. En el cierre normal, ambas partes usan callbacks dispose.

Licencia MIT

SimpleUI y SimpleCore han sido diseñadas y desarrolladas por Luis López Martínez. Copyright © 2026 Luis López Martínez.

La biblioteca se distribuye bajo licencia MIT. Permite usar, copiar, modificar, fusionar, publicar, distribuir, sublicenciar y vender copias, conservando el aviso de copyright y la licencia.

Datos de esta versión

Compatibilidad comprobada

• Windows: compilación y pruebas completas con Processing 4.5.2.
• Android: compilación con Android Mode 4.6.1, Android API 33 y conversión D8.
• macOS y Linux: pendientes de verificación por la comunidad.

No incluye dependencias de ejecución de terceros. Processing 4 es necesario y los sketches Android requieren instalar Android Mode.

Código fuente y seguimiento del proyecto · Descargar la última versión