Home Docs Support Bug Tracker Community

Widget reference#

Properties shared by all widgets
property type default description

type#

 string "auto"

id#

 string "auto" Widgets sharing the same id will act as clones and update each other's value(s) without sending extra osc messages.

linkId#

 string|
array		 "" Widgets sharing the same linkId update each other's value(s) AND send their respective osc messages.

When prefixed with >>, the linkId will make the widget act as a master (sending but not receiving)

When prefixed with <<, the linkId will make the widget act as a slave (receiving but not sending)

geometry#

left#

 number|
string		 "auto" When both top and left are set to auto, the widget is positioned according to the normal flow of the page (from left to right, by order of creation).

Otherwise, the widget will be absolutely positioned

top#

 number|
percentage		 "auto" When both top and left are set to auto, the widget is positioned according to the normal flow of the page (from left to right, by order of creation).

Otherwise, the widget will be absolutely positioned

width#

 number|
percentage		 "auto"

height#

 number|
percentage		 "auto"

style#

label#

 string|
boolean		 "auto" Set to false to hide completely

Insert icons using the prefix ^ followed by the icon's name : ^play, ^pause, etc (see https://fontawesome.com/icons?d=gallery&s=solid&m=free)

color#

 string "auto" Defines the widget's accent color (css variable --custom-color). Must be a valid CSS color. Set to "auto" to inherit from parent widget.

css#

 string "" CSS rules. See documentation.

value#

default#

 * "" If set, the widget will be initialized with this value when the session is loaded.

value#

 * "" Define the widget's value depending on other widget's values / properties using property inheritance and property maths

osc#

precision#

 integer|
string		 2 Defines the number of decimals to display and to send.

Set to 0 to send integers only.

Data type can be specified by appending a valid osc type tag to the precision value, for example : 3d will make the widget send double precision numbers rounded to three decimals

address#

 string "auto" OSC address for sending messages, it must start with a /

preArgs#

 *|
array		 "" A value or array of values that will be prepended to the OSC messages.

Values can be defined as objects if the osc type tag needs to be specified: {type: "i", value: 1}

target#

 string|
array|
null		 "" This defines the targets of the widget's OSC messages
- A string or array of strings formatted as follow: ip:port or ["ip:port"]
- If midi is enabled, targets can be midi:device_name
- The special item "self" can be used to refer to the emitting client directly.
- If no target is set, messages can still be sent if the server has default targets
- The server's default targets can be bypassed by setting one of the items to null

bypass#

 boolean false Set to true to prevent the widget from sending any osc message

Sliders#

Vertical / horizontal slider.
property type default description

style#

css#

 string "" Available CSS variables:
- --color-gauge: color;
- --color-knob: color;
- --color-pips: color;
- --gauge-opacity: number;
- --gauge-width: number; (2-16, requires a manual resize to take effect)

fader#

horizontal#

 boolean false Set to true to display the fader horizontally

alignRight#

 boolean false Set to true to invert the pip's and fader's position

pips#

 boolean true Set to false to hide the scale

input#

 boolean true Set to false to hide the built-in input

meter#

 boolean false Set to true to display a vu-meter next in the fader
- the meter's id will be the same as the widget's with /meter appended to it
- the meter's address will be the same as the widget's with /meter appended to it

compact#

 boolean false Set to true to display a compact alternative for the widget. If input is true, the input can be focused with a right-click (mouse only). Disables pips when enabled.

dashed#

 boolean false Set to true to display a dashed gauge

snap#

 boolean false By default, dragging the widget will modify it's value starting from its last value. Setting this to true will make it snap directly to the mouse/touch position

spring#

 boolean false When set to true, the widget will go back to its default value when released

doubleTap#

 boolean false Set to true to make the fader reset to its default value when receiving a double tap.

Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)

range#

 object {
 "min": 0,
 "max": 1
}		 Defines the breakpoints of the fader's scale:
- keys can be percentages and/or min / max
- values can be number or object if a custom label is needed

Example: ({min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}})

logScale#

 boolean|
