w3resource

Getting Started with Rust egui for GUI Applications


Introduction to Rust egui: Building Native GUIs Easily

Overview

egui is a lightweight and easy-to-use library in Rust for building graphical user interfaces (GUIs). It is designed to be immediate-mode, cross-platform, and fast. Whether you're building a desktop application or integrating a GUI into a game engine, egui provides an intuitive API and modern features to simplify development.


What is egui?

egui stands for Easy GUI. It provides:

    1. Immediate Mode GUI: GUI state is not retained between frames, making it simple to use and flexible for dynamic content.

    2. Cross-Platform: Works on Windows, macOS, Linux, and WebAssembly.

    3. Fast Prototyping: Minimal setup is required to get started with UI design.


Installing egui

To start using egui, add the following dependencies to your Cargo.toml file:

[dependencies]
eframe = "0.25"  # Provides platform integration for egui

The eframe crate is a wrapper around egui that simplifies creating standalone applications.


Example: A Basic egui Application

Step 1: Initialize a New Project

Create a new Rust project:

Code:

cargo new egui_demo
cd egui_demo

Step 2: Implement egui

Update the src/main.rs file:

Code:

// Import eframe (egui's platform integration library)
use eframe::egui;

// Entry point for the application
fn main() -> Result<(), eframe::Error> {
    // Create and run the egui app
    eframe::run_native(
        "egui Demo",                  // Window title
        eframe::NativeOptions::default(), // Window configuration
        Box::new(|_| Box::new(MyApp::default())), // Initialize the app
    )
}

// Define the application struct
struct MyApp {
    name: String, // User input state
    age: u32,     // User's age
}

// Default state for the application
impl Default for MyApp {
    fn default() -> Self {
        Self {
            name: String::from("User"),
            age: 30,
        }
    }
}

// Define GUI logic for the app
impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _: &mut eframe::Frame) {
        // Create the GUI layout
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.heading("Welcome to egui!"); // Add a heading

            // Input field for the name
            ui.label("Enter your name:");
            ui.text_edit_singleline(&mut self.name);

            // Input field for the age
            ui.label("Enter your age:");
            ui.add(egui::Slider::new(&mut self.age, 0..=100).text("years"));

            // Show a button and display a message when clicked
            if ui.button("Submit").clicked() {
                println!("Hello {}, you are {} years old!", self.name, self.age);
            }
        });
    }
}

Explanation:

    1. eframe Initialization:

    • eframe::run_native starts the GUI application.
    • The app's logic is passed as a closure that creates a MyApp instance.

    2. App Struct:

    • MyApp stores the application state (name and age).
    • Default initializes default values for the app state.

    3. GUI Layout:

    • egui::CentralPanel::default() creates the main panel for widgets.
    • Widgets like label, text_edit_singleline, and Slider build the interactive interface.
    • The button widget triggers a callback when clicked.

Running the Application

Run the application with:

Code:

cargo run

You will see a GUI window with interactive elements.


Advanced Features

    1. Custom Panels:

    Create side panels or floating windows using SidePanel or Window.

    Code:

    egui::SidePanel::left("my_side_panel").show(ctx, |ui| {
        ui.label("This is a side panel!");
    });
    

    2. Dynamic Content:

    Dynamically render content based on conditions or user actions.

    Code:

    if self.age > 50 {
        ui.label("You're experienced!");
    } else {
        ui.label("You're young!");
    }
    

    3. Integrating with Game Engines:

    Use egui with game engines like bevy or winit for rendering GUI overlays.


Benefits of Using egui

    1. Minimal Learning Curve: Designed for simplicity with straightforward APIs.

    2. Highly Customizable: Supports custom styling and layouts.

    3. Cross-Platform: Deploy on multiple platforms, including the web.

    4. Rich Ecosystem: Extend functionality with additional libraries.


Best Practices

    1. Separate State Logic: Keep application state separate from GUI rendering logic.

    2. Optimize Layouts: Minimize unnecessary redraws for better performance.

    3. Debugging: Use the egui::Context::set_debug_on_hover for interactive widget debugging.


Conclusion:

Rust's egui framework is an excellent choice for creating modern, efficient, and user-friendly GUIs. Its immediate mode nature, combined with Rust’s performance, makes it a go-to library for desktop application development.

Rust Language Questions, Answers, and Code Snippets Collection.



Follow us on Facebook and Twitter for latest update.