Widgets are the interactive controls and display elements on your plugin’s faceplate. BeatConnect offers 7 widget types with multiple styles each.
Interactive elements users manipulate:
| Widget | Purpose | Best For |
|---|
| Knob | Rotary control | Frequency, gain, time, mix |
| Slider | Linear fader | Volume, pan, faders |
| Toggle | On/off switch | Bypass, enable, mode |
Visual elements that show information:
| Widget | Purpose | Best For |
|---|
| Visualizer | Audio-reactive display | Meters, spectrum, waveform |
| Label | Text display | Plugin name, values, status |
Structural elements that organize your faceplate:
| Widget | Purpose | Best For |
|---|
| Panel | Background container | Grouping, depth, sections |
| Section | Labeled group frame | Named control groups |
All widgets use a grid system. Standard sizes:
Knobs
| Size | Grid Units | Use |
|---|
| Small | 2×2 | Secondary parameters |
| Medium | 3×3 | Most parameters |
| Large | 4×4 | Primary controls |
| XLarge | 5×5 | Hero/main control |
Sliders
| Orientation | Grid Units |
|---|
| Vertical | 1.5×6 |
| Horizontal | 6×1.5 |
Toggles
| Style | Grid Units |
|---|
| Switch | 2×1 |
| Button | 2×2 |
| LED | 1.5×1.5 |
Visual Hierarchy
Use size to show importance:
- Largest = Most important parameter (hero control)
- Medium = Standard parameters
- Smallest = Secondary/fine-tune parameters
Color Properties
All widgets support these color properties:
| Property | Purpose |
|---|
primaryColor | Main accent color |
secondaryColor | Secondary accent |
trackColor | Background/track |
activeColor | Active/on state |
bodyColor | Widget body |
pointerColor | Indicator/thumb |
handleColor | Drag handle |
textColor | Label text |
borderColor | Widget border |
Layout Tips
- Grid alignment - Always snap to grid for professional look
- Consistent spacing - Equal gaps between widgets
- Visual grouping - Related controls should be close together
- Breathing room - Don’t crowd widgets, leave margins
| Parameter Type | Recommended Widget |
|---|
| Continuous (frequency, gain) | Knob |
| Volume/level | Vertical slider |
| Pan/balance | Horizontal slider or bipolar knob |
| On/off | Toggle |
| Mode selection (2 options) | Toggle |
| Mode selection (3+ options) | Multiple toggles |
| Audio feedback | Visualizer |
| Value display | Label |
Style Consistency
Pick widget styles that match your plugin’s aesthetic:
| Aesthetic | Recommended Styles |
|---|
| Modern/Clean | minimal, flat, digital |
| Vintage/Retro | vintage, notched |
| Fun/Playful | arcade |
| Professional | standard, led_ring |
7 items under this folder.