AUv3Controls -- SwiftUI knob and toggle for AUv3 audio components

Uses the excellent Composable Architecture for Swift by Point-Free to structure the controls into units or "features" that are composable and well-tested.

The controls can be attached to AUParameter entities, so changes in the control will affect their associated AUParameter value. This works the other way as well: external changes to the AUParameter value -- say from a MIDI controller or a preset load -- will be reflected in the control. Below is a demonstration on iOS in the "light" color scheme:

And below is a rendering of the same component on macOS using the "dark" color scheme:

Controls

There is a circular knob -- KnobFeature -- that acts like a vertical slider. It normally shows the setting's name, but when manipulated it shows the current value. Additionally, tapping/clicking on the name will bring up an editor to type in a new value.

The other control is a toggle -- ToggleFeature. It simply offers a boolean on/off setting.

• Vertical dragging changes the value of the knob
• Moving horizontally away from the center of the knob will increase resolution of vertical movements allowing for finer adjustments to the knob's value
• Touching the title will show an editor to allow typing a value

The toggle view just works on boolean values:

Here is a combination of several knobs into two distinct groups. The groups are embedded in a scroll view so as to operate under narrow device width constrains. This also illustrates the use of two different themes:

Theme Configuration

Both controls support a way to configure their display via a Theme definition. To use it, one provides it to the view using the .auv3ControlsTheme view modifier. The theme applies to all views in the view hierarchy starting at the one with the view modifier. This allows one to provide different themes to different collections of controls.

TabView {
  FirstView()
    .auv3ControlsTheme(theme1)
    .tabItem { Label("First", systemImage: "1.circle") }
    .tag(1)
  SecondView()
    .auv3ControlsTheme(theme2)
    .tabItem { Label("Second", systemImage: "2.circle") }
    .tag(2)
}

There are currently six (6) color settings that are configurable:

• controlBackgroundColor -- color of the knob control's track background
• controlForegroundColor -- color the knob control's track foreground and the toggle icon
• editorBackgroundColor -- color of the editor's background (not used)
• editorCancelButtonColor -- text color of the editor's cancel button
• editorOKButtonColor -- text color of the editor's OK button
• textColor -- text color for text labels not covered by the above color settings

Each color setting can provide a unique value for the current color scheme of the device (light or dark). For instance, the default theme defines the controlBackroundColor to be Color.gray.mix(with: Color.white, by: 0.5) when in light mode, but it is set to Color.black.mix(with: Color.white, by: 0.2) when in dark mode. The color settings can also provide the same value for both color schemes.

NOTE: for this to work properly, one must create a Theme in a SwiftUI view context, and provide the theme the value from @Environment(\.colorScheme). See the EnvelopeView demo code for an example of how this is done.

A Theme instance can look for color assets in a bundle if desired. When constructed, a theme takes two (optional) parameters -- a prefix String and a bundle pointer -- that indicate where the assets will be found and under what name. For instance, if prefix is "VFO" and bundle is Bundle.main then a theme will look for a color asset with the name "VFO_controlBackgroundColor" in the application's main bundle, and use it if it is found. Otherwise, it will fallback to the default values. The use of a non-empty prefix value allows for multiple instances of a controlBackgroundColor value in the same bundle.

.auv3ControlsTheme(.init(colorScheme: colorScheme, prefix: "VFO", bundle: Bundle.main))

Demo App

There is a simple demonstration application that runs on both macOS and iOS which shows the linkage via AUv3 parameters between AUv3 controls and AppKit/UIKit controls -- changes to one control cause a change in a specific AUParameter, which is then seen by the other control. To build and run, open the Xcode project file in the Demo folder.

NOTE : Make sure that the AUv3Controls package Package.swift file is not current open or else the demo will fail to build.