Skip to content

02 UI Component plugins

Jump to bottom
apiel edited this page Feb 18, 2025 · 66 revisions

ScrollGroup

ScrollGroup is a container that scroll the grouped component together.

  • CONTAINER_BACKGROUND_COLOR: color is the background color of the component.
  • SCROLL_TO_CENTER: true/false scroll to center (default: false).
  • SCROLL_OFFSET: 100 set the where group component start to scroll. By default 70% from container height.

Visibility

Visibility is a container that show/hide the components for a given group index.

  • CONTAINER_BACKGROUND_COLOR: color is the background color of the component.
  • VISIBILITY_GROUP: 0 the group index to show/hide the components.
  • VISIBILITY_CONTEXT: index SHOW_WHEN/SHOW_WHEN_NOT/SHOW_WHEN_OVER/SHOW_WHEN_UNDER value the context index to show/hide the components for a given value.

Icons

List of icon used in plugin component:

  • &icon::backspace
  • &icon::backspace::filled
  • &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
  • &icon::arrowLeft
  • &icon::arrowLeft::filled
  • &icon::arrowRight
  • &icon::arrowRight::filled
  • &icon::musicNote
  • &icon::musicNote::pixelated
  • &icon::tape
  • &icon::toggle
  • &icon::toggle::rect
  • &icon::trash
  • &empty

Pixel Components

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

AdsrComponent

Show a representation of the ADSR envdelop.

<Adsr
  // If true, the rectangle will be outlined. Default is true.
  outline={false}
  // Set the color of the graph.
  fillColor="#000000"
  // If true, the rectangle will be filled. Default is true.
  filled={false}
  // Set the color of the graph outline.
  outlineColor="#000000"
  // Set the color of the text.
  textColor1="#000000"
  // Set the color of the unit.
  textColor2="#000000"
  // Set the color of the background.
  bgColor="#000000"
  // If true, the title will be rendered on top of the graph. Default is true.
  renderValuesOnTop={false}
  // The audio plugin to get control on.
  plugin="audio_plugin_name"
  // The encoders that will interract with the ADSR envelop.
  encoders={[0, 1, 2, 3]}
  // The values that will interract with the ADSR envelop.
  values={["ATTACK", "DECAY", "SUSTAIN", "RELEASE"]}
/>

Clips

Clips components to draw a rectangle.

<Clips
  // The group to change clips for all tracks.
  groupAll=10
  // The background color of the text.
  bgColor="#000000"
  // The foreground color of the text.
  foregroundColor="#ffffff"
  // The color of the text
  textColor="#ffffff"
  // The identifier color of the component...
  color="#ffffff"
  // The number of visible clips
  visibleCount=10
  // The sequencer audio plugin.
  sequencerPlugin="audio_plugin_name"
  // The audio plugin to get serialized data.
  serializerPlugin="audio_plugin_name"
/>

Drum envelop

Show a representation of a drum envelop (envelop with relative time and modulation, without sustain).

<DrumEnvelop
  // The audio plugin to get control on.
  audioPlugin="audio_plugin_name"
  // Envelop data id to get/set data in the audio plugin.
  envelopDataId="ENV_AMP"
// Set if the envelop should be outlined or not. (default: true)
outline={false}
// Set if the envelop should be filled or not. (default: true)
filled={false}
// Set if the title should be rendered on top or not. (default: true)
renderTitleOnTop={false}
// Set the color of the graph.
fillColor="#000000"
// Set the color of the outline.
outlineColor="#000000"
// Set the color of the cursor.
cursorColor="#000000"
// Set the color of the text.
textColor="#000000"
// Set the id of the encoder to change time parameter.
encoderTime={0}
// Set the id of the encoder to change phase parameter.
encoderPhase={0}
/>

// Set the id of the encoder to change modulation parameter.

Drum envelop

Show a representation of a drum envelop (envelop with relative time and modulation, without sustain).

