Egui, eine in Rust geschriebene Immediate-Mode-GUI

• egui ist eine Immediate-Mode-GUI-Bibliothek, die in Rust geschrieben ist und in Web- sowie nativen Umgebungen läuft
• Im Web wird sie zu WebAssembly kompiliert und über WebGL gerendert; nativ unterstützt sie verschiedene Plattformen wie Mac, Linux und Windows
• Sie ist vollständig in reinem Rust umgesetzt, ohne DOM, HTML, JS oder CSS
• Sie wurde dafür entwickelt, einfach zu verwenden, hoch portabel und schnell zu sein

Hauptmerkmale

1. Immediate Mode

• Ein Ansatz, der die Erstellung von GUIs vereinfacht und den Codefluss kompakter macht
• Beispiel:

  if ui.button("Save").clicked() {  
      my_state.save();  
  }  
  

• Es ist nicht nötig, Button-Zustände zu speichern oder Callbacks zu verwenden
• Immediate Mode verbessert die Nutzbarkeit und reduziert die Komplexität, hat aber leichte Einschränkungen bei Layout und Performance

2. Plattformkompatibilität

• Web: läuft über WebAssembly und WebGL
• Nativ: unterstützt Mac, Linux, Windows, Android und mehr
• Kann in Game-Engines integriert werden (z. B. Integration mit Bevy)

3. Integration in das Rust-Ökosystem

• Stellt das offizielle Framework eframe bereit:
• Mit demselben Code lassen sich Web- und native Anwendungen schreiben
• Leichtgewichtige Abhängigkeiten:
• egui verwendet nur minimale Rust-Abhängigkeiten wie ab_glyph und ahash
• Schwere Abhängigkeiten sind in separate Crates ausgelagert (egui_extras usw.)

Wichtige Funktionen

• Widgets: Buttons, Slider, Checkboxen, Radio-Buttons, Textbearbeitung, Farbauswahl usw.
• Layout: horizontal, vertikal, spaltenbasiert, mit automatischem Zeilenumbruch
• Textbearbeitung: mehrzeilig, Kopieren/Einfügen, Emoji-Unterstützung
• Fenster: verschieben, Größe ändern, minimieren/schließen
• Rendering: geglätteter Text, Rendering von Formen
• Barrierefreiheit: Unterstützung für Screenreader durch AccessKit-Integration

Vor- und Nachteile

• Vorteile
  • Einfachheit: GUI-Code kann kompakt und ohne Callbacks geschrieben werden
  • Portabilität: Derselbe Code kann im Web und nativ ausgeführt werden
  • Benutzbarkeit: Keine Synchronisationsprobleme zwischen Anwendungszustand und GUI-Zustand
• Nachteile
  • Layout-Komplexität: Aufgrund der Eigenschaften von Immediate Mode ist für komplexe Layouts zusätzliche Arbeit nötig
  • CPU-Auslastung: Da in jedem Frame das komplette Layout berechnet werden muss, kann die Performance bei großen UIs sinken

Zielgruppe

• Entwickler, die schnell einfache GUIs schreiben möchten
• Nutzer, die GUIs zu Rust-basierten Game-Engines oder Projekten hinzufügen möchten
• Entwickler von Anwendungen, die sowohl Web- als auch native Umgebungen unterstützen sollen

Zusätzliche Erklärung zu Immediate Mode

• Im Unterschied zum callbackbasierten Retained Mode verarbeitet Immediate Mode den Zustand in jedem Frame unmittelbar
• Beispiel: if ui.button("Save").clicked() { save(); }
• Vorteil: Der Codefluss wird einfacher, und es gibt keine Probleme bei der Zustandssynchronisation
• Nachteil: Die Layout-Berechnung ist komplexer und kann sich bei großen UIs auf die Performance auswirken

[GN⁺]

Hacker-News-Kommentare

• Ich habe versucht, mit einem Rust-Framework mathematische Probleme nachzuvollziehen, hatte aber Schwierigkeiten, weil der Edit-Compile-Run-Zyklus zu lang war. Ich frage mich, ob es besser würde, wenn man das Projekt in Module aufteilt

• Wenn der Browser kein Subpixel-Rendering unterstützt, sind Canvas-basierte UI-Rendering-Bibliotheken gegenüber DOM-basierten im Nachteil, außer auf Geräten mit hoher Auflösung. Auch die egui-Bibliothek ist sich dieses Problems bewusst

• Die im Browser kompilierte Demo-Seite ist technisch beeindruckend, aber es ist schwer, sich vorzustellen, was für Apps mit egui möglich sind. Ich frage mich, ob es interessante Beispiele gibt, die egui nutzen

• Zu Weihnachten etwas zu frech gewesen und Option statt per Pattern Matching zwangsweise entpackt, wodurch ein Fehler ausgelöst wurde. Tritt in der mobilen Version von Brave auf

• Die Internationalisierungsunterstützung ist eingeschränkt. Wenn man zum Beispiel das arabische „hello“ einfügt, wird es als quadratische Kästchen angezeigt

• Ich frage mich, was „Immediate Mode“ bedeutet. Widgets werden mit .add() zur UI hinzugefügt. Ich frage mich, ob eine solche fluente Builder-API für diese Widgets das ist, was es zu „Immediate Mode“ macht

• Ich frage mich, wie man solche Interfaces im Webbrowser debuggt. Ob das ähnlich debuggt werden kann wie JavaScript oder C++ WebAssembly

• Es gibt ein Problem mit der Größenänderung von Fenstern. Im Beispiel „Highlighting“ wechselt der Greifbereich in der unteren rechten Ecke beim Anklicken von einem diagonalen Pfeil zu einem vertikalen Pfeil, sodass nur eine vertikale Größenänderung möglich ist. Auch in anderen Standardbeispielen scheint es möglich zu sein, gleichzeitig vertikal und horizontal zu skalieren, aber eine vertikale Anpassung funktioniert nicht

• Die Eingabereaktion ist sehr langsam. Wenn man schnell tippt, kommt die Eingabe nicht hinterher. Textauswahl und Kopieren sind nicht möglich, was ein großes Problem für die Implementierung einer benutzerdefinierten GUI ist. Ich wünsche allen einen guten Jahresausklang