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;
    enableAlpha?: boolean;
    id: string;
    isVisible?: ((options: CompanionOptionValues, data: any) => boolean);
    isVisibleData?: any;
    label: string;
    presetColors?: CompanionColorPresetValue[];
    returnType?: "string" | "number";
    tooltip?: string;
    type: "colorpicker";
}

Hierarchy (view full)

Properties

default enableAlpha? id isVisible? isVisibleData? 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 ot 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

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)

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.

OptionalisVisibleData

isVisibleData?: any

JSON serializable data to provide to isVisible

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