<DrumEnvelop
  // The audio plugin to get control on.
  audioPlugin="audio_plugin_name"
  // Envelop data id to get/set data in the audio plugin.
  envelopDataId="ENV_AMP"
// Set if the envelop should be outlined or not. (default: true)
outline={false}
// Set if the envelop should be filled or not. (default: true)
filled={false}
// Set if the title should be rendered on top or not. (default: true)
renderTitleOnTop={false}
// Set the color of the graph.
fillColor="#000000"
// Set the color of the outline.
outlineColor="#000000"
// Set the color of the cursor.
cursorColor="#000000"
// Set the color of the text.
textColor="#000000"
// Set the id of the encoder to change time parameter.
encoderTime={0}
// Set the id of the encoder to change phase parameter.
encoderPhase={0}
/>

encoderModulation={0}

Drum envelop

Show a representation of a drum envelop (envelop with relative time and modulation, without sustain).

<DrumEnvelop
  // The audio plugin to get control on.
  audioPlugin="audio_plugin_name"
  // Envelop data id to get/set data in the audio plugin.
  envelopDataId="ENV_AMP"
// Set if the envelop should be outlined or not. (default: true)
outline={false}
// Set if the envelop should be filled or not. (default: true)
filled={false}
// Set if the title should be rendered on top or not. (default: true)
renderTitleOnTop={false}
// Set the color of the graph.
fillColor="#000000"
// Set the color of the outline.
outlineColor="#000000"
// Set the color of the cursor.
cursorColor="#000000"
// Set the color of the text.
textColor="#000000"
// Set the id of the encoder to change time parameter.
encoderTime={0}
// Set the id of the encoder to change phase parameter.
encoderPhase={0}
/>

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.