number		 false Set to true to use logarithmic scale (base 10). Set to a number to define the logarithm's base.

sensitivity#

 number 1 Defines the fader's sensitivity when snap is false

steps#

 string|
number|
array		 "" Restricts the widget's value:
- auto: use values defined in range
- number: define a number of evenly spaced steps
- array: use arbitrary values

unit#

 string "" Unit will be appended to the displayed widget's value (it doesn't affect osc messages)

origin#

 number "auto" Defines the starting point's value of the fader's gauge

osc#

touchAddress#

 string "" OSC address for touched state messages: /touchAddress [preArgs] 0/1

meterAddress#

 string "" OSC address for the built-in meter
Rotative knob slider.
property type default description

style#

css#

 string "" Available CSS variables:
- --color-gauge: color;
- --color-knob: color;
- --color-pips: color;

knob#

pips#

 boolean false Set to true to show the scale's breakpoints

input#

 boolean true Set to false to hide the built-in input

compact#

 boolean false Set to true to display a compact alternative for the widget. If input is true, the input can be focused with a right-click (mouse only). Disables pips when enabled.

dashed#

 boolean false Set to true to display a dashed gauge

angle#

 number 270 Defines the angle's width of the knob, in degrees

snap#

 boolean false By default, dragging the widget will modify it's value starting from its last value. Setting this to true will make it snap directly to the mouse/touch position

spring#

 boolean false When set to true, the widget will go back to its default value when released

doubleTap#

 boolean false Set to true to make the knob reset to its default value when receiving a double tap.

Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)

range#

 object {
 "min": 0,
 "max": 1
}		 Defines the breakpoints of the fader's scale:
- keys can be percentages and/or min / max
- values can be number or object if a custom label is needed

Example: ({min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}})

logScale#

 boolean|
number		 false Set to true to use logarithmic scale (base 10). Set to a number to define the logarithm's base.

sensitivity#

 number 1 Defines the knob's sensitivity when snap is false

steps#

 string|
number|
array		 "" Restricts the widget's value:
- auto: use values defined in range
- number: define a number of evenly spaced steps
- array: use arbitrary values

unit#

 string "" Unit will be appended to the displayed widget's value (it doesn't affect osc messages)

origin#

 number "auto" Defines the starting point's value of the knob's gauge

osc#

touchAddress#

 string "" OSC address for touched state messages: /touchAddress [preArgs] 0/1
A knob that sends a relative direction infomation instead of an absolute value.
property type default description

encoder#

compact#

 boolean false Set to true to display a compact alternative for the widget.

ticks#

 number 360 defines the granularity / verbosity of the encoder (number of step for a 360° arc)

back#

 * -1 Defines which value is sent when rotating the encoder anticlockwise

forth#

 * 1 Defines which value is sent when rotating the encoder clockwise

release#

 number "" Defines which value is sent when releasing the encoder:
- Set to null to send send no argument in the osc message
- Can be an object if the type needs to be specified

snap#

 boolean false By default, dragging the widget will modify it's value starting from its last value. Setting this to true will make it snap directly to the mouse/touch position

doubleTap#

 boolean false Set to true to make the fader reset to its default value when receiving a double tap.

Can also be an osc address, in which case the widget will just send an osc message (/<doubleTap> <preArgs>)

osc#

touchAddress#

 string "" OSC address for touched state messages: /touchAddress [preArgs] 0/1
A fader with two heads for setting a range.
property type default description

style#

css#

 string "" Available CSS variables:
- --color-gauge: color;
- --color-knob: color;
- --color-pips: color;
- --gauge-opacity: number;

range#

range#

 object {
 "min": 0,
 "max": 1
}		 See fader's range

horizontal#

 boolean false See fader's horizontal

alignRight#

 boolean false See fader's alignRight

input#

 boolean true See fader's input

compact#

 boolean false See fader's compact

pips#

 boolean true See fader's pips

snap#

 boolean false See fader's snap

spring#

 boolean false See fader's spring

logScale#

 boolean false See fader's logScale

sensitivity#

 number 1 See fader's sensitivity

