diff --git a/examples/example_knob.rs b/examples/example_knob.rs index 86536a0..dcf5c51 100644 --- a/examples/example_knob.rs +++ b/examples/example_knob.rs @@ -10,12 +10,26 @@ fn main() -> eframe::Result<()> { } struct KnobExample { - value: f32, + basic_value: f32, + purple_value: f32, + large_value: f32, + thick_value: f32, + red_value: f32, + green_value: f32, + blue_value: f32, } impl Default for KnobExample { fn default() -> Self { - Self { value: 0.0 } + Self { + basic_value: 0.0, + purple_value: 0.0, + large_value: 0.0, + thick_value: 0.0, + red_value: 0.0, + green_value: 0.0, + blue_value: 0.0, + } } } @@ -23,36 +37,94 @@ impl eframe::App for KnobExample { fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) { egui::CentralPanel::default().show(ctx, |ui| { ui.horizontal(|ui| { - if ui.add( - Knob::new(&mut self.value, 0.0, 100.0, egui_knob::KnobStyle::Dot) - .with_label("Gain", egui_knob::LabelPosition::Bottom) - .with_size(50.0), - ).changed(){ - println!("Value changed"); + if ui + .add( + Knob::new(&mut self.basic_value, 0.0, 100.0, egui_knob::KnobStyle::Dot) + .with_label("Basic", egui_knob::LabelPosition::Right) + .with_size(40.0) + .with_font_size(10.0) + .with_colors( + egui::Color32::from_rgb(60, 60, 60), + egui::Color32::from_rgb(150, 150, 150), + egui::Color32::from_rgb(200, 200, 200), + ), + ) + .changed() + { + println!("Basic value changed: {}", self.basic_value); } ui.add( - Knob::new(&mut self.value, 0.0, 100.0, egui_knob::KnobStyle::Wiper) - .with_label("Gain", egui_knob::LabelPosition::Bottom) - .with_size(50.0), + Knob::new( + &mut self.purple_value, + 0.0, + 100.0, + egui_knob::KnobStyle::Wiper, + ) + .with_label("Purple", egui_knob::LabelPosition::Bottom) + .with_colors( + egui::Color32::from_rgb(60, 30, 80), + egui::Color32::from_rgb(200, 100, 255), + egui::Color32::from_rgb(230, 150, 255), + ) + .with_size(50.0) + .with_font_size(14.0) + .with_stroke_width(3.0), ); + ui.add( - Knob::new(&mut self.value, 0.0, 100.0, egui_knob::KnobStyle::Dot) - .with_label("Gain", egui_knob::LabelPosition::Bottom) + Knob::new(&mut self.large_value, 0.0, 100.0, egui_knob::KnobStyle::Dot) + .with_label("Large", egui_knob::LabelPosition::Bottom) + .with_size(60.0) + .with_font_size(16.0), + ); + + ui.add( + Knob::new( + &mut self.thick_value, + 0.0, + 100.0, + egui_knob::KnobStyle::Wiper, + ) + .with_label("Thick", egui_knob::LabelPosition::Bottom) + .with_size(50.0) + .with_stroke_width(4.0), + ); + + ui.add( + Knob::new(&mut self.red_value, 0.0, 100.0, egui_knob::KnobStyle::Dot) + .with_label("Red", egui_knob::LabelPosition::Bottom) .with_colors( - egui::Color32::DARK_GRAY, - egui::Color32::WHITE, - egui::Color32::WHITE, + egui::Color32::from_rgb(80, 30, 30), + egui::Color32::from_rgb(220, 50, 50), + egui::Color32::from_rgb(255, 100, 100), ) .with_size(50.0), ); + ui.add( - Knob::new(&mut self.value, 0.0, 100.0, egui_knob::KnobStyle::Wiper) - .with_label("Gain", egui_knob::LabelPosition::Bottom) + Knob::new( + &mut self.green_value, + 0.0, + 100.0, + egui_knob::KnobStyle::Wiper, + ) + .with_label("Leftandlongtext", egui_knob::LabelPosition::Left) + .with_colors( + egui::Color32::from_rgb(30, 80, 30), + egui::Color32::from_rgb(50, 220, 50), + egui::Color32::from_rgb(100, 255, 100), + ) + .with_size(50.0), + ); + + ui.add( + Knob::new(&mut self.blue_value, 0.0, 100.0, egui_knob::KnobStyle::Dot) + .with_label("Top", egui_knob::LabelPosition::Top) .with_colors( - egui::Color32::DARK_GRAY, - egui::Color32::WHITE, - egui::Color32::LIGHT_BLUE, + egui::Color32::from_rgb(30, 30, 80), + egui::Color32::from_rgb(50, 50, 220), + egui::Color32::from_rgb(100, 100, 255), ) .with_size(50.0), ); diff --git a/src/lib.rs b/src/lib.rs index e285b45..d04abcf 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -1,4 +1,4 @@ -use egui::{Align2, Color32, Response, Sense, Stroke, Ui, Vec2, Widget}; +use egui::{Align2, Color32, Rect, Response, Sense, Stroke, Ui, Vec2, Widget}; pub enum LabelPosition { Top, @@ -25,6 +25,7 @@ pub struct Knob<'a> { label: Option, label_position: LabelPosition, style: KnobStyle, + label_offset: f32, } impl<'a> Knob<'a> { @@ -42,6 +43,7 @@ impl<'a> Knob<'a> { label: None, label_position: LabelPosition::Bottom, style, + label_offset: 2.0, } } @@ -77,6 +79,11 @@ impl<'a> Knob<'a> { self.label_position = position; self } + + pub fn with_label_offset(mut self, offset: f32) -> Self { + self.label_offset = offset; + self + } } impl Widget for Knob<'_> { @@ -99,10 +106,16 @@ impl Widget for Knob<'_> { let label_padding = 2.0; - let adjusted_size = Vec2::new( - knob_size.x + label_size.y + label_padding * 6.0, - knob_size.y + label_size.y + label_padding * 6.0, - ); + let adjusted_size = match self.label_position { + LabelPosition::Top | LabelPosition::Bottom => Vec2::new( + knob_size.x.max(label_size.x + label_padding * 2.0), + knob_size.y + label_size.y + label_padding * 2.0 + self.label_offset, + ), + LabelPosition::Left | LabelPosition::Right => Vec2::new( + knob_size.x + label_size.x + label_padding * 2.0 + self.label_offset, + knob_size.y.max(label_size.y + label_padding * 2.0), + ), + }; let (rect, mut response) = ui.allocate_exact_size(adjusted_size, Sense::drag()); @@ -115,7 +128,22 @@ impl Widget for Knob<'_> { } let painter = ui.painter(); - let center = rect.center(); + let knob_rect = match self.label_position { + LabelPosition::Left => { + Rect::from_min_size(rect.right_top() + Vec2::new(-knob_size.x, 0.0), knob_size) + } + LabelPosition::Right => Rect::from_min_size(rect.left_top(), knob_size), + LabelPosition::Top => Rect::from_min_size( + rect.left_bottom() + Vec2::new((rect.width() - knob_size.x) / 2.0, -knob_size.y), + knob_size, + ), + LabelPosition::Bottom => Rect::from_min_size( + rect.left_top() + Vec2::new((rect.width() - knob_size.x) / 2.0, 0.0), + knob_size, + ), + }; + + let center = knob_rect.center(); let radius = knob_size.x / 2.0; let angle = (*self.value - self.min) / (self.max - self.min) * std::f32::consts::PI * 1.5 - std::f32::consts::PI; @@ -143,36 +171,32 @@ impl Widget for Knob<'_> { if let Some(label) = self.label { let label_text = format!("{label}: {:.2}", self.value); let font_id = egui::FontId::proportional(self.font_size); - let text_size = ui - .painter() - .layout( - label_text.clone(), - font_id.clone(), - Color32::WHITE, - f32::INFINITY, - ) - .size(); - let label_pos = match self.label_position { - LabelPosition::Top => { - rect.center() - + Vec2::new(-text_size.x / 2.0, -radius - label_padding - text_size.y) - } - LabelPosition::Bottom => { - rect.center() + Vec2::new(-text_size.x / 2.0, radius + label_padding) - } - LabelPosition::Left => { - rect.center() - + Vec2::new(-radius - label_padding - text_size.x, -text_size.y / 2.0) - } - LabelPosition::Right => { - rect.center() + Vec2::new(radius + label_padding, -text_size.y / 2.0) - } + let (label_pos, alignment) = match self.label_position { + LabelPosition::Top => ( + Vec2::new( + rect.center().x, + rect.min.y - self.label_offset + label_padding, + ), + Align2::CENTER_TOP, + ), + LabelPosition::Bottom => ( + Vec2::new(rect.center().x, rect.max.y + self.label_offset), + Align2::CENTER_BOTTOM, + ), + LabelPosition::Left => ( + Vec2::new(rect.min.x - self.label_offset, rect.center().y), + Align2::LEFT_CENTER, + ), + LabelPosition::Right => ( + Vec2::new(rect.max.x + self.label_offset, rect.center().y), + Align2::RIGHT_CENTER, + ), }; ui.painter().text( - label_pos, - Align2::LEFT_TOP, + label_pos.to_pos2(), + alignment, label_text, font_id, self.text_color,