Move examples out of eframe/examples into examples/ (#1486)

* Move examples out of eframe/examples into examples/

Give each example a `Cargo.toml` and `src/main.rs`.
This makes it easier for people to use as templates.

* Update README.md with more deps needed on vanilla Ubuntu
* Install libgtk-3-dev on CI, hoping that will fix something

examples/README.md

@@ -1 +1,6 @@
-Examples of how to use [`eframe`](https://github.com/emilk/egui/tree/master/eframe) and [`egui`](https://github.com/emilk/egui/).
+# `egui` and `eframe` examples
+All the examples in this folder uses [`eframe`](https://github.com/emilk/egui/tree/master/eframe) to set up a window for [`egui`](https://github.com/emilk/egui/). Some examples are specific to `eframe`, but many are applicable to any `egui` integration.
+
+There are a lot more examples at <https://www.egui.rs>, and it has links to the source code of each example.
+
+Also check out the official docs at <https://docs.rs/egui> and <https://docs.rs/eframe>.

examples/confirm_exit/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "confirm_exit"
+version = "0.1.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.60"
+publish = false
+
+
+[dependencies]
+eframe = { path = "../../eframe" }

examples/confirm_exit/README.md

@@ -0,0 +1,3 @@
+```sh
+cargo run -p confirm_exit
+```

examples/confirm_exit/src/main.rs

@@ -0,0 +1,49 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+
+use eframe::egui;
+
+fn main() {
+    let options = eframe::NativeOptions::default();
+    eframe::run_native(
+        "Confirm exit",
+        options,
+        Box::new(|_cc| Box::new(MyApp::default())),
+    );
+}
+
+#[derive(Default)]
+struct MyApp {
+    can_exit: bool,
+    is_exiting: bool,
+}
+
+impl eframe::App for MyApp {
+    fn on_exit_event(&mut self) -> bool {
+        self.is_exiting = true;
+        self.can_exit
+    }
+
+    fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            ui.heading("Try to close the window");
+        });
+
+        if self.is_exiting {
+            egui::Window::new("Do you want to quit?")
+                .collapsible(false)
+                .resizable(false)
+                .show(ctx, |ui| {
+                    ui.horizontal(|ui| {
+                        if ui.button("Not yet").clicked() {
+                            self.is_exiting = false;
+                        }
+
+                        if ui.button("Yes!").clicked() {
+                            self.can_exit = true;
+                            frame.quit();
+                        }
+                    });
+                });
+        }
+    }
+}

examples/custom_3d_glow/Cargo.toml

@@ -0,0 +1,14 @@
+[package]
+name = "custom_3d_glow"
+version = "0.1.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.60"
+publish = false
+
+
+[dependencies]
+eframe = { path = "../../eframe" }
+egui_glow = { path = "../../egui_glow" }
+glow = "0.11"

examples/custom_3d_glow/README.md