osc#

touchAddress#

 string "" See fader's touchAddress

split#

 boolean|
object		 false Set to true to send separate osc messages for low and high handles. The address will be the same as the widget's with /low or /high appended to it

Can be set as an object to specify a different address : ['/osc_address_low', '/osc_address_high']

Note: the widget will only respond to its original osc address, not to the splitted version

Buttons#

On / off button.
property type default description

toggle#

doubleTap#

 boolean false Set to true to make the button require a double tap to be toggled instead of a single tap

led#

 boolean false Set to true to display the toggle's state with a led

on#

 * 1 Set to null to send send no argument in the osc message

Can be an object if the type needs to be specified (see preArgs)

off#

 * 0 Set to null to send send no argument in the osc message

Can be an object if the type needs to be specified (see preArgs)
On / off button that turns off when released.
property type default description

push#

doubleTap#

 boolean false Set to true to make the button require a double tap to be pushed instead of a single tap

on#

 * 1 Set to null to send send no argument in the osc message

Can be an object if the type needs to be specified (see preArgs)

off#

 * 0 Set to null to send send no argument in the osc message

Can be an object if the type needs to be specified (see preArgs)

norelease#

 boolean false Set to true to prevent sending any osc message when releasing the button
Value selector button.
property type default description

switch#

horizontal#

 boolean false Set to true to display values horizontally

showValues#

 boolean false If values is an object, set to true to display both values and labels instead of labels only

values#

 array|
object		 {
 "Value 1": 1,
 "Value 2": 2
}		 Array of possible values to switch between : [1,2,3]

Object of "label":value pairs. Numeric labels must be prepended or appended with a white space (or any other non-numeric character) otherwise the order of the values won't be kept

traversing#

 boolean true Set to false to disable traversing gestures
Native dropdown menu.
property type default description
array|
object		 {
 "Value 1": 1,
 "Value 2": 2
}		 Array of possible values to switch between : [1,2,3]

Object of label:value pairs. Numeric labels must be prepended or appended with a white space (or any other non-numeric character) otherwise the order of the values won't be kept

An empty option will always be prepended to values (sends an osc message without any value); it can be hidden by adding option:first-child{display:none} to the widget's css
Drag and drop menu with a circular or grid layout.
property type default description
number|
array		 200 - If circular is true: diameter (in px)
- If circular is false: square size or [width, height] array
boolean true Defines whether the menu should be rendered in a circle or in a box
boolean|
number		 false If circular is false, set this to true for vertical layout

Ignored when grid is true
boolean|
number		 false - If circular is false, set this to true for grid layout
- Can be a number to define the number of columns
boolean false Set to true to make the menu stay opened after mouse/touch release
boolean false Set to true to make the menu require a double tap to be opened instead of a single tap
array|
object		 {
 "Value 1": 1,
 "Value 2": 2
}		 Array of possible values to switch between : [1,2,3]

Object of label:value pairs. Numeric labels must be prepended or appended with a white space (or any other non-numeric character) otherwise the order of the values won't be kept
array "" Array of number defining the weights of each value in values

Ignored when grid is true

Pads#

Two-dimensional slider.
property type default description

style#

css#

 string "" Available CSS variables:
- --background: background;: sets the dragging area's background
- --pips-color: color;
- --pips-opacity: number;
- --point-opacity: number;

xy#

pointSize#

 integer 20 Defines the points' size

snap#

 boolean false By default, the points are dragged from their initial position.

If set to true, touching anywhere on the widget's surface will make them snap to the touching coordinates

spring#

 boolean false When set to true, the widget will go back to its default value when released

pips#

 boolean true Set to false to hide the scale

rangeX#

 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the x axis

rangeY#

 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the y axis

logScaleX#

 boolean|
number		 false Set to true to use logarithmic scale for the x axis (base 10). Set to a number to define the logarithm's base.

logScaleY#

 boolean|
number		 false Set to true to use logarithmic scale for the y axis (base 10). Set to a number to define the logarithm's base.

input#

 boolean true Set to false to hide the built-in input widget

