2020-08-21 16:53:43 +00:00
# Egui
2020-09-09 13:19:30 +00:00
[](https://crates.io/crates/egui)
[](https://docs.rs/egui)


2020-08-28 14:22:36 +00:00
Highly portable immediate mode GUI library for Rust.
Simple, fast, work in progress
Made for games or for anyone who want to make their own GUI and share it easily on a web page or compile it natively.
Egui can be used anywhere you can draw textured triangles.
2020-08-21 16:53:43 +00:00
Sections:
2020-09-09 13:19:30 +00:00
2020-08-21 16:53:43 +00:00
* [Demo ](#demos )
* [Goals ](#goals )
* [State / features ](#state )
* [How it works ](#how-it-works )
* [Backends ](#backends )
* [Other ](#other )
## Demo
2020-09-09 13:19:30 +00:00
[Click to run Egui web demo ](https://emilk.github.io/egui/index.html ). Partial demo source: < https: // github . com / emilk / egui / blob / master / egui / src / demos / app . rs >
[Hobogo ](https://emilk.github.io/hobogo/index.html ): A small game I made using Egui. Source: < https: // github . com / emilk / hobogo >
2020-08-21 16:53:43 +00:00
2020-09-09 13:19:30 +00:00
### Example
2020-08-21 16:53:43 +00:00
``` rust
Window::new("Debug").show(ui.ctx(), |ui| {
ui.label(format!("Hello, world {}", 123));
if ui.button("Save").clicked {
my_save_function();
}
ui.text_edit(& mut my_string);
ui.add(Slider::f32(& mut value, 0.0..=1.0).text("float"));
});
```
< img src = "media/demo-2020-08-21.png" width = "50%" >
## Goals
2020-09-09 13:19:30 +00:00
2020-08-28 14:22:36 +00:00
* API: Simple and convenient
* Responsive: target 60 Hz in debug build
2020-08-21 16:53:43 +00:00
* Portable: the same code works on the web and as a native app
2020-08-28 14:22:36 +00:00
* Friendly: difficult to make mistakes
2020-08-21 16:53:43 +00:00
* Easy to integrate into a any environment
2020-08-28 14:22:36 +00:00
* A simple 2D graphics API for custom painting
2020-08-21 16:53:43 +00:00
* Simple: no callbacks, minimal dependencies, avoid unnecessary monomorphization
Egui is *not* a framework. Egui is a library you call into, not an environment you program for.
## State
Alpha state. It works well for what it does, but it lacks many features and the interfaces are still in flux. New releases will have breaking changes.
2020-09-09 13:19:30 +00:00
### Features
2018-12-23 18:42:30 +00:00
2020-08-21 16:53:43 +00:00
* Widgets: label, text button, hyperlink, checkbox, radio button, slider, draggable value, text editing
* Layouts: horizontal, vertical, columns
* Text input: very basic, multiline, copy/paste
2020-08-28 14:22:36 +00:00
* Windows: move, resize, name, minimize and close. Automatically sized and positioned.
2020-08-21 16:53:43 +00:00
* Regions: resizing, vertical scrolling, collapsing headers (sections)
* Rendering: Anti-aliased rendering of lines, circles, text and convex polygons.
* Tooltips on hover
2018-12-23 18:42:30 +00:00
2020-08-21 16:53:43 +00:00
## How it works
2020-09-09 13:19:30 +00:00
2019-03-10 20:01:07 +00:00
Loop:
2020-09-09 13:19:30 +00:00
2020-08-21 16:53:43 +00:00
* Gather input (mouse, touches, keyboard, screen size, etc) and give it to Egui
2019-03-12 07:54:17 +00:00
* Run application code (Immediate Mode GUI)
2020-08-21 16:53:43 +00:00
* Tell Egui to tesselate the frame graphics to a triangle mesh
* Render the triangle mesh with your favorite graphics API (see OpenGL examples)
## Backends
2020-09-09 13:19:30 +00:00
2020-05-30 08:22:35 +00:00
Wherever you can render textured triangles you can use Egui.
2019-03-12 21:59:55 +00:00
2020-08-21 16:53:43 +00:00
### Official
2020-09-09 13:19:30 +00:00
2020-08-21 16:53:43 +00:00
I maintain two official Egui backends:
2019-03-12 21:59:55 +00:00
2020-08-21 16:53:43 +00:00
* [egui_web ](crates.io/crates/egui_web ) for making a web app. Compiles to WASM, renders with WebGL. [Click to run the Egui demo ](https://emilk.github.io/egui/index.html ).
* [egui_glium ](crates.io/crates/egui_glium ) for compiling native apps with [Glium ](https://github.com/glium/glium ) backend.
2018-12-23 18:42:30 +00:00
2020-08-21 16:53:43 +00:00
The same code can be compiled to a native app or a web app.
2018-12-23 18:42:30 +00:00
2020-08-21 16:53:43 +00:00
### 3rd party
2020-09-09 13:19:30 +00:00
2020-08-21 16:53:43 +00:00
* [emigui-miniquad ](https://github.com/not-fl3/emigui-miniquad ): backend for [Miniquad ](https://github.com/not-fl3/miniquad ). [Web demo ](https://not-fl3.github.io/miniquad-samples/emigui.html ) and [demo source ](https://github.com/not-fl3/good-web-game/blob/master/examples/emigui.rs ).
2018-12-23 23:15:18 +00:00
2020-08-21 16:53:43 +00:00
### Writing your own Egui backend
2020-09-09 13:19:30 +00:00
2020-08-21 16:53:43 +00:00
You need to collect `egui::RawInput` , paint `egui::PaintJobs` and handle `egui::Output` . The basic structure is this:
``` rust
let mut egui_ctx = egui::Context::new();
// game loop:
loop {
let raw_input: egui::RawInput = my_backend.gather_input();
let mut ui = egui_ctx.begin_frame(raw_input);
my_app.ui(& mut ui); // add windows and widgets to `ui` here
let (output, paint_jobs) = egui_ctx.end_frame();
my_backend.paint(paint_jobs);
my_backend.set_cursor_icon(output.cursor_icon);
// Also see `egui::Output` for more
}
```
2020-09-09 13:19:30 +00:00
#### Debugging your backend
#### My text is blurry
* Make sure you set the proper `pixels_per_point` in the input to Egui.
* Make sure the texture sampler is not off by half a pixel. Try nearest-neighbor sampler to check.
#### My windows are too transparent or too dark
* Make sure your texture sampler is clamped.
* Make sure you consider sRGB (gamma) in your shaders.
* Egui uses premultiplied alpha, so make sure your blending function is `(ONE, ONE_MINUS_SRC_ALPHA)`
2020-08-21 16:53:43 +00:00
## Other
2019-01-04 13:14:32 +00:00
2020-09-09 13:19:30 +00:00
### Conventions and design choices
All coordinates are screen space coordinates, in logical "points" (which may consist of many physical pixels). Origin (0, 0) is top left.
All colors have premultiplied alpha.
Egui uses the builder pattern for construction widgets. For instance: `ui.add(Label::new("Hello").text_color(RED));` I am not a big fan of the builder pattern (it is quite verbose both in implementation and in use) but until Rust has named, default arguments it is the best we can do. To alleviate some of the verbosity there are common-case helper functions, like `ui.label("Hello");` .
2020-08-21 16:53:43 +00:00
2020-09-09 13:19:30 +00:00
Instead of using matching `begin/end` style function calls (which can be error prone) Egui prefers to use lambdas passed to a wrapping function. Lambdas are a bit ugly though, so I'd like to find a nicer solution to this.
2020-08-21 16:53:43 +00:00
2020-09-09 13:19:30 +00:00
### Inspiration
2019-01-04 13:14:32 +00:00
2020-09-09 13:19:30 +00:00
The one and only [Dear ImGui ](https://github.com/ocornut/imgui ) is a great Immediate Mode GUI for C++ which works with many backends. That library revolutionized how I think about GUI code and turned GUI programming from something I hated to do to something I now enjoy.
2020-08-21 16:53:43 +00:00
### Name
2020-09-09 13:19:30 +00:00
2020-08-21 16:53:43 +00:00
The name of the library and the project is "Egui" and pronounced as "e-gooey".
2020-05-30 08:22:35 +00:00
2020-08-10 17:38:46 +00:00
The library was originally called "Emigui", but was renamed to Egui in 2020.
2020-05-30 08:22:35 +00:00
2020-08-21 16:53:43 +00:00
### Credits / Licenses
2020-09-09 13:19:30 +00:00
2020-08-21 16:53:43 +00:00
Egui author: Emil Ernerfeldt
Egui is under MIT OR Apache-2.0 license.
2019-03-12 07:54:17 +00:00
Fonts:
2020-09-09 13:19:30 +00:00
2019-03-16 12:37:29 +00:00
* Comfortaa: Open Font License, see OFT.txt
2020-09-09 13:19:30 +00:00
* ProggyClean.ttf, Copyright (c) 2004, 2005 Tristan Grimmer. MIT License. < http: // www . proggyfonts . net />
2019-03-12 07:54:17 +00:00
* Roboto-Regular.ttf: Apache License, Version 2.0