@@ -0,0 +1,15 @@
+This demo shows how to embed 3D rendering using [`glow`](https://github.com/grovesNL/glow) in `eframe`.
+
+This is very advanced usage, and you need to be careful.
+
+If you want an easier way to show 3D graphics with egui, take a look at the `custom_3d_three-d.rs` example.
+
+If you are content of having egui sit on top of a 3D background, take a look at:
+
+* [`bevy_egui`](https://github.com/mvlabat/bevy_egui)
+* [`three-d`](https://github.com/asny/three-d)
+
+
+```sh
+cargo run -p custom_3d_glow
+```

examples/custom_3d_glow/src/main.rs

@@ -0,0 +1,194 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+#![allow(unsafe_code)]
+
+use eframe::egui;
+
+use egui::mutex::Mutex;
+use std::sync::Arc;
+
+fn main() {
+    let options = eframe::NativeOptions {
+        initial_window_size: Some(egui::vec2(350.0, 380.0)),
+        multisampling: 8,
+        ..Default::default()
+    };
+    eframe::run_native(
+        "Custom 3D painting in eframe using glow",
+        options,
+        Box::new(|cc| Box::new(MyApp::new(cc))),
+    );
+}
+
+struct MyApp {
+    /// Behind an `Arc<Mutex<…>>` so we can pass it to [`egui::PaintCallback`] and paint later.
+    rotating_triangle: Arc<Mutex<RotatingTriangle>>,
+    angle: f32,
+}
+
+impl MyApp {
+    fn new(cc: &eframe::CreationContext<'_>) -> Self {
+        Self {
+            rotating_triangle: Arc::new(Mutex::new(RotatingTriangle::new(&cc.gl))),
+            angle: 0.0,
+        }
+    }
+}
+
+impl eframe::App for MyApp {
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            ui.horizontal(|ui| {
+                ui.spacing_mut().item_spacing.x = 0.0;
+                ui.label("The triangle is being painted using ");
+                ui.hyperlink_to("glow", "https://github.com/grovesNL/glow");
+                ui.label(" (OpenGL).");
+            });
+
+            egui::Frame::canvas(ui.style()).show(ui, |ui| {
+                self.custom_painting(ui);
+            });
+            ui.label("Drag to rotate!");
+        });
+    }
+
+    fn on_exit(&mut self, gl: &glow::Context) {
+        self.rotating_triangle.lock().destroy(gl);
+    }
+}
+
+impl MyApp {
+    fn custom_painting(&mut self, ui: &mut egui::Ui) {
+        let (rect, response) =
+            ui.allocate_exact_size(egui::Vec2::splat(300.0), egui::Sense::drag());
+
+        self.angle += response.drag_delta().x * 0.01;
+
+        // Clone locals so we can move them into the paint callback:
+        let angle = self.angle;
+        let rotating_triangle = self.rotating_triangle.clone();
+
+        let callback = egui::PaintCallback {
+            rect,
+            callback: std::sync::Arc::new(move |_info, render_ctx| {
+                if let Some(painter) = render_ctx.downcast_ref::<egui_glow::Painter>() {
+                    rotating_triangle.lock().paint(painter.gl(), angle);
+                } else {
+                    eprintln!("Can't do custom painting because we are not using a glow context");
+                }
+            }),
+        };
+        ui.painter().add(callback);
+    }
+}
+
+struct RotatingTriangle {
+    program: glow::Program,
+    vertex_array: glow::VertexArray,
+}
+
+impl RotatingTriangle {
+    fn new(gl: &glow::Context) -> Self {
+        use glow::HasContext as _;
+
+        let shader_version = if cfg!(target_arch = "wasm32") {
+            "#version 300 es"
+        } else {
+            "#version 410"
+        };
+
+        unsafe {
+            let program = gl.create_program().expect("Cannot create program");
+
+            let (vertex_shader_source, fragment_shader_source) = (
+                r#"
+                    const vec2 verts[3] = vec2[3](
+                        vec2(0.0, 1.0),
+                        vec2(-1.0, -1.0),
+                        vec2(1.0, -1.0)
+                    );
+                    const vec4 colors[3] = vec4[3](
+                        vec4(1.0, 0.0, 0.0, 1.0),
+                        vec4(0.0, 1.0, 0.0, 1.0),
+                        vec4(0.0, 0.0, 1.0, 1.0)
+                    );
+                    out vec4 v_color;
+                    uniform float u_angle;
+                    void main() {
+                        v_color = colors[gl_VertexID];
+                        gl_Position = vec4(verts[gl_VertexID], 0.0, 1.0);
+                        gl_Position.x *= cos(u_angle);
+                    }
+                "#,
+                r#"
+                    precision mediump float;
+                    in vec4 v_color;
+                    out vec4 out_color;
+                    void main() {
+                        out_color = v_color;
+                    }
+                "#,
+            );
+
+            let shader_sources = [
+                (glow::VERTEX_SHADER, vertex_shader_source),
+                (glow::FRAGMENT_SHADER, fragment_shader_source),
+            ];
+
+            let shaders: Vec<_> = shader_sources
+                .iter()
+                .map(|(shader_type, shader_source)| {
+                    let shader = gl
+                        .create_shader(*shader_type)
+                        .expect("Cannot create shader");
+                    gl.shader_source(shader, &format!("{}\n{}", shader_version, shader_source));
+                    gl.compile_shader(shader);
+                    if !gl.get_shader_compile_status(shader) {
+                        panic!("{}", gl.get_shader_info_log(shader));
+                    }
+                    gl.attach_shader(program, shader);
+                    shader
+                })
+                .collect();
+
+            gl.link_program(program);
+            if !gl.get_program_link_status(program) {
+                panic!("{}", gl.get_program_info_log(program));
+            }
+
+            for shader in shaders {
+                gl.detach_shader(program, shader);
+                gl.delete_shader(shader);
+            }
+
+            let vertex_array = gl
+                .create_vertex_array()
+                .expect("Cannot create vertex array");
+
+            Self {
+                program,
+                vertex_array,
+            }
+        }
+    }
+
+    fn destroy(&self, gl: &glow::Context) {
+        use glow::HasContext as _;
+        unsafe {
+            gl.delete_program(self.program);
+            gl.delete_vertex_array(self.vertex_array);
+        }
+    }
+
+    fn paint(&self, gl: &glow::Context, angle: f32) {
+        use glow::HasContext as _;
+        unsafe {
+            gl.use_program(Some(self.program));
+            gl.uniform_1_f32(
+                gl.get_uniform_location(self.program, "u_angle").as_ref(),
+                angle,
+            );
+            gl.bind_vertex_array(Some(self.vertex_array));
+            gl.draw_arrays(glow::TRIANGLES, 0, 3);
+        }
+    }
+}

examples/custom_3d_three-d/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "custom_3d_three-d"
+version = "0.1.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.60"
+publish = false
+
+
+[dependencies]
+eframe = { path = "../../eframe" }
+egui_glow = { path = "../../egui_glow" }
+glow = "0.11"
+three-d = { version = "0.11", default-features = false }

examples/custom_3d_three-d/README.md

