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.

Sign up for GitHub

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

Jump to bottom

UI Display and Visibility Example #7629

Merged
merged 31 commits into from
Jun 19, 2023
Merged

UI Display and Visibility Example #7629

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
b6b11e4
changes:
ickshonpe Feb 11, 2023
aab1812
cargo fmt --all
ickshonpe Feb 11, 2023
51e3280
more contrast
ickshonpe Feb 11, 2023
6d1f9bc
build-example-pages
ickshonpe Feb 11, 2023
1e82c59
changed colors
ickshonpe Feb 11, 2023
50b3f42
fixed flex-direction bug
ickshonpe Feb 11, 2023
b6984ab
larger font
ickshonpe Feb 12, 2023
f5e8a4f
fixed left click bug
ickshonpe Feb 13, 2023
9b84d2d
* renamed example to "display_and_visbility.rs"
ickshonpe Feb 14, 2023
51fddf1
change message on wasm build to press space instead of click right mouse
ickshonpe Feb 14, 2023
d319c9b
fmt
ickshonpe Feb 14, 2023
1c638bc
build-example-pages
ickshonpe Feb 14, 2023
0d60e92
changed labels into buttons
ickshonpe Feb 14, 2023
a2324c2
changed labels into buttons
ickshonpe Feb 15, 2023
940be11
Removed the `Size` constraint from the outer node of the left panel s…
ickshonpe Feb 15, 2023
6a86a77
Stuff each node on the left panel with a second invisable node.
ickshonpe Feb 15, 2023
c9582e4
remove width constraints on inner nodes and cargo fmt
ickshonpe Feb 15, 2023
53e23e6
lint fixes
ickshonpe Feb 15, 2023
e0d03d4
add text background alpha
ickshonpe Feb 15, 2023
aec8a13
add text color change on mouse over
ickshonpe Feb 15, 2023
90debba
improved layout
ickshonpe Feb 15, 2023
c7238f8
fmt
ickshonpe Feb 15, 2023
08fd0be
add WinitSettings::desktop_app()
ickshonpe Feb 15, 2023
c650a1f
generic buttons handler
ickshonpe Feb 17, 2023
9a04d5b
Merge branch 'main' into display-example
ickshonpe Jun 19, 2023
094c98a
Fixed errrors resulting from the merge.
ickshonpe Jun 19, 2023
7ded881
Moved the button labels to child `TextBundle`s rather instead adding …
ickshonpe Jun 19, 2023
823b611
Fixed the text button color changes when hovered.
ickshonpe Jun 19, 2023
08b0580
Changed the palette to different blue-ish shades for the panels, text…
ickshonpe Jun 19, 2023
d0789f2
cargo run -p build-templated-pages -- update examples
ickshonpe Jun 19, 2023
d1c4b36
Added descriptions for some of the properties
ickshonpe Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1511,6 +1511,16 @@ description = "Illustrates creating and updating a button"
category = "UI (User Interface)"
wasm = true

[[example]]
name = "flex_display"
path = "examples/ui/flex_display.rs"

[package.metadata.example.flex_display]
name = "Flex Display"
description = "Demonstrates how Display and Visibility work in the UI."
category = "UI (User Interface)"
wasm = false
ickshonpe marked this conversation as resolved.
Show resolved Hide resolved

