Knobs & Sliders

Vector Knob Control

IVKnobControl is a rotary knob drawn with vector graphics.

Constructor

IVKnobControl(
  const IRECT& bounds,
  int paramIdx,
  const char* label = "",
  const IVStyle& style = DEFAULT_STYLE,
  bool valueIsEditable = false,
  bool valueInWidget = false,
  float a1 = -135.f,
  float a2 = 135.f,
  float aAnchor = -135.f,
  EDirection direction = EDirection::Vertical,
  double gearing = DEFAULT_GEARING,
  float trackSize = 2.f
);

bounds

IRECT

required

Position and size of the control

paramIdx

int

required

Parameter index to link to (or kNoParameter with action function variant)

label

const char*

default:"empty string"

Label text displayed near the control

style

IVStyle

default:"DEFAULT_STYLE"

Visual styling properties

valueIsEditable

bool

default:"false"

If true, double-click value to edit as text

If true, draw value inside the knob widget

float

default:"-135.f"

Start angle in degrees (0° = right, counter-clockwise)

float

default:"135.f"

End angle in degrees

aAnchor

float

default:"-135.f"

Anchor angle for bipolar parameters (center position)

direction

EDirection

default:"EDirection::Vertical"

Mouse drag direction: Vertical or Horizontal

gearing

double

default:"DEFAULT_GEARING"

Mouse sensitivity multiplier (higher = finer control, slower changes)

trackSize

float

default:"2.f"

Width of the arc track in pixels

Example

// Basic knob
pGraphics->AttachControl(
  new IVKnobControl(IRECT(10, 10, 110, 110), kGain, "Gain")
);

// Custom styled knob with editable value
IVStyle blueKnob = DEFAULT_STYLE
  .WithColor(kFG, COLOR_BLUE)
  .WithColor(kPR, COLOR_LIGHT_BLUE)
  .WithRoundness(1.f); // Circular

pGraphics->AttachControl(
  new IVKnobControl(
    IRECT(10, 10, 110, 110),
    kFreq,
    "Frequency",
    blueKnob,
    true,  // valueIsEditable
    false, // valueInWidget
    -135.f, 135.f, -135.f,
    EDirection::Vertical,
    2.0    // 2x slower/finer control
  )
);

// Bipolar knob (e.g., pan, centered at 50%)
pGraphics->AttachControl(
  new IVKnobControl(
    bounds, kPan, "Pan",
    DEFAULT_STYLE,
    false, false,
    -135.f, 135.f, 0.f  // Anchor at 0° (center)
  )
);

Methods

void SetInnerPointerFrac(float frac); // Set inner radius of pointer (0-1)
void SetOuterPointerFrac(float frac); // Set outer radius of pointer (0-1)
void SetPointerThickness(float thickness); // Set pointer line thickness
float GetRadius() const; // Get knob radius
IRECT GetTrackBounds() const; // Get track arc bounds

Appearance Customization

auto* knob = new IVKnobControl(bounds, kGain, "Gain");
knob->SetInnerPointerFrac(0.3f);  // Pointer starts at 30% of radius
knob->SetOuterPointerFrac(0.9f);  // Pointer ends at 90% of radius
knob->SetPointerThickness(3.f);   // 3px wide pointer
pGraphics->AttachControl(knob);

Vector Slider Control

IVSliderControl is a linear slider (vertical or horizontal).

Constructor

IVSliderControl(
  const IRECT& bounds,
  int paramIdx = kNoParameter,
  const char* label = "",
  const IVStyle& style = DEFAULT_STYLE,
  bool valueIsEditable = false,
  EDirection dir = EDirection::Vertical,
  double gearing = DEFAULT_GEARING,
  float handleSize = 8.f,
  float trackSize = 2.f,
  bool handleInsideTrack = false,
  float handleXOffset = 0.f,
  float handleYOffset = 0.f
);

bounds

IRECT

required

Position and size of the control

paramIdx

int

default:"kNoParameter"

Parameter index to link to

label

const char*

default:"empty string"

Label text

style

IVStyle

default:"DEFAULT_STYLE"

Visual styling

valueIsEditable

bool

default:"false"

Enable double-click text editing

