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: handle NaNs, update example

Browse Source
This commit is contained in:
Daniel Dada
2025-07-16 02:07:48 +03:00
parent c2a1d57a60
commit 23b2e3c792
2 changed files with 103 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
examples/example_knob.rs
View File

@@ -1,141 +1,112 @@
use eframe::egui; use eframe::egui;
use egui_knob::Knob; use egui_knob::{Knob, KnobStyle, LabelPosition};
fn main() -> eframe::Result<()> { fn main() -> eframe::Result<()> {
eframe::run_native( eframe::run_native(
"Knob Example", "egui_knob demo",
eframe::NativeOptions::default(), eframe::NativeOptions::default(),
Box::new(|_cc| Ok(Box::new(KnobExample::default()))), Box::new(|_cc| Ok(Box::new(KnobDemo::default()))),
) )
} }
struct KnobExample { struct KnobDemo {
basic_value: f32, values: [f32; 6],
purple_value: f32, show_bg_arc: bool,
large_value: f32, show_filled: bool,
thick_value: f32, use_step: bool,
red_value: f32, knob_color: egui::Color32,
green_value: f32, line_color: egui::Color32,
blue_value: f32, text_color: egui::Color32,
} }
impl Default for KnobExample { impl Default for KnobDemo {
fn default() -> Self { fn default() -> Self {
Self { Self {
basic_value: 0.0, values: [f32::NAN; 6], // Initialize with NaN to test NaN handling
purple_value: 0.0, show_bg_arc: true,
large_value: 0.0, show_filled: true,
thick_value: 0.0, use_step: false,
red_value: 0.0, knob_color: egui::Color32::DARK_GRAY,
green_value: 0.0, line_color: egui::Color32::LIGHT_BLUE,
blue_value: 0.0, text_color: egui::Color32::WHITE,
} }
} }
} }
impl eframe::App for KnobExample { impl eframe::App for KnobDemo {
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.heading("🎛 egui-knob Showcase");
ui.separator();
ui.horizontal(|ui| { ui.horizontal(|ui| {
if ui ui.checkbox(&mut self.show_bg_arc, "Show background arc");
.add( ui.checkbox(&mut self.show_filled, "Show filled segment");
Knob::new(&mut self.basic_value, 0.0, 100.0, egui_knob::KnobStyle::Dot) ui.checkbox(&mut self.use_step, "Enable step (0.1)");
.with_label("Basic", egui_knob::LabelPosition::Right) });
.with_size(40.0)
.with_font_size(10.0) ui.horizontal(|ui| {
.with_colors( ui.label("Knob Colors:");
egui::Color32::from_rgb(60, 60, 60), ui.color_edit_button_srgba(&mut self.knob_color);
egui::Color32::from_rgb(150, 150, 150), ui.color_edit_button_srgba(&mut self.line_color);
egui::Color32::from_rgb(200, 200, 200), ui.color_edit_button_srgba(&mut self.text_color);
) });
.with_background_arc(false),
) ui.separator();
.changed() ui.label("👇 Scroll or drag knobs to interact:");
ui.add_space(10.0);
egui::Grid::new("knob_grid")
.num_columns(3)
.spacing([30.0, 20.0])
.show(ui, |ui| {
for (i, (label, config)) in [
("Basic Dot", KnobStyle::Dot),
("Wiper, Sweep", KnobStyle::Wiper),
("Thick Stroke", KnobStyle::Wiper),
("360° Sweep", KnobStyle::Wiper),
("Multi-Turn", KnobStyle::Dot),
("Large Font", KnobStyle::Wiper),
]
.iter()
.enumerate()
{ {
println!("Basic value changed: {}", self.basic_value); ui.vertical(|ui| {
ui.label(*label);
let mut knob = Knob::new(&mut self.values[i], 0.0, 1.0, *config)
.with_label(*label, LabelPosition::Bottom)
.with_background_arc(self.show_bg_arc)
.with_show_filled_segments(self.show_filled)
.with_colors(self.knob_color, self.line_color, self.text_color)
.with_step(self.use_step.then_some(0.1));
if *label == "Wiper, Sweep" {
knob = knob.with_sweep_range(0.25, 0.75).with_size(50.0);
}
if *label == "Thick Stroke" {
knob = knob.with_stroke_width(4.0).with_size(60.0);
}
if *label == "360° Sweep" {
knob = knob.with_sweep_range(0.5, 1.0);
}
if *label == "Multi-Turn" {
knob = knob.with_sweep_range(0.0, 2.5);
}
if *label == "Large Font" {
knob = knob.with_size(70.0).with_font_size(18.0);
} }
ui.add( ui.add(knob);
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)
.with_step(0.1)
.with_background_arc(false)
.with_show_filled_segments(false)
);
ui.add(
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::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.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)
.with_label_format(|v| format!("{:.2}%", v))
.with_sweep_range(1. / 8., 0.75),
);
ui.add(
Knob::new(&mut self.blue_value, 0.0, 100., egui_knob::KnobStyle::Dot)
.with_label("Top", egui_knob::LabelPosition::Top)
.with_colors(
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)
.with_sweep_range(0., 2.),
);
}); });
if (i + 1) % 3 == 0 {
ui.end_row();
}
}
});
ui.add_space(10.0);
ui.separator();
}); });
} }
} }

