Skip to content

04 UI Component plugins

Jump to bottom
Alexandre Piel edited this page Feb 10, 2024 · 76 revisions

ZicBox load UI plugin, called component, and organize them by views. Those components have access to each others and to the audio plugins.

Button

Push button component that trigger an action when pressed and released.

Config:

  • ON_PRESS: action is used to set an action when the button is pressed, e.g: ON_PRESS: &SET_VIEW name.

  • ON_RELEASE: action is used to set an action when the button is released, e.g: ON_RELEASE: &SET_VIEW name.

  • ON_LONG_PRESS: action is used to set an action when the button is long pressed.

  • ON_LONG_PRESS_RELEASE: action is used to set an action when the button is released when long pressed.

  • LABEL: label is used to set the text of the button. Icons can also be used, e.g.: LABEL: &icon::play::filled.

  • COLOR: color is used to set the color of the button.

  • ICON_COLOR: color is used to set the color of the button icon.

  • BACKGROUND_COLOR: color is used to set the background color of the button.

  • PRESSED_BACKGROUND_COLOR: color is used to set the background color of the button when pressed.

  • FONT_SIZE: size is used to set the font size of the button. Font size is also used to defined the height of the icon.

Actions:

  • ON_PRESS: &SET_VIEW name sets the specified view when the button is pressed.

  • ON_PRESS: &NOTE_ON pluginName note velocity send the note on the specified plugin when the button is pressed.

  • ON_PRESS: &NOTE_OFF pluginName note send the note off the specified plugin when the button is pressed.

  • ON_PRESS: &DATA pluginName dataId send the data to the specified plugin when the button is pressed.

  • ON_PRESS: &SHIFT true/false set shift value.

  • ON_PRESS: &AUDIO_EVENT id send audio event when the button is pressed.

  • STOP to send stop event to all tracks

  • START to send start event to all tracks

  • PAUSE to send pause event to all tracks

  • TOGGLE_PLAY_PAUSE to send toggle play pause event to all tracks

  • ON_PRESS: pluginName key value sets the value of the specified plugin key when the button is pressed.

Keyboard actions:

  • trigger is used to trigger the button.

Encoder2

Encoder2 is used to display current audio plugin value for a given parameter.

  • VALUE: pluginName keyName is used to set the value to control

  • ENCODER_ID: 0 is used to set the encoder id that will interract with this component

  • TYPE: ... is used to set the encoder type

    • TYPE: BROWSE TBD..
    • TYPE: TWO_SIDED is use for centered values like PAN

  • LABEL: custom_label overwrite the value label

  • COLOR: #3791a1 set the ring color

  • BACKGROUND_COLOR: #000000 set the background color

  • TEXT_COLOR: #ffffff set the text color

  • KNOB_COLOR: #888888 set the knob color (middle circle)

  • FLOAT_PRECISION: 2 set how many digits after the decimal point (by default none)

  • SHOW_KNOB: FALSE show the knob (middle circle) (default TRUE)

  • SHOW_GROUP: TRUE show group if the component is part of the current active group (default FALSE)

  • SHOW_VALUE: TRUE show value (default TRUE)

  • SHOW_UNIT: TRUE show unit (default TRUE)

  • FONT_UNIT_SIZE: 12 set the unit font size

  • FONT_VALUE_SIZE: 12 set the value font size

  • KNOB_CENTERED: TRUE

FmAlgo

Show FM algorithm and change them. The larger square operator are the carrier where audio is outputted.

  • COLOR: #FFFFFF set the text color.

  • BACKGROUND_COLOR: #333333 set the background color.

  • VALUE: pluginName keyName is used to set the value to control.

  • ENCODER_ID: 0 is used to set the encoder id that will interract with this component.

  • DATA_ID: 0 is used to set the data id that will return the current algorithm layout.

GridSequencer

Can handle sequencer per track. The component is expecting:

  • to have a sequencer audio plugin called Sequencer on 12 tracks.
  • to have mixer audio plugin called Mixer

Note

  • TODO switch clip/variation
  • TODO keypad action to toggle page views. E.g.: track view might have more parameter than the one visible on a single views. We need a way to be able to toggle between parameter views.
  • TODO make sequencer plugin name configurable
  • TODO make track configurable
  • TODO touch could be used to move up/down/left/right
  • TODO save single track clip under a given name
  • TODO load a specific track clip
  • TODO when sequencer status is next, track should blink

Keyboard actions:

  • track to select track number: KEYMAP: Keypad 1 track 2 will select track 2 when key 1 is pressed.

  • param to select parameter number: KEYMAP: Keypad 1 param 2 20 will select parameter 2 when key 1 is pressed. Color must be specified, in this example color is 20.

  • row to select row number: KEYMAP: Keypad 1 row -1 will decrement the current row selection when key 1 is pressed.

  • col to select column number: KEYMAP: Keypad 1 col -1 will decrement the current column selection when key 1 is pressed.

  • master to select master track: KEYMAP: Keypad 1 master will select master when key 1 is pressed.

  • variation to select variation: KEYMAP: Keypad 1 variation will select variation when key 1 is pressed.

  • step to update a step: KEYMAP: Keypad 1 step 4 will update step 4 when key 1 is pressed.

  • layout to select a layout: KEYMAP: Keypad 1 layout 2 will select layout 2 when key 1 is pressed. The numeric id of the layout corresponds to the order of initialization.

  • none to disable keypad button: KEYMAP: Keypad 1 none will disable the button 1.