dir

EDirection

default:"EDirection::Vertical"

Slider orientation: Vertical or Horizontal

gearing

double

default:"DEFAULT_GEARING"

Mouse sensitivity

handleSize

float

default:"8.f"

Size of the draggable handle in pixels

trackSize

float

default:"2.f"

Width/height of the track line

handleInsideTrack

bool

default:"false"

If true, handle stays within track bounds

handleXOffset

float

default:"0.f"

Horizontal offset for handle positioning

handleYOffset

float

default:"0.f"

Vertical offset for handle positioning

Example

// Vertical slider
pGraphics->AttachControl(
  new IVSliderControl(
    IRECT(10, 10, 40, 200),
    kVolume,
    "Volume",
    DEFAULT_STYLE,
    true, // editable
    EDirection::Vertical
  )
);

// Horizontal slider
pGraphics->AttachControl(
  new IVSliderControl(
    IRECT(10, 10, 200, 40),
    kPan,
    "Pan",
    DEFAULT_STYLE,
    false,
    EDirection::Horizontal
  )
);

// Custom handle size
pGraphics->AttachControl(
  new IVSliderControl(
    bounds, kParam, "Label", DEFAULT_STYLE,
    false, EDirection::Vertical, DEFAULT_GEARING,
    12.f, // Larger 12px handle
    3.f   // Thicker 3px track
  )
);

Methods

IRECT GetTrackBounds() const; // Get the track area bounds

Range Slider Control

IVRangeSliderControl has two handles for selecting a range.

Constructor

IVRangeSliderControl(
  const IRECT& bounds,
  const std::initializer_list<int>& params,
  const char* label = "",
  const IVStyle& style = DEFAULT_STYLE,
  EDirection dir = EDirection::Vertical,
  bool onlyHandle = false,
  float handleSize = 8.f,
  float trackSize = 2.f
);

bounds

IRECT

required

Position and size

params

std::initializer_list<int>

required

Two parameter indices for min/max handles: {kParamMin, kParamMax}

label

const char*

default:"empty string"

Label text

style

IVStyle

default:"DEFAULT_STYLE"

Visual styling

dir

EDirection

default:"EDirection::Vertical"

Slider orientation

onlyHandle

bool

default:"false"

If true, only handles respond to mouse (not track)

handleSize

float

default:"8.f"

Handle size in pixels

trackSize

float

default:"2.f"

Track line thickness

Example

enum { kFilterLowFreq, kFilterHighFreq, kNumParams };

// Range slider for band-pass filter
pGraphics->AttachControl(
  new IVRangeSliderControl(
    IRECT(10, 10, 40, 200),
    {kFilterLowFreq, kFilterHighFreq},
    "Filter Range",
    DEFAULT_STYLE,
    EDirection::Vertical
  )
);

XY Pad Control

IVXYPadControl is a 2D pad for controlling two parameters simultaneously.

Constructor

IVXYPadControl(
  const IRECT& bounds,
  const std::initializer_list<int>& params,
  const char* label = "",
  const IVStyle& style = DEFAULT_STYLE,
  float handleRadius = 10.f,
  bool trackClipsHandle = true,
  bool drawCross = true
);

bounds

IRECT

required

Position and size

params

std::initializer_list<int>

required

Two parameter indices: {kParamX, kParamY}

label

const char*

default:"empty string"

Label text

style

IVStyle

default:"DEFAULT_STYLE"

Visual styling

handleRadius

float

default:"10.f"

Radius of the circular handle

trackClipsHandle

bool

default:"true"

If true, handle cannot exceed track bounds

drawCross

bool

default:"true"

If true, draw crosshair lines through handle

Example

enum { kDelayTime, kDelayFeedback, kNumParams };

// XY pad for delay controls
pGraphics->AttachControl(
  new IVXYPadControl(
    IRECT(10, 10, 210, 210),
    {kDelayTime, kDelayFeedback},
    "Delay",
    DEFAULT_STYLE,
    15.f  // 15px handle radius
  )
);

Bitmap Knob

IBKnobControl uses a filmstrip bitmap with multiple frames.

Constructor

