How to maintain the left and right width ratio of the side panel when the window size changes？

[XiaoPengYouCode]

How to maintain the left and right width ratio of the side panel when the window size changes？

I wanna to maintain the ratio of the left and right panel, now when I resize the windows, it just remember the exactly weight of the side panel but not maintain the ratio of left and right.

I know how to get the new size of the windows, but I don't know how to change the scale value of the bar to keep the ratio.

egui::SidePanel::left("left_panel")
    .default_width(self.weight * 0.5)
    .width_range(self.weight * 0.35..=self.weight * 0.65)
    .show_inside(ui, |ui| {
        ui.vertical_centered(|ui| {
        ui.heading("Left Panel");
        });
    });

ui.vertical_centered(|ui| {
    ui.heading("Right Panel");
});

I just want to keep the weight ratio between the left and the right panel when the windows size is changed.

[dexter-xD]

• First, you need to get the current window size every frame. You can use ui.available_rect_before_wrap() to get the size available for widgets.
• Then based on your current setup, it seems like you want the left panel to be about half the width of the window, with some flexibility. Let's keep this ratio but make sure it adjusts with the window size.
• After that recalculate the width of the left panel based on the current window width and the desired ratio.

self.ratio should be set to whatever ratio you want for your left panel. If you want a 50-50 split, self.ratio would be 0.5.

let window_rect = ui.available_rect_before_wrap();
let window_width = window_rect.width();

// Assume you want to keep a 1:1 ratio between left and right, but adjust if needed
let left_width = window_width * self.ratio;  // self.ratio could be 0.5 for 50%

egui::SidePanel::left("left_panel")
    .default_width(left_width)
    .width_range(window_width * 0.35..=window_width * 0.65)
    .show_inside(ui, |ui| {
        ui.vertical_centered(|ui| {
            ui.heading("Left Panel");
        });
    });

// The rest of the window width is used for the right panel
ui.vertical_centered(|ui| {
    ui.heading("Right Panel");
});

[dexter-xD]

// Assume you have a `self.current_ratio` in your struct to store the current ratio
if !self.current_ratio.is_normal() { // Initialize if not set
    self.current_ratio = 0.5; // Default to 50%
}

let window_rect = ui.available_rect_before_wrap();
let window_width = window_rect.width();

// Calculate width based on stored ratio
let current_width = window_width * self.current_ratio;

// Show side panel
let response = egui::SidePanel::left("left_panel")
    .default_width(current_width)
    .width_range(window_width * 0.35..=window_width * 0.65)
    .show_inside(ui, |ui| {
        ui.vertical_centered(|ui| {
            ui.heading("Left Panel");
        });
    });

// If the panel's width was manually changed, update the ratio
if let Some(rect) = response.response.rect {
    self.current_ratio = rect.width() / window_width;
}

// Right panel
ui.vertical_centered(|ui| {
    ui.heading("Right Panel");
});

[XiaoPengYouCode]

impl eframe::App for RobotControlApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        // 控制面板
        egui::CentralPanel::default().show(ctx, |ui| {

            ui.heading("Parameters Panel");

            ui.horizontal(|ui| {
                ui.label("Speed:");
                if ui.add(egui::Slider::new(&mut self.params.speed, 0.0..=10.0)).changed() {
                    // self.send_params_update();
                }
            });

            ui.horizontal(|ui| {
                ui.label("Acceleration:");
                if ui.add(egui::Slider::new(&mut self.params.acceleration, 0.0..=5.0)).changed() {
                    // self.send_params_update();
                }
            });

            ui.horizontal(|ui| {
                ui.label("Steering:");
                if ui.add(egui::Slider::new(&mut self.params.steering_angle, -45.0..=45.0)).changed() {
                    // self.send_params_update();
                }
            });

            // 部分参数显示
            ui.separator();
            ui.heading("Status Panel");

            // 摄像头画面显示
            ui.separator();

            let window_rect = ui.available_rect_before_wrap();
            let window_width = window_rect.width();

            let current_width = window_rect.width() * self.panel_width_ratio;

            let response = egui::SidePanel::left("left_panel")
                .default_width(current_width)
                .width_range(window_width * 0.35..=window_width * 0.65)
                .show_inside(ui, |ui| {
                    ui.vertical_centered(|ui| {
                        ui.heading("Camera Video");
                    });
                });

            // If the panel's width was manually changed, update the ratio
            let rect = response.response.rect;
            self.panel_width_ratio = rect.width() / window_width;
            
            ui.vertical_centered(|ui| {
                ui.heading("Virtualization Viewer");
            });
        });

        // 软件信息面板
        egui::TopBottomPanel::bottom("software message").show(ctx, |ui| {
            ui.vertical_centered(|ui| {
                ui.label("Designed by Little Boy.   |   v0.1.0");
            })
        });
    }
}

Here is my code, it just works when I drag the window width bigger than ever before

[XiaoPengYouCode]

I mean I don't think the width calculate logic is wrong, I think even the default_width I give is changed, actually the side panel width just keep before, until it rech the width range edge, and the edge will push the scale line to change.