feat: Implement more advanced UI toolbar example

[connorgmeehan]

Objective

I would like an example of a more real world use case of the UI. Showing / hiding elements contextually, more complexity in the hover states (selected elements having a different colour to unselected) and events to be consumed elsewhere in the app.

In the long term I think I'd like to help build the UI of the bevy editor when that starts happening so I was thinking of contributing some more realistic examples in preparation.

Solution

In this instance I have added an example for a toolbar that tracks its internal state (used for styling and hiding the stop button if it's not currently playing/paused) and sends selection events that can be used by the rest of the game.

I am new to rust so please critique my code styling / present better solutions / more idiomatic ways of doing things if you have the time.

Changes log is minimal, adds an example to the examples/ui/ folder called toolbar. Run with cargo run --examples toolbar

Cheers!

https://user-images.githubusercontent.com/7402063/195797606-2f0216fb-1d56-4385-abc4-16eecd1eccf5.mov

Some side notes:

• I'm getting pretty poor performance on my laptop. Even though I only have integrated graphics, click events have a pretty big delay, even on the game_menu example. I'm on MacOS if it makes any difference, I wonder if this is something I could help address. If so, let me know if I should open an issue for this because I'm not really sure what information is most helpful.
• It would be nice have a new utility function in UiRect to set the left/right and top/bottom values together as it's probably my most used way of setting padding / margin when doing web development. I could PR something like this if interested but understand if you want to keep the framework light.

let rect = UiRect::xy(Val::Px(10.0, Val::Px(5.0))
rect.left; // 10.0
rect.right; // 10.0
rect.top; // 5.0
rect.bottom; // 5.0

[MrGVSV]

• I'm getting pretty poor performance on my laptop. Even though I only have integrated graphics, click events have a pretty big delay, even on the game_menu example. I'm on MacOS if it makes any difference, I wonder if this is something I could help address. If so, let me know if I should open an issue for this because I'm not really sure what information is most helpful.

I'm on Mac as well (M1 Max) and it runs fine for me. Although, I did notice that click events happen on mouse down? I'm pretty confident that's a Bevy issue, though.

• It would be nice have a new utility function in UiRect to set the left/right and top/bottom values together as it's probably my most used way of setting padding / margin when doing web development. I could PR something like this if interested but understand if you want to keep the framework light.

Yeah I can see the usefulness of this. I wouldn't call it from_x_y, though. Maybe just xy?

[connorgmeehan]

Thank you for the code review! That was really helpful! Especially refactoring the messy booleans into the match statement.

I'm on Mac as well (M1 Max) and it runs fine for me. Although, I did notice that click events happen on mouse down? I'm pretty confident that's a Bevy issue, though.

I fixed a systems order issue and everything feels a lot faster so it could have just been an order of execution / next frame problem (although I am still getting very slow responses in the game_menu example).

Yeah I can see the usefulness of this. I wouldn't call it from_x_y, though. Maybe just xy?

Yeah UiRect::xy(...) sounds good to me. I might open a PR later on.

EDIT: Having issues with the build examples page step of the github action. Running the following command just moves the error supression on the first line. cargo run -p build-example-pages -- update

diff --git a/examples/README.md b/examples/README.md
index a7427bb0..39db8f10 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -1,5 +1,5 @@
-<!-- markdownlint-disable-file MD024 -->
 <!-- MD024 - The Headers from the Platform-Specific Examples should be identical  -->
+<!-- markdownlint-disable-file MD024 -->

 # Examples

[Weibye]

❗ Please change the target branch from bevyengine:latest to bevyengine:main ❗

The latest branch points to whatever is the newest release. At the time of writing this is 0.9.0. All development should target the main :)