Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I colour buttons and where can I find the corresponding descriptions for button() and Response? #307

Open
Guelakais opened this issue Sep 7, 2024 · 3 comments

Comments

@Guelakais
Copy link

I've tried the following:

use bevy::prelude::*;
use bevy_egui::{egui, EguiContexts, EguiPlugin};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(EguiPlugin)
        .add_systems(Update, (ui_example_system, header_bar))
        .run();
}

fn ui_example_system(mut contexts: EguiContexts) {
    egui::Window::new("Hello").show(contexts.ctx_mut(), |ui| {
        ui.label("world");
    });
}

fn header_bar(mut contexts: EguiContexts) {
    egui::TopBottomPanel::top("header_bar").show(contexts.ctx_mut(), |ui| {
        // Create an array of button labels for easier management
        ui.horizontal(|ui| {
            [
                ("Button 1", egui::Color32::GREEN),
                ("Button 2", egui::Color32::BLUE),
                ("Button 3", egui::Color32::RED),
                ("Button 4", egui::Color32::YELLOW),
                ("Button 5", egui::Color32::DARK_RED),
            ]
            .into_iter()
            .for_each(|(label,color)| {
                if ui.button(label).fill(color).clicked() {
                    // Handle button clicks here
                    println!("Clicked button: {}", label);
                }
            });
        });
    });
}

Which produced the followinge error:

error[E0599]: no method named `fill` found for struct `Response` in the current scope
  --> egui_stuff/src/main.rs:31:37
   |
31 |                 if ui.button(label).fill(color).clicked() {
   |                                     ^^^^ method not found in `Response`

For more information about this error, try `rustc --explain E0599`.
error: could not compile `egui_stuff` (bin "egui_stuff") due to 1 previous error

Unfortunately, I can't find a description for the button() method used here, nor for the Response method used here in the associated documentation, or I don't know what to look for. Can anyone help me?

@vladbat00
Copy link
Owner

Hi!

You can construct a button with this API to be able to customise it: https://docs.rs/egui/latest/egui/widgets/struct.Button.html.

For example:

let button = egui::Button::new("Click me").fill(color);
if ui.add(button).clicked() {
  // ...
}

Btw, this is a question about egui itself, not bevy_egui, usually you have a better chance to find a quick answer on their GitHub or Discord server.

@Guelakais
Copy link
Author

Guelakais commented Sep 7, 2024

Thank you for the quick reply. It worked straight away. The code now looks like this:

use bevy::prelude::*;
use bevy_egui::{egui::{RichText,Color32,Button,Window,TopBottomPanel}, EguiContexts, EguiPlugin};
fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(EguiPlugin)
        .add_systems(Update, (ui_example_system, header_bar))
        .run();
}

fn ui_example_system(mut contexts: EguiContexts) {
    Window::new("Hello").show(contexts.ctx_mut(), |ui| {
        ui.label("world");
    });
}

fn header_bar(mut contexts: EguiContexts) {
    TopBottomPanel::top("header_bar").show(contexts.ctx_mut(), |ui| {
        // Create an array of button labels for easier management
        ui.horizontal(|ui| {
            [
                ("Button 1", Color32::GREEN,Color32::RED),
                ("Button 2", Color32::BLUE,Color32::GOLD),
                ("Button 3", Color32::RED,Color32::BLUE),
                ("Button 4", Color32::YELLOW,Color32::from_rgb(238,130,238)),
                ("Button 5", Color32::DARK_RED,Color32::DARK_BLUE),
            ]
            .into_iter()
            .for_each(|(label, button_color,label_color)| {
                if ui
                    .add(
                        Button::new(RichText::new(label).color(label_color))
                            .fill(button_color),
                    )
                    .clicked()
                {
                    // Handle button clicks here
                    println!("Clicked button: {}", label);
                }
            });
        });
    });
}

It is not immediately obvious that the problem lies directly with egui if you cannot find the corresponding references in the documentation. egui_bevy could just as well call the Button struct of Bevy directly.

@vladbat00
Copy link
Owner

There are very few structs, methods that bevy_egui exposes on its own. If you check the EguiContexts documentation, for example, you can see that the Context type it returns already belongs to egui.

All the ui methods, widgets, etc are provided by egui, these don't fall into the bevy_egui zone of responsibility. I understand how it can be a bit confusing, and it's not the first time someone asks questions about egui here. :) So I agree that the documentation can be improved in this regard. In case you have any specific ideas, a comment or a PR are welcome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants