egui

egui (easy GUI) is a simple, fast, and highly portable immediate mode GUI library for Rust. It is designed to be easy to use, making it straightforward for developers to create graphical user interfaces for their applications. Unlike retained mode GUIs where you build a scene graph and then modify it, egui's immediate mode approach means you define your UI completely in a loop for each frame. This simplifies state management and often leads to more concise UI code.

Key Features and Principles of egui:

1. Immediate Mode: With egui, you draw your entire UI from scratch every frame. There's no persistent widget state to manage manually; instead, you provide the current state to the widgets, and they return any user interactions (e.g., button clicks, new text input). This can significantly simplify UI logic and reduce boilerplate.

2. Rust-centric: Built entirely in Rust, egui leverages Rust's safety and performance features. It integrates well with the Rust ecosystem.

3. Cross-platform: egui is highly portable. It can run natively on Windows, macOS, and Linux, and also compile to WebAssembly (WASM) for web browsers. This is often achieved through integration with the `eframe` crate, which handles the platform-specific backend (window creation, event loops, rendering context).

4. Simple and Opinionated: egui focuses on simplicity. While it provides enough flexibility for most common UI needs, it has a clear design philosophy. Its default look is clean and functional, but it is also highly customizable through themes and styles.

5. Performance: Designed for good performance, egui can handle complex UIs efficiently. It caches layout and drawing commands to minimize work per frame.

6. Minimal Dependencies: egui itself has relatively few dependencies, contributing to its light footprint.

7. Widgets: It offers a comprehensive set of common widgets, including labels, buttons, sliders, text inputs, checkboxes, radio buttons, scroll areas, and more. It also supports custom painting.

How it Works (with eframe):

Typically, you'd use `eframe` as the native/web backend. Your application implements the `eframe::App` trait, which requires a `update()` method. Inside `update()`, you get an `egui::Context` and a `egui::Frame`. You then use the `Context` to create UI elements within a `egui::CentralPanel` or other panel types. The `Context` maintains the necessary state for interactions (e.g., if a button was clicked, if a slider was dragged). Each frame, you define what your UI *should* look like, and egui handles rendering it.

Use Cases:

egui is suitable for a wide range of applications:

* Small tools and utilities: Quick desktop or web apps that need a UI.
* Game development tools: In-game debug UIs, level editors, asset viewers.
* Configuration interfaces: Applications requiring user-configurable settings.
* Prototyping: Rapidly build and iterate on UI concepts.
* Cross-platform applications: When you need a single codebase for both desktop and web targets.

In essence, egui provides a direct and efficient way to build graphical interfaces in Rust, emphasizing ease of use and immediate feedback.

Example Code

```rust
use eframe::{egui, NativeOptions};

struct MyApp {
    name: String,
    age: u32,
    checked: bool,
}

implement Default for MyApp {
    fn default() -> Self {
        Self {
            name: "Arthur".to_owned(),
            age: 42,
            checked: false,
        }
    }
}

implement eframe::App for MyApp {
    /// Called once before the first frame. Set up fonts, themes, etc.
    fn setup(
        &mut self,
        _ctx: &egui::Context,
        _frame: &mut eframe::Frame,
        _storage: Option<&dyn eframe::Storage>,
    ) {
        // Load previous app state (optional)
        // if let Some(storage) = _storage {
        //     *self = eframe::get_value(storage, eframe::APP_KEY).unwrap_or_default();
        // }
    }

    /// Called by the framework to save the app state.
    fn save(&mut self, _storage: &mut dyn eframe::Storage) {
        // eframe::set_value(_storage, eframe::APP_KEY, self);
    }

    /// Called each time the UI needs to be repainted.
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui|
        {
            ui.heading("My egui Application");

            // Text input for name
            ui.horizontal(|ui|
            {
                ui.label("Your name: ");
                ui.text_edit_singleline(&mut self.name);
            });

            // Slider for age
            ui.add(egui::Slider::new(&mut self.age, 0..=120).text("Age"));

            // Checkbox
            ui.checkbox(&mut self.checked, "Check me out!");

            // Button with conditional message
            if ui.button("Click me").clicked() {
                ui.label(format!("Hello, {}. You are {} years old.", self.name, self.age));
                if self.checked {
                    ui.label("You also checked the box!");
                }
            }

            // Separator for visual distinction
            ui.separator();

            // Display current state (read-only)
            ui.label(format!("Current Name: {}", self.name));
            ui.label(format!("Current Age: {}", self.age));
            ui.label(format!("Checkbox State: {}", self.checked));

            // Add some space
            ui.add_space(10.0);

            // Demo link
            ui.hyperlink("https://www.egui.rs/");
        });
    }
}

fn main() -> eframe::Result<()> {
    let options = NativeOptions {
        viewport: egui::ViewportBuilder::default().with_inner_size([320.0, 240.0]),
        ..Default::default()
    };
    eframe::run_native(
        "My egui App",
        options,
        Box::new(|_cc| {
            // Customize egui here, e.g., font size:
            // let mut visuals = _cc.egui_ctx.visuals().clone();
            // visuals.override_text_color = Some(egui::Color32::from_rgb(255, 255, 255));
            // _cc.egui_ctx.set_visuals(visuals);

            Box::<MyApp>::default()
        }),
    )
}
```

To run this example, you need to set up your `Cargo.toml` as follows:

```toml
[package]
name = "my_egui_app"
version = "0.1.0"
edition = "2021"

[dependencies]
eframe = "0.27.2" # Use the latest stable version
```

After setting up `Cargo.toml`, save the code as `src/main.rs` and run it from your terminal using `cargo run`.

Example Code

Related Topics