doubleTap#

 boolean|
string		 false Set to true to make the fader reset to its default value when receiving a double tap.

Can also be an osc address, which case the widget will just send an osc message: /<doubleTap> <preArgs>

sensitivity#

 number 1 Defines the pad's sensitivity when snap is false

osc#

touchAddress#

 string "" OSC address for touched state messages: /touchAddress [preArgs] 0/1)

split#

 boolean|
object		 false Set to true to send separate osc messages for each point's x and y axis. The address will be the same as the widget's with /x or /y appended to it

Can be set as an object to specify a different address : ['/osc_address_x', '/osc_address_y']

Note: the widget will only respond to its original osc address, not to the splitted version
Color picker with optional alpha slider.
property type default description

rgb#

snap#

 boolean false By default, the points are dragged from their initial position.

If set to true, touching anywhere on the widget's surface will make them snap to the touching coordinates

spring#

 boolean false When set to true, the widget will go back to its default value when released

range#

 object {
 "min": 0,
 "max": 255
}		 Defines the widget's output scale.

input#

 boolean true Set to false to hide the built-in input widget

alpha#

 boolean false Set to true to enable alpha channel

osc#

split#

 boolean|
object		 false Set to true to send separate osc messages for for r and g & b. The address will be the same as the widget's with /r, /g or /b appended to it

Can be set as an object to specify a different address : ['/r', '/g', 'b']

Note: the widget will only respond to its original osc address, not to the splitted version
Multi-point XY pad.
property type default description

style#

css#

 string "" Available CSS variables:
- --background: background;: sets the dragging area's background
- --pips-color: color;
- --pips-opacity: number;
- --color-text: point-color;

Pads can be targetted individually with the .pad-X selector (where X is the pad's index)

multi xy#

points#

 integer|
array		 2 Defines the number of points on the pad

Can be an array of strings that will be used as labels for the points (ex: ['A', 'B'])

xy#

pointSize#

 integer 20 Defines the points' size

snap#

 boolean false By default, the points are dragged from their initial position.

If set to true, touching anywhere on the widget's surface will make them snap to the touching coordinates

spring#

 boolean false When set to true, the widget will go back to its default value when released

pips#

 boolean true Set to false to hide the scale

rangeX#

 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the x axis

rangeY#

 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the y axis

logScaleX#

 boolean|
number		 false Set to true to use logarithmic scale for the x axis (base 10). Set to a number to define the logarithm's base.

logScaleY#

 boolean|
number		 false Set to true to use logarithmic scale for the y axis (base 10). Set to a number to define the logarithm's base.

sensitivity#

 number 1 Defines the pad's sensitivity when snap is false

osc#

touchAddress#

 string "" OSC address for touched state messages: /touchAddress [preArgs] 0/1

split#

 boolean|
object		 false Set to true to send separate osc messages for each point's x and y axis. The address will be the same as the widget's with /N/x or /N/y appended to it, where N is the point's id (or the point's label if points is an array)

Can be set as an object to specify a different address : ['/0/x', '/0/y', '/1/x', '/2/y']

Note: the widget will only respond to its original osc address, not to the splitted version

Matrices#

Generic matrix for creating rows/columns of widgets.
property type default description

matrix#

widgetType#

 string "toggle" Defines the type of the widgets in the matrix

matrix#

 array [
 2,
 2
]		 Defines the number of columns and and rows in the matrix

start#

 integer 0 First widget's index

spacing#

 integer 0 Adds space between widgets

traversing#

 boolean true Set to false to disable traversing gestures

border#

 boolean true Set to false to disables the widgets' borders

props#

 object {} Defines a set of property to override the widgets' defaults.

Formulas in this field are resolved with an extra variable representing each widget's index: $

Note: by default, the widgets inherit from the matrix' id and osc properties (id and address are appended with /$)
Piano keyboard.
property type default description

style#

css#

 string "" Available CSS variables:
- --color-white:color; (white keys color)
- --color-black:color; (black keys color)

matrix#

keys#

 number 25 Defines the number keys

