Link Search Menu Expand Document

UI Controls

Classes

Knob

A control that can appear as either a rotary knob or as a slider.

TextBox

Textbox to capture user input.

Toggle

Button representing two states. Typically on/off.

Trigger

Trigger that can be used to trigger actions

Pad

Can be used to send MIDI events to the instrument, e.g. in a drum machine.

Label

A label to display text.

DropZone

A region that accepts file drops.

DragTarget

Target region for drag and drop operations. Accepts drag containers.

DragContainer

Used to wrap data for drag and drop operations.

ComboBox

Contrary to the control name, this is merely a dropdown menu rather than a combo box.

ScrollView
ListBox
LevelMeter
Waveform
StepEditor
MidiKeyboard
BarStepEditor
SliceEditor
Window
Rubberband

Adds rubberbanding support to the set of children controls, that is starting a drag gesture and continue it across different controls (e.g. a set of sliders)

XYPad

A rectangular XY Pad to control two parameters, one per axis.

LottieAnimation

Displays a Lottie animation

Interfaces

Bounds
Background
Keyable
Clickable
MIDILearn
UI
Margin
Font
Highlight

This draws an automation highlight on knobs, Combobox, Toggle and listbox controls. Currently only works for AAX plugins. Note you will have to turn on this feature by setting AAXEnableParameterHighlighting in the .ugep file

JSTag
CanScrollAndZoom
Animation

Bounds

Kind: global interface
Properties

Name Type Description
x TYPE -
y TYPE -
width TYPE -
height TYPE -

Background

Kind: global interface
Properties

Name Type Description
backgroundImage TYPE -
backgroundColor TYPE -
cornerRadius TYPE -
border Object -
border.width TYPE -
border.color TYPE -
border.focusColor TYPE -

Keyable

Kind: global interface
Properties

Name Type Description
keyPressAction string -
consumeEvent string -

Clickable

Kind: global interface
Properties

Name Type Description
mouseDownAction string -
modifiedClickAction string -
doubleClickAction string -
mouseEnterAction string -
mouseExitAction string -
interceptsMouseClicks boolean -
allowClicksOnChildren boolean -

clickable.on(eventName, callback) ⇒ void

Kind: instance method of Clickable

Param Type Description
eventName TYPE -
callback TYPE -

MIDILearn

Kind: global interface
Properties

Name Type Description
margin string -
enabled boolean -

UI

Kind: global interface
Properties

Name Type Description
visible boolean -
enabled boolean -
alpha double -
wantsKeyboardFocus boolean -
clickGrabsKeyboardFocus boolean -
alwaysOnTop boolean If this control should be always on top of all other controls. Use sparingly.

Margin

Kind: global interface
Properties

Name Type Description
margin Object -
margin.other int -
margin.left int -
margin.top int -
margin.right int -
margin.bottom int -

Font

Kind: global interface
Properties

Name Type Description
font string -
fontSize double -
fontKerning double -
textColor string -
textAlign string -

Highlight

This draws an automation highlight on knobs, Combobox, Toggle and listbox controls. Currently only works for AAX plugins. Note you will have to turn on this feature by setting AAXEnableParameterHighlighting in the .ugep file

Kind: global interface
Properties

Name Type Description
highlight Object This is an object that describes how the highlight should be drawn
highlight.lineWidth int This determines the width of the line used to draw the highlight
highlight.drawFilledCircle boolean If this is set to true the highlight will be a filled circle else it will be a rectangle boundary
highlight.x int The x coordinate on where to draw the highlight within the control
highlight.y int The y coordinate on where to draw the highlight within the control
highlight.width int The highlight width. Note if this is zero or less the bounds used to draw the highlight will be the control bounds
highlight.height int The highlight height. Note if this is zero or less the bounds used to draw the highlight will be the control bounds

JSTag

Kind: global interface
Properties

Name Type Description
height int -
borderSize int -
cornerRadius int -
textColor Object -
textColor.normal string -
textColor.active string -
textColor.header string -
backgroundColor Object -
backgroundColor.normal string -
backgroundColor.active string -
backgroundColor.header string -
cancel Object -
cancel.x int -
cancel.width int -

CanScrollAndZoom

Kind: global interface

Animation