@@ -0,0 +1,16 @@
+This demo shows how to embed 3D rendering using [`three-d`](https://github.com/asny/three-d) in `eframe`.
+
+Any 3D library built on top of [`glow`](https://github.com/grovesNL/glow) can be used in `eframe`.
+
+Alternatively you can render 3D stuff to a texture and display it using [`egui::Ui::image`].
+
+If you are content of having egui sit on top of a 3D background, take a look at:
+
+* [`bevy_egui`](https://github.com/mvlabat/bevy_egui)
+* [`three-d`](https://github.com/asny/three-d)
+
+
+
+```sh
+cargo run -p custom_3d_three-d
+```

examples/custom_3d_three-d/src/main.rs

@@ -0,0 +1,146 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+
+use eframe::egui;
+
+fn main() {
+    let options = eframe::NativeOptions {
+        initial_window_size: Some(egui::vec2(550.0, 610.0)),
+        multisampling: 8,
+        ..Default::default()
+    };
+    eframe::run_native(
+        "Custom 3D painting in eframe!",
+        options,
+        Box::new(|cc| Box::new(MyApp::new(cc))),
+    );
+}
+
+struct MyApp {
+    angle: f32,
+}
+
+impl MyApp {
+    fn new(_cc: &eframe::CreationContext<'_>) -> Self {
+        Self { angle: 0.2 }
+    }
+}
+
+impl eframe::App for MyApp {
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            egui::widgets::global_dark_light_mode_buttons(ui);
+
+            ui.horizontal(|ui| {
+                ui.spacing_mut().item_spacing.x = 0.0;
+                ui.label("The triangle is being painted using ");
+                ui.hyperlink_to("three-d", "https://github.com/asny/three-d");
+                ui.label(".");
+            });
+
+            egui::ScrollArea::both().show(ui, |ui| {
+                egui::Frame::canvas(ui.style()).show(ui, |ui| {
+                    self.custom_painting(ui);
+                });
+                ui.label("Drag to rotate!");
+            });
+        });
+    }
+}
+
+impl MyApp {
+    fn custom_painting(&mut self, ui: &mut egui::Ui) {
+        let (rect, response) =
+            ui.allocate_exact_size(egui::Vec2::splat(512.0), egui::Sense::drag());
+
+        self.angle += response.drag_delta().x * 0.01;
+
+        // Clone locals so we can move them into the paint callback:
+        let angle = self.angle;
+
+        let callback = egui::PaintCallback {
+            rect,
+            callback: std::sync::Arc::new(move |info, render_ctx| {
+                if let Some(painter) = render_ctx.downcast_ref::<egui_glow::Painter>() {
+                    with_three_d_context(painter.gl(), |three_d| {
+                        paint_with_three_d(three_d, info, angle);
+                    });
+                } else {
+                    eprintln!("Can't do custom painting because we are not using a glow context");
+                }
+            }),
+        };
+        ui.painter().add(callback);
+    }
+}
+
+/// We get a [`glow::Context`] from `eframe`, but we want a [`three_d::Context`].
+///
+/// Sadly we can't just create a [`three_d::Context`] in [`MyApp::new`] and pass it
+/// to the [`egui::PaintCallback`] because [`three_d::Context`] isn't `Send+Sync`, which
+/// [`egui::PaintCallback`] is.
+fn with_three_d_context<R>(
+    gl: &std::rc::Rc<glow::Context>,
+    f: impl FnOnce(&three_d::Context) -> R,
+) -> R {
+    use std::cell::RefCell;
+    thread_local! {
+        pub static THREE_D: RefCell<Option<three_d::Context>> = RefCell::new(None);
+    }
+
+    THREE_D.with(|three_d| {
+        let mut three_d = three_d.borrow_mut();
+        let three_d =
+            three_d.get_or_insert_with(|| three_d::Context::from_gl_context(gl.clone()).unwrap());
+        f(three_d)
+    })
+}
+
+fn paint_with_three_d(three_d: &three_d::Context, info: &egui::PaintCallbackInfo, angle: f32) {
+    // Based on https://github.com/asny/three-d/blob/master/examples/triangle/src/main.rs
+    use three_d::*;
+
+    let viewport = Viewport {
+        x: info.viewport_left_px().round() as _,
+        y: info.viewport_from_bottom_px().round() as _,
+        width: info.viewport_width_px().round() as _,
+        height: info.viewport_height_px().round() as _,
+    };
+
+    let camera = Camera::new_perspective(
+        three_d,
+        viewport,
+        vec3(0.0, 0.0, 2.0),
+        vec3(0.0, 0.0, 0.0),
+        vec3(0.0, 1.0, 0.0),
+        degrees(45.0),
+        0.1,
+        10.0,
+    )
+    .unwrap();
+
+    // Create a CPU-side mesh consisting of a single colored triangle
+    let positions = vec![
+        vec3(0.5, -0.5, 0.0),  // bottom right
+        vec3(-0.5, -0.5, 0.0), // bottom left
+        vec3(0.0, 0.5, 0.0),   // top
+    ];
+    let colors = vec![
+        Color::new(255, 0, 0, 255), // bottom right
+        Color::new(0, 255, 0, 255), // bottom left
+        Color::new(0, 0, 255, 255), // top
+    ];
+    let cpu_mesh = CpuMesh {
+        positions: Positions::F32(positions),
+        colors: Some(colors),
+        ..Default::default()
+    };
+
+    // Construct a model, with a default color material, thereby transferring the mesh data to the GPU
+    let mut model = Model::new(three_d, &cpu_mesh).unwrap();
+
+    // Set the current transformation of the triangle
+    model.set_transformation(Mat4::from_angle_y(radians(angle)));
+
+    // Render the triangle with the color material which uses the per vertex colors defined at construction
+    model.render(&camera, &[]).unwrap();
+}

examples/custom_font/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "custom_font"
+version = "0.1.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.60"
+publish = false
+
+
+[dependencies]
+eframe = { path = "../../eframe" }

examples/custom_font/README.md

@@ -0,0 +1,3 @@
+```sh
+cargo run -p custom_font
+```

examples/custom_font/src/main.rs

@@ -0,0 +1,63 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+
+use eframe::egui;
+
+fn main() {
+    let options = eframe::NativeOptions::default();
+    eframe::run_native(
+        "egui example: custom font",
+        options,
+        Box::new(|cc| Box::new(MyApp::new(cc))),
+    );
+}
+
+fn setup_custom_fonts(ctx: &egui::Context) {
+    // Start with the default fonts (we will be adding to them rather than replacing them).
+    let mut fonts = egui::FontDefinitions::default();
+
+    // Install my own font (maybe supporting non-latin characters).
+    // .ttf and .otf files supported.
+    fonts.font_data.insert(
+        "my_font".to_owned(),
+        egui::FontData::from_static(include_bytes!("../../../epaint/fonts/Hack-Regular.ttf")),
+    );
+
+    // Put my font first (highest priority) for proportional text:
+    fonts
+        .families
+        .entry(egui::FontFamily::Proportional)
+        .or_default()
+        .insert(0, "my_font".to_owned());
+
+    // Put my font as last fallback for monospace:
+    fonts
+        .families
+        .entry(egui::FontFamily::Monospace)
+        .or_default()
+        .push("my_font".to_owned());
+
+    // Tell egui to use these fonts:
+    ctx.set_fonts(fonts);
+}
+
+struct MyApp {
+    text: String,
+}
+
+impl MyApp {
+    fn new(cc: &eframe::CreationContext<'_>) -> Self {
+        setup_custom_fonts(&cc.egui_ctx);
+        Self {
+            text: "Edit this text field if you want".to_owned(),
+        }
+    }
+}
+
+impl eframe::App for MyApp {
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            ui.heading("egui using custom fonts");
+            ui.text_edit_multiline(&mut self.text);
+        });
+    }
+}

