UI Slider Widget #7116

Pietrek14 · 2023-01-07T02:41:45Z

Objective

Added a premade UI slider widget. Fixes #6196.

Solution

Added a RelativeCursorPosition component that updates alongside Interaction, which stores the cursor position relative to the node.
Added a Slider component that stores values specific to sliders
Added a SliderBundle and a SliderHandleBundle
Added update_slider_value and update_slider_handle systems
Made a slider example in the ui directory

Changelog

There is an easy way to create UI sliders now
Added:
- RelativeCursorPosition component
- Slider component
- SliderBundle
- SliderHandleBundle
- update_slider_value and update_slider_handle systems
- slider example
Edited:
- Reorganized systems related to widgets into seperate plugins

You might've seen the same pull request before. Unfortunately, I had been inactive for some time and when I returned, the original pull request (#6236) had merge conflicts. I've tried fixing them, but failed miserably, since I've never done it before and decided to just write the slider again and open another PR.

Co-authored-by: Mike <mike.hsu@gmail.com>

alice-i-cecile · 2023-01-08T05:33:06Z

This is only controversial because it's the first real widget, and will set the tone for others.

Weibye

After taking a closer look at Angular Material Slider Example I understand better your initial approach. Apologies for not seeing what you were seeing at the time.

This is the slider widget as you specified it earlier.

struct SliderWidget {
    value: f32
    min: f32
    max: f32
    step: f32
}

Let's consider an example of a slider of Unicorns:

In the Angular Material example, the contents of the slider widget is concrete. Meaning that min, max and step and value refers to unicorns.

What is the minimum and maximum amount of unicorns the user can specify?
step is how many unicorns should we increase or decrease with anytime we move the slider.
When "submitting the form" the contents of value is the final amount of unicorns you wanted.

This means that you encode "what the values of the slider-widget means" on a widget level (cars, unicorns, particles, ++) and in order to figure out where to position the slider-handle you calculate the abstract progress: value / max - min.

Over in the previous pr #6236 I gave the feedback that perhaps all this was unnecessary and in order to know the position of the slider-handle we kinda only need the value as long as value is kept in a range of 0.0..=1.0

struct SliderWidget {
    value: f32
}

And while that lets us know where to place the slider-handle it really does not address "where do we translate from the abstract progress value 0.0..=1.0 into Unicorns, which is what we really are interested in when "submitting the form" or otherwise polling the data.

And at this point I really don't have a good answer to that.

So I propose we go with your initial design as that is something I can see answering both these issues:

struct SliderWidget {
    value: f32
    min: f32
    max: f32
    step: f32
}

On a detail level, would it make sense to have the slider handle store its own progress value and split them up into multiple systems?

Idea:

struct SliderWidget {
    value: f32
    min: f32
    max: f32
    step: f32,
    slider_handle: Entity
}
struct SliderHandle(f32);

// One system that checks user input and updates the SliderWidget values
fn update_slider_widget( .. ) { .. }

// One system that updates the slider-handles based on the SliderWidgets
fn update_slider_handles(widgets: Query<&SliderWidget>, handles: Query<&mut SliderHandle>) {
   for widget in &mut widgets {
       if let Ok(mut handle) = handles.get(widget.slider_handle) {
            handle.0 = widget.value / widget.max - widget.min;
       }
   }
}

// One system that updates the styles based on the slider-handle values
fn update_slider_handle_positions(handles: Query<&SliderHandle, &Node, &mut Style>, ) {
    for (handle, node, mut style) in &handles {
        // do the style.position update here
    }
}

…ew-slider

Pietrek14 · 2023-01-09T15:36:57Z

I don't think we want to couple the Slider component together with the slider handle, as someone might want a slider without it. Besides, we wouldn't be able to give a sensible default to an Entity value. I'd rather keep the Slider component a more abstract representation to make it more universal.

crates/bevy_ui/src/lib.rs

crates/bevy_ui/src/focus.rs

Weibye

Overall I think this makes sense. Some nitpicks on code-style: If you run cargo fmt it will format the code for you in the format desired for the project.

Edit: I see you already have fixed it, so disregard my review

Weibye · 2023-01-13T21:18:24Z

crates/bevy_ui/src/widget/text.rs

+                    .ambiguous_with(bevy_text::update_text2d_layout),
+            );
+    }
+}


All files should have an empty new-line at the end of the file

Weibye · 2023-01-13T21:21:58Z

