skills.rest
iPlug2
iPlug2OFFICIAL
Explore all skills by this author →
GitHub

igraphics-ui

Builds IGraphics-based user interfaces with controls, layouts, styling, and visualizers for iPlug2 audio plugins.

2.4k|364|Updated Apr 11, 2018
Search Tags:#C++#audio plugin#visualizer#iPlug2#UI layout#ivstyle#igraphics
One-click install
npx skills add https://github.com/iPlug2/iPlug2 --skill igraphics-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: igraphics-ui
Source: https://github.com/iPlug2/iPlug2/tree/main/.claude/skills/igraphics-ui
Command: npx skills add https://github.com/iPlug2/iPlug2 --skill igraphics-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing audio plugin UIs in iPlug2 requires choosing among dozens of controls, layout strategies, styling APIs, and audio-to-UI data pipelines. This Skill provides structured guidance so you can construct correct IGraphics editor code without digging through framework headers and examples.

Core Features & Use Cases

  • Layout Strategies: Choose between manual IRECT placement, grid cells, proportional panels, responsive resize handling, and Yoga flexbox, with copy-ready code patterns.
  • Control Selection & Styling: Catalog of IV (vector), IB (bitmap), and ISVG controls plus IVStyle theming with the 9-slot color palette, IText, and gradient patterns.
  • Audio Visualization: Complete ISender setup for peak meters, oscilloscopes, and FFT spectrum analyzers, including the ProcessBlock/OnIdle wiring and bidirectional spectrum messaging.
  • Use Case: You need a resizable plugin UI with four knobs, a gain slider, and a stereo spectrum analyzer. The Skill gives you the grid layout lambda, IVStyle definition, and ISpectrumSender wiring to implement it directly.

Quick Start

Ask the assistant to create an iPlug2 plugin UI with two IVKnobControls and an IVMeterControl using a dark IVStyle theme.

Frequently Asked Questions about igraphics-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add knobs and sliders to an iPlug2 plugin UI?▼

Attach IVKnobControl or IVSliderControl inside the mLayoutFunc lambda using pGraphics->AttachControl with an IRECT bounds, a parameter index, and an IVStyle. Position them with GetGridCell or GetCentredInside on the graphics bounds.

How do I make a resizable iPlug2 plugin UI?▼

Call pGraphics->SetLayoutOnResize(true) and use the NControls() early-return pattern in mLayoutFunc. On resize, reposition existing controls with SetTargetAndDrawRECTs instead of recreating them, as shown in the IPlugResponsiveUI example.

How do I add a spectrum analyzer or meter to an iPlug2 plugin?▼

Declare an ISpectrumSender or IPeakSender in the plugin header, attach the matching IVSpectrumAnalyzerControl or IVMeterControl with a control tag, feed audio in ProcessBlock, and call TransmitData in OnIdle. The sender moves audio-thread data to the UI thread via a lock-free queue.

Should I use IV, IB, or ISVG controls in IGraphics?▼

Prefer IV vector controls because they need no bitmap assets, scale to any resolution, and are styleable via IVStyle. Use IB bitmap controls only for artist-designed frame strips and ISVG controls when scalable artist-provided vector assets dictate the look.

What is the difference between Skia and NanoVG backends in IGraphics?▼

Both implement the same IGraphics interface so control code is backend-agnostic. NanoVG is smaller with no external dependencies, while Skia offers superior text rendering via SkParagraph and more drawing primitives at the cost of larger binary size.

When should I create a custom IControl instead of using built-in controls?▼

Use ILambdaControl for custom drawing without interaction, and subclass IControl only when you need custom mouse interaction. Mix in IVectorBase if the custom control should support IVStyle theming, or IContainerBase if it must hold child controls.

Related Skills

Explore More Software Engineering Skills→
iPlug2iPlug2
2.4k

build-cmake

Configure and build iPlug2 plugin projects with CMake generators.

Official
Advanced
yebotyebot
9

cross-platform-builds

Automate cross-platform JUCE plugin builds with CMake and CI/CD.

Community
Advanced
SpiralCloudOmegaSpiralCloudOmega
1

JUCE AudioProcessorValueTreeState (APVTS) Parameters

Configure JUCE APVTS parameters with layouts, listeners, and undo/redo.

Community
Advanced
AngKSAngKS

Apple Human Interface Guidelines

Enforce Apple's Human Interface Guidelines in HTML, CSS, and JavaScript code.

Community
Advanced