[[example]]
name = "window_fallthrough"
path = "examples/ui/window_fallthrough.rs"
Expand Down
1 change: 1 addition & 0 deletions examples/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,7 @@ Example | Description
Example | Description
--- | ---
[Button](../examples/ui/button.rs) | Illustrates creating and updating a button
[Flex Display](../examples/ui/flex_display.rs) | Demonstrates how Display and Visibility work in the UI.
[Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally)
[Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component
[Text](../examples/ui/text.rs) | Illustrates creating and updating text
Expand Down
353 changes: 353 additions & 0 deletions examples/ui/flex_display.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,353 @@
//! Demonstrates how Display and Visibility work in the UI.

use bevy::prelude::*;

fn main() {
App::new()
.add_plugins(DefaultPlugins)
.add_startup_system(setup)
.add_system(update)
.add_system(update_text)
.run();
}

#[derive(Component)]
struct ButtonTarget {
id: Entity,
color: Color,
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let palette = [
Color::hex("4059AD").unwrap(),
Color::hex("6B9AC4").unwrap(),
Color::hex("A5C8E1").unwrap(),
Color::hex("EFF2F1").unwrap(),
];

let text_style = TextStyle {
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
font_size: 24.0,
color: Color::WHITE,
};

commands.spawn(Camera2dBundle::default());
commands
.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Percent(100.)),
align_items: AlignItems::Center,
justify_content: JustifyContent::SpaceEvenly,
..Default::default()
},
background_color: BackgroundColor(Color::rgb(0.0, 0.0, 0.0)),
..Default::default()
})
.with_children(|parent| {
let mut target_ids = vec![];
parent
.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Px(520.)),
padding: UiRect::all(Val::Px(10.)),
..Default::default()
},
background_color: BackgroundColor(Color::WHITE),
..Default::default()
})
.with_children(|parent| {
let id = parent
.spawn((NodeBundle {
style: Style {
size: Size::all(Val::Px(500.)),
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::FlexEnd,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(palette[0]),
..Default::default()
},))
.with_children(|parent| {
let id = parent
.spawn((NodeBundle {
style: Style {
size: Size::all(Val::Px(400.)),
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::FlexEnd,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(palette[1]),
..Default::default()
},))
.with_children(|parent| {
let id = parent
.spawn((NodeBundle {
style: Style {
size: Size::all(Val::Px(300.)),
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::FlexEnd,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(palette[2]),
..Default::default()
},))
.with_children(|parent| {
let id = parent
.spawn((NodeBundle {
style: Style {
size: Size::all(Val::Px(200.)),
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::FlexEnd,
..Default::default()
},
background_color: BackgroundColor(palette[3]),
..Default::default()
},))
.id();
target_ids.push(id);
})
.id();
target_ids.push(id);
})
.id();
target_ids.push(id);
})
.id();
target_ids.push(id);
});

parent
.spawn(NodeBundle {
style: Style {
padding: UiRect::all(Val::Px(10.)),
..Default::default()
},
background_color: BackgroundColor(Color::WHITE),
..Default::default()
})
.with_children(|parent| {
parent
.spawn((
ButtonBundle {
style: Style {
size: Size::all(Val::Px(500.)),
flex_direction: FlexDirection::Column,
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::SpaceBetween,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(palette[0]),
..Default::default()
},
ButtonTarget {
id: target_ids.pop().unwrap(),
color: palette[0],
},
))
.with_children(|parent| {
parent.spawn((
TextBundle {
text: Text::from_section("", text_style.clone()),
style: Style {
align_self: AlignSelf::FlexStart,
..Default::default()
},
..Default::default()
},
BackgroundColor(Color::BLACK.with_a(0.5)),
));

parent
.spawn((
ButtonBundle {
style: Style {
size: Size::all(Val::Px(400.)),
flex_direction: FlexDirection::Column,
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::SpaceBetween,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(palette[1]),
..Default::default()
},
ButtonTarget {
id: target_ids.pop().unwrap(),
color: palette[1],
},
))
.with_children(|parent| {
parent.spawn((
TextBundle {
text: Text::from_section("", text_style.clone()),
style: Style {
align_self: AlignSelf::FlexStart,
..Default::default()
},
..Default::default()
},
BackgroundColor(Color::BLACK.with_a(0.5)),
));

parent
.spawn((
ButtonBundle {
style: Style {
size: Size::all(Val::Px(300.)),
flex_direction: FlexDirection::Column,
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::SpaceBetween,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(palette[2]),
..Default::default()
},
ButtonTarget {
id: target_ids.pop().unwrap(),
color: palette[2],
},
))
.with_children(|parent| {
parent.spawn((
TextBundle {
text: Text::from_section(
"",
text_style.clone(),
),
style: Style {
align_self: AlignSelf::FlexStart,
..Default::default()
},
..Default::default()
},
BackgroundColor(Color::BLACK.with_a(0.5)),
));

parent
.spawn((
ButtonBundle {
style: Style {
size: Size::all(Val::Px(200.)),
align_items: AlignItems::FlexStart,
justify_content:
JustifyContent::FlexStart,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(
palette[3],
),
..Default::default()
},
ButtonTarget {
id: target_ids.pop().unwrap(),
color: palette[3],
},
))
.with_children(|parent| {
parent.spawn((
TextBundle {
text: Text::from_section(
"",
text_style.clone(),
),
..Default::default()
},
BackgroundColor(Color::BLACK.with_a(0.5)),
));
});
});
});
});
});
});
}

fn update(
mouse: Res<Input<MouseButton>>,
keyboard: Res<Input<KeyCode>>,
mut left_query: Query<
(&mut BackgroundColor, &mut Style, &mut Visibility),
Without<Interaction>,
>,
mut right_query: Query<(&mut BackgroundColor, &ButtonTarget, &Interaction)>,
) {
right_query.for_each_mut(|(mut background_color, button_target, interaction)| {
ickshonpe marked this conversation as resolved.
Show resolved Hide resolved
match interaction {
Interaction::Hovered | Interaction::Clicked => {
let (mut left_background_color, mut style, mut visibility) =
left_query.get_mut(button_target.id).unwrap();

if mouse.just_pressed(MouseButton::Left) {
style.display = match style.display {
Display::Flex => Display::None,
Display::None => Display::Flex,
};
}

if mouse.just_pressed(MouseButton::Right) {
*visibility = match *visibility {
Visibility::Inherited => Visibility::Visible,
Visibility::Visible => Visibility::Hidden,
Visibility::Hidden => Visibility::Inherited,
};
}

background_color.0 = Color::hex("F4B942").unwrap();
left_background_color.0 = Color::hex("F4B942").unwrap();
}
Interaction::None => {
let (mut left_background_color, ..) = left_query.get_mut(button_target.id).unwrap();
background_color.0 = button_target.color;
left_background_color.0 = button_target.color;
}
}
});
}

fn update_text(
left_query: Query<(&Style, &Visibility), Or<(Changed<Style>, Changed<Visibility>)>>,
mut text_query: Query<(&mut Text, &Parent)>,
mut right_query: Query<&ButtonTarget>,
) {
text_query.for_each_mut(|(mut text, parent)| {
let target_id = right_query.get_mut(parent.get()).unwrap().id;
if let Ok((style, visibility)) = left_query.get(target_id) {
text.sections[0].value =
format!("Display::{:?}\nVisbility::{:?}", style.display, visibility);
}
});
}