[slider] automatic slider precision display

This commit is contained in:
Emil Ernerfeldt 2020-08-27 22:06:28 +02:00
parent f0287fb86d
commit fd95f8a146
3 changed files with 63 additions and 46 deletions

View File

@ -403,11 +403,7 @@ impl Widgets {
ui.add(label!("The button has been clicked {} times", self.count)); ui.add(label!("The button has been clicked {} times", self.count));
}); });
ui.add( ui.add(Slider::f32(&mut self.slider_value, -10.0..=10.0).text("value"));
Slider::f32(&mut self.slider_value, -10.0..=10.0)
.text("value")
.precision(2),
);
if ui.add(Button::new("Double it")).clicked { if ui.add(Button::new("Double it")).clicked {
self.slider_value *= 2.0; self.slider_value *= 2.0;
} }

View File

@ -248,16 +248,16 @@ impl Style {
ui.add(Checkbox::new(&mut self.debug_widget_rects, "Paint debug rectangles around widgets")); ui.add(Checkbox::new(&mut self.debug_widget_rects, "Paint debug rectangles around widgets"));
ui.add(Checkbox::new(&mut self.debug_resize, "Debug Resize")); ui.add(Checkbox::new(&mut self.debug_resize, "Debug Resize"));
ui.add(Slider::f32(&mut self.item_spacing.x, 0.0..=10.0).text("item_spacing.x").precision(0)); ui.add(Slider::f32(&mut self.item_spacing.x, 0.0..=10.0).text("item_spacing.x"));
ui.add(Slider::f32(&mut self.item_spacing.y, 0.0..=10.0).text("item_spacing.y").precision(0)); ui.add(Slider::f32(&mut self.item_spacing.y, 0.0..=10.0).text("item_spacing.y"));
ui.add(Slider::f32(&mut self.window_padding.x, 0.0..=10.0).text("window_padding.x").precision(0)); ui.add(Slider::f32(&mut self.window_padding.x, 0.0..=10.0).text("window_padding.x"));
ui.add(Slider::f32(&mut self.window_padding.y, 0.0..=10.0).text("window_padding.y").precision(0)); ui.add(Slider::f32(&mut self.window_padding.y, 0.0..=10.0).text("window_padding.y"));
ui.add(Slider::f32(&mut self.indent, 0.0..=100.0).text("indent").precision(0)); ui.add(Slider::f32(&mut self.indent, 0.0..=100.0).text("indent"));
ui.add(Slider::f32(&mut self.button_padding.x, 0.0..=20.0).text("button_padding.x").precision(0)); ui.add(Slider::f32(&mut self.button_padding.x, 0.0..=20.0).text("button_padding.x"));
ui.add(Slider::f32(&mut self.button_padding.y, 0.0..=20.0).text("button_padding.y").precision(0)); ui.add(Slider::f32(&mut self.button_padding.y, 0.0..=20.0).text("button_padding.y"));
ui.add(Slider::f32(&mut self.clickable_diameter, 0.0..=60.0).text("clickable_diameter").precision(0)); ui.add(Slider::f32(&mut self.clickable_diameter, 0.0..=60.0).text("clickable_diameter"));
ui.add(Slider::f32(&mut self.start_icon_width, 0.0..=60.0).text("start_icon_width").precision(0)); ui.add(Slider::f32(&mut self.start_icon_width, 0.0..=60.0).text("start_icon_width"));
ui.add(Slider::f32(&mut self.line_width, 0.0..=10.0).text("line_width").precision(1)); ui.add(Slider::f32(&mut self.line_width, 0.0..=10.0).text("line_width"));
ui.add(Slider::f32(&mut self.animation_time, 0.0..=1.0).text("animation_time").precision(2)); ui.add(Slider::f32(&mut self.animation_time, 0.0..=1.0).text("animation_time"));
} }
} }

View File