<FmAlgo
  // The background color of the text.
  bgColor="#000000"
  // The color of the text
  textColor="#ffffff"
  // The color of the border
  borderColor="#ffffff"
  // The encoder id that will interract with this component.
        /*md   encoderId={0}
  // The audio plugin to get control on.
  audioPlugin="audio_plugin_name"
  // The audio plugin key parameter to get control on.
  param="parameter_name"
  // The data id that will return the current algorithm layout.
        /*md   dataId="ALGO"
/>

GraphEncoderComponent

Show a representation of data points and provide a way to control them.

<GraphEncoder
  // If true, the rectangle will be outlined. Default is true.
  outline={false}
  // Set the color of the graph.
  fillColor="#000000"
  // If true, the rectangle will be filled. Default is true.
  filled={false}
  // Set the color of the graph outline.
  outlineColor="#000000"
  // Set the color of the text.
  textColor1="#000000"
  // Set the color of the unit.
  textColor2="#000000"
  // Set the color of the background.
  bgColor="#000000"
  // If true, the title will be rendered on top of the graph. Default is true.
  renderValuesOnTop={false}
  // The audio plugin to get control on.
  plugin="audio_plugin_name"
  // The data id of the audio plugin where the input value will be sent.
  dataId="data_id"
  // The encoders that will interract with this component. Set `string` to force using string rendering.
  encoders={[{encoderId: 0, value: "LEVEL", string: false}]}
  // If true, the data is an array. Default is false.
  isArrayData={false}
/>

HiddenValue

Hidden value component is used to change a value without to have a specific UI for it. By default it will update the group number. If a plugin parameter is set, it will update the value of this parameter.

<HiddenValue
  // The audio plugin to get control on.
  audioPlugin="audio_plugin_name"
  // The audio plugin key parameter to get control on.
  param="parameter_name"
  // The encoder id that will interract with this component.
  encoderId={0}
 // Invert the encoder direction
 inverted
/>

Keyboard

Keyboard components to display keyboard.

<Keyboard
  // The view to redirect once edit is finished.
  redirectView="view_name"
  // The audio plugin to send the input value.
  audioPlugin="audio_plugin_name"
  // The data id of the audio plugin where the input value will be sent.
  dataId="data_id"
  // Set the background color of the component.
  bgColor="#000000"
  // Set the color of the text.
  textColor="#ffffff"
  // Set the color of the selection.
  selectionColor="#ffffff"
  // Set the color of the item background.
  itemBackground="#ffffff"
/>

KnobValue

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

<KnobValue
  // The audio plugin to get control on.
  audioPlugin="audio_plugin_name"
  // The audio plugin key parameter to get control on.
  param="parameter_name"
  // The encoder id that will interract with this component.
  encoderId={0}
  // The type of the encoder. By default the component will define the type own his own.
  type="TWO_SIDED" // when there is a centered value like PAN and you want to show both side value: 20%|80%
  type="TWO_VALUES" // when there is 2 possible values, for example one side is drive and the other side is compressor.
  type="NUMBER" // when the value is of type string but we still want to enforce to see his numeric value
  type="STRING"
  // Override the label of the parameter.
  label="custom_label"
  // Set the color of the knob.
  color="#3791a1"
  // Set the background color of the component.
  bgColor="#000000"
  // Set the color of the text.
  textColor="#ffffff"
  // Set how many digits after the decimal point (by default none.
  floatPrecision={2}
  // Hide the value of the parameter.
  hideValue
  // Hide the unit of the parameter.
  hideUnit
  // Set the font size of the unit.
  unitSize={8}
  // Set the font size of the value.
  valueSize={8}
  // Set the font size of the title.
  titleSize={8}
  // Instead to show the value of the parameter in knob, show it under the knob. Can be useful for long string value.
  valueReplaceTitle
/>

List

List components to display list of items.

<List
  // The list of items to add in the list.
  items={["item1", "item2", "item3"]}
  // The audio plugin to get control on.
  audioPlugin="audio_plugin_name"
  // Set the background color of the component.
  bgColor="#000000"
  // Set the color of the text.
  textColor="#ffffff"
  // Set the color of the selection.
  selectionColor="#ffffff"
  // Set the color of the item background.
  itemBackground="#ffffff"
/>

Macro envelop

Show a representation of a macro envelop (envelop with relative time and modulation, without sustain).

<MacroEnvelop
  // The audio plugin to get control on.
  audioPlugin="audio_plugin_name"
  // Envelop data id to get/set data in the audio plugin.
  envelopDataId="ENV_AMP"
Set if the envelop should be outlined or not. (default: true)
outline={false}
Set if the envelop should be filled or not. (default: true)
filled={false}
Set the color of the graph.
fillColor="#000000"
Set the color of the outline.
outlineColor="#000000"
Set the color of the cursor.
cursorColor="#000000"
Set the color of the text.
textColor="#000000"
Set the id of the encoder to change the envelop prarameters.
encoders={[0, 1, 2, 3]}
/>

Rect

Rect components to draw a rectangle.

<Rect
  // The color of the rectangle.
  color="#000000"
  // If true, the rectangle will be filled. Default is true.
  filled={false}
/>

SeqProgressBarComponent

<SeqProgressBar
  // The audio plugin sequencer.
  audioPlugin="audio_plugin_name"
  volumePlugin={{ plugin: "Volume", param: "VOLUME" }}
  // The background color of the text.
  bgColor="#000000"
  // The foreground color of the text.
  fgColor="#ffffff"
  // The color of the active step.
  activeColor="#ffffff"
  // The color of the inactive step.
  inactiveStepColor="#ffffff"
  // The color of the selection.
  selectionColor="#ffffff"
  // Show sequencer step value.
  showSteps
/>

Sequencer

Sequencer components to draw the sequencer interface.

<Sequencer
  // The audio plugin sequencer.
  audioPlugin="audio_plugin_name"
  // The data id to get steps from audio plugin sequencer.
  stepsDataId="STEPS"
  // The number of piano notes to display on the screen.
  numNotes=24
  // The background color of the text.
  bgColor="#000000"
  // The color of the black keys.
  blackKeyColor="#000000"
  // The color of the white keys.
  whiteKeyColor="#000000"
  // The color of the row separators.
  rowSeparatorColor="#000000"
  // The color of the beats.
  beatColor="#000000"
  // The color of the bars.
  barColor="#000000"
  // The color of the column separators.
  colSeparatorColor="#000000"
  // The color of the C notes.
  noteColor="#000000"
  // The color of the other notes.
  note2Color="#000000"
  // The color of the steps.
  stepColor="#000000"
/>

StepEditSample

StepEditSample component is used to edit a step value for samples.

<StepEditSample
  // The audio plugin to get control on.
  audioPlugin="audio_plugin_name"
  // Index of the step.
  stepIndex={0}
  // The background color of the text.
  bgColor="#000000"
  // The color of the text
  textColor="#ffffff"
The color of the actual playing step.
playingColor="#ffffff"
The color of the selected step.
selectedColor="#ffffff"
/>

Text

Text component is used to display text.

<Text
  // The text to display.
  text="Hello World"
  // If true, the text will be centered. Default is false.
  centered
  // The font size of the text. Default is 8.
  fontSize=8
  // The font of the text. Default is null.
  font="Sinclair_S"
  // The font height of the text. Default is 0.
  fontHeight=0
  // The background color of the text.
  bgColor="#000000"
  // The color of the text
  color="#ffffff"
/>

Value

Value component is used to display an audio plugin parameter value.

<KnobValue
  // The audio plugin to get control on.
  audioPlugin="audio_plugin_name"
  // The audio plugin key parameter to get control on.
  param="parameter_name"
  // The encoder id that will interract with this component.
  encoderId={0}
  // Override the label of the parameter.
  label="custom_label"
  // Set how many digits after the decimal point (by default none.
  floatPrecision={2}
  // Use the string value instead of the floating point one (default: false).
  useStringValue
  // Set the bar height (default: 2).
  barHeight={2}
  // Set the bar background height (default: 1).
  barBgHeight={1}
  // Set the text vertical alignment to center (default: false).
  verticalAlignCenter
  // Hide the label (default: false).
  hideLabel
  // Hide the unit (default: false).
  hideUnit
  // Hide the value (default: false).
  hideValue
  // Shows the label over the value, 4 px from the top of the component (default: -1) `
  showLabelOverValue={4}
  // Set the distance from the left of the component where the label will be placed. If -1 it is centered (default: -1)
  labelOverValueX={0}
  // Set the font size of the value (default: 8).
  valueSize={8}
  // Set the font size of the label (default: 6).
  labelSize={6}
  // Set the font size of the unit (default: 6).
  unitSize={6}
  // The font of the text. Default is null.
  font="Sinclair_S"
  // The font height of the text. Default is 0.
  valueHeight=16
  // Set the background color of the component.
  bgColor="#000000"
  // Set the color of the label.
  valueColor="#FF0000"
  // Set the color of the bar.
  barColor="#FF0000"
  // Set the color of the unit.
  unitColor="#00FF00"
  // Set the color of the label.
  labelColor="#00FF00"
/>

Workspaces

Workspaces components show the list of available workspaces.

<Workspaces
  // The audio plugin to load serialized data.
  audioPlugin="audio_plugin_name"
  currentWorkspaceDataId="CURRENT_WORKSPACE"
  refreshStateDataId="CREATE_WORKSPACE"
  workspaceFolder="workspaces"
  // The background color of the text.
  bgColor="#000000"
  badgeColor="#23a123"
  errorColor="#ab6363"
/>

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

Home: Getting started

01-Audio-plugins

02-UI-Component-plugins

03-Controller-plugins

04-Hardware

90-Music-programming-tutorial

EncoderController

Clone this wiki locally