examples/custom_window_frame/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "custom_window_frame"
+version = "0.1.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.60"
+publish = false
+
+
+[dependencies]
+eframe = { path = "../../eframe" }

examples/custom_window_frame/README.md

@@ -0,0 +1,3 @@
+```sh
+cargo run -p custom_window_frame
+```

examples/custom_window_frame/src/main.rs

@@ -0,0 +1,117 @@
+//! Show a custom window frame instead of the default OS window chrome decorations.
+
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+
+use eframe::egui;
+
+fn main() {
+    let options = eframe::NativeOptions {
+        // Hide the OS-specific "chrome" around the window:
+        decorated: false,
+        // To have rounded corners we need transparency:
+        transparent: true,
+        min_window_size: Some(egui::vec2(320.0, 100.0)),
+        ..Default::default()
+    };
+    eframe::run_native(
+        "Custom window frame", // unused title
+        options,
+        Box::new(|_cc| Box::new(MyApp::default())),
+    );
+}
+
+#[derive(Default)]
+struct MyApp {}
+
+impl eframe::App for MyApp {
+    fn clear_color(&self) -> egui::Rgba {
+        egui::Rgba::TRANSPARENT // Make sure we don't paint anything behind the rounded corners
+    }
+
+    fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
+        custon_window_frame(ctx, frame, "egui with custom frame", |ui| {
+            ui.label("This is just the contents of the window");
+            ui.horizontal(|ui| {
+                ui.label("egui theme:");
+                egui::widgets::global_dark_light_mode_buttons(ui);
+            });
+        });
+    }
+}
+
+fn custon_window_frame(
+    ctx: &egui::Context,
+    frame: &mut eframe::Frame,
+    title: &str,
+    add_contents: impl FnOnce(&mut egui::Ui),
+) {
+    use egui::*;
+    let text_color = ctx.style().visuals.text_color();
+
+    // Height of the title bar
+    let height = 28.0;
+
+    CentralPanel::default()
+        .frame(Frame::none())
+        .show(ctx, |ui| {
+            let rect = ui.max_rect();
+            let painter = ui.painter();
+
+            // Paint the frame:
+            painter.rect(
+                rect.shrink(1.0),
+                10.0,
+                ctx.style().visuals.window_fill(),
+                Stroke::new(1.0, text_color),
+            );
+
+            // Paint the title:
+            painter.text(
+                rect.center_top() + vec2(0.0, height / 2.0),
+                Align2::CENTER_CENTER,
+                title,
+                FontId::proportional(height - 2.0),
+                text_color,
+            );
+
+            // Paint the line under the title:
+            painter.line_segment(
+                [
+                    rect.left_top() + vec2(2.0, height),
+                    rect.right_top() + vec2(-2.0, height),
+                ],
+                Stroke::new(1.0, text_color),
+            );
+
+            // Add the close button:
+            let close_response = ui.put(
+                Rect::from_min_size(rect.left_top(), Vec2::splat(height)),
+                Button::new(RichText::new("❌").size(height - 4.0)).frame(false),
+            );
+            if close_response.clicked() {
+                frame.quit();
+            }
+
+            // Interact with the title bar (drag to move window):
+            let title_bar_rect = {
+                let mut rect = rect;
+                rect.max.y = rect.min.y + height;
+                rect
+            };
+            let title_bar_response =
+                ui.interact(title_bar_rect, Id::new("title_bar"), Sense::drag());
+            if title_bar_response.drag_started() {
+                frame.drag_window();
+            }
+
+            // Add the contents:
+            let content_rect = {
+                let mut rect = rect;
+                rect.min.y = title_bar_rect.max.y;
+                rect
+            }
+            .shrink(4.0);
+            let mut content_ui = ui.child_ui(content_rect, *ui.layout());
+            add_contents(&mut content_ui);
+        });
+}