Configs:

  • FIRST_COLUMN_WIDTH: width to specify the width of the first column (track column)

  • KEYPAD_LAYOUT: layout inititates a keypad layout

  • SELECTED_LAYOUT: name to change the selected keypad layout. By default the last initiated keypad layout is selected.

  • TRACK_PAGE_COUNT: track_id count to specify the number of track pages. By default it is 2.`

  • TRACK_NAME: track_id name to change the name of a track.`

  • TRACK_VIEW: track_id name to set the view name of a track. By default it is TrackParams_track_1, TrackParams_track_2, ...

  • STEP_VIEW: track_id name to set the view name of step editing. By default it is StepParams_track_1, StepParams_track_2, ...

Monitoring

Monitoring component show the current CPU usage.

  • COLOR: #999999 set component color

Pad

XY pad component, allows to control two audio plugin value parameters.

VALUE_X: pluginName key set X value to update on audio plugin parameter

VALUE_Y: pluginName key set Y value to update on audio plugin parameter

HOLD_VALUE: true|false set if the value should be held or not

RELEASE_X: value X value set when pad is released

RELEASE_Y: value Y value set when pad is released

COLOR: color set the color of the pad

Play

Play component toggle play and pause, or stop on long press.

  • BACKGROUND_COLOR: #000000 set background color

  • TEXT_COLOR: #FFFFFF set text color

  • ICON_COLOR: #AAAAAA set value color

RectComponent

Draw a rectangle on the view. Can be use to group elements together.

  • BACKGROUND: #333333 set the background color and activate background drawing.

  • BORDER: #333333 set the border color and activate border drawing.

  • RADIUS: 15 set the radius of the rounded corners.

Sample

Sample is used to display an audio sample, sustain position, and start/end position. The little green dot are the current playing positions of the sample.

SampleComponent.webm

Keyboard actions:

  • play is used to play the sample. KEYMAP: Keyboard 44 play 60 will trigger note on 60 when pressing space on keyboard.

  • COLOR: #FFFFFF set color of the waveform

  • BACKGROUND_COLOR: #000000 set background color

  • KEYS: BROWSER START END SUSTAIN LENGTH set the key parameter to use from plugin

  • AUDIO_PLUGIN: pluginName bufferDataId set the plugin to use from plugin

SequencerBar

Make minimal representation of the sequencer.

  • COLOR: #999999 set component color

Sequencer

Advanced sequencer interface.

  • COLOR: #999999 set component color

TextComponent

Draw a text on the view.

  • TEXT: Hello World set the text.

  • COLOR: #FFFFFF set the text color. Default is white.

  • FONT_SIZE: 10 set the font size. Default is 12.

  • ALIGN: left set the text align. Default is center.

  • BOLD: true set bold text.

Toggle

Toggle an audio plugin value parameter between his minimum and maximum value.

  • VALUE: pluginName keyName is used to set the value to control

  • ENCODER_ID: 0 is used to set the encoder id that will interract with this component. Rotating left will turn of the toggle, rotating right will turn it on.

  • LABEL: custom_label overwrite the value label

  • OFF_LABEL: custom_off_label overwrite the label when status is off

  • BACKGROUND_COLOR: #000000 set the background color

  • TEXT_COLOR: #ffffff set the text color

  • TOGGLE_COLOR: #888888 set the toggle button color

  • SHOW_GROUP: TRUE show group if the component is part of the current active group (default FALSE)

Data:

WaveComponent

WaveComponent will display the represention of a waveform and associated modulation envelope.

Keyboard actions:

  • play is used to play the sample. KEYMAP: Keyboard 44 play 60 will trigger note on 60 when pressing space on keyboard.

  • COLOR: #FFFFFF set color of the waveform

  • BACKGROUND_COLOR: #000000 set background color

  • ENVELOP_DATA_ID: id is the id of the envelope data.

  • PLUGIN: plugin_name set plugin target

  • NAME: key set key to get name from wave

Icons

List of icon used in plugin component:

  • &icon::backspace

  • &icon::play

  • &icon::play::filled

  • &icon::stop

  • &icon::stop::filled

  • &icon::pause

  • &icon::pause::filled

KeypadLayout

Some components might want to use a keypad layout.

  • KEYMAP: controllerName key action [param] [color] Map an action to a controller key. Use Keyboard as controllerName to use computer keyboard.

Previous: 03-Audio-plugins | Next: 05-Controller-plugins

01-Getting-started

02-Audio-host

03-Audio-plugins

04-UI-Component-plugins

05-Controller-plugins

06-Config-plugins

07-Hardware

Clone this wiki locally