Properties reference
Common#
Generic properties#
Properties shared by all widgets
property | type | default | description |
---|---|---|---|
type# |
string |
"auto" |
Widget type |
id# |
string |
"auto" |
Widgets sharing the same id will act as clones and update each other's value(s) without sending extra osc messages. |
visible# |
boolean |
true |
Set to false to hide the widget. |
interaction# |
boolean |
true |
Set to false to disable pointer interactions. |
property | type | default | description |
---|---|---|---|
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" |
Widget width |
height# |
number |percentage |
"auto" |
Widget height |
expand# |
boolean |number |
"false" |
If parent's layout is vertical or horizontal , set this to true to stretch the widget to use available space automatically. |
property | type | default | description |
---|---|---|---|
colorText# |
string |
"auto" |
Text color. Set to "auto" to inherit from parent widget. |
colorWidget# |
string |
"auto" |
Widget's default accent color. Set to "auto" to inherit from parent widget. |
colorStroke# |
string |
"auto" |
Stroke color. Set to "auto" to use colorWidget . |
colorFill# |
string |
"auto" |
Fill color. Set to "auto" to use colorWidget . |
alphaStroke# |
number |
"auto" |
Stroke color opacity. |
alphaFillOff# |
number |
"auto" |
Fill color opacity (off). |
alphaFillOn# |
number |
"auto" |
Fill color opacity (on). |
lineWidth# |
number |
"auto" |
Stroke width. |
padding# |
number |
"auto" |
Inner spacing. |
html# |
string |
"" |
Custom html content to be inserted in the widget (before the widget's content). The code is automatically wrapped in <div class="html"></div> 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 Allowed attributes: <*>: class, style, title <img>: src, width, height |
css# |
string |
"" |
CSS rules. See documentation. Available css variables: - --color-background : colorBg - --color-widget : colorWidget - --color-fill : colorFill - --color-stroke : colorStroke - --color-text : colorText - --widget-padding : padding - --line-width : lineWidth - --alpha-fill-on : alphaFillOn - --alpha-fill-off : alphaFillOff - --alpha-stroke : alphaStroke |
property | type | default | description |
---|---|---|---|
value# |
* |
"" |
Define the widget's value depending on other widget's values / properties using the advanced property syntax |
default# |
* |
"" |
If set, the widget will be initialized with this value when the session is loaded. |
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) |
script# |
script |
"" |
Script executed whenever the widget's value updates. See documentation. |
property | type | default | description |
---|---|---|---|
address# |
string |
"auto" |
OSC address for sending / receiving messages, it must start with a slash (/ )By default ("auto"), the widget's id is used: /widget_id |
preArgs# |
* |array |
"" |
A value or array of values that will be prepended to the OSC messages. |
typeTags# |
string |
"" |
Defines the osc argument types, one letter per argument (including preArgs) - If empty, the types are infered automatically from the values (with numbers casted to floats by default) - If there are more arguments than type letters, the last type is used for the extra arguments See http://opensoundcontrol.org/spec-1_0 for existing typetags |
decimals# |
integer |
2 |
Defines the number of decimals to send. |
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:portA", "ip:portB"] - If midi is enabled, targets can be midi:device_name - If no target is set, messages can still be sent if the server has default targets |
ignoreDefaults# |
boolean |
false |
Set to true to ignore the server's default targets |
bypass# |
boolean |
false |
Set to true to prevent the widget from sending any osc message |
Basics#
On / off button.
property | type | default | description |
---|---|---|---|
css# |
string |
"" |
CSS rules. See documentation. Available css variables: - --color-background : colorBg - --color-widget : colorWidget - --color-fill : colorFill - --color-stroke : colorStroke - --color-text : colorText - --widget-padding : padding - --line-width : lineWidth - --alpha-fill-on : alphaFillOn - --alpha-fill-off : alphaFillOff - --alpha-stroke : alphaStroke - --color-text-on : colorTextOn |
colorTextOn# |
string |
"auto" |
Defines the widget's text color when active. |
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)- Icons can be transformed with the following suffixes: .flip-[horizontal|vertical|both] , .rotate-[90|180|270] , .spin , .pulse . Example: ^play.flip-horizontal |
vertical# |
boolean |
false |
Set to true to display the text vertically |
wrap# |
boolean |
false |
Set to true to wrap long lines automatically. |
property | type | default | description |
---|---|---|---|
on# |
* |
1 |
Set to null to send send no argument in the osc message |
off# |
* |
0 |
Set to null to send send no argument in the osc message. Must be different from on . |
mode# |
string |
"toggle" |
Interraction mode: - toggle (classic on/off switch)- push (press & release)- tap (no release)Choices: toggle , push , tap |
doubleTap# |
boolean |
false |
Set to true to make the button require a double tap to be pushed instead of a single tap |
switch#
Value selector button.
property | type | default | description |
---|---|---|---|
css# |
string |
"" |
CSS rules. See documentation. Available css variables: - --color-background : colorBg - --color-widget : colorWidget - --color-fill : colorFill - --color-stroke : colorStroke - --color-text : colorText - --widget-padding : padding - --line-width : lineWidth - --alpha-fill-on : alphaFillOn - --alpha-fill-off : alphaFillOff - --alpha-stroke : alphaStroke - --color-text-on : colorTextOn |
colorTextOn# |
string |
"auto" |
Defines the widget's text color when active. |
layout# |
string |
"vertical" |
Defines how items should be laid out Choices: vertical , horizontal , grid |
gridTemplate# |
string |number |
"" |
If layout is grid , can be either a number of columns of a value css grid-template definition. |
property | type | default | description |
---|---|---|---|
values# |
array |object |
{ |
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 |
mode# |
string |
"tap" |
Interraction mode: - tap : activates when the pointer is down but prevents further scrolling- slide : same as tap but allows sliding between values- click : activates upon click only and allows further scrolling- flip : selects the next value upon click regardless of where the widget is touchedChoices: tap , slide , click , flip |
dropdown#
Native dropdown menu.
property | type | default | description |
---|---|---|---|
label# |
string |boolean |
"auto" |
Displayed text (defaults to current value). Keywords %key and %value will be replaced by the widget's selected key/value. |
icon# |
boolean |
"true" |
Set to false to hide the dropdown icon |
align# |
string |
"center" |
Set to left or right to change text alignment (otherwise center)Choices: center , left , right |
property | type | default | description |
---|---|---|---|
values# |
array |object |
{ |
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 |
Drag and drop menu with a circular or grid layout.
property | type | default | description |
---|---|---|---|
size# |
number |array |
200 |
- If layout is circular : diameter (in px)- Else: square size or [width, height] array |
ignoreTabs# |
boolean |
false |
Set to true to allow the menu overflowing its tab ancestors. |
property | type | default | description |
---|---|---|---|
label# |
string |boolean |
"auto" |
Displayed text (defaults to current value). Keywords %key and %value will be replaced by the widget's selected key/value. |
icon# |
boolean |
"true" |
Set to false to hide the dropdown icon |
textAlign# |
string |
"center" |
Set to left or right to change text alignment (otherwise center)Choices: center , left , right |
menuAlignV# |
string |
"center" |
Set to top or bottom to change menu alignment (otherwise center)Choices: center , top , bottom |
menuAlignH# |
string |
"center" |
Set to left or right to change menu alignment (otherwise center)Choices: center , left , right |
layout# |
string |
"circular" |
Defines whether the menu's layout should be rendered in a circle or in a box Choices: circular , horizontal , vertical , grid |
gridTemplate# |
string |number |
"" |
If layout is grid , can be either a number of columns of a value css grid-template definition. |
property | type | default | description |
---|---|---|---|
toggle# |
boolean |
false |
Set to true to make the menu stay opened after mouse/touch release |
doubleTap# |
boolean |
false |
Set to true to make the menu require a double tap to be opened instead of a single tap |
values# |
array |object |
[ |
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 |
weights# |
array |
"" |
Array of number defining the weights of each value in values Ignored when mode is grid |
input#
Text input.
property | type | default | description |
---|---|---|---|
align# |
string |
"center" |
Set to left or right to change text alignment (otherwise center)Choices: center , left , right |
unit# |
string |
"" |
Unit will be appended to the displayed widget's value (it doesn't affect osc messages) |
property | type | default | description |
---|---|---|---|
asYouType# |
boolean |
false |
Set to true to make the input send its value at each keystroke |
validation# |
string |
"" |
Regular expression: if the submitted value doesn't match the regular expression, it will be reset to the last valid value. If leading and trailing slashes are omitted, they will be added automatically and the flag will be set to "gm" Examples: - ^[0-9]*$ accepts digits only, any number of them- /^[a-zs]{0,10}$/i accept between 0 and 10 alphabetic characters and spaces (case insensitive) |
file#
File/Folder selector (server-side).
property | type | default | description |
---|---|---|---|
align# |
string |
"center" |
Set to left or right to change text alignment (otherwise center)Choices: center , left , right |
hidePath# |
boolean |
false |
Set to true to only display the filename (the whole path will still be used as value) |
mode# |
string |
"open" |
File browser mode Choices: open , save |
Containers#
panel#
Widgets or Tabs container.
property | type | default | description |
---|---|---|---|
colorBg# |
string |
"auto" |
Panel background color. Set to "auto" to inherit from parent widget. |
layout# |
string |
"default" |
Defines how children are laid out. Choices: default , vertical , horizontal , grid |
justify# |
string |
"start" |
If layout is vertical or horizontal , defines how widgets should be justified.Choices: start , end , center , space-around , space-between |
gridTemplate# |
string |number |
"" |
If layout is grid , can be either a number of columns of a value css grid-template definition. |
contain# |
boolean |
true |
If layout is vertical or horizontal , prevents children from overflowing the panel. |
scroll# |
boolean |
true |
Set to false to disable scrollbars |
innerPadding# |
boolean |
true |
Set to false to make the padding property apply only between children and not at the container's inner boundaries. |
verticalTabs# |
boolean |
false |
Set to true to display for vertical tab layout |
property | type | default | description |
---|---|---|---|
variables# |
* |
"@{parent.variables}" |
Defines one or more arbitrary variables that can be inherited by children widgets |
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 |
property | type | default | description |
---|---|---|---|
value# |
integer |
"" |
Defines currently selected tab in the widget A tab can be opened only by setting its parent's value |
modal#
A toggle button that opens a popup panel. Cannot contain tabs directly.
property | type | default | description |
---|---|---|---|
popupWidth# |
number |percentage |
"80%" |
Modal popup's size |
popupHeight# |
number |percentage |
"80%" |
Modal popup's size |
popupLeft# |
number |percentage |
"auto" |
Modal popup's position |
popupTop# |
number |percentage |
"auto" |
Modal popup's position |
relative# |
boolean |
false |
Set to true to make the modal's position relative to the button's position. |
ignoreTabs# |
boolean |
false |
Set to true to allow the modal overflowing its tab ancestors. |
property | type | default | description |
---|---|---|---|
colorBg# |
string |
"auto" |
Panel background color. Set to "auto" to inherit from parent widget. |
layout# |
string |
"default" |
Defines how children are laid out. Choices: default , vertical , horizontal , grid |
justify# |
string |
"start" |
If layout is vertical or horizontal , defines how widgets should be justified.Choices: start , end , center , space-around , space-between |
gridTemplate# |
string |number |
"" |
If layout is grid , can be either a number of columns of a value css grid-template definition. |
contain# |
boolean |
true |
If layout is vertical or horizontal , prevents children from overflowing the panel. |
scroll# |
boolean |
true |
Set to false to disable scrollbars |
innerPadding# |
boolean |
true |
Set to false to make the padding property apply only between children and not at the container's inner boundaries. |
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)- Icons can be transformed with the following suffixes: .flip-[horizontal|vertical|both] , .rotate-[90|180|270] , .spin , .pulse . Example: ^play.flip-horizontal |
popupLabel# |
string |boolean |
"auto" |
Alternative label for the modal popup |
popupPadding# |
number |
"auto" |
Modal's inner spacing. |
property | type | default | description |
---|---|---|---|
variables# |
* |
"@{parent.variables}" |
Defines one or more arbitrary variables that can be inherited by children widgets |
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 |
doubleTap# |
boolean |
false |
Set to true to make the modal require a double tap to open instead of a single tap |
property | type | default | description |
---|---|---|---|
value# |
integer |
"" |
Defines the modal's state:0 for closed, 1 for opened |
clone#
Widget replication with overridable properties.
matrix#
Generic matrix for creating rows/columns of widgets.
property | type | default | description |
---|---|---|---|
colorBg# |
string |
"auto" |
Panel background color. Set to "auto" to inherit from parent widget. |
layout# |
string |
"horizontal" |
Defines how children are laid out. Choices: horizontal , vertical , grid |
justify# |
string |
"start" |
If layout is vertical or horizontal , defines how widgets should be justified.Choices: start , end , center , space-around , space-between |
gridTemplate# |
string |number |
"" |
If layout is grid , can be either a number of columns of a value css grid-template definition. |
contain# |
boolean |
true |
If layout is vertical or horizontal , prevents children from overflowing the panel. |
scroll# |
boolean |
true |
Set to false to disable scrollbars |
innerPadding# |
boolean |
true |
Set to false to make the padding property apply only between children and not at the container's inner boundaries. |
property | type | default | description |
---|---|---|---|
variables# |
* |
"@{parent.variables}" |
Defines one or more arbitrary variables that can be inherited by children widgets |
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 |
widgetType# |
string |
"button" |
Defines the type of the widgets in the matrix |
quantity# |
number |
4 |
Defines the number of widgets in the matrix |
start# |
integer |
0 |
First widget's index |
props# |
object |
{} |
Defines a set of property to override the widgets' defaults. JS{{}} and #{} blocks in this field are resolved with an extra variable representing each widget's index: $ (e.g. #{$} )Advanced syntax blocks (@{}, OSC{}, JS{{}} and #{}) are resolved at the matrix' scope (ie @{this.variables} returns the matrix' variables property) Note: by default, the widgets inherit from the matrix' id and osc properties (id and address are appended with /$ ) |
property | type | default | description |
---|---|---|---|
value# |
integer |
"" |
Defines currently selected tab in the widget A tab can be opened only by setting its parent's value |
keyboard#
Piano keyboard.
property | type | default | description |
---|---|---|---|
colorWhite# |
string |
"auto" |
White keys color. |
colorBlack# |
string |
"auto" |
Black keys color. |
property | type | default | description |
---|---|---|---|
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 |
off# |
* |
0 |
Set to null to send send no argument in the osc message |
velocity# |
boolean |
false |
Set to true to map the touch coordinates between off (top) and on (bottom). Requires on and off to be numbers |
mode# |
string |
"push" |
Interraction mode: - push (press & release)- toggle (on/off switches)- tap (no release)Choices: push , toggle , tap |
patchbay#
Connect inputs to outputs.
property | type | default | description |
---|---|---|---|
css# |
string |
"" |
The inputs/ouputs width can be adjusted by using the .nodes selector:.nodes { width: 25% } |
property | type | default | description |
---|---|---|---|
inputs# |
array |object |
[ |
- 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 keptPatchbay 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 |
[ |
List of output values the inputs can connect to (see inputs ). |
root#
Main (unique) container
property | type | default | description |
---|---|---|---|
colorBg# |
string |
"auto" |
Panel background color. Set to "auto" to inherit from parent widget. |
layout# |
string |
"default" |
Defines how children are laid out. Choices: default , vertical , horizontal , grid |
justify# |
string |
"start" |
If layout is vertical or horizontal , defines how widgets should be justified.Choices: start , end , center , space-around , space-between |
gridTemplate# |
string |number |
"" |
If layout is grid , can be either a number of columns of a value css grid-template definition. |
contain# |
boolean |
true |
If layout is vertical or horizontal , prevents children from overflowing the panel. |
scroll# |
boolean |
true |
Set to false to disable scrollbars |
innerPadding# |
boolean |
true |
Set to false to make the padding property apply only between children and not at the container's inner boundaries. |
verticalTabs# |
boolean |
false |
Set to true to display for vertical tab layout |
property | type | default | description |
---|---|---|---|
variables# |
* |
"@{parent.variables}" |
Defines one or more arbitrary variables that can be inherited by children widgets |
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 |
property | type | default | description |
---|---|---|---|
value# |
integer |
"" |
Defines currently selected tab in the widget A tab can be opened only by setting its parent's value |
tab#
Tabbed panel widget
property | type | default | description |
---|---|---|---|
colorBg# |
string |
"auto" |
Panel background color. Set to "auto" to inherit from parent widget. |
layout# |
string |
"default" |
Defines how children are laid out. Choices: default , vertical , horizontal , grid |
justify# |
string |
"start" |
If layout is vertical or horizontal , defines how widgets should be justified.Choices: start , end , center , space-around , space-between |
gridTemplate# |
string |number |
"" |
If layout is grid , can be either a number of columns of a value css grid-template definition. |
contain# |
boolean |
true |
If layout is vertical or horizontal , prevents children from overflowing the panel. |
scroll# |
boolean |
true |
Set to false to disable scrollbars |
innerPadding# |
boolean |
true |
Set to false to make the padding property apply only between children and not at the container's inner boundaries. |
verticalTabs# |
boolean |
false |
Set to true to display for vertical tab layout |
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)- Icons can be transformed with the following suffixes: .flip-[horizontal|vertical|both] , .rotate-[90|180|270] , .spin , .pulse . Example: ^play.flip-horizontal |
property | type | default | description |
---|---|---|---|
variables# |
* |
"@{parent.variables}" |
Defines one or more arbitrary variables that can be inherited by children widgets |
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 |
property | type | default | description |
---|---|---|---|
value# |
integer |
"" |
Defines currently selected tab in the widget A tab can be opened only by setting its parent's value |
Frames#
frame#
Embed a page in a frame (local network only).
property | type | default | description |
---|---|---|---|
value# |
string |
"" |
External web page URL. |
svg#
Svg parser.
property | type | default | description |
---|---|---|---|
svg# |
string |
"" |
Svg xml definition (will be wrapped in a < svg /> element) |
html#
Simple HTML parser.
image#
Load a image (url or base64-encoded).
property | type | default | description |
---|---|---|---|
size# |
string |
"cover" |
CSS background-size |
position# |
string |
"center" |
CSS background-position |
repeat# |
string |
"no-repeat" |
CSS background-repeat |
property | type | default | description |
---|---|---|---|
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 |
property | type | default | description |
---|---|---|---|
value# |
string |
"" |
- File url or path (relative to the session file location by default, falling back to absolute path)- Base64 encoded image : data:image/... |
Graphs#
plot#
XY coordinates plot.
property | type | default | description |
---|---|---|---|
dots# |
boolean |
false |
Draw dots on the line |
bars# |
boolean |
false |
Set to true to use draw bars instead (disables logScaleX and forces x axis even spacing) |
pips# |
boolean |
true |
Set to false to hide the scale |
property | type | default | description |
---|---|---|---|
filters# |
array |
"" |
Each item must be an object with the following properties - type : string ("highpass", "highshelf", "lowpass", "lowshelf", "peak", "bandpass" or "notch", default: "peak")- freq : number (filter's resonant frequency, default: 1000)- q : number (Q factor, default: 1)- gain : number (default: 0)- on : boolean (default: true)See https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode |
pips# |
boolean |
true |
Set to false to hide the scale |
rangeX# |
object |
{ |
Defines the min and max values for the x axis (in Hz, logarithmic scale) |
rangeY# |
object |
{ |
Defines the min and max values for the y axis (in dB) |
origin# |
number |boolean |
"auto" |
Defines the y axis origin. Set to false to disable it |
property | type | default | description |
---|---|---|---|
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 |
eq#
Draws logarithmic frequency response from an array of filter objects.
property | type | default | description |
---|---|---|---|
dots# |
boolean |
false |
Draw dots on the line |
bars# |
boolean |
false |
Set to true to use draw bars instead (disables logScaleX and forces x axis even spacing) |
pips# |
boolean |
true |
Set to false to hide the scale |
property | type | default | description |
---|---|---|---|
filters# |
array |
"" |
Each item must be an object with the following properties - type : string ("highpass", "highshelf", "lowpass", "lowshelf", "peak", "bandpass" or "notch", default: "peak")- freq : number (filter's resonant frequency, default: 1000)- q : number (Q factor, default: 1)- gain : number (default: 0)- on : boolean (default: true)See https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode |
pips# |
boolean |
true |
Set to false to hide the scale |
rangeX# |
object |
{ |
Defines the min and max values for the x axis (in Hz, logarithmic scale) |
rangeY# |
object |
{ |
Defines the min and max values for the y axis (in dB) |
origin# |
number |boolean |
"auto" |
Defines the y axis origin. Set to false to disable it |
property | type | default | description |
---|---|---|---|
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 |
visualizer#
Display its value over time.
property | type | default | description |
---|---|---|---|
dots# |
boolean |
false |
Draw dots on the line |
bars# |
boolean |
false |
Set to true to use draw bars instead (disables logScaleX and forces x axis even spacing) |
pips# |
boolean |
true |
Set to false to hide the scale |
property | type | default | description |
---|---|---|---|
filters# |
array |
"" |
Each item must be an object with the following properties - type : string ("highpass", "highshelf", "lowpass", "lowshelf", "peak", "bandpass" or "notch", default: "peak")- freq : number (filter's resonant frequency, default: 1000)- q : number (Q factor, default: 1)- gain : number (default: 0)- on : boolean (default: true)See https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode |
pips# |
boolean |
true |
Set to false to hide the scale |
rangeX# |
object |
{ |
Defines the min and max values for the x axis (in Hz, logarithmic scale) |
rangeY# |
object |
{ |
Defines the min and max values for the y axis |
origin# |
number |
"auto" |
Defines the y axis origin. Set to false to disable it |
duration# |
number |
1 |
Defines visualization duration in seconds |
framerate# |
number |
30 |
Defines visualization framerate |
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. |
freeze# |
boolean |
false |
Set to true to freeze current view and ignore incoming values |
property | type | default | description |
---|---|---|---|
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 |
Indicators#
led#
Intensity display.
property | type | default | description |
---|---|---|---|
borderRadius# |
string |
"" |
Css border-radius property. |
property | type | default | description |
---|---|---|---|
mode# |
string |
"intensity" |
Defines how value is interpreted (see value )Choices: intensity , color |
range# |
object |
{ |
Value range |
alphaRange# |
object |
{ |
Alpha range (if mode is color ) |
logScale# |
boolean |
false |
If mode is intensity , set to true to use logarithmic scale. |
property | type | default | description |
---|---|---|---|
value# |
number |array |string |
"" |
If mode is intensity :- Number : intensity between range.min and range.max If mode is color :- Array : [r, g, b] (r , g and b between range.min and range.max )- Array : [r, g, b, alpha] (alpha between alphaRange.min and alphaRange.max )- String : CSS color |
text#
Display text.
Pads#
xy#
Two-dimensional slider.
property | type | default | description |
---|---|---|---|
pointSize# |
integer |
20 |
Defines the points' size |
ephemeral# |
boolean |
false |
When set to true , the point will be drawn only while touched. |
pips# |
boolean |
true |
Set to false to hide the scale |
property | type | default | description |
---|---|---|---|
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 |
rangeX# |
object |
{ |
Defines the min and max values for the x axis |
rangeY# |
object |
{ |
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. Set to -1 for exponential scale. |
logScaleY# |
boolean |number |
false |
Set to true to use logarithmic scale for the y axis. Set to -1 for exponential scale. |
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 |
rgb#
Color picker with optional alpha slider.
property | type | default | description |
---|---|---|---|
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 |
{ |
Defines the widget's output scale. |
alpha# |
boolean |
false |
Set to true to enable alpha channel |
rangeAlpha# |
object |
{ |
Defines the widget's output scale for the alpha channel. |
multixy#
Multi-point XY pad.
property | type | default | description |
---|---|---|---|
pointSize# |
integer |
20 |
Defines the points' size |
ephemeral# |
boolean |
false |
When set to true , the points will be drawn only chile touched. |
pips# |
boolean |
true |
Set to false to hide the scale |
property | type | default | description |
---|---|---|---|
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'] ) |
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 |
rangeX# |
object |
{ |
Defines the min and max values for the x axis |
rangeY# |
object |
{ |
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. Set to -1 for exponential scale. |
logScaleY# |
boolean |number |
false |
Set to true to use logarithmic scale for the y axis. Set to -1 for exponential scale. |
sensitivity# |
number |
1 |
Defines the pad's sensitivity when snap is false |
Sliders#
fader#
Vertical / horizontal slider.
property | type | default | description |
---|---|---|---|
css# |
string |
"" |
CSS rules. See documentation. Available css variables: - --color-background : colorBg - --color-widget : colorWidget - --color-fill : colorFill - --color-stroke : colorStroke - --color-text : colorText - --widget-padding : padding - --line-width : lineWidth - --alpha-fill-on : alphaFillOn - --alpha-fill-off : alphaFillOff - --alpha-stroke : alphaStroke - --alpha-pips : alphaPips - --alpha-pips-text : alphaPipsText - --knob-size : knobSize |
design# |
string |
"default" |
Design style Choices: default , round , compact |
knobSize# |
number |
"auto" |
Fader knob size |
horizontal# |
boolean |
false |
Set to true to display the fader horizontally |
pips# |
boolean |
false |
Set to true to show range breakpoints (ignored if design is compact ) |
dashed# |
boolean |array |
false |
Set to true to display a dashed gauge. Can be set as an array of two numbers : [dash_size, gap_size] |
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'] , |
property | type | default | description |
---|---|---|---|
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 |
{ |
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 neededExample: ( {min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}} ) |
logScale# |
boolean |number |
false |
Set to true to use logarithmic scale. Set to -1 for exponential scale. |
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 |
origin# |
number |
"auto" |
Defines the starting point's value of the fader's gauge |
knob#
Rotative knob slider.
property | type | default | description |
---|---|---|---|
css# |
string |
"" |
CSS rules. See documentation. Available css variables: - --color-background : colorBg - --color-widget : colorWidget - --color-fill : colorFill - --color-stroke : colorStroke - --color-text : colorText - --widget-padding : padding - --line-width : lineWidth - --alpha-fill-on : alphaFillOn - --alpha-fill-off : alphaFillOff - --alpha-stroke : alphaStroke - --alpha-pips : alphaPips - --alpha-pips-text : alphaPipsText |
design# |
string |
"default" |
Design style Note: "solid" design uses "colorStroke" for the central knob color. Choices: default , solid , line |
pips# |
boolean |
false |
Set to true to show the scale's breakpoints |
dashed# |
boolean |array |
false |
Set to true to display a dashed gauge. Can be set as an array of two numbers : [dash_size, gap_size] |
angle# |
number |
270 |
Defines the angle's width of the knob, in degrees |
property | type | default | description |
---|---|---|---|
mode# |
string |
"vertical" |
- circular : relative move in circular motion- snap : snap to touch position and move in vertical motion- vertical : relative move in vertical motionChoices: vertical , circular , snap |
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 |
{ |
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 neededExample: ( {min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}} ) |
logScale# |
boolean |number |
false |
Set to true to use logarithmic scale. Set to -1 for exponential scale. |
sensitivity# |
number |
1 |
Defines the knob's sensitivity when mode is not snap |
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 |
origin# |
number |
"auto" |
Defines the starting point's value of the knob's gauge |
encoder#
A knob that sends a relative direction infomation instead of an absolute value.
property | type | default | description |
---|---|---|---|
css# |
string |
"" |
CSS rules. See documentation. Available css variables: - --color-background : colorBg - --color-widget : colorWidget - --color-fill : colorFill - --color-stroke : colorStroke - --color-text : colorText - --widget-padding : padding - --line-width : lineWidth - --alpha-fill-on : alphaFillOn - --alpha-fill-off : alphaFillOff - --alpha-stroke : alphaStroke - --alpha-pips : alphaPips - --alpha-pips-text : alphaPipsText |
property | type | default | description |
---|---|---|---|
mode# |
string |
"circular" |
- circular : relative move in circular motion- snap : snap to touch position and move in vertical motion- vertical : relative move in vertical motionChoices: circular , snap , vertical |
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 |
{ |
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 neededExample: ( {min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}} ) |
logScale# |
boolean |number |
false |
Set to true to use logarithmic scale. Set to -1 for exponential scale. |
sensitivity# |
number |
1 |
When set between 0 and 1, reduces the encoder's verbosity |
ticks# |
number |
"" |
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 |
property | type | default | description |
---|---|---|---|
script# |
script |
"" |
Script executed whenever the widget's value updates. See documentation. Additionnal variables: - locals.speed : encoder's speed (reduce sensitivity to increase averaging ) |
range#
A fader with two heads for setting a range.
property | type | default | description |
---|---|---|---|
css# |
string |
"" |
CSS rules. See documentation. Available css variables: - --color-background : colorBg - --color-widget : colorWidget - --color-fill : colorFill - --color-stroke : colorStroke - --color-text : colorText - --widget-padding : padding - --line-width : lineWidth - --alpha-fill-on : alphaFillOn - --alpha-fill-off : alphaFillOff - --alpha-stroke : alphaStroke - --alpha-pips : alphaPips - --alpha-pips-text : alphaPipsText - --knob-size : knobSize |
design# |
string |
"default" |
Design style Choices: default , round , compact |
knobSize# |
number |
"auto" |
Fader knob size |
horizontal# |
boolean |
false |
Set to true to display the fader horizontally |
pips# |
boolean |
false |
Set to true to show range breakpoints (ignored if design is compact ) |
dashed# |
boolean |array |
false |
Set to true to display a dashed gauge. Can be set as an array of two numbers : [dash_size, gap_size] |
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'] , |
property | type | default | description |
---|---|---|---|
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 |
{ |
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 neededExample: ( {min:{"-inf": 0}, "50%": 0.25, max: {"+inf": 1}} ) |
logScale# |
boolean |number |
false |
Set to true to use logarithmic scale. Set to -1 for exponential scale. |
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 |
Scripts#
script#
Evaluates a script each time it receives a value.
property | type | default | description |
---|---|---|---|
event# |
string |
"value" |
Define which events trigger the script's execution. Choices: value , keyboard |
script# |
script |
"" |
Script executed whenever the widget's receives the defined event. See documentation. |
keyBinding# |
string |array |
"" |
Key combo string or array of strings (see KeyboardJS documentation) |
keyRepeat# |
boolean |
true |
Set to false to prevent keydown repeats when holding the key combo pressed |
keyType# |
string |
"keydown" |
Determines which key event trigger the script's execution Choices: keydown , keyup , both |
variable#
Receives / stores a value, to be used in scripts (using the get function) or in properties (using the @{} syntax).