examples/download_image/Cargo.toml

@@ -0,0 +1,16 @@
+[package]
+name = "download_image"
+version = "0.1.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.60"
+publish = false
+
+
+[dependencies]
+eframe = { path = "../../eframe" }
+egui_extras = { path = "../../egui_extras", features = ["image"] }
+ehttp = "0.2"
+image = { version = "0.24", default-features = false, features = ["jpeg"] }
+poll-promise = "0.1"

examples/download_image/README.md

@@ -0,0 +1,3 @@
+```sh
+cargo run -p download_image
+```

examples/download_image/src/main.rs

@@ -0,0 +1,64 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+
+use eframe::egui;
+use egui_extras::RetainedImage;
+use poll_promise::Promise;
+
+fn main() {
+    let options = eframe::NativeOptions::default();
+    eframe::run_native(
+        "Download and show an image with eframe/egui",
+        options,
+        Box::new(|_cc| Box::new(MyApp::default())),
+    );
+}
+
+#[derive(Default)]
+struct MyApp {
+    /// `None` when download hasn't started yet.
+    promise: Option<Promise<ehttp::Result<RetainedImage>>>,
+}
+
+impl eframe::App for MyApp {
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        let promise = self.promise.get_or_insert_with(|| {
+            // Begin download.
+            // We download the image using `ehttp`, a library that works both in WASM and on native.
+            // We use the `poll-promise` library to communicate with the UI thread.
+            let ctx = ctx.clone();
+            let (sender, promise) = Promise::new();
+            let request = ehttp::Request::get("https://picsum.photos/seed/1.759706314/1024");
+            ehttp::fetch(request, move |response| {
+                let image = response.and_then(parse_response);
+                sender.send(image); // send the results back to the UI thread.
+                ctx.request_repaint(); // wake up UI thread
+            });
+            promise
+        });
+
+        egui::CentralPanel::default().show(ctx, |ui| match promise.ready() {
+            None => {
+                ui.add(egui::Spinner::new()); // still loading
+            }
+            Some(Err(err)) => {
+                ui.colored_label(egui::Color32::RED, err); // something went wrong
+            }
+            Some(Ok(image)) => {
+                image.show_max_size(ui, ui.available_size());
+            }
+        });
+    }
+}
+
+#[allow(clippy::needless_pass_by_value)]
+fn parse_response(response: ehttp::Response) -> Result<RetainedImage, String> {
+    let content_type = response.content_type().unwrap_or_default();
+    if content_type.starts_with("image/") {
+        RetainedImage::from_image_bytes(&response.url, &response.bytes)
+    } else {
+        Err(format!(
+            "Expected image, found content-type {:?}",
+            content_type
+        ))
+    }
+}

examples/file_dialog/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "file_dialog"
+version = "0.1.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.60"
+publish = false
+
+
+[dependencies]
+eframe = { path = "../../eframe" }
+rfd = "0.8"

examples/file_dialog/README.md

@@ -0,0 +1,5 @@
+How to show a file dialog using [`rfd`](https://github.com/PolyMeilex/rfd).
+
+```sh
+cargo run -p file_dialog
+```

examples/file_dialog/src/main.rs

@@ -0,0 +1,103 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+
+use eframe::egui;
+
+fn main() {
+    let options = eframe::NativeOptions {
+        drag_and_drop_support: true,
+        ..Default::default()
+    };
+    eframe::run_native(
+        "Native file dialogs and drag-and-drop files",
+        options,
+        Box::new(|_cc| Box::new(MyApp::default())),
+    );
+}
+
+#[derive(Default)]
+struct MyApp {
+    dropped_files: Vec<egui::DroppedFile>,
+    picked_path: Option<String>,
+}
+
+impl eframe::App for MyApp {
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            ui.label("Drag-and-drop files onto the window!");
+
+            if ui.button("Open file…").clicked() {
+                if let Some(path) = rfd::FileDialog::new().pick_file() {
+                    self.picked_path = Some(path.display().to_string());
+                }
+            }
+
+            if let Some(picked_path) = &self.picked_path {
+                ui.horizontal(|ui| {
+                    ui.label("Picked file:");
+                    ui.monospace(picked_path);
+                });
+            }
+
+            // Show dropped files (if any):
+            if !self.dropped_files.is_empty() {
+                ui.group(|ui| {
+                    ui.label("Dropped files:");
+
+                    for file in &self.dropped_files {
+                        let mut info = if let Some(path) = &file.path {
+                            path.display().to_string()
+                        } else if !file.name.is_empty() {
+                            file.name.clone()
+                        } else {
+                            "???".to_owned()
+                        };
+                        if let Some(bytes) = &file.bytes {
+                            info += &format!(" ({} bytes)", bytes.len());
+                        }
+                        ui.label(info);
+                    }
+                });
+            }
+        });
+
+        self.detect_files_being_dropped(ctx);
+    }
+}
+
+impl MyApp {
+    fn detect_files_being_dropped(&mut self, ctx: &egui::Context) {
+        use egui::*;
+
+        // Preview hovering files:
+        if !ctx.input().raw.hovered_files.is_empty() {
+            let mut text = "Dropping files:\n".to_owned();
+            for file in &ctx.input().raw.hovered_files {
+                if let Some(path) = &file.path {
+                    text += &format!("\n{}", path.display());
+                } else if !file.mime.is_empty() {
+                    text += &format!("\n{}", file.mime);
+                } else {
+                    text += "\n???";
+                }
+            }
+
+            let painter =
+                ctx.layer_painter(LayerId::new(Order::Foreground, Id::new("file_drop_target")));
+
+            let screen_rect = ctx.input().screen_rect();
+            painter.rect_filled(screen_rect, 0.0, Color32::from_black_alpha(192));
+            painter.text(
+                screen_rect.center(),
+                Align2::CENTER_CENTER,
+                text,
+                TextStyle::Heading.resolve(&ctx.style()),
+                Color32::WHITE,
+            );
+        }
+
+        // Collect dropped files:
+        if !ctx.input().raw.dropped_files.is_empty() {
+            self.dropped_files = ctx.input().raw.dropped_files.clone();
+        }
+    }
+}

