updated example

feat: display tooltip showing current value

Cargo.lock

@@ -825,7 +825,7 @@ dependencies = [
 
 [[package]]
 name = "egui_knob"
-version = "0.3.1"
+version = "0.3.2"
 dependencies = [
  "eframe",
  "egui",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "egui_knob"
-version = "0.3.1"
+version = "0.3.2"
 edition = "2024"
 description = "A simple knob widget for egui"
 homepage = "https://github.com/obsqrbtz/egui_knob"

README.md

@@ -21,7 +21,7 @@ To use the Knob widget in your project, add the following to your `Cargo.toml`:
 ```toml
 [dependencies]
 egui = "0.32"
-egui_knob = "0.3.1"
+egui_knob = "0.4.1"
 ```
 
 ## Usage example

examples/example_knob.rs

@@ -1,138 +1,112 @@
 use eframe::egui;
-use egui_knob::Knob;
+use egui_knob::{Knob, KnobStyle, LabelPosition};
 
 fn main() -> eframe::Result<()> {
     eframe::run_native(
-        "Knob Example",
+        "egui_knob demo",
         eframe::NativeOptions::default(),
-        Box::new(|_cc| Ok(Box::new(KnobExample::default()))),
+        Box::new(|_cc| Ok(Box::new(KnobDemo::default()))),
     )
 }
 
-struct KnobExample {
-    basic_value: f32,
-    purple_value: f32,
-    large_value: f32,
-    thick_value: f32,
-    red_value: f32,
-    green_value: f32,
-    blue_value: f32,
+struct KnobDemo {
+    values: [f32; 6],
+    show_bg_arc: bool,
+    show_filled: bool,
+    use_step: bool,
+    knob_color: egui::Color32,
+    line_color: egui::Color32,
+    text_color: egui::Color32,
 }
 
-impl Default for KnobExample {
+impl Default for KnobDemo {
     fn default() -> Self {
         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,
+            values: [f32::NAN; 6],
+            show_bg_arc: true,
+            show_filled: true,
+            use_step: false,
+            knob_color: egui::Color32::DARK_GRAY,
+            line_color: egui::Color32::LIGHT_BLUE,
+            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) {
         egui::CentralPanel::default().show(ctx, |ui| {
+            ui.heading("🎛 egui-knob example");
+            ui.separator();
+
             ui.horizontal(|ui| {
-                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()
+                ui.checkbox(&mut self.show_bg_arc, "Show background arc");
+                ui.checkbox(&mut self.show_filled, "Show filled segment");
+                ui.checkbox(&mut self.use_step, "Enable step (0.1)");
+            });
+
+            ui.horizontal(|ui| {
+                ui.label("Knob Colors:");
+                ui.color_edit_button_srgba(&mut self.knob_color);
+                ui.color_edit_button_srgba(&mut self.line_color);
+                ui.color_edit_button_srgba(&mut self.text_color);
+            });
+
+            ui.separator();
+            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(
-                    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),
-                );
-
-                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.),
-                );
+                            ui.add(knob);
                         });
+
+                        if (i + 1) % 3 == 0 {
+                            ui.end_row();
+                        }
+                    }
+                });
+
+            ui.add_space(10.0);
+            ui.separator();
         });
     }
 }

src/lib.rs

@@ -11,6 +11,7 @@ pub enum LabelPosition {
 }
 
 /// Visual style of the knob indicator
+#[derive(Clone, Copy)] // <--- add this!
 pub enum KnobStyle {
     /// A line extending from the center to the edge
     Wiper,
@@ -44,6 +45,9 @@ pub struct Knob<'a> {
     label_offset: f32,
     label_format: Box<dyn Fn(f32) -> String>,
     step: Option<f32>,
+    drag_sensitivity: f32,
+    show_background_arc: bool,
+    show_filled_segments: bool,
 
     /// Minimum angle in radians.  
     /// Specifies the lower bound of the knob's rotation.  
@@ -86,6 +90,9 @@ impl<'a> Knob<'a> {
             // Hardcode those two angles to ENSURE backward compatibility
             min_angle: -std::f32::consts::PI,
             max_angle: std::f32::consts::PI * 0.5,
+            drag_sensitivity: 0.005,
+            show_background_arc: true,
+            show_filled_segments: true,
         }
     }
 