18
src/lib.rs
View File

@@ -11,6 +11,7 @@ pub enum LabelPosition {
} }
/// Visual style of the knob indicator /// Visual style of the knob indicator
#[derive(Clone, Copy)] // <--- add this!
pub enum KnobStyle { pub enum KnobStyle {
/// A line extending from the center to the edge /// A line extending from the center to the edge
Wiper, Wiper,
@@ -117,7 +118,6 @@ impl<'a> Knob<'a> {
/// Note: the start angle is offset by PI/2 so that `0.0` is at the bottom (6 o'clock) /// Note: the start angle is offset by PI/2 so that `0.0` is at the bottom (6 o'clock)
pub fn with_sweep_range(mut self, start_angle_normalized: f32, range: f32) -> Self { pub fn with_sweep_range(mut self, start_angle_normalized: f32, range: f32) -> Self {
if start_angle_normalized.is_nan() || range.is_nan() { if start_angle_normalized.is_nan() || range.is_nan() {
// Invalid input, return unchanged
return self; return self;
} }
@@ -198,8 +198,8 @@ impl<'a> Knob<'a> {
/// Sets the step size for value changes /// Sets the step size for value changes
/// ///
/// When set, the value will snap to discrete steps as the knob is dragged. /// When set, the value will snap to discrete steps as the knob is dragged.
pub fn with_step(mut self, step: f32) -> Self { pub fn with_step(mut self, step: Option<f32>) -> Self {
self.step = Some(step); self.step = step;
self self
} }
/// Shows the background arc showing full range /// Shows the background arc showing full range
@@ -214,7 +214,7 @@ impl<'a> Knob<'a> {
} }
// Private // Private
fn compute_angle(&self) -> f32 { fn compute_angle(&self) -> f32 {
if self.min == self.max { if self.min == self.max || self.value.is_nan() {
self.min_angle self.min_angle
} else { } else {
self.min_angle self.min_angle
@@ -226,6 +226,10 @@ impl<'a> Knob<'a> {
impl Widget for Knob<'_> { impl Widget for Knob<'_> {
fn ui(self, ui: &mut Ui) -> Response { fn ui(self, ui: &mut Ui) -> Response {
if self.value.is_nan() {
*self.value = self.min;
}
let knob_size = Vec2::splat(self.size); let knob_size = Vec2::splat(self.size);
let label_size = if let Some(label) = &self.label { let label_size = if let Some(label) = &self.label {
@@ -266,6 +270,10 @@ impl Widget for Knob<'_> {
new_value new_value
}; };
if self.value.is_nan() {
*self.value = self.min;
}
response.mark_changed(); response.mark_changed();
} }
@@ -357,6 +365,8 @@ impl Widget for Knob<'_> {
let label_text = format!("{}: {}", label, (self.label_format)(*self.value)); let label_text = format!("{}: {}", label, (self.label_format)(*self.value));
let font_id = egui::FontId::proportional(self.font_size); let font_id = egui::FontId::proportional(self.font_size);
let label_padding = 2.0;
let (label_pos, alignment) = match self.label_position { let (label_pos, alignment) = match self.label_position {
LabelPosition::Top => ( LabelPosition::Top => (
Vec2::new( Vec2::new(