examples/hello_world/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "hello_world"
+version = "0.1.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.60"
+publish = false
+
+
+[dependencies]
+eframe = { path = "../../eframe" }

examples/hello_world/README.md

@@ -0,0 +1,3 @@
+```sh
+cargo run -p hello_world
+```

examples/hello_world/src/main.rs

@@ -0,0 +1,46 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+
+use eframe::egui;
+
+fn main() {
+    let options = eframe::NativeOptions::default();
+    eframe::run_native(
+        "My egui App",
+        options,
+        Box::new(|_cc| Box::new(MyApp::default())),
+    );
+}
+
+struct MyApp {
+    name: String,
+    age: u32,
+}
+
+impl Default for MyApp {
+    fn default() -> Self {
+        Self {
+            name: "Arthur".to_owned(),
+            age: 42,
+        }
+    }
+}
+
+impl eframe::App for MyApp {
+    fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            ui.heading("My egui Application");
+            ui.horizontal(|ui| {
+                ui.label("Your name: ");
+                ui.text_edit_singleline(&mut self.name);
+            });
+            ui.add(egui::Slider::new(&mut self.age, 0..=120).text("age"));
+            if ui.button("Click each year").clicked() {
+                self.age += 1;
+            }
+            ui.label(format!("Hello '{}', age {}", self.name, self.age));
+        });
+
+        // Resize the native window to be just the size we need it to be:
+        frame.set_window_size(ctx.used_size());
+    }
+}

examples/retained_image/Cargo.toml

@@ -0,0 +1,14 @@
+[package]
+name = "retained_image"
+version = "0.1.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.60"
+publish = false
+
+
+[dependencies]
+eframe = { path = "../../eframe" }
+egui_extras = { path = "../../egui_extras", features = ["image"] }
+image = { version = "0.24", default-features = false, features = ["png"] }

examples/retained_image/README.md

@@ -0,0 +1,3 @@
+```sh
+cargo run -p retained_image
+```

examples/retained_image/src/main.rs

@@ -0,0 +1,53 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+
+use eframe::egui;
+use egui_extras::RetainedImage;
+
+fn main() {
+    let options = eframe::NativeOptions {
+        initial_window_size: Some(egui::vec2(500.0, 900.0)),
+        ..Default::default()
+    };
+    eframe::run_native(
+        "Show an image with eframe/egui",
+        options,
+        Box::new(|_cc| Box::new(MyApp::default())),
+    );
+}
+
+struct MyApp {
+    image: RetainedImage,
+}
+
+impl Default for MyApp {
+    fn default() -> Self {
+        Self {
+            image: RetainedImage::from_image_bytes(
+                "rust-logo-256x256.png",
+                include_bytes!("rust-logo-256x256.png"),
+            )
+            .unwrap(),
+        }
+    }
+}
+
+impl eframe::App for MyApp {
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            ui.heading("This is an image:");
+            self.image.show(ui);
+
+            ui.heading("This is a rotated image:");
+            ui.add(
+                egui::Image::new(self.image.texture_id(ctx), self.image.size_vec2())
+                    .rotate(45.0_f32.to_radians(), egui::Vec2::splat(0.5)),
+            );
+
+            ui.heading("This is an image you can click:");
+            ui.add(egui::ImageButton::new(
+                self.image.texture_id(ctx),
+                self.image.size_vec2(),
+            ));
+        });
+    }
+}

examples/retained_image/src/rust-logo-license.txt

@@ -0,0 +1 @@
+Rust logo by Mozilla, from https://github.com/rust-lang/rust-artwork

examples/svg/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "svg"
+version = "0.1.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.60"
+publish = false
+
+
+[dependencies]
+eframe = { path = "../../eframe" }
+egui_extras = { path = "../../egui_extras", features = ["svg"] }

examples/svg/README.md

@@ -0,0 +1,6 @@
+Example how to show an SVG image.
+
+
+```sh
+cargo run -p svg
+```

examples/svg/src/main.rs

