Is it possible to have an image and some text in the background?

[azerupi]

I'm trying to draw an image and a label in a frame in the background that is ignored by the layout and other widgets. And then I want to draw the rest of the UI on top.

So I have this code to draw the background part.

    pub fn show(&mut self, ctx: &egui::Context) -> egui::Response {
        let rect = ctx.screen_rect();

        Area::new("axr_pilot_video_player".into())
            .order(Order::Background)
            .show(ctx, |ui| {
                ui.set_min_size(rect.size());
                self.ui_no_signal(ui)
            })
            .response
    }

    fn ui_no_signal(&mut self, ui: &mut egui::Ui) -> egui::Response {
        let size = ui.available_size();
        let rect = ui.available_rect_before_wrap();

        let image = Image::new(crate::assets::COLOR_BARS)
            .maintain_aspect_ratio(false)
            .fit_to_exact_size(size);

        image.paint_at(ui, rect);

        Area::new("no_signal_text_overlay".into())
            .anchor(Align2::CENTER_CENTER, Vec2::ZERO) // Anchor its center to the center of its parent UI (which is the full window)
            .order(Order::Background) // Draw it on top of the background image, but potentially behind top-level panels
            .show(ui.ctx(), |ui| {
                let text_frame_style = Frame::new()
                    .inner_margin(Margin::symmetric(20, 10))
                    .fill(egui::Color32::from_black_alpha(180));

                text_frame_style.show(ui, |ui| {
                    // Define the RichText
                    let text = RichText::new("NO VIDEO SIGNAL")
                        .size(40.0)
                        .strong()
                        .color(egui::Color32::WHITE);

                    ui.label(text);
                });
            })
            .response
    }

However when I try to draw the normal panels they end up being drawn behind the background image.

CentralPanel::default().show(ctx, |ui| {
    ui.label("Hello World!");
});

If I move the image over slightly we can see the rest is drawn behind it.

Is there a way to achieve this?

[azerupi]

I got closer today. I believe Area is not the right solution. I didn't see it in the docs before but they state that panels are drawn behind them. So I abandoned the areas and I believe what I was missing was ui.new_child() which allows me to put widgets on the screen without them affecting the other widgets drawn on top.

However.. Now I can't figure out how to center the frame with the label without it being stretched to fill the whole available space. I tried using layouts but unfortunately the frame always seems to stretch.

Here is what I have right now:

/// In app.rs


    /// Called each time the UI needs repainting, which may be many times per second.
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        CentralPanel::default().frame(Frame::new()).show(ctx, |ui| {
            let mut bg_ui = ui.new_child(UiBuilder::new());
            self.video.ui(&mut bg_ui);

            ui.label(RichText::new("Hello World!").size(24.0));
        });
    }

impl Widget for &mut VideoPlayer {
    fn ui(self, ui: &mut egui::Ui) -> egui::Response {
        self.ui_no_signal(ui)
    }
}

/// impl VideoPlayer

    fn ui_no_signal(&mut self, ui: &mut egui::Ui) -> egui::Response {
        let size = ui.available_size();
        let rect = ui.available_rect_before_wrap();

        let image = Image::new(crate::assets::COLOR_BARS)
            .maintain_aspect_ratio(false)
            .fit_to_exact_size(size);

        let mut bg_ui = ui.new_child(egui::UiBuilder::new());

        bg_ui.put(rect, image);

        let text_frame = Frame::new()
            .inner_margin(Margin::symmetric(20, 10))
            .fill(egui::Color32::from_black_alpha(180));

        let text = RichText::new("NO VIDEO SIGNAL")
            .size(40.0)
            .strong()
            .color(egui::Color32::WHITE);

        text_frame.show(ui, |ui| {
            ui.label(text);
        });

        ui.response()
    }

[azerupi]

I managed to get something working using egui_taffy. If this is possible in a not too complex way with vanilla egui I would still be curious to now how.

Here is the code for anyone interested:

fn ui_no_signal(&mut self, ui: &mut egui::Ui) -> egui::Response {
    let size = ui.available_size();
    let rect = ui.available_rect_before_wrap();

    let image = Image::new(crate::assets::COLOR_BARS)
        .maintain_aspect_ratio(false)
        .fit_to_exact_size(size);

    let mut bg_ui = ui.new_child(egui::UiBuilder::new());

    bg_ui.put(rect, image);

    let text_frame = Frame::new()
        .inner_margin(Margin::symmetric(20, 10))
        .fill(egui::Color32::from_black_alpha(180));

    let text = RichText::new("NO VIDEO SIGNAL")
        .size(40.0)
        .strong()
        .color(egui::Color32::WHITE);

    let flex_style = taffy::Style {
        align_items: Some(taffy::AlignItems::Center),
        justify_content: Some(taffy::JustifyContent::SpaceAround),
        size: taffy::Size {
            width: percent(1.),
            height: percent(1.),
        },
        ..taffy::Style::DEFAULT
    };

    tui(ui, ui.id().with("no_signal"))
        .reserve_available_space()
        .style(flex_style)
        .show(|tui| {
            tui.ui(|ui| {
                text_frame.show(ui, |ui| {
                    let label = Label::new(text).wrap_mode(egui::TextWrapMode::Extend);
                    ui.add(label);
                });
            });
        });

    ui.response()
}

