Creating images

[charleschege]

Is there an easy way to load images or an explanation on how to do it? It's not quite self explanatory as the documentation about text, labels and buttons. Or am I missing something?

[norcalli]

Images are going to be textures that you will have to load with your rendering backend like OpenGL via glium or whatnot. You can then pass them to egui via something like https://docs.rs/egui/0.11.0/egui/widgets/struct.Image.html or do the rendering yourself by reserving the space ahead-of-time and drawing it yourself.

[charleschege]

I am new to this, so are there examples to load any type of image and load it to egui?

[emilk]

There is an example here: https://emilk.github.io/egui/index.html#http

[logica-academy]

I would like to know about there is an easy way
I want to display 4 png format images for icon in the side panel.
The image files are in the assets folder.
I am thinking of an action where clicking on an image will open another side panel.

[emilk]

Load the image with e.g. the image crate, then covert it to a texture using https://docs.rs/epi/0.12.0/epi/struct.Frame.html#method.tex_allocator

You can show it in egui with egui::Image.

[NadyaNayme]

Alright so maybe I'm just terrible at reading Rust documentation but I never found a satisfactory answer of "Here's a barebones basic implementation to get an image to the screen" answer. After spending hours and hours on this I have an answer for other Rust beginners who have absolutely no clue what they are doing (like myself!)

I add my images by keeping them in memory in lib.rs like so

pub static BLUE_CHEST: &[u8] = include_bytes!("./images/blue_chest.png");

Then I followed the documentation instructions, but modified the function for easier use:

// We use Default here so that we can create a new instance of ItemImage and Clone so we can cheaply make copies
#[derive(Default, Clone)]
pub struct ItemImage {
    texture: Option<egui::TextureHandle>,
}

impl ItemImage {
   // Pass it an ItemImage::Default, what the image is called, some include_bytes! if loading from memory or modify this to take a Path, and finally your App's ui
   pub fn ui(&mut self, image_name: &str, image: &[u8], ui: &mut egui::Ui) {
        let image = load_image_from_memory(image).unwrap();
        let texture: &egui::TextureHandle = self.texture.get_or_insert_with(|| {
            ui.ctx().load_texture(image_name, image)
        });
        ui.image(texture, texture.size_vec2());
    }
}

Then using the image crate as suggested I also have a function in lib.rs to load an image from memory (the include_bytes! above)

pub fn load_image_from_memory(image_data: &[u8]) -> Result<ColorImage, image::ImageError> {
    let image = image::load_from_memory(image_data)?;
    let size = [image.width() as _, image.height() as _];
    let image_buffer = image.to_rgba8();
    let pixels: image::FlatSamples<&[u8]> = image_buffer.as_flat_samples();
    Ok(ColorImage::from_rgba_unmultiplied(
        size,
        pixels.as_slice(),
    ))
}

Then back in app.rs within my application I finally call the image like so:

ItemImage::ui(&mut ItemImage::default(), "Gold Brick", GOLD_BAR, ui);

Maybe others can point out things I've done wrong - but I FINALLY have an image loading in my application. I'm hoping this helps others who are struggling as much as I was.

[emilk]

I obviously need to add some links to egui_extras::RetainedImage. It is very easy to use: https://github.com/emilk/egui/blob/0.17.0/eframe/examples/image.rs

[NadyaNayme]

For what it's worth - I've found egui extremely easy to get started with and the things I've struggled with were due to my own lack of experience with Rust and the docs sometimes assuming I have a higher level of competence than I currently have. ^^;

[emilk]

Since egui 0.17.0, there is now a crate egui_extras with a RatainedImage helper. It is now the easiest way to load and show images in egui. Example here: https://github.com/emilk/egui/blob/0.17.0/eframe/examples/image.rs

[iliis]

Is there some way of plotting/changing that images? Like, painting single pixels?

[iliis]

Ok, found a way:

let texture: &mut egui::TextureHandle = self.eventframe.get_or_insert_with(|| {
    // Load the texture only once.
    ui.ctx().load_texture("eventframe", egui::ColorImage::example())
});


let W = ...;
let H = ...;
let mut img = ColorImage::new([W, H], Color32::BLACK);

// draw on pixels
img.pixels[y*W + x] = Color32::from_rgb(255, 155, 0);

texture.set(img);
let size = texture.size_vec2();
ui.image(texture, size);

Now I only need to figure out how to overlay other widgets onto this...

[iliis]

let response = ui.image(texture, size);
let painter = ui.painter_at(response.rect);

is actually enough to draw over the image :)

And if you need interactivity, you can for example do this:

let response = ui.add(Image::new(texture, size).sense(Sense::click()));
if response.clicked() {
    // do something
}

I must say, I really like this library. Best (most convenient) GUI lib in Rust I've found so far!