@@ -0,0 +1,49 @@
+//! A good way of displaying an SVG image in egui.
+//!
+//! Requires the dependency `egui_extras` with the `svg` feature.
+
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+
+use eframe::egui;
+
+fn main() {
+    let options = eframe::NativeOptions {
+        initial_window_size: Some(egui::vec2(1000.0, 700.0)),
+        ..Default::default()
+    };
+    eframe::run_native(
+        "svg example",
+        options,
+        Box::new(|_cc| Box::new(MyApp::default())),
+    );
+}
+
+struct MyApp {
+    svg_image: egui_extras::RetainedImage,
+}
+
+impl Default for MyApp {
+    fn default() -> Self {
+        Self {
+            svg_image: egui_extras::RetainedImage::from_svg_bytes(
+                "rustacean-flat-happy.svg",
+                include_bytes!("rustacean-flat-happy.svg"),
+            )
+            .unwrap(),
+        }
+    }
+}
+
+impl eframe::App for MyApp {
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            ui.heading("SVG example");
+            ui.label("The SVG is rasterized and displayed as a texture.");
+
+            ui.separator();
+
+            let max_size = ui.available_size();
+            self.svg_image.show_max_size(ui, max_size);
+        });
+    }
+}

examples/svg/src/rust-logo-license.txt

@@ -0,0 +1 @@
+Rust logo by Mozilla, from https://github.com/rust-lang/rust-artwork