start#

 number 48 MIDI note number to start with (default is C4)

Standard keyboards settings are: [25, 48], [49, 36], [61, 36], [88, 21]

traversing#

 boolean true Set to false to disable traversing gestures

on#

 * 1 Set to null to send send no argument in the osc message

Can be an object if the type needs to be specified (see preArgs)

off#

 * 0 Set to null to send send no argument in the osc message

Can be an object if the type needs to be specified (see preArgs)

toggles#

 boolean false Set to true to make keys bahave like toggle buttons

osc#

split#

 boolean|
string		 false true: the widget's index will be appended to the matrice's osc address

false: it will be prepended to the widget's preArgs

string: will be used to define the widgets' addresses, replacing dollar signs ($) with their respective index (to insert the actual dollar sign, it must be escaped with a backslash (\$))
Connect inputs to outputs.
property type default description

style#

css#

 string "" The inputs/ouputs width can be adjusted by using the .nodes selector:

.nodes { width: 25% }

patchbay#

inputs#

 array|
object		 [
 "input_1",
 "input_2"
]		 - Array of input names : ['input_1', 'input_2']
- Object of "label_1": "input_1" pairs. Numeric labels must be prepended or appended with a white space (or any other non-numeric character) otherwise the order of the values won't be kept



Patchbay inputs can be connected to one or more outputs and will send messages of the following form when they are connected/disconnected:

/patchbay_address input_x output_x output_y etc

If no output is connected to the input, the message will be /patchbay_address input_x

The inputs values can be consumed with the property inheritance syntax: @{patchbay_id/input_1} returns an array of output names connected to input_1

outputs#

 array|
object		 [
 "output_1",
 "output_2"
]		 List of output values the inputs can connect to (see inputs).

Plots#

XY coordinates plot.
property type default description

plot#

rangeX#

 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the x axis

rangeY#

 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the y axis

logScaleX#

 boolean|
number		 false Set to true to use logarithmic scale for the x axis (base 10). Set to a number to define the logarithm's base.

logScaleY#

 boolean|
number		 false Set to true to use logarithmic scale for the y axis (base 10). Set to a number to define the logarithm's base.

origin#

 number "auto" Defines the y axis origin. Set to false to disable it.

dots#

 boolean true

bars#

 boolean false Set to true to use draw bars instead (disables logScaleX and forces x axis even spacing)

smooth#

 boolean|
number		 false Set to true to make the line smooth. Float values are also acceptable (works fine between 0 and 0.5)

pips#

 boolean true Set to false to hide the scale

value#

value#

 array|
string		 "" - Array of y values
- Array of [x, y] array values
- String array
- String object to update specific coordinates only: {0:1, 4:0} will change the 1st and 5th points' coordinates
Draws frequency response between from from an array of filter objects.
property type default description

eq#

pips#

 boolean true Set to false to hide the scale

resolution#

 number 128 Defines the number of points used to compute the frequency response

rangeY#

 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the y axis

origin#

 number|
boolean		 "auto" Defines the y axis origin. Set to false to disable it

logScaleX#

 boolean|
number		 false Set to true to use logarithmic scale for the x axis (base 10). Set to a number to define the logarithm's base.

smooth#

 boolean|
number		 false Set to true to make the line smooth. Float values are also acceptable (works fine between 0 and 0.5)

value#

value#

 array "" Each item must be an object with the following properties
