Skip to content

04 UI Component plugins

Jump to bottom
Alexandre Piel edited this page Apr 4, 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.

ButtonBar

Button bar components dynamically give label to some push buttons.

[!NOTE] WIP WIP work in progress...

Keyboard actions:

  • item to select item.

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

  • FONT_COLOR: #ffffff set the font color.

  • FONT_SIZE: 10 set the font size.

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: TWO_SIDED is used to set the encoder type

    • TYPE: TWO_SIDED when there is a centered value like PAN and you want to show both side value: 20%|80%

  • 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

  • STRING_VALUE_REPLACE_TITLE: true instead to show string value in knob, show under the knob. Can be useful for long string value.

EncoderBar2

EncoderBar2 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: TWO_SIDED is used to set the encoder type

    • TYPE: TWO_SIDED when there is a centered value like PAN and you want to show both side value: 20%|80%

  • LABEL: custom_label overwrite the value label

  • BACKGROUND: #000000 set the background color

  • COLOR: #555555 set the background progress bar color. To be set after BACKGROUND parameter, else it will be overwritten.

  • TEXT_COLOR: #ffffff set the text color

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

  • 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

EncoderBar

EncoderBar 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: TWO_SIDED is used to set the encoder type

    • TYPE: TWO_SIDED when there is a centered value like PAN and you want to show both side value: 20%|80%

  • LABEL: custom_label overwrite the value label

  • BACKGROUND: #000000 set the background color

  • COLOR: #555555 set the background progress bar color. To be set after BACKGROUND parameter, else it will be overwritten.

  • TEXT_COLOR: #ffffff set the text color

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

  • 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

FmAlgo

Show FM algorithm and change them. The filled square are the carrier where audio is outputted and the not filled square are the operators modulating the frequency.

  • 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.

GridMini

Can handle sequencer per track. The component is expecting:

  • to have a sequencer audio plugin called Sequencer on 8 tracks.
  • to have volume audio plugin called Volume on each track.

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)

  • ITEM: track_id name param_view page_count [step_view] to change the name of a track ITEM: 1 Synth synth_1 4.

  • MASTER_PAGE_COUNT: count to specify the number of master pages.

GridSequencer

Can handle sequencer per track. The component is expecting:

  • to have a sequencer audio plugin called Sequencer on 12 tracks.
  • to have volume audio plugin called Volume on each track.

Note

  • TODO make volume plugin configurable and possibility to use mixer instead of single volume effect
  • 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, ...

  • MASTER_PAGE_COUNT: count to specify the number of master pages.

KeyInfoBar

KeyInfoBar components provide some information about the current kaypad layout.

Keyboard actions:

  • item to select item.

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

  • FONT_COLOR: #ffffff set the font color.

  • FONT_SIZE: 10 set the font size.

  • ICON_FIX: 1 remove 1 pixel to icon size, ICON_FIX: 2 remove 2 pixel...

  • COLUMNS: 5 set the number of columns.

  • ITEM: name add new item to list.

  • CHILD: name add child to last item.

Monitoring

Monitoring component show the current CPU usage.

  • COLOR: #999999 set component color

NavBar

Navigation bar components draw a scrollable menu to be used with buttons/keys.

[!NOTE] WIP WIP work in progress...

Keyboard actions:

  • next to navigate to the next items.

  • prev to navigate to the previous items.

  • btnLeft to select left item.

  • btnMiddle to select middle item.

  • btnRight to select right item.

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

  • FONT_COLOR: #ffffff set the font color.

  • FONT_SIZE: 10 set the font size.

  • ARROW_WIDTH: 10 set the arrow size.

  • ITEM: view label add an item.

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

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

  • &icon::arrowUp

  • &icon::arrowUp::filled

  • &icon::arrowDown

  • &icon::arrowDown::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