examples/svg/src/rustacean-flat-happy.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1200 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+    <g id="Layer-1" serif:id="Layer 1">
+        <g transform="matrix(1,0,0,1,1009.4,506.362)">
+            <path d="M0,-7.203L-12.072,-32.209C-12.009,-33.156 -11.961,-34.107 -11.961,-35.062C-11.961,-63.408 -41.439,-89.533 -91.03,-110.451L-91.03,-93.058C-95.866,-94.977 -100.901,-96.845 -106.147,-98.651L-106.147,-106.759C-177.021,-132.319 -282.53,-148.537 -400.388,-148.537C-503.361,-148.537 -596.917,-136.157 -666.179,-115.983L-666.179,-87.737L-666.181,-87.737L-666.181,-121.925C-737.141,-99.375 -781.135,-68.048 -781.135,-33.41C-781.135,-27.95 -780.034,-22.572 -777.918,-17.297L-785.146,-4.43C-785.146,-4.43 -790.938,3.082 -780.74,18.932C-771.746,32.909 -726.692,87.617 -702.913,116.267C-692.699,130.954 -685.772,140.001 -685.167,139.126C-684.212,137.74 -691.518,110.165 -711.802,78.703C-721.268,61.808 -732.57,39.42 -739.356,22.884C-720.414,34.874 -609.126,90.913 -382.124,90.685C-150.13,90.453 -47.009,17.834 -35.691,7.948C-39.646,23.837 -53.159,55.981 -63.936,78.586C-81.642,110.917 -88.056,139.064 -87.232,140.456C-86.708,141.334 -80.667,132.015 -71.756,116.913C-51.025,87.37 -11.739,30.974 -3.889,16.608C5.007,0.323 0,-7.203 0,-7.203" style="fill:rgb(165,43,0);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,1079.49,294.885)">
+            <path d="M0,204.135L-79.343,145.689C-80.088,143.089 -80.833,140.488 -81.603,137.908L-55.541,100.154C-52.881,96.314 -52.345,91.322 -54.072,86.943C-55.803,82.585 -59.587,79.461 -64.062,78.696L-108.128,71.217C-109.837,67.732 -111.626,64.301 -113.422,60.898L-94.907,18.51C-93.004,14.193 -93.402,9.175 -95.929,5.256C-98.446,1.319 -102.715,-0.981 -107.267,-0.802L-151.991,0.823C-154.306,-2.193 -156.658,-5.18 -159.058,-8.114L-148.78,-53.546C-147.738,-58.158 -149.054,-62.989 -152.267,-66.34C-155.462,-69.679 -160.105,-71.062 -164.52,-69.979L-208.082,-59.27C-210.902,-61.763 -213.77,-64.223 -216.67,-66.635L-215.103,-113.276C-214.935,-117.997 -217.136,-122.484 -220.915,-125.105C-224.692,-127.741 -229.485,-128.137 -233.616,-126.179L-274.254,-106.858C-277.527,-108.736 -280.819,-110.595 -284.146,-112.395L-291.327,-158.356C-292.056,-163.012 -295.051,-166.968 -299.246,-168.774C-303.431,-170.591 -308.222,-170.002 -311.894,-167.238L-348.126,-140.053C-351.695,-141.238 -355.279,-142.373 -358.905,-143.46L-374.522,-187.045C-376.11,-191.488 -379.772,-194.751 -384.238,-195.669C-388.688,-196.578 -393.266,-195.037 -396.352,-191.589L-426.851,-157.47C-430.536,-157.893 -434.228,-158.28 -437.927,-158.601L-461.476,-198.277C-463.86,-202.295 -468.073,-204.741 -472.615,-204.741C-477.144,-204.741 -481.365,-202.295 -483.733,-198.277L-507.288,-158.601C-510.989,-158.28 -514.696,-157.893 -518.376,-157.47L-548.875,-191.589C-551.965,-195.037 -556.559,-196.578 -560.997,-195.669C-565.457,-194.739 -569.125,-191.488 -570.704,-187.045L-586.333,-143.46C-589.954,-142.373 -593.538,-141.23 -597.113,-140.053L-633.333,-167.238C-637.016,-170.012 -641.811,-170.599 -646.001,-168.774C-650.182,-166.968 -653.189,-163.012 -653.914,-158.356L-661.1,-112.395C-664.422,-110.595 -667.714,-108.746 -670.995,-106.858L-711.629,-126.179C-715.756,-128.145 -720.574,-127.741 -724.333,-125.105C-728.106,-122.484 -730.313,-117.997 -730.143,-113.276L-728.581,-66.635C-731.475,-64.223 -734.337,-61.763 -737.172,-59.27L-780.726,-69.979C-785.149,-71.053 -789.788,-69.679 -792.991,-66.34C-796.212,-62.989 -797.517,-58.158 -796.482,-53.546L-786.225,-8.114C-788.603,-5.169 -790.958,-2.193 -793.267,0.823L-837.991,-0.802C-842.504,-0.937 -846.812,1.319 -849.334,5.256C-851.861,9.175 -852.244,14.193 -850.363,18.51L-831.835,60.898C-833.634,64.301 -835.421,67.732 -837.144,71.217L-881.207,78.696C-885.686,79.45 -889.459,82.572 -891.201,86.943C-892.929,91.322 -892.368,96.314 -889.727,100.154L-863.661,137.908C-863.862,138.575 -864.048,139.247 -864.248,139.916L-937.944,218.201C-937.944,218.201 -949.24,227.052 -932.797,247.855C-918.297,266.206 -843.846,338.951 -804.526,377.06C-787.92,396.408 -776.542,408.389 -775.354,407.353C-773.478,405.708 -783.326,370.506 -816.036,329.204C-841.252,292.148 -873.977,235.155 -866.303,228.586C-866.303,228.586 -857.574,217.505 -840.061,209.529C-839.42,210.041 -840.723,209.022 -840.061,209.529C-840.061,209.529 -470.466,380.02 -127.632,212.413C-88.468,205.388 -64.759,226.368 -64.759,226.368C-56.583,231.108 -77.755,289.712 -95.166,328.505C-118.845,372.555 -122.317,406.927 -120.31,408.119C-119.042,408.876 -110.427,395.766 -98.138,374.902C-67.814,332.649 -10.492,252.1 0,232.534C11.895,210.352 0,204.135 0,204.135" style="fill:rgb(247,76,0);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,917.896,244.679)">
+            <path d="M0,232.466C0,232.466 53.179,230 123.032,159.004L132.93,137.025C132.93,137.025 24.513,29.177 193.048,-45.266C193.048,-45.266 178.293,-21.154 182.622,72.006C182.622,72.006 233.437,54.357 248.336,-27.934C248.336,-27.934 322.456,69.79 167.834,161.443C167.834,161.443 95.294,277.732 -6.971,266.593L0,232.466Z" style="fill:rgb(247,76,0);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,676.997,488.361)">
+            <path d="M0,-78.192C0,-78.192 36.935,-118.635 73.871,-78.192C73.871,-78.192 102.893,-24.265 73.871,2.695C73.871,2.695 26.384,40.443 0,2.695C0,2.695 -31.658,-26.964 0,-78.192" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,719.761,425.169)">
+            <path d="M0,0.004C0,15.75 -9.282,28.518 -20.732,28.518C-32.18,28.518 -41.462,15.75 -41.462,0.004C-41.462,-15.746 -32.18,-28.514 -20.732,-28.514C-9.282,-28.514 0,-15.746 0,0.004" style="fill:white;fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,512.148,482.736)">
+            <path d="M0,-83.609C0,-83.609 63.355,-111.661 80.648,-49.047C80.648,-49.047 98.762,23.933 28.618,28.052C28.618,28.052 -60.826,10.824 0,-83.609" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,543.968,426.204)">
+            <path d="M0,0.002C0,16.241 -9.572,29.411 -21.381,29.411C-33.185,29.411 -42.76,16.241 -42.76,0.002C-42.76,-16.242 -33.185,-29.409 -21.381,-29.409C-9.572,-29.409 0,-16.242 0,0.002" style="fill:white;fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,593.317,576.574)">
+            <path d="M0,-40.271L80.796,-46.755C80.796,-46.755 78.058,-33.749 67.517,-23.986C67.517,-23.986 39.727,6.484 7.844,-26.519C7.844,-26.519 2.627,-32.148 0,-40.271" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,269.796,270.778)">
+            <path d="M0,190.741C-0.667,190.741 -1.321,190.79 -1.973,190.842C-28.207,184.871 -101.946,165.657 -121.437,134.479C-121.437,134.479 -22.21,21.607 -177.297,-50.54L-159.24,74.338C-159.24,74.338 -207.049,42.389 -217.366,-27.008C-217.366,-27.008 -333.789,57.486 -165.982,138.466C-165.982,138.466 -150.762,195.653 -4.633,241.281L-4.526,240.846C-3.055,241.118 -1.549,241.281 0,241.281C13.808,241.281 25.003,229.969 25.003,216.01C25.003,202.054 13.808,190.741 0,190.741" style="fill:rgb(247,76,0);fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>