Egui, una GUI de modo inmediato escrita en Rust

 (egui.rs)
10 puntos por GN⁺ 2024-12-27 | 1 comentarios | Compartir por WhatsApp
  • egui es una biblioteca GUI de modo inmediato (Immediate Mode) escrita en Rust, que funciona en entornos web y nativos
  • En la web se compila a WebAssembly y renderiza mediante WebGL, mientras que en entornos nativos soporta varias plataformas como Mac, Linux y Windows
  • Está implementada únicamente con Rust puro, sin DOM, HTML, JS ni CSS
  • Fue diseñada para ser fácil de usar, altamente portable y ofrecer alto rendimiento

Características principales

1. Modo inmediato (Immediate Mode)

  • Un enfoque que simplifica la creación de GUI y hace más conciso el flujo del código
  • Ejemplo: 
    if ui.button("Save").clicked() {  
    my_state.save();  
}
  • No hace falta guardar el estado del botón ni usar callbacks
  • El modo inmediato mejora la usabilidad y reduce la complejidad, aunque tiene algunas limitaciones en layout y rendimiento

2. Compatibilidad entre plataformas

  • Web: funciona mediante WebAssembly y WebGL
  • Nativo: soporta Mac, Linux, Windows, Android y más
  • Puede integrarse con motores de juego (por ejemplo, integración con Bevy)

3. Integración con el ecosistema de Rust

  • Ofrece el framework oficial eframe:
  • Permite escribir aplicaciones web y nativas con el mismo código
  • Dependencias livianas:
  • egui usa solo dependencias mínimas de Rust como ab_glyph y ahash
  • Las dependencias pesadas están separadas en crates aparte (como egui_extras)

Funciones principales

  • Widgets: botones, sliders, checkboxes, radio buttons, edición de texto, selector de color y más
  • Layout: soporte para disposición horizontal, vertical, por columnas y ajuste automático de línea
  • Edición de texto: multilínea, copiar/pegar, soporte para emoji
  • Ventanas: mover, redimensionar, minimizar/cerrar
  • Renderizado: texto con antialiasing y renderizado de formas
  • Accesibilidad: soporte para lectores de pantalla mediante integración con AccessKit

Ventajas y desventajas

  • Ventajas
    • Simplicidad: permite crear GUI con código conciso sin callbacks
    • Portabilidad: el mismo código puede ejecutarse en web y en entorno nativo
    • Usabilidad: no hay problemas de sincronización entre el estado de la aplicación y el estado de la GUI
  • Desventajas
    • Complejidad del layout: por la naturaleza del modo inmediato, los layouts complejos requieren trabajo adicional
    • Uso de CPU: como hay que calcular todo el layout en cada frame, el rendimiento puede degradarse en interfaces grandes

Usuarios objetivo

  • Desarrolladores que quieran crear una GUI simple rápidamente
  • Usuarios que quieran añadir una GUI a motores de juego o proyectos basados en Rust
  • Creadores de aplicaciones que necesiten soportar tanto web como entornos nativos

Explicación adicional sobre el modo inmediato

  • A diferencia del modo retenido (retained mode) basado en callbacks, el modo inmediato procesa el estado de forma instantánea en cada frame
  • Ejemplo: if ui.button("Save").clicked() { save(); }
  • Ventaja: el flujo del código se simplifica y no hay problemas de sincronización de estado
  • Desventaja: el cálculo del layout es más complejo y puede afectar el rendimiento en interfaces grandes

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-12-27
Comentarios en Hacker News

  • Intentó entender problemas matemáticos usando frameworks de Rust, pero el ciclo edit-compile-run era demasiado largo, lo que le dificultó avanzar. Se pregunta si dividir el proyecto en módulos podría mejorar esto

  • Si el navegador no soporta renderizado subpíxel, las bibliotecas de renderizado de UI basadas en canvas quedan en desventaja frente a las basadas en DOM, excepto en dispositivos de alta resolución. La biblioteca egui también reconoce este problema

  • La página de demos compilada para el navegador es técnicamente impresionante, pero cuesta imaginar las posibilidades de las apps hechas con egui. Se pregunta si hay ejemplos interesantes que usen egui

  • En Navidad se portó mal al hacer unwrap forzado de un Option en vez de usar pattern matching, y eso provocó un error. Ocurre en la versión móvil de Brave

  • El soporte de internacionalización es limitado. Por ejemplo, si se pega el "hello" en árabe, aparece como cuadros

  • Se pregunta qué significa "modo inmediato". La forma de agregar widgets a la UI usa .add(). Se pregunta si una API fluida de builder para estos widgets es lo que lo convierte en "modo inmediato"

  • Se pregunta cómo depurar este tipo de interfaces en el navegador web. Quiere saber si se puede depurar como JavaScript o como WebAssembly de C++

  • Hay problemas con el cambio de tamaño de la ventana. En el ejemplo "Highlighting", si se hace clic en el área de agarre de la esquina inferior derecha, la flecha diagonal cambia a una flecha vertical y solo permite redimensionar verticalmente. En otros ejemplos por defecto también parece que debería poder redimensionarse vertical y horizontalmente al mismo tiempo, pero no se puede ajustar en vertical

  • La respuesta a la entrada es muy lenta. Si se escribe rápido, la entrada no logra seguir el ritmo. No es posible seleccionar ni copiar texto, lo cual es un gran problema para implementar una GUI personalizada. Les desea a todos unas felices fiestas de fin de año