crates/bevy_ui/src/widget/mod.rs

+impl Plugin for WidgetPlugin {
+	fn build(&self, app: &mut App) {
+		app.add_plugin(ButtonPlugin)
+			.add_plugin(TextPlugin)


There seems to be a mix between tabs and spaces in your code. Make sure your indentation settings are correct, and I'm pretty sure the rest of Bevy is using 4 spaces for indentation.

I believe this should have been handled by rustfmt, I'm a bit surprised CI passed on this

crates/bevy_ui/src/focus.rs

IceSentry · 2023-01-13T21:39:25Z

This doesn't necessarily have to be fixed in this PR, but when sliding with the mouse, I would expect the handle to stay centered with the mouse, but moving the mouse changes the point where the handle was grabbed by the mouse. This seems a bit weird to me, but not a deal breaker for the initial PR

IceSentry · 2023-01-13T21:42:22Z

In general, I like where this is going, but I think this could be split in a couple of simpler PRs. For example, the RelativeCursorPosition could be it's own PR and I think introducing a WidgetPlugin + ImagePlugin could also be it's own PR. With this, this PR would be strictly limited to only adding support for a SliderWidget and nothing else.

Weibye

This is definitely on the right path!

The slider example should showcase a continuous slider as well as a stepped slider. Especially we need to showcase how min and max of the slider can be used to represent different things.

Weibye · 2023-01-13T21:36:29Z

crates/bevy_ui/src/node_bundles.rs

@@ -197,6 +198,43 @@ pub struct ButtonBundle {
    pub z_index: ZIndex,
 }

+/// A UI node that is a slider
+#[derive(Bundle, Clone, Debug, Default)]
+pub struct SliderBundle {


Could we move this over to the slider.rs and have everything be contained there?

Hmm. Honestly think we should do the same with ButtonBundle, TextBundle and ImageBundle and just keep the core building blocks for UI in node_bundles.rs

I kinda like having every bundles in a single file and not need to search around to find each bundle definition, but I understand that this won't scale super well.

I don't know if I want to do this in this PR. It was originally supposed to be a simple slider widget, but it's slowly turning into a widget rework.

Yeah, it's a case of it being the first "somewhat" advanced widget and will define the structure for all widgets. But I do agree with @IceSentry that we should split it apart into 3 PRs:

Widget restructuring with WidgetPlugin

RelativeCursorPosition functionality that will be useful for multiple systems

SliderWidget that depends on both of the previous PRs

Let's continue the WidgetPlugin discussion over here, if necessary #7190

Weibye · 2023-01-13T21:36:41Z

crates/bevy_ui/src/node_bundles.rs

+
+/// A UI node that is a slider
+#[derive(Bundle, Clone, Debug)]
+pub struct SliderHandleBundle {


Weibye

This is definitely on the right path!

The slider example should showcase a continuous slider as well as a stepped slider. Especially we need to showcase how min and max of the slider can be used to represent different things.

Co-authored-by: IceSentry <IceSentry@users.noreply.github.com>

Pietrek14 · 2023-01-14T23:03:42Z

Relevant PRs: #7197, #7199

…ider

…ew-slider

…ider

Alsctiho · 2023-03-22T13:00:27Z

I wonder whether the slider value will be updated if the UI is invisible.

Pietrek14 and others added 10 commits September 27, 2022 19:12

made resource_scope work for non-send resources

71056a3

Merge branch 'bevyengine:main' into main

d607e6b

fixed the non-send resource scope tests

83f2417

formatting

6da0e41

simplified panic in a non-send resource scope test

3500039

Co-authored-by: Mike <mike.hsu@gmail.com>

Merge branch 'bevyengine:main' into main

d823b1b

changed the name of non-send struct used for testing

f68eb33

Merge branch 'bevyengine:main' into main

6ed303e

Merge branch 'bevyengine:main' into main

23a22ae

made the slider again

ac8f4dc

Pietrek14 mentioned this pull request Jan 7, 2023

UI Slider Widget #6236

Closed

Pietrek14 added 6 commits January 7, 2023 03:43

formatting

c19e507

added slider example to readme

2c432bf

fixed slider system ordering

a038156

clarification for relativecursorposition component

13aff11

made slider range always be between 0. and 1.

52bfd93

updated comments

7b5c9be

Weibye self-requested a review January 7, 2023 15:06

alice-i-cecile added C-Enhancement A new feature A-UI Graphical user interfaces, styles, layouts, and widgets X-Controversial There is active debate or serious implications around merging this PR labels Jan 8, 2023

Weibye suggested changes Jan 8, 2023

View reviewed changes

Pietrek14 and others added 3 commits January 8, 2023 23:21

Merge branch 'bevyengine:main' into new-slider

ae51b05

brought back the old design

4616e76

Merge branch 'new-slider' of https://github.com/Pietrek14/bevy into n…

3957bff

…ew-slider

formatting

7394000

IceSentry reviewed Jan 11, 2023

View reviewed changes

crates/bevy_ui/src/lib.rs Outdated Show resolved Hide resolved

IceSentry reviewed Jan 11, 2023

View reviewed changes

crates/bevy_ui/src/focus.rs Outdated Show resolved Hide resolved

formatting

841350f

Weibye suggested changes Jan 13, 2023

View reviewed changes

IceSentry reviewed Jan 13, 2023

View reviewed changes

crates/bevy_ui/src/focus.rs Outdated Show resolved Hide resolved

Weibye suggested changes Jan 13, 2023

View reviewed changes

Pietrek14 and others added 3 commits January 13, 2023 23:11

centered the cursor on the slider handle

8837a50

added a stepped slider to the example

65bb68c

clarification of range checks

acb99e3

Co-authored-by: IceSentry <IceSentry@users.noreply.github.com>

Weibye mentioned this pull request Jan 14, 2023

Move ButtonBundle, ImageBundle, TextBundle and their behaviour into a WidgetPlugin #7190

Open

Pietrek14 added 2 commits January 14, 2023 15:08

Merge branch 'bevyengine:main' into new-slider

1d2bb26

Merge branch 'bevyengine:main' into new-slider

db1564b

Pietrek14 and others added 13 commits January 15, 2023 12:54

Merge branch 'bevyengine:main' into new-slider

95506a2

Merge branch 'main' of https://github.com/bevyengine/bevy into new-sl…

e98d5a7

…ider

Merge branch 'new-slider' of https://github.com/Pietrek14/bevy into n…

48986d1

…ew-slider

adjusted slider code to use the new RelativeCursorPosition

92ff4f2

made the slider handle change color when dragged in the example

8084661

formatting

5e51efa

example pages

3cc3743

replaced SliderDragged with simple Interaction

af5f7e7

formatting

f47bcfc

deleted unused imports

d35a9b5

Merge branch 'main' of https://github.com/bevyengine/bevy into new-sl…

5f6c73f

…ider

formatting

dd7371b

removed unnecessary intos

8d13a1a

Pietrek14 mentioned this pull request Jan 29, 2023

Interaction component refactor #7257

Closed

inodentry mentioned this pull request Jan 31, 2023

UI widget: slider IyesGames/iyes_ui#6

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Slider Widget #7116

UI Slider Widget #7116

Pietrek14 commented Jan 7, 2023 •

edited

Loading

alice-i-cecile commented Jan 8, 2023

Weibye left a comment

Pietrek14 commented Jan 9, 2023

Weibye left a comment •

edited

Loading

Weibye Jan 13, 2023

Weibye Jan 13, 2023

IceSentry Jan 13, 2023

IceSentry commented Jan 13, 2023

IceSentry commented Jan 13, 2023

Weibye left a comment

Weibye Jan 13, 2023

Weibye Jan 13, 2023

IceSentry Jan 13, 2023

Pietrek14 Jan 13, 2023

Weibye Jan 14, 2023

Weibye Jan 14, 2023

Weibye Jan 13, 2023

Weibye left a comment

Pietrek14 commented Jan 14, 2023

Alsctiho commented Mar 22, 2023

UI Slider Widget #7116

Are you sure you want to change the base?

UI Slider Widget #7116

Conversation

Pietrek14 commented Jan 7, 2023 • edited Loading

Objective

Solution

Changelog

alice-i-cecile commented Jan 8, 2023

Weibye left a comment

Choose a reason for hiding this comment

Pietrek14 commented Jan 9, 2023

Weibye left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

IceSentry commented Jan 13, 2023

IceSentry commented Jan 13, 2023

Weibye left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Weibye left a comment

Choose a reason for hiding this comment

Pietrek14 commented Jan 14, 2023

Alsctiho commented Mar 22, 2023

Pietrek14 commented Jan 7, 2023 •

edited

Loading

Weibye left a comment •

edited

Loading