@@ -111,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)
     pub fn with_sweep_range(mut self, start_angle_normalized: f32, range: f32) -> Self {
         if start_angle_normalized.is_nan() || range.is_nan() {
-            // Invalid input, return unchanged
             return self;
         }
 
@@ -192,14 +198,38 @@ impl<'a> Knob<'a> {
     /// Sets the step size for value changes
     ///
     /// When set, the value will snap to discrete steps as the knob is dragged.
-    pub fn with_step(mut self, step: f32) -> Self {
-        self.step = Some(step);
+    pub fn with_step(mut self, step: Option<f32>) -> Self {
+        self.step = step;
         self
     }
+    /// Shows the background arc showing full range
+    pub fn with_background_arc(mut self, enabled: bool) -> Self {
+        self.show_background_arc = enabled;
+        self
+    }
+    /// Shows filled range on the background arc
+    pub fn with_show_filled_segments(mut self, enabled: bool) -> Self {
+        self.show_filled_segments = enabled;
+        self
+    }
+    // Private
+    fn compute_angle(&self) -> f32 {
+        if self.min == self.max || self.value.is_nan() {
+            self.min_angle
+        } else {
+            self.min_angle
+                + (*self.value - self.min) / (self.max - self.min)
+                    * (self.max_angle - self.min_angle)
+        }
+    }
 }
 
 impl Widget for Knob<'_> {
     fn ui(self, ui: &mut Ui) -> Response {
+        if self.value.is_nan() {
+            *self.value = self.min;
+        }
+
         let knob_size = Vec2::splat(self.size);
 
         let label_size = if let Some(label) = &self.label {
@@ -230,7 +260,7 @@ impl Widget for Knob<'_> {
         if response.dragged() {
             let delta = response.drag_delta().y;
             let range = self.max - self.min;
-            let step = self.step.unwrap_or(range * 0.005);
+            let step = self.step.unwrap_or(range * self.drag_sensitivity);
             let new_value = (*self.value - delta * step).clamp(self.min, self.max);
 
             *self.value = if let Some(step) = self.step {
@@ -240,6 +270,10 @@ impl Widget for Knob<'_> {
                 new_value
             };
 
+            if self.value.is_nan() {
+                *self.value = self.min;
+            }
+
             response.mark_changed();
         }
 
@@ -261,21 +295,57 @@ impl Widget for Knob<'_> {
 
         let center = knob_rect.center();
         let radius = knob_size.x / 2.0;
-        let angle = if self.min == self.max {
-            // If min == max, just return min angle
-            // That's a edge case, using a 0 range knob is pretty useless
-            self.min_angle
+        let angle = self.compute_angle();
+        let knob_hovered = response.hovered();
+        let knob_color = if knob_hovered {
+            self.knob_color.linear_multiply(1.2)
         } else {
-            self.min_angle
-                + (*self.value - self.min) / (self.max - self.min)
-                    * (self.max_angle - self.min_angle)
+            self.knob_color
         };
 
-        painter.circle_stroke(
-            center,
-            radius,
-            Stroke::new(self.stroke_width, self.knob_color),
-        );
+        painter.circle_stroke(center, radius, Stroke::new(self.stroke_width, knob_color));
+
+        // Background arc (indicating full range)
+        if self.show_background_arc {
+            let arc_start = self.min_angle;
+            let arc_end = self.max_angle;
+            let segments = 64;
+            let arc_color = self.knob_color.gamma_multiply(0.5); // dimmed background arc
+            let arc_radius = radius * 0.8;
+            let mut points = Vec::with_capacity(segments + 1);
+
+            for i in 0..=segments {
+                let t = i as f32 / segments as f32;
+                let angle = arc_start + (arc_end - arc_start) * t;
+                let pos = center + Vec2::angled(angle) * arc_radius;
+                points.push(pos);
+            }
+
+            painter.add(egui::Shape::line(
+                points,
+                Stroke::new(self.stroke_width, arc_color),
+            ));
+
+            // Filled part when background arc is enabled
+            if self.show_filled_segments {
+                let filled_segments = (segments as f32
+                    * ((*self.value - self.min) / (self.max - self.min)).clamp(0.0, 1.0))
+                    as usize;
+
+                let mut fill_points = Vec::with_capacity(filled_segments + 1);
+                for i in 0..=filled_segments {
+                    let t = i as f32 / segments as f32;
+                    let angle = arc_start + (arc_end - arc_start) * t;
+                    let pos = center + Vec2::angled(angle) * arc_radius;
+                    fill_points.push(pos);
+                }
+
+                painter.add(egui::Shape::line(
+                    fill_points,
+                    Stroke::new(self.stroke_width, self.line_color),
+                ));
+            }
+        }
 
         match self.style {
             KnobStyle::Wiper => {
@@ -295,6 +365,8 @@ impl Widget for Knob<'_> {
             let label_text = format!("{}: {}", label, (self.label_format)(*self.value));
             let font_id = egui::FontId::proportional(self.font_size);
 
+            let label_padding = 2.0;
+
             let (label_pos, alignment) = match self.label_position {
                 LabelPosition::Top => (
                     Vec2::new(
@@ -324,6 +396,12 @@ impl Widget for Knob<'_> {
                 font_id,
                 self.text_color,
             );
+
+            if response.hovered() {
+                response
+                    .clone()
+                    .on_hover_text((self.label_format)(*self.value));
+            }
         }
 
         // Draw the bounding rect