Iced Audio

repository·main·Indexed 42 days ago

https://github.com/iced-rs/iced_audio

An extension to the Iced GUI library version 0.17.0 providing specialized widgets for audio applications, such as VST3 and CLAP plugins. It includes controls like Knob, HSlider, VSlider, Ramp, and XYPad, along with mapping functions for linear, discrete, decibel (DBRange), and frequency (FreqRange) scaling.

Tokens
12.6K
Snippets
30
Records
43
Agent score
52%

What's inside Iced Audio

  1. Overview of Iced Audio widgets

    main

    Iced Audio provides specialized UI widgets designed for audio applications, such as VST3 or CLAP plugins. The library includes several widgets for parameter control:

    • HSlider: Horizontal Slider
    • VSlider: Vertical Slider
    • Knob: A classic knob widget
    • Ramp: Used to control easing between two points in time
    • XYPad: An XY Pad for controlling two parameters simultaneously
    • ModRangeInput: A dot used to control the range of modulation for a parameter. Some widgets (HSlider, VSlider, and Knob) support styles that provide visual feedback for the modulation range.
  2. How virtual sliders and parameter mapping work

    main

    Most widgets in iced_audio (except XYPad) use a shared "virtual slider" input logic. A virtual slider produces a normalized float value in the range [0.0..1.0].

    To convert this normalized value into meaningful audio parameters, you use mapping functions. The library provides four built-in mapping functions:

    • FloatRange: A linear range of f32 values.
    • IntRange: A discrete range of i32 values, causing the widget to "step" when moved.
    • LogDBRange: A logarithmic range of decibel values (values near 0 dB increment slower than those further away).
    • FreqRange: A logarithmic range of frequency values, where each octave in the 10-octave spectrum (20 Hz to 20480 Hz) is spaced evenly.

    You can also implement custom mapping functions to drive your own custom virtual slider widgets.

  3. Integrate iced_audio with audio plugin frameworks

    main

    If you are building audio plugins (VST3, CLAP, or standalone), iced_audio is designed to work with the following ecosystem:

    • nice-plug: A complete audio plugin development framework for VST3, CLAP, and standalone targets with native support for Iced.
    • clack-plugin: An easy way to create CLAP plugins in Rust.
    • iced_baseview: Used to run Iced on the baseview windowing backend (typically used in conjunction with clack-plugin).
  4. Configure the appearance of an HSlider

    main

    The HSlider widget's appearance is controlled via the Appearance enum. You can choose between four distinct visual styles:

    1. Texture: Uses an image texture for the handle. Requires a Handle (from iced_core) and defines the handle's width and image bounds.
    2. Classic: A hardware-inspired style consisting of a ClassicRail and a ClassicHandle (a rectangle with an optional middle notch).
    3. Rect: A modern style featuring a background rectangle and a rectangular handle, with a configurable 'filled' portion.
    4. RectBipolar: A modern style similar to Rect, but allows for different colors based on whether the handle is on the left, right, or center of the slider.

    To apply a custom style, implement the StyleSheet trait and wrap it in HSlider::Custom.

    use iced_audio::style::h_slider::{Appearance, RectAppearance};
    use iced_core::Color;
    
    // Example of creating a modern Rect appearance
    let appearance = Appearance::Rect(RectAppearance {
        back_color: Color::from_rgb(0.2, 0.2, 0.2),
        back_border_width: 1.0,
        back_border_radius: 4.0,
        back_border_color: Color::BLACK,
        filled_color: Color::from_rgb(0.0, 0.5, 1.0),
        handle_color: Color::WHITE,
        handle_width: 20,
        handle_filled_gap: 2.0,
    });
  5. Use StyleLength for relative or absolute sizing

    main

    When defining dimensions for notches, borders, or arcs in a Knob stylesheet, use StyleLength to control how sizes are calculated relative to the knob's diameter.

    • Scaled(f32): The length is a multiplier of the knob's diameter (e.g., 0.1 is 10% of the diameter).
    • Fixed(f32): The length is an absolute value in pixels.
    use iced_audio::style::knob::StyleLength;
    
    let diameter_relative = StyleLength::Scaled(0.2);
    let pixel_fixed = StyleLength::Fixed(10.0);
  6. Configure the appearance of a Knob

    main

    The Appearance enum defines the visual style of a Knob widget. You can choose from three primary visual modes:

    1. Circle: A classic circular style.
    2. Arc: A modern arc style with a single filled and empty color.
    3. ArcBipolar: A modern arc style that supports different colors for the left, right, and center positions.

    Each appearance can include a NotchShape (either None, Circle, or Line) to indicate the current value position.

    use iced_audio::style::knob::{Appearance, CircleAppearance, ArcAppearance};
    use iced_core::Color;
    
    // Example: Creating a Circle appearance
    let appearance = Appearance::Circle(CircleAppearance {
        color: Color::from_rgb(0.2, 0.2, 0.2),
        border_width: 2.0,
        border_color: Color::WHITE,
        notch: NotchShape::Line(LineNotch {
            color: Color::WHITE,
            width: StyleLength::Scaled(0.05),
            length: StyleLength::Scaled(0.1),
            cap: LineCap::Round,
            offset: StyleLength::Scaled(0.1),
        }),
    });
  7. Configure the appearance of a VSlider

    main

    The VSlider widget's appearance is controlled via the Appearance enum. You can choose from four distinct visual styles:

    1. Texture: Uses an image texture for the handle. Note: The image feature in iced must be enabled for this to work.
    2. Classic: A style modeled after hardware sliders, using a rail and a specific handle shape.
    3. Rect: A modern style consisting of a background rectangle and a rectangular handle.
    4. RectBipolar: A modern style similar to Rect, but allows for different colors depending on whether the handle is on the top, bottom, or center of the slider.

    To use a custom style, implement the StyleSheet trait and pass it to the VSlider::Custom variant.

    use iced_audio::style::Appearance;
    use iced_audio::style::RectAppearance;
    use iced_core::Color;
    
    let appearance = Appearance::Rect(RectAppearance {
        back_color: Color::WHITE,
        back_border_width: 1.0,
        back_border_radius: 4.0,
        back_border_color: Color::BLACK,
        filled_color: Color::from_rgb(0.0, 1.0, 0.0),
        handle_color: Color::BLACK,
        handle_height: 20,
        handle_filled_gap: 2.0,
    });
  8. Use custom styles with the XYPad widget

    main

    You can apply styles to an XYPad using the XYPad enum.

    1. Default Style: Use XYPad::Default for the standard look.
    2. Custom Style: Use XYPad::Custom(Box::new(your_style_sheet)) to apply a custom implementation of the StyleSheet trait.

    You can easily convert any type that implements StyleSheet<Style = iced_core::Theme> into an XYPad using .into().

    use iced_audio::style::xy_pad::{XYPad, StyleSheet, Appearance};
    use iced_core::Theme;
    
    struct MyStyle;
    
    impl StyleSheet for MyStyle {
        type Style = Theme;
    
        fn idle(&self, _style: &Self::Style) -> Appearance {
            Appearance::default()
        }
    }
    
    // Convert MyStyle into the XYPad style enum
    let my_xy_pad_style: XYPad = MyStyle.into();
  9. Configure iced_audio crate features

    main

    To use specific widgets or integrations, you must enable the corresponding features in your Cargo.toml.

    Important Requirements:

    • You must enable the canvas feature in the iced crate for widgets to render properly.
    • You must enable the image feature if you want to use texture styles.

    Available Features:

    • all (default): Enables all widgets.
    • knob (default): Enables the Knob widget.
    • h_slider (default): Enables the HSlider widget.
    • v_slider (default): Enables the VSlider widget.
    • ramp (default): Enables the Ramp widget.
    • xy_pad (default): Enables the XYPad widget.
    • nice-plug: Provides better integration with the nice-plug framework.
  10. Understand VirtualSlider State and UpdateStatus

    main

    State

    State tracks the internal lifecycle of a slider interaction. It manages:

    • is_dragging: Whether the user is currently holding the mouse/touch down.
    • is_gesturing(): A helper method to check if the widget is currently in a GestureStart, Gesturing, or GestureEnd state (returns true if not GestureEnd).

    UpdateStatus

    UpdateStatus is returned by the update method to signal what changed during the event processing:

    • param_changed: The underlying NormalParam value was modified.
    • hover_state_changed: The cursor entered or left the widget area.
    • gesturing_state_changed: The gesture lifecycle transitioned (e.g., Start -> Gesturing).

    Use UpdateStatus::should_redraw() to determine if the widget needs to be re-rendered based on these changes.

  11. Use audio widgets in iced_audio

    main

    The iced_audio crate provides several specialized widgets for audio control, which are available as optional features. Depending on the features enabled in your Cargo.toml, you can use the following widgets:

    • Knob: A rotary control widget.
    • HSlider: A horizontal slider widget.
    • VSlider: A vertical slider widget.
    • Ramp: A widget for controlling ramps or transitions.
    • XYPad: A two-dimensional control pad.
    • ModRangeInput: A specialized range input widget for modulation.

    To use these, ensure the corresponding feature is enabled in your dependency configuration.

    # Example Cargo.toml configuration
    [dependencies]
    iced_audio = {
        version = "0.5.0",
        features = ["knob", "h_slider", "v_slider", "ramp", "xy_pad", "mod_range_input"]
    }
  12. Configure a VirtualSlider

    main

    The Config struct allows you to customize the sensitivity and behavior of a VirtualSlider. You can adjust how much the value changes during dragging, scrolling, or fine-tuning with modifier keys.

    Key configuration options:

    • drag_scalar: Adjusts sensitivity per logical pixel moved during a drag. Default is 0.00385.
    • wheel_scalar: Adjusts sensitivity per mouse wheel line. Set to 0.0 to disable wheel interaction. Default is 0.01.
    • fine_tune_scalar: Multiplier applied to movement speed when the specified fine_tune_modifiers are held. Default is 0.02.
    • fine_tune_modifiers: The keyboard::Modifiers required to trigger fine-tuning (e.g., keyboard::Modifiers::CTRL). Default is CTRL.
    • scroll_wheel_timeout_seconds: Duration to wait after a scroll event before sending a Gesture::GestureEnd. Set to 0.0 to end the gesture immediately. Default is 0.25.
    let config = Config {
        drag_scalar: 0.005,
        wheel_scalar: 0.02,
        fine_tune_scalar: 0.01,
        fine_tune_modifiers: keyboard::Modifiers::SHIFT,
        scroll_wheel_timeout_seconds: 0.5,
    };