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 {
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),
);

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 {
Top,
@@ -25,6 +25,7 @@ pub struct Knob<'a> {
label: Option<String>,
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,