[algorithmiker]

Hey!
I am not sure I understand your problem.
Wouldn't ui.put(some_rectangle, your_text) not be enough?

[anti-social]

I think I managed to place it almost in the center of the screen without extra dependencies:

                let ui_size = ui.available_size();

                let mut bg_ui = ui.new_child(egui::UiBuilder::new());
                bg_ui.put(
                    egui::Rect::from_center_size(
                        egui::Pos2::new(ui_size.x / 2., ui_size.y / 2.),
                        egui::Vec2::new(ui_size.x, 20.)
                    ),
                    |ui: &mut egui::Ui| {
                        let label = egui::Label::new(
                            egui::RichText::new("Center of the center")
                                .size(16.)
                                .color(egui::Color32::RED)
                        );
                        ui.vertical_centered(|ui| {
                            let (galley_pos, galley, response) = label.layout_in_ui(ui);

                            if ui.is_rect_visible(response.rect) {
                                ui.painter().rect_filled(
                                    response.rect.expand(10.),
                                    egui::CornerRadius::ZERO,
                                    egui::Color32::from_black_alpha(0xAA),
                                );
                                ui.painter().add(
                                    egui::epaint::TextShape::new(
                                        galley_pos,
                                        galley,
                                        ui.style().visuals.text_color()
                                    )
                                );
                            }

                            response
                        }).response
                    }
                );

[anti-social]

Possibly it is worth to rasterize the label in the parent ui, so we are able to calculate a rectangle for it before placing:

                let ui_size = ui.available_size();

                self.render_texture(ui);

                let label = egui::Label::new(
                    egui::RichText::new("Center of the center")
                        .size(16.)
                        .color(egui::Color32::RED)
                );
                let (_, galley, response) = label.layout_in_ui(ui);

                let mut bg_ui = ui.new_child(egui::UiBuilder::new());
                bg_ui.put(
                    egui::Rect::from_center_size(
                        egui::Pos2::new(ui_size.x / 2., ui_size.y / 2.),
                        egui::Vec2::new(response.rect.width() + 10., response.rect.height() + 10.)
                    ),
                    |ui: &mut egui::Ui| {
                        ui.painter().rect_filled(
                            ui.max_rect(),
                            egui::CornerRadius::ZERO,
                            egui::Color32::from_black_alpha(0xAA),
                        );
                        ui.painter().add(
                            egui::epaint::TextShape::new(
                                egui::Pos2::new(
                                    ui_size.x / 2. - response.rect.width() / 2.,
                                    ui_size.y / 2. - response.rect.height() / 2.
                                ),
                                galley,
                                ui.style().visuals.text_color()
                            )
                        );

                        response
                    }
                );

[anti-social]

Hello. I'm doing a similar project: playing a video stream in the background. I came up with a painter object. So here is a function I have:

    fn render_texture(&self, ui: &egui::Ui) {
        let Some(ref texture) = self.texture  else {
            return;
        };
        let frame_aspect_ratio = texture.aspect_ratio();
        let mut ui_x = 0.0;
        let mut ui_y = 0.0;
        let mut ui_width = ui.available_width();
        let mut ui_height = ui.available_height();
        let ui_aspect_ratio = ui_width / ui_height;
        if frame_aspect_ratio > ui_aspect_ratio {
            ui_height *= ui_aspect_ratio / frame_aspect_ratio;
            ui_y = (ui.available_height() - ui_height) / 2.0;
        } else if frame_aspect_ratio < ui_aspect_ratio {
            ui_width *= frame_aspect_ratio / ui_aspect_ratio;
            ui_x = (ui.available_width() - ui_width) / 2.0;
        }

        ui.painter()
            .image(
                texture.id(),
                egui::Rect::from_min_max(
                    egui::pos2(0.0, 0.0),
                    egui::pos2(ui_width, ui_height)
                ).translate(egui::vec2(ui_x, ui_y)),
                egui::Rect::from_min_max(
                    egui::pos2(0.0, 0.0),
                    egui::pos2(1.0, 1.0)
                ),
                egui::Color32::WHITE
            );
    }

And I call it in my update function:

        egui::CentralPanel::default()
            .frame(egui::Frame::default().inner_margin(0.0))
            .show(ctx, |ui| {
                self.render_texture(ui);

                // Render widgets
            });