- type: string ("highpass", "highshelf", "lowpass", "lowshelf", "peak" or "notch")
- freq: number (filter's resonant frequency)
- q: number (Q factor)
- gain: number
- on: boolean
Display its value over time.
property type default description

visualizer#

duration#

 number 1 Defines visualization duration in seconds

range#

 object {
 "min": 0,
 "max": 1
}		 Defines the min and max values for the y axis

origin#

 number "auto" Defines the y axis origin. Set to false to disable it

logScale#

 boolean|
number		 false Set to true to use logarithmic scale for the y axis (base 10). Set to a number to define the logarithm's base.

smooth#

 boolean|
number		 false Set to true to make the line smooth. Float values are also acceptable (works fine between 0 and 0.5)

pips#

 boolean true Set to false to hide the scale
Intensity display.
property type default description

led#

range#

 object {
 "min": 0,
 "max": 1
}		 Value to led intensity mapping range

logScale#

 boolean|
number		 false Set to true to use logarithmic scale (base 10). Set to a number to define the logarithm's base.
Rgb / rgba color display
property type default description

value#

value#

 array|
string		 "" - Array: [r, g, b] (r, g and b between 0 and 255)
- Array: [r, g, b, alpha] (alpha between 0 and 255)
- String: CSS color
Non-interactable fader.
property type default description

style#

css#

 string "" Available CSS variables:
- --color-gauge: color;
- --color-knob: color;
- --color-pips: color;
- --gauge-opacity: number;

meter#

range#

 object {
 "min": 0,
 "max": 1
}		 See fader's range

logScale#

 boolean false See fader's logScale

origin#

 number "auto" See fader's origin

unit#

 string "auto" See fader's unit

alignRight#

 boolean false See fader's alignRight

horizontal#

 boolean false See fader's horizontal

pips#

 boolean false See fader's pips

dashed#

 boolean false See fader's dashed

gradient#

 array|
object		 [] When set, the meter's gauge will be filled with a linear color gradient
- each item must be a CSS color string.
- as an object: each key must be a number between 0 and 1
- each item must be a CSS color string.

Examples: ['blue', 'red'], {'0': 'blue', '0.9': 'blue', '1': 'red'}

text

Display text.
property type default description

text#

vertical#

 boolean false Set to true to display the text vertically

wrap#

 boolean false Set to true to wrap long lines automatically.

This will not break overflowing words by default, word-breaking can be enabled by adding word-break: break-all; to the css property

align#

 string "" Set to left or right to change text alignment (otherwise center)
Load a image (url or base64-encoded).
property type default description

image#

size#

 string "cover" CSS background-size

position#

 string "center" CSS background-position

repeat#

 string "no-repeat" CSS background-repeat

border#

 boolean true Set to false to disable the borders and background-color

cache#

 boolean true Set to false to disable image caching (forces file reload when updating or editing the widget).

When true, sending reload to the widget reloads its image without changing its value

value#

value#

 string "" - File url or path (relative to the session file location by default, falling back to absolute path)
- Base64 encoded image : data:image/...
Svg parser.
property type default description

svg#

svg#

 string "" Svg xml definition:
- will be wrapped in a < svg /> element
- <path> commands support a special percent notation (%x and %y)

border#

 boolean true Set to false to disable the borders and background-color
Simple HTML parser.
property type default description

html#

html#

 string "" Allowed HTML tags:

  h1-6, blockquote, p, a, ul, ol, nl, li,

  b, i, strong, em, strike, code, hr, br, div,

  table, thead, img, caption, tbody, tr, th, td, pre

border#

 boolean true Set to false to disable the borders and background-color
Embed a page in a frame (local network only).
property type default description

style#

label#

 string|
boolean		 "auto" Set to false to hide completely

Insert icons using the prefix ^ followed by the icon's name : ^play, ^pause, etc

If set to false, all pointer-events will be disabled on the frame as long as the editor is enabled to ensure it can be selected

frame#

border#

 boolean true Set to false to disable the borders and background-color

value#

value#

 string "" External web page URL. Only local URLs are allowed (starting with http://127.0.0.1/, http://10.x.x.x/, http://192.168.x.x/, etc)

Containers#

Widgets or Tabs container.
property type default description

panel#

scroll#

 boolean true Set to false to disable scrollbars

border#

 boolean true By default, widgets in panels/strip have their border disabled, except for panels and strips. Set to false to apply this rule to the panel too

value#

value#

 integer "" Defines currently opened tab in the widget

A tab can be opened only by setting its parent's value

children#

variables#

 * "@{parent.variables}" Defines one or more arbitrary variables that can be inherited by children widgets

widgets#

 array [] Each element of the array must be a widget object. A panel cannot contain widgets and tabs simultaneously.

tabs#

 array [] Each element of the array must be a tab object. A panel cannot contain widgets and tabs simultaneously
Widget container that display its children in a single column or row.
property type default description

strip#

scroll#

 boolean true Set to false to disable scrollbars

horizontal#

 boolean false Set to true to display widgets horizontally

stretch#

 boolean false Set to true to stretch widgets evenly

border#

 boolean true By default, widgets in panels/strip have their border disabled, except for panels and strips. Set to false to apply this rule to the panel too

spacing#

 integer|
percentage		 0 Adds space between widgets. Percents are always relative to the strips width

children#

variables#

 * "@{parent.variables}" Defines one or more arbitrary variables that can be inherited by children widgets

widgets#

 array [] Each element of the array must be a widget object
- By default, children widgets that don't have an explicit width/height set will be shrinked to respect the sizes specified by others
- Adding flex:1; to a children's css will give it the ability the fill the remaining space
- Multiple children can have a flex:x; css property (x will ponderate their expansion)
A toggle button that opens a popup panel. Cannot contain tabs directly.
property type default description
boolean false Set to true to make the modal require a double tap to open instead of a single tap
string "" Alternative label for the modal popup
number|
percentage		 "80%" Modal popup's size
number|
percentage		 "80%" Modal popup's size
number|
percentage		 "auto" Modal popup's position
number|
percentage		 "auto" Modal popup's position
boolean true Set to false to disable scrollbars
integer "" Defines the modal's state:0 for closed, 1 for opened
* "@{parent.variables}" Defines one or more arbitrary variables that can be inherited by children widgets
array [] Each element of the array must be a widget object
Widget replication with overridable properties.
property type default description

clone#

widgetId#

 string "" id of the widget to clone

overrides#

props#

 object {} Cloned widget's properties to override
Main (unique) container
property type default description

id#

 string "root" Widgets sharing the same id will act as clones and update each other's value(s) without sending extra osc messages

value#

value#

 integer "" Defines currently opened tab in the widget

A tab can be opened only by setting its parent's value

children#

traversing#

 boolean false Set to true to enable traversing gestures in this widget. Set to smart or auto to limit affected widgets by the type of the first touched widget

variables#

 * {} Defines one or more arbitrary variables that can be inherited by children widgets

tabs#

 array [
 {}
]		 Each element of the array must be a tab object
Tabbed panel widget
property type default description

tab#

detached#

 boolean true Set to false if the tab contains frame widgets that should not be reloaded when the tab opens

value#

value#

 integer "" Defines currently opened tab in the widget

A tab can be opened only by setting its parent's value

children#

variables#

 * "@{parent.variables}" Defines one or more arbitrary variables that can be inherited by children widgets

widgets#

 array [] Each element of the array must be a widget object. A tab cannot contain widgets and tabs simultaneously

tabs#

 array [] Each element of the array must be a tab object. A tab cannot contain widgets and tabs simultaneously

Switchers#

Save and recall the state of other widgets.
property type default description

state#

filter#

 string|
array		 "" Only save state from widgets contained in widgets designated by id. If empty, the whole session's state is saved. Switchers are always ignored.
- widget id string
- array of widget id strings

saveLabel#

 string "Save" Label for save button

loadLabel#

 string "Load" Label for load button

horizontal#

 boolean false Set to true to display buttons horizontally

value#

value#

 object|
string		 "" - object: "widget_id": VALUE pairs
- string: "save" (trigger save action), "load" (trigger load action) or "" (reset value)



Note: the widget's actual value is never "save" or "load", it's either an empty string or an object.
Store other widgets' values and recall them.
property type default description

switcher#

linkedWidgets#

 string|
array		 "" - String: a widget's id whose state changes will be stored
- Array: a list of widget id string

horizontal#

 boolean false Set to true to display values horizontally

values#

 array|
object		 {
 "Value 1": 1,
 "Value 2": 2
}		 Each item represents a bank that stores the values from the widgets listed in linkedWidgets
- Array of possible values to switch between : [1,2,3]
- Object of "label":value pairs. Numeric labels must be prepended or appended with a white space (or any other non-numeric character) otherwise the order of the values won't be kept
Switcher with linear interpolation slider.
property type default description

crossfader#

linkedWidgets#

 string|
array		 "" - String: a widget's id whose state changes will be stored
- Array: a list of widget id string

horizontal#

 boolean false Set to true to display values horizontally

Inputs#

Text input.
property type default description

input#

vertical#

 boolean false Set to true to display the text vertically

align#

 string "" Set to left or right to change text alignment (otherwise center)

unit#

 string "" Unit will be appended to the displayed widget's value (it doesn't affect osc messages)

editable#

 boolean true Set to false to make the input non-editable

asYouType#

 boolean false Set to true to make the input send its value at each keystroke
Keyboard binding.
property type default description

keys#

binding#

 string|
array		 "" Key combo string or array of strings (see KeyboardJS documentation)

keydown#

 string "" This property is evaluated each time the key combo is pressed and defines the widget's own value. Formulas are given extras variables in this context:
- key: pressed key name (usefull for handling multiple keys with a single keys widget, lowercased when referencing a character key)
- code: pressed key code name (full list)
- ctrl: control key state
- alt: alt key state
- shift: shift key state
- meta: command/windows key state

keyup#

 string "" Same as keydown, but evaluated when releasing the key combo

repeat#

 boolean true Set to false to prevent keydown repeats when holding the key combo pressed
Evaluates a script each time it receives a value.
property type default description

script#

condition#

 string 1 When the widget receives a value, if this property return a falsy value, the script property won't be evaluated. If it's non-falsy, it will be evaluated normally. Formulas are given one extra variable in this context:
- value: the value received by the widget

script#

 string "" This property is evaluated each time the widget receives a value* if condition is non-falsy. Formulas are given extras variables in this context:
- value: value received by the widget
- id: id of the widget that triggered the script
- send(target, address, arg1, arg2, ...): function for sending osc messages (ignores the script's targets and the server's defaults unless target is false; ignores the script's preArgs)
- set(id, value): function for setting a widget's value
- get(id): function for getting a widget's value (dynamic equivalent of @{id})
- getProp(id, property): function for getting a widget's property value ((dynamic equivalent of @{id.property})
- httpGet(url, callback): function for making http requests (asynchronous "GET" request and local urls only)



* Note: value or linkId properties can be used to receive other widgets' values. The value property must actually change to trigger the execution, where linked widgets via linkId can submit the same value over and over and trigger the execution
Device motion/orientation sensor.
property type default description

gyroscope#

frequency#

 number 30 Value update frequency (updates per seconds)

normalize#

 boolean true Normalize gravity related values

compass#

 boolean false Set to true to return the orientation values with respect to the actual north direction of the world instead of the head direction of the device

screenAdjusted#

 boolean false Set to true to return screen adjusted values

value#

value#

 object "" The gyroscope's value is an object containing multiple values, which can be used by other widgets via the property maths syntax
- value.do.alpha: deviceorientation event alpha
- value.do.beta: deviceorientation event beta
- value.do.gamma: deviceorientation event gamma
- value.do.absolute: deviceorientation event absolute
- value.dm.x: devicemotion event acceleration x
- value.dm.y: devicemotion event acceleration y
- value.dm.z: devicemotion event acceleration z
- value.dm.gx: devicemotion event accelerationIncludingGravity x
- value.dm.gy: devicemotion event accelerationIncludingGravity y
- value.dm.gz: devicemotion event accelerationIncludingGravity z
- value.dm.alpha: devicemotion event rotationRate alpha
- value.dm.beta: devicemotion event rotationRate beta
- value.dm.gamma: devicemotion event rotationRate gamma
File/Folder selector (server-side).
property type default description

input#

directory#

 string "auto" Default browsing directory

extension#

 string "*" Only display files with this extension

hidePath#

 boolean false Set to true to only display the filename (the whole path will still be used as value)

allowDir#

 boolean false Allow selecting a folder (by pressing "open" when no file is selected)