IBKnobControl(
  const IRECT& bounds,
  const IBitmap& bitmap,
  int paramIdx,
  EDirection direction = EDirection::Vertical,
  double gearing = DEFAULT_GEARING
);

Example

// Load filmstrip: 60 frames stacked vertically
const IBitmap knobBitmap = pGraphics->LoadBitmap("knob.png", 60);

pGraphics->AttachControl(
  new IBKnobControl(
    IRECT(10, 10, 110, 110),
    knobBitmap,
    kGain,
    EDirection::Vertical
  )
);

Bitmap Requirements:

Filmstrip: all frames stacked vertically or horizontally
All frames must be same size
Frame count specified in LoadBitmap second parameter

Bitmap Knob Rotater

IBKnobRotaterControl rotates a single bitmap image.

Constructor

IBKnobRotaterControl(
  const IRECT& bounds,
  const IBitmap& bitmap,
  int paramIdx
);

Example

// Single image that gets rotated
const IBitmap knobImg = pGraphics->LoadBitmap("knob-single.png");

pGraphics->AttachControl(
  new IBKnobRotaterControl(
    IRECT(10, 10, 110, 110),
    knobImg,
    kGain
  )
);

Bitmap Slider

IBSliderControl uses bitmap images for handle and track.

Constructor

IBSliderControl(
  const IRECT& bounds,
  const IBitmap& handleBitmap,
  const IBitmap& trackBitmap = IBitmap(),
  int paramIdx = kNoParameter,
  EDirection dir = EDirection::Vertical,
  double gearing = DEFAULT_GEARING
);

Example

const IBitmap handle = pGraphics->LoadBitmap("slider-handle.png");
const IBitmap track = pGraphics->LoadBitmap("slider-track.png");

pGraphics->AttachControl(
  new IBSliderControl(
    IRECT(10, 10, 40, 200),
    handle,
    track,
    kVolume,
    EDirection::Vertical
  )
);

SVG Knob

ISVGKnobControl rotates an SVG image.

Constructor

ISVGKnobControl(
  const IRECT& bounds,
  const ISVG& svg,
  int paramIdx = kNoParameter
);

Example

ISVG knobSVG = pGraphics->LoadSVG("knob.svg");

pGraphics->AttachControl(
  new ISVGKnobControl(
    IRECT(10, 10, 110, 110),
    knobSVG,
    kGain
  )
);

SVG Slider

ISVGSliderControl uses SVG graphics for handle and track.

Constructor

ISVGSliderControl(
  const IRECT& bounds,
  const ISVG& handleSvg,
  const ISVG& trackSVG,
  int paramIdx = kNoParameter,
  EDirection dir = EDirection::Vertical,
  double gearing = DEFAULT_GEARING
);

Example

ISVG handleSVG = pGraphics->LoadSVG("slider-handle.svg");
ISVG trackSVG = pGraphics->LoadSVG("slider-track.svg");

pGraphics->AttachControl(
  new ISVGSliderControl(
    IRECT(10, 10, 40, 200),
    handleSVG,
    trackSVG,
    kVolume,
    EDirection::Vertical
  )
);

Source Reference

File: IGraphics/Controls/IControls.h Vector controls: Lines 257-377
Bitmap controls: Lines 738-789
SVG controls: Lines 570-696

​Vector Knob Control

​Constructor

​Example

​Methods

​Appearance Customization

​Vector Slider Control

​Constructor

​Example

​Methods

​Range Slider Control

​Constructor

​Example

​XY Pad Control

​Constructor

​Example

​Bitmap Knob

​Constructor

​Example

​Bitmap Knob Rotater

​Constructor

​Example

​Bitmap Slider

​Constructor

​Example

​SVG Knob

​Constructor

​Example

​SVG Slider

​Constructor

​Example

​Source Reference

Vector Knob Control

Constructor

Example

Methods

Appearance Customization

Vector Slider Control

Constructor

Example

Methods

Range Slider Control

Constructor

Example

XY Pad Control

Constructor

Example

Bitmap Knob

Constructor

Example

Bitmap Knob Rotater

Constructor

Example

Bitmap Slider

Constructor

Example

SVG Knob

Constructor

Example

SVG Slider

Constructor

Example

Source Reference