obsqrbtz/egui_knob
1
0
Fork 0
mirror of https://github.com/obsqrbtz/egui_knob.git synced 2026-04-08 20:19:17 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: add label offsets and position in relative to the widget rect

Browse Source
This commit is contained in:
Daniel Dada
2025-02-04 09:09:20 +03:00
parent 8a97e1ecd1
commit b141db8cd4
2 changed files with 149 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
examples/example_knob.rs
View File

@@ -10,12 +10,26 @@ fn main() -> eframe::Result<()> {
} }
struct KnobExample { 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 { impl Default for KnobExample {
fn default() -> Self { 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) { fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
egui::CentralPanel::default().show(ctx, |ui| { egui::CentralPanel::default().show(ctx, |ui| {
ui.horizontal(|ui| { ui.horizontal(|ui| {
if ui.add( if ui
Knob::new(&mut self.value, 0.0, 100.0, egui_knob::KnobStyle::Dot) .add(
.with_label("Gain", egui_knob::LabelPosition::Bottom) Knob::new(&mut self.basic_value, 0.0, 100.0, egui_knob::KnobStyle::Dot)
.with_size(50.0), .with_label("Basic", egui_knob::LabelPosition::Right)
).changed(){ .with_size(40.0)
println!("Value changed"); .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( ui.add(
Knob::new(&mut self.value, 0.0, 100.0, egui_knob::KnobStyle::Wiper) Knob::new(
.with_label("Gain", egui_knob::LabelPosition::Bottom) &mut self.purple_value,
.with_size(50.0), 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( ui.add(
Knob::new(&mut self.value, 0.0, 100.0, egui_knob::KnobStyle::Dot) Knob::new(&mut self.large_value, 0.0, 100.0, egui_knob::KnobStyle::Dot)
.with_label("Gain", egui_knob::LabelPosition::Bottom) .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( .with_colors(
egui::Color32::DARK_GRAY, egui::Color32::from_rgb(80, 30, 30),
egui::Color32::WHITE, egui::Color32::from_rgb(220, 50, 50),
egui::Color32::WHITE, egui::Color32::from_rgb(255, 100, 100),
) )
.with_size(50.0), .with_size(50.0),
); );
ui.add( ui.add(
Knob::new(&mut self.value, 0.0, 100.0, egui_knob::KnobStyle::Wiper) Knob::new(
.with_label("Gain", egui_knob::LabelPosition::Bottom) &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( .with_colors(
egui::Color32::DARK_GRAY, egui::Color32::from_rgb(30, 30, 80),
egui::Color32::WHITE, egui::Color32::from_rgb(50, 50, 220),
egui::Color32::LIGHT_BLUE, egui::Color32::from_rgb(100, 100, 255),
) )
.with_size(50.0), .with_size(50.0),
); );

88
src/lib.rs
View File

@@ -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 { pub enum LabelPosition {
Top, Top,
@@ -25,6 +25,7 @@ pub struct Knob<'a> {
label: Option<String>, label: Option<String>,
label_position: LabelPosition, label_position: LabelPosition,
style: KnobStyle, style: KnobStyle,
label_offset: f32,
} }
impl<'a> Knob<'a> { impl<'a> Knob<'a> {
@@ -42,6 +43,7 @@ impl<'a> Knob<'a> {
label: None, label: None,
label_position: LabelPosition::Bottom, label_position: LabelPosition::Bottom,
style, style,
label_offset: 2.0,
} }
} }
@@ -77,6 +79,11 @@ impl<'a> Knob<'a> {
self.label_position = position; self.label_position = position;
self self
} }
pub fn with_label_offset(mut self, offset: f32) -> Self {
self.label_offset = offset;
self
}
} }
impl Widget for Knob<'_> { impl Widget for Knob<'_> {
@@ -99,10 +106,16 @@ impl Widget for Knob<'_> {
let label_padding = 2.0; let label_padding = 2.0;
let adjusted_size = Vec2::new( let adjusted_size = match self.label_position {
knob_size.x + label_size.y + label_padding * 6.0, LabelPosition::Top | LabelPosition::Bottom => Vec2::new(
knob_size.y + label_size.y + label_padding * 6.0, 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()); 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 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 radius = knob_size.x / 2.0;
let angle = (*self.value - self.min) / (self.max - self.min) * std::f32::consts::PI * 1.5 let angle = (*self.value - self.min) / (self.max - self.min) * std::f32::consts::PI * 1.5
- std::f32::consts::PI; - std::f32::consts::PI;
@@ -143,36 +171,32 @@ impl Widget for Knob<'_> {
if let Some(label) = self.label { if let Some(label) = self.label {
let label_text = format!("{label}: {:.2}", self.value); let label_text = format!("{label}: {:.2}", self.value);
let font_id = egui::FontId::proportional(self.font_size); 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 { let (label_pos, alignment) = match self.label_position {
LabelPosition::Top => { LabelPosition::Top => (
rect.center() Vec2::new(
+ Vec2::new(-text_size.x / 2.0, -radius - label_padding - text_size.y) rect.center().x,
} rect.min.y - self.label_offset + label_padding,
LabelPosition::Bottom => { ),
rect.center() + Vec2::new(-text_size.x / 2.0, radius + label_padding) Align2::CENTER_TOP,
} ),
LabelPosition::Left => { LabelPosition::Bottom => (
rect.center() Vec2::new(rect.center().x, rect.max.y + self.label_offset),
+ Vec2::new(-radius - label_padding - text_size.x, -text_size.y / 2.0) Align2::CENTER_BOTTOM,
} ),
LabelPosition::Right => { LabelPosition::Left => (
rect.center() + Vec2::new(radius + label_padding, -text_size.y / 2.0) 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( ui.painter().text(
label_pos, label_pos.to_pos2(),
Align2::LEFT_TOP, alignment,
label_text, label_text,
font_id, font_id,
self.text_color, self.text_color,