Interface CompanionInputFieldColor

A colour picker input

Available for actions/feedbacks/config Has three optional configuration properties:

  • {boolean} enableAlpha will show the colour picker with an additional alpha entry
  • {'string'|'number'} returnType do you want to get the results as CSS string or Companion color number
  • {string[]} presetColors replace the default swatch with your own colors when set

Example

{
	id: 'bg',
	type: 'colorpicker',
	label: 'Background color',
	default: 'rgb(255, 0, 0)'
}

{
	id: 'overlay',
	type: 'colorpicker',
	label: 'Overlay color',
 enableAlpha: true,
 returnType: 'string',
	default: 'rgba(100, 100, 255, 0.3)',
 presetColors: ['#000', '#ffffff', {color: 'rgba(255, 0, 0, 0.5)', title: 'semitransparent red'}]
}
interface CompanionInputFieldColor {
    default: string | number;
    description?: string;
    enableAlpha?: boolean;
    id: string;
    isVisible?: (options: CompanionOptionValues, data: any) => boolean;
    isVisibleData?: Record<string, any>;
    isVisibleExpression?: string;
    label: string;
    presetColors?: CompanionColorPresetValue[];
    returnType?: "string" | "number";
    tooltip?: string;
    type: "colorpicker";
}

Hierarchy (View Summary)

Properties

default description? enableAlpha? id isVisible? isVisibleData? isVisibleExpression? label presetColors? returnType? tooltip? type

Properties

default

default: string | number

The default color value to set when creating this action/feedback/instance Can be a color string or a color number Valid strings are CSS color strings in Hex, RGB, HSL or HSV notation with or without alpha Valid numbers are 0x0 - 0xffffffff, where the components are ttrrggbb, you can generate the number with combineRgb()

Examples for red

'#f00'
'#ff0000'
'#ff0000ff'
'rgb(255,0,0)
'rgba(255, 0, 0, 1.0)
'hsl(0, 100, 50)'
'hsv(0, 100, 100)'
0xff0000

Optionaldescription

description?: string

A longer description/summary/notes for this field

OptionalenableAlpha

enableAlpha?: boolean

This will enable a alpha entry slider and input

id

id: string

The unique id of this input field within the input group

OptionalisVisible

isVisible?: (options: CompanionOptionValues, data: any) => boolean

Deprecated

This will be removed in 2.0.0 of this api. Use isVisibleExpression instead.

A function called to check whether this input should be visible, based on the current options selections within the input group

Note: This function must not depend on anything outside of its scope. If it does it will fail to compile and will be skipped.

Note: If both this and isVisibleExpression are provided, isVisibleExpression will take precedence.

OptionalisVisibleData

isVisibleData?: Record<string, any>

Deprecated

This will be removed in 2.0.0 of this api. Use isVisibleExpression instead.

A JSON serializable object to provide as extra input to isVisible

If you think you need this with isVisibleExpression, we want to hear why.

OptionalisVisibleExpression

isVisibleExpression?: string

A companion expression to check whether this input should be visible, based on the current options selections within the input group

This is the same syntax as other expressions written inside of Comapnion. You can access a value of the current options using $(options:some_field_id). This does not support the isVisibleData property, let us know if you need this.

Note: If both this and isVisible are provided, this will take precedence.

label

label: string

The label of the field

OptionalpresetColors

presetColors?: CompanionColorPresetValue[]

If set, this will override the default colors shown in the swatch. Enter an array of either color strings or objects with color strings and titles

OptionalreturnType

returnType?: "string" | "number"

Specify if you want the colorpicker returning it's value as a CSS string or as a color number. This will also be the format stored in the database for this value

Optionaltooltip

tooltip?: string

A hover tooltip for this field

type

type: "colorpicker"

The type of this input field

Settings

Member Visibility

On This Page

Example
Properties