Kind: global interface
Properties

Name Type Description
animation object A reference to an animation object (that is, an instance of LottieAnimation control).

Knob

A control that can appear as either a rotary knob or as a slider.

Kind: global class
Implements: Bounds, Background, Clickable, MIDILearn, UI, Highlight, Animation
Properties

Name Type Description
inverted boolean If enabled, range is max to min value rather than min to max value.
scrollWheelEnabled boolean If true, knob can be twiddled using the mouse wheel.
value double The value of the knob. Bind to instrument parameter name with a preceding &.
min double Minimum value.
max double Maximum value.
stepSize double Size of one single value step. E.g.: When min is 0, max 100 and step size is 1, the control changes the parameter in 100 steps.
thumbImage string Path to the image used as the thumb of a slider.
image string Path to an image that is going to be rotated when the knob changes
minRotation double Angle when control is at minimum value.
maxRotation double Angle when control is at maximum value..
direction string Direction of the slider. Has to be either horizontal or vertical
snapsToMousePosition boolean If true, the slider handle jumps to the mouse position when clicked. Only applies to sliders.
filmstrip Object Hash containing information about a filmstrip file to be used to display the control.
filmstrip.path string Path to PNG or JPEG file.
filmstrip.direction string Defines whther the filmstrip is horizontal or vertical.
filmstrip.count int Number of sigle image frames the strip contains.
filmstrip.width int Width of a single image in pixels in the filmstrip.
filmstrip.height int Height of a single image in pixels in the filmstrip.
sliderBounds Object -
sliderBounds.x int -
sliderBounds.y int -
sliderBounds.width int -
sliderBounds.height int -

TextBox

Textbox to capture user input.

Kind: global class
Implements: Background, Margin, Font, Clickable, Bounds, UI
Properties

Name Type Description
text string Text to be displayed. Can be bound to instrument param using the param name with a preceeding &.
placeholder string Textthat is displayed when the box is empty.
unit string -
placeHolderColor string COlor of the placeholder text.
highlightTextColor string Text color when highlighted.
highlightColor string Color of the highlight.
caretColor string Color of the cursor.
maxLength int Maximum number of characters the box will accept.
passwordCharacter string Character used to obfuscate the user input.
multiLine boolean Defines whether or not the box can display multiple lines of text.
readOnly boolean Input blocked if true.
acceptedDataType string Can be used to make the box only accept integer, float or string values.
minValue double Minimum value of the allowed range. Does only work if acceptedDataType = integer.
maxValue double Minimum value of the allowed range. Does only work if acceptedDataType = integer.
grabKeyFocus boolean Defines whther or not the control grabs the keyboard focus on initialization.
focusLostUpdate boolean Can be bound to a function that is triggered when the box looses the focus.
highlightStart int Can be used to set or read the position of the first highlighted character in the text.
highlightEnd int Can be used to set or read the position of the last highlighted character in the text.
keyDownAction string Can be bound to a function. Triggered when a key is pressed on the keyboard.
textChangedAction string Can be bound to a function. Triggerd when the user changed the text.

Toggle

Button representing two states. Typically on/off.

Kind: global class
Implements: Background, Margin, Font, Clickable, Bounds, MIDILearn, UI, Highlight, Animation
Properties

Name Type Description
text string Text to be displayed.
onColor string Button color for on state.
offColor string Button color for off state.
onColorHover string Button color for on state when hovered over.
offColorHover string Button color for off state when hovered over.
textColorOn string Color of displayed text for on state.
textColorOff string Color of displayed text for off state.
textColorOnHover string Color of displayed text for on state when hovered over.
textColorOffHover string Color of displayed text for off state when hovered over.
onImage string Path to image for on state.
onImagePressed string Path to image for on state when pressed.
onImageHovered string Path to image for on state when hovered over.
offImage string Path to image for off state.
offImagePressed string Path to image for off state when pressed.
offImageHovered string Path to image for off state when hovered over.
disabledImage string Path to image for disabled state.
radioIndex int -
radioValue int -
drawTick boolean Defines whther of not a tick mark is drawn on the control.
fitToText boolean Resizes the control to match the displayed text length.
value boolean Value of the control. Can be bound to instrument param name with a preceding &.

Trigger