@ -12,7 +12,7 @@ pub struct Slider<'a> {
range: RangeInclusive<f32>, range: RangeInclusive<f32>,
// TODO: label: Option<Label> // TODO: label: Option<Label>
text: Option<String>, text: Option<String>,
precision: usize, precision: Option<usize>,
text_color: Option<Color>, text_color: Option<Color>,
id: Option<Id>, id: Option<Id>,
} }
@ -26,7 +26,7 @@ impl<'a> Slider<'a> {
get_set_value: Box::new(get_set_value), get_set_value: Box::new(get_set_value),
range, range,
text: None, text: None,
precision: 3, precision: None,
text_color: None, text_color: None,
id: None, id: None,
} }
@ -34,7 +34,6 @@ impl<'a> Slider<'a> {
pub fn f32(value: &'a mut f32, range: RangeInclusive<f32>) -> Self { pub fn f32(value: &'a mut f32, range: RangeInclusive<f32>) -> Self {
Slider { Slider {
precision: 3,
..Self::from_get_set(range, move |v: Option<f32>| { ..Self::from_get_set(range, move |v: Option<f32>| {
if let Some(v) = v { if let Some(v) = v {
*value = v *value = v
@ -47,7 +46,7 @@ impl<'a> Slider<'a> {
pub fn i32(value: &'a mut i32, range: RangeInclusive<i32>) -> Self { pub fn i32(value: &'a mut i32, range: RangeInclusive<i32>) -> Self {
let range = (*range.start() as f32)..=(*range.end() as f32); let range = (*range.start() as f32)..=(*range.end() as f32);
Slider { Slider {
precision: 0, precision: Some(0),
..Self::from_get_set(range, move |v: Option<f32>| { ..Self::from_get_set(range, move |v: Option<f32>| {
if let Some(v) = v { if let Some(v) = v {
*value = v.round() as i32 *value = v.round() as i32
@ -60,7 +59,7 @@ impl<'a> Slider<'a> {
pub fn usize(value: &'a mut usize, range: RangeInclusive<usize>) -> Self { pub fn usize(value: &'a mut usize, range: RangeInclusive<usize>) -> Self {
let range = (*range.start() as f32)..=(*range.end() as f32); let range = (*range.start() as f32)..=(*range.end() as f32);
Slider { Slider {
precision: 0, precision: Some(0),
..Self::from_get_set(range, move |v: Option<f32>| { ..Self::from_get_set(range, move |v: Option<f32>| {
if let Some(v) = v { if let Some(v) = v {
*value = v.round() as usize *value = v.round() as usize
@ -82,9 +81,10 @@ impl<'a> Slider<'a> {
/// Precision (number of decimals) used when displaying the value. /// Precision (number of decimals) used when displaying the value.
/// Values will also be rounded to this precision. /// Values will also be rounded to this precision.
/// Normally you don't need to pick a precision, as the slider will intelligently pick a precision for you.
/// Regardless of precision the slider will use "smart aim" to help the user select nice, round values. /// Regardless of precision the slider will use "smart aim" to help the user select nice, round values.
pub fn precision(mut self, precision: usize) -> Self { pub fn precision(mut self, precision: usize) -> Self {
self.precision = precision; self.precision = Some(precision);
self self
} }
@ -93,13 +93,23 @@ impl<'a> Slider<'a> {
} }
fn set_value_f32(&mut self, mut value: f32) { fn set_value_f32(&mut self, mut value: f32) {
value = round_to_precision(value, self.precision); if let Some(precision) = self.precision {
value = round_to_precision(value, precision);
}
(self.get_set_value)(Some(value)); (self.get_set_value)(Some(value));
} }
/// For instance, `point` is the mouse position and `point_range` is the physical location of the slider on the screen. /// For instance, `x` is the mouse position and `x_range` is the physical location of the slider on the screen.
fn value_from_point(&self, point: f32, point_range: RangeInclusive<f32>) -> f32 { fn value_from_x_clamped(&self, x: f32, x_range: RangeInclusive<f32>) -> f32 {
remap_clamp(point, point_range, self.range.clone()) remap_clamp(x, x_range, self.range.clone())
}
fn value_from_x(&self, x: f32, x_range: RangeInclusive<f32>) -> f32 {
remap(x, x_range, self.range.clone())
}
fn x_from_value(&self, value: f32, x_range: RangeInclusive<f32>) -> f32 {
remap(value, self.range.clone(), x_range)
} }
} }
@ -122,7 +132,7 @@ impl<'a> Slider<'a> {
} }
/// Just the slider, no text /// Just the slider, no text
fn slider_ui(&mut self, ui: &mut Ui, interact: InteractInfo) -> InteractInfo { fn slider_ui(&mut self, ui: &mut Ui, interact: InteractInfo) {
let rect = &interact.rect; let rect = &interact.rect;
let x_range = x_range(rect); let x_range = x_range(rect);
@ -133,8 +143,8 @@ impl<'a> Slider<'a> {
if interact.active { if interact.active {
let aim_radius = ui.input().aim_radius(); let aim_radius = ui.input().aim_radius();
let new_value = crate::math::smart_aim::best_in_range_f32( let new_value = crate::math::smart_aim::best_in_range_f32(
self.value_from_point(mouse_pos.x - aim_radius, x_range.clone()), self.value_from_x_clamped(mouse_pos.x - aim_radius, x_range.clone()),
self.value_from_point(mouse_pos.x + aim_radius, x_range.clone()), self.value_from_x_clamped(mouse_pos.x + aim_radius, x_range.clone()),
); );
self.set_value_f32(new_value); self.set_value_f32(new_value);
} }
@ -168,22 +178,31 @@ impl<'a> Slider<'a> {
)), )),
}); });
} }
interact
} }
/// Just the text label /// Just the text label
fn text_ui(&mut self, ui: &mut Ui) { fn text_ui(&mut self, ui: &mut Ui, x_range: RangeInclusive<f32>) {
if let Some(text) = &self.text { let aim_radius = ui.input().aim_radius();
let text_color = self.text_color.unwrap_or_else(|| ui.style().text_color); let text = self.format_text(aim_radius, x_range);
let value = (self.get_set_value)(None); let text_color = self.text_color.unwrap_or_else(|| ui.style().text_color);
let full_text = format!("{}: {:.*}", text, self.precision, value); ui.add(Label::new(text).multiline(false).text_color(text_color));
ui.add( }
Label::new(full_text)
.multiline(false) fn format_text(&mut self, aim_radius: f32, x_range: RangeInclusive<f32>) -> String {
.text_color(text_color), let value = (self.get_set_value)(None);
);
} let precision = self.precision.unwrap_or_else(|| {
// pick precision based upon how much moving the slider would change the value:
let value_from_x = |x| self.value_from_x(x, x_range.clone());
let x_from_value = |value| self.x_from_value(value, x_range.clone());
let left_value = value_from_x(x_from_value(value) - aim_radius);
let right_value = value_from_x(x_from_value(value) + aim_radius);
let range = (left_value - right_value).abs();
(-range.log10()).ceil().max(0.0) as usize
});
let text = self.text.as_ref().map(String::as_str).unwrap_or_default();
format!("{}: {:.*}", text, precision, value)
} }
} }
@ -198,21 +217,23 @@ impl<'a> Widget for Slider<'a> {
ui.columns(2, |columns| { ui.columns(2, |columns| {
let slider_ui = &mut columns[0]; let slider_ui = &mut columns[0];
let interact = self.allocate_slide_space(slider_ui, height); let slider_interact = self.allocate_slide_space(slider_ui, height);
let slider_interact = self.slider_ui(slider_ui, interact); self.slider_ui(slider_ui, slider_interact);
let x_range = x_range(&slider_interact.rect);
// Place the text in line with the slider on the left: // Place the text in line with the slider on the left:
let text_ui = &mut columns[1]; let text_ui = &mut columns[1];
text_ui.set_desired_height(slider_interact.rect.height()); text_ui.set_desired_height(slider_interact.rect.height());
text_ui.inner_layout(Layout::horizontal(Align::Center), |ui| { text_ui.inner_layout(Layout::horizontal(Align::Center), |ui| {
self.text_ui(ui); self.text_ui(ui, x_range);
}); });
slider_interact slider_interact
}) })
} else { } else {
let interact = self.allocate_slide_space(ui, height); let interact = self.allocate_slide_space(ui, height);
self.slider_ui(ui, interact) self.slider_ui(ui, interact);
interact
} }
} }
} }