GUI ft. egui | Introduction to Rust 🦀 with egui

Let’s put a face to the name.

We’ll use egui to create the interface for our app. egui is an immediate mode GUI library for Rust.

Immediate mode

What does that mean?

Here’s a website demonstrating the power of egui: https://egui.rs

Yupp, the demos run in the browser! Because egui can compile to WebAssembly. This means that you can build your app for the web and desktop with the same codebase.

Inside quiz/Cargo.toml, add the following to the [dependencies] section:

[dependencies]
eframe = "0.24.1"
egui = "0.24.1"

In quiz/src, replace the main function with the following:

fn main() -> Result<(), eframe::Error> {
    println!("Hello, world!");
    let options = eframe::NativeOptions::default();
    eframe::run_native("Queeez", options, Box::new(|ctx| Box::new(App::new())))
}

I’ll advise that you don’t stress too much about what all of those mean right now. Label it (in your mind) as boilerplate. In fact, that piece of code is copied from: https://docs.rs/eframe/latest/eframe/#usage-native.

Documentation

In Rust, most of libraries’ documentation are in the form of examples than in natural language. So you should get used to reading examples; and knowing how to find/modify them. A lot of libraries have an examples/ directory in their repository. Always check them out.

App

When you save main.rs after adding the code above, you should get an error that App is not defined. Let’s define it:

struct App { }

impl App {
  fn new() -> Self {
    Self {}
  }
}

Now, you should get an error that App doesn’t implement egui::app::App. Let’s do that:

// yes, this is another impl block
// in Typescript, this would be: `class App implements eframe::app::App`
impl eframe::App for App {
  fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
    egui::CentralPanel::default().show(ctx, |ui| {
      ui.label("Hello world!");
    });
  }
}

egui:: eframe::

Huh? What are those?

Prefixing symbols (ie, functions, structs, etc.) with the name of the library they belong to is a common practice in Rust. This is to avoid name collisions. For example, there’s a Vec in the standard library and there’s also a Vec in the egui library. So to use the one in the standard library, you’d do: std::vec::Vec. And to use the one in egui, you’d do: egui::vec::Vec.

But when you’re sure you may not end up with collisions or you’re using a symbol very often, you can bring them to scope by doing something like the following at the top of your file:

use egui::{CentralPanel, CtxRef};

// then you can use them without the prefix
// egui::CentralPanel -> CentralPanel
// egui::CtxRef -> CtxRef

Try that!

Throughout the course, I’ll be using the prefix to make it clear where a symbol is coming from. But you can use the use statement to bring them to scope.

Run your code to see what you’ve done. Forgotten how to run a bin? See Chapter 3: Create project.

UI

Scrap the ui.label("Hello world!"); line. Let’s create our UI:

egui::CentralPanel::default().show(ctx, |ui| {
  ui.label("1/10");
  ui.label("What is the capital of Nigeria?");

  ui.horizontal(|ui| {
    ui.button("True");
    ui.button("False");
  });

  ui.horizontal(|ui| {
    ui.button("Previous");
    ui.button("Next");
  });
});

Run the app to see what it looks like: cargo run -p quiz.

Next we’re going to handle states and logic for our app.