Trigger that can be used to trigger actions

Kind: global class
Implements: Background, Font, Clickable, Keyable, Bounds, UI, Animation
Properties

Name Type Description
action string Action to be triggered when the control is clicked, e.g. a function in a view model.
text string Text to be displayed on the control.
images Object Image node containing info about the images to be used for this control.
images.normal string Image to be used in normal mode.
images.hover string Image to be used when the control is hovered over.
images.down string Image to be used during the click event.
keyboardFocus Object Defines how a cotrol appears when it has the keyboard focus
keyboardFocus.color string Color of the border around the control.
keyboardFocus.lineWidth int Width of the border.

Pad

Can be used to send MIDI events to the instrument, e.g. in a drum machine.

Kind: global class
Properties

Name Type Description
midiNote int MIDI note index
velocity int Velocity to be used for the MIDI event.
padState boolean Can be used to get or set the state of the pad.

Label

A label to display text.

Kind: global class
Implements: Background, Margin, Font, Clickable, Bounds, UI
Properties

Name Type Description
text string Text to be displayed.
value string Can be bound to an instrument parameter to display step names of a param.
format string Format string used to format the .
stretchText boolean Defines whther or not the text is squeezed or stretched to match the size of the label.

DropZone

A region that accepts file drops.

Kind: global class
Implements: Clickable, Bounds, UI
Properties

Name Type Description
acceptedFileTypes string File extensions or patterns to be accepted.

DragTarget

Target region for drag and drop operations. Accepts drag containers.

Kind: global class
Implements: Clickable, Bounds, UI
Properties

Name Type Description
dragGroup string Group name to which the target belongs. Used to separate different drag and drop contexts.
onDrop string Action to be triggered once the files are dropped.

DragContainer

Used to wrap data for drag and drop operations.

Kind: global class
Implements: Clickable, Bounds, UI
Properties

Name Type Description
dragGroup string Group name to which the target belongs. Used to separate different drag and drop contexts.
dragContent string Content to be wrapped in this drag container to be passed over to the target.
externalDragStartAction string Action to be triggered when a drag operation starts outside of the plugin UI.
externalDragEndAction string Action to be triggered when a drag operation ends outside of the plugin UI.
destinationCanMoveDraggedFiles boolean Operating system flag that indicates whether a drag destination is allowed to move the dragged files.
externallyDraggedFiles TYPE File pathes that are dragged ouside of the plugin UI, e.g. to a DAW.

ComboBox

Contrary to the control name, this is merely a dropdown menu rather than a combo box.

Kind: global class
Implements: Background, Font, Bounds, MIDILearn, UI, Highlight
Properties

Name Type Description
value int Index of the selected item.
items TYPE -
levelSeperator TYPE -
stretchText boolean -
scrollWheelEnabled boolean -
backgroundColorClicked string -
backgroundColorHover string -
itemReselectedAction string -
padding int -
padding Object -
padding.other int -
padding.left int -
padding.top int -
padding.right int -
padding.bottom int -
images Object -
images.arrowIcon string -
images.arrowIconPressed string -
images.popupSubmenuSelectionImage string -
images.popupSubmenuSelectionHighlightedImage string -
images.popupCheckmarkImage string -
images.popupCheckmarkHighlightedImage string -
popup Object -
popup.itemTextColor string -
popup.backgroundColor string -
popup.itemSelectedTextColor string -
popup.itemSelectedBackgroundColor string -
popup.itemHighlightedTextColor string -
popup.itemHighlightedBackgroundColor string -
popup.separatorColor string -
popup.font string -
popup.fontSize double -
popup.fontKerning double -
popup.textAlign string -
popup.padding int -
popup.padding Object -
popup.padding.other int -
popup.padding.left int -
popup.padding.top int -
popup.padding.right int -
popup.padding.bottom int -
popup.checkmarkPadding int -
popup.checkmarkPadding Object -
popup.checkmarkPadding.other int -
popup.checkmarkPadding.left int -
popup.checkmarkPadding.top int -
popup.checkmarkPadding.right int -
popup.checkmarkPadding.bottom int -

ScrollView

Kind: global class
Implements: Bounds, UI
Properties

Name Type Description
scrollbarThickness int -
hideVerticalScrollbar boolean -
hideHorizontalScrollbar boolean -
ignoreKeypressEvent boolean -
scrollbar Object -
scrollbar.background string -
scrollbar.track string -
scrollbar.thumb string -

scrollView.scrollChildIntoView(childIndex) ⇒ void

Scroll the scroll view so the child is inside the current viewport.

Kind: instance method of ScrollView

Param Type Description
childIndex Integer the index of the child to scroll to.

scrollView.setScrollPositionProportionately(x, y) ⇒ void

Set the scroll view postion of horizontal and vertical scroll bars .

Kind: instance method of ScrollView

Param Type Description
x Integer The normalised x position to set the horizontal scroll bar
y Integer The normalised y position to set the vertical scroll bar

ListBox

Kind: global class
Implements: Background, Font, Clickable, Bounds, UI, MIDILearn, Highlight
Properties

Name Type Description
items TYPE -
horizontalMargin int -
cellColor string -
cellColorSelected string -
textColorSelected string -
rowDoubleClickedAction string -
returnKeyAction string -
rowClickedAction string -
scrollbar Object -
scrollbar.background string -
scrollbar.track string -
scrollbar.thumb string -

LevelMeter

Kind: global class
Implements: Bounds, Background, UI, Animation
Properties

Name Type Description
peakHold boolean -
logScale boolean -
fillArea boolean -
inverted boolean -
stereo boolean -
positionIndicator boolean -
rampUpFactor double -
rampDownFactor double -
maxRampDownSpeed double -
min double -
max double -
levelColor string -
peakColor string -
indicatorThickness int -
visibleSectionStart double -
visibleSectionEnd double -
direction string -

Waveform

Kind: global class
Implements: Background, Font, Margin, Clickable, Bounds, UI
Properties

Name Type Description
waveformColor string -
gradientCenterColor string -
gradientEndColor string -
horizontalAxisColor string -
waveformUnavailableText string -
waveWidth int -
waveHorizontalSpacing int -
verticalPadding int -
fitHeight boolean -
paintCenterLine boolean -
value TYPE -
dragzone Object -
dragzone.enabled boolean -
dragzone.x int -
dragzone.y int -
dragzone.x2 int -
dragzone.y2 int -
dragzone.leftHandleImage string -
dragzone.rightHandleImage string -
dragzone.backgroundColor string -
dragzone.overlayColor string -
dragzone.leftHandleWidth int -
dragzone.leftHandleHeight int -
dragzone.rightHandleWidth int -
dragzone.rightHandleHeight int -
dragzone.canResize boolean -
dragzone.canPan boolean -
markers Object -
markers.enabled boolean -
markers.x int -
markers.y int -
markers.x2 int -
markers.y2 int -
markers.leftHandleImage string -
markers.rightHandleImage string -
markers.backgroundColor string -
markers.leftHandleWidth int -
markers.leftHandleHeight int -
markers.rightHandleWidth int -
markers.rightHandleHeight int -
markers.canResize boolean -

StepEditor

Kind: global class
Implements: Background, Clickable, Bounds, UI
Properties

Name Type Description
value TYPE -
divSize int -
min int -
max int -
paramPath string -
startIndex int -
endIndex int -
step Object -
step.x int -
step.y int -
step.width int -
step.height int -
step.cornerRadius int -
step.incrementHeight int -
step.backgroundColor string -
step.onColor string -
step.offColor string -

MidiKeyboard

Kind: global class
Implements: Background, Bounds, UI
Properties

Name Type Description
lowKey int -
highKey int -
disableNKSColors boolean -
keys Object -
keys.blackColor string -
keys.blackHoverColor string -
keys.blackPressedColor string -
keys.blackOutlineColor string -
keys.blackOutlineHoverColor string -
keys.blackOutlinePressedColor string -
keys.whiteColor string -
keys.whiteHoverColor string -
keys.whitePressedColor string -
keys.whiteOutlineColor string -
keys.whiteOutlineHoverColor string -
keys.whiteOutlinePressedColor string -
keys.whiteHeight int -
keys.blackHeight int -
keys.width double -
keys.spacing int -
keys.outlineWidth int -
keys.cornerRadius int -

BarStepEditor

Kind: global class

SliceEditor

Kind: global class
Implements: Background, Clickable, Bounds, UI, CanScrollAndZoom
Properties

Name Type Description
slices TYPE -
audioLengthInSamples int -
audioLengthInBeats int -
canChangeSlices boolean -
canAddSlices boolean -
canRemoveSlices boolean -
snapSlicesToGrid boolean -
zoom Object -
zoom.start double -
zoom.end double -
grid Object -
grid.position string -
grid.height int -
grid.minTickSpacing int -
grid.enabled boolean -
grid.backgroundColor string -
grid.backgroundImage string -
sliceStyles Object -
sliceStyles.normal.y int -
sliceStyles.normal.width int -
sliceStyles.normal.height int -
sliceStyles.normal.color string -
sliceStyles.normal.image string -
sliceStyles.hover.y int -
sliceStyles.hover.width int -
sliceStyles.hover.height int -
sliceStyles.hover.color string -
sliceStyles.hover.image string -
sliceStyles.selected.y int -
sliceStyles.selected.width int -
sliceStyles.selected.height int -
sliceStyles.selected.color string -
sliceStyles.selected.image string -
selectionAreaStyle Object -
selectionAreaStyle.backgroundColor string -
selectionAreaStyle.border.width int -
selectionAreaStyle.border.radius int -
selectionAreaStyle.border.color string -

Window

Kind: global class
Implements: Background
Properties

Name Type Description
width TYPE -
height TYPE -
uiScale TYPE -
uiScaleMin TYPE -
uiScaleMax TYPE -

Rubberband

Adds rubberbanding support to the set of children controls, that is starting a drag gesture and continue it across different controls (e.g. a set of sliders)

Kind: global class
Implements: Bounds, UI

XYPad

A rectangular XY Pad to control two parameters, one per axis.

Kind: global class
Implements: Bounds, Background, Clickable, UI
Properties

Name Type Description
valueX double The value controlled by the X axis. Bind to instrument parameter name with a preceding &.
minX double Minimum value on X axis.
maxX double Maximum value on X axis.
stepSizeX double Size of one single value step on the X axis.
valueY double The value controlled by the Y axis. Bind to instrument parameter name with a preceding &.
minY double Minimum value on Y axis.
maxY double Maximum value on Y axis.
stepSizeY double Size of one single value step on the Y axis.
thumbImage string Path to the image used as the thumb on the pad.
snapsToMousePosition boolean If true, the handle jumps to the mouse position when clicked.

LottieAnimation

Displays a Lottie animation

Kind: global class
Implements: Bounds, Background, Clickable, Keyable, UI, Margin, Font
Properties

Name Type Description
filePath string Path to the Lottie animation file. Absolute or relative to the plugins assets directory.
autoplay boolean Whether playback starts automatically after creation.
loop boolean Whether playback loops or stops after playback.
autoConfigure boolean Whether the control should autoconfigure itself from the properties of the loaded animation.
playing boolean Whether the animation is actually playing.
totalFrames int Total number of frames in the animation.
duration double The duration of the animation.
currentFrame int Number of the frame that is currently displayed.
targetFrame int The index of the frame the animation should animate towards and stop at.

lottieAnimation.play() ⇒ void

Starts the playback of the animation.

Kind: instance method of LottieAnimation

lottieAnimation.pause() ⇒ void

Pauses the animation.

Kind: instance method of LottieAnimation

lottieAnimation.stop() ⇒ void

Stops the animation.

Kind: instance method of LottieAnimation

lottieAnimation.setFrame(index) ⇒ void

Sets the current frame of the animation to the provided index.

Kind: instance method of LottieAnimation

Param Type Description
index int -

lottieAnimation.setTargetFrame(index) ⇒ void

Sets the target frame of the animation. The animation will animate towards this frame and stop.

Kind: instance method of LottieAnimation

Param Type Description
index int -

lottieAnimation.setFrameFromLinearTransform(index) ⇒ void

Sets the current frame to the index computed by the linear interpolation of a value between the provided min and max values.

Kind: instance method of LottieAnimation

Param Type Description
index int -

lottieAnimation.setProperties(props) ⇒ void

Sets various properties on the animation object.

Kind: instance method of LottieAnimation

Param Type Description
props object -