Set of simple controllers for rapid prototyping
npm install [--save] @ircam/basic-controllers
- DragAndDrop
- Group
- NumberBox
- SelectButtons
- SelectList
- Slider
- Text
- Title
- Toggle
- TriggerButtons
Controllers can be instanciated individually:
import * as controllers from '@ircam/basic-controllers';
// instanciate individual components
const slider = new controllers.Slider({
label: 'My Slider',
min: 20,
max: 1000,
step: 1,
default: 537,
unit: 'Hz',
size: 'large',
container: '#container',
callback: (value) => console.log(value),
});
Or through a factory using a json
definition:
import * as controllers from '@ircam/basic-controllers';
const definitions = [
{
id: 'my-slider',
type: 'slider',
label: 'My Slider',
size: 'large',
min: 0,
max: 1000,
step: 1,
default: 253,
}, {
id: 'my-group',
type: 'group',
label: 'Group',
default: 'opened',
elements: [
{
id: 'my-number',
type: 'number-box',
default: 0.4,
min: -1,
max: 1,
step: 0.01,
}
],
}
];
const controls = controllers.create('#container', definitions);
controls.addListener((id, value) => console.log(id, value));
- basic-controllers
- static
- inner
- ~DragAndDrop
- new DragAndDrop(config)
- .value :
Object.<String, (AudioBuffer|JSON)>
- ~Group
- new Group(config)
- .value :
String
- .state :
String
- ~NumberBox
- new NumberBox(config)
- .value :
Number
- ~SelectButtons
- new SelectButtons(config)
- .value :
String
- .index :
Number
- ~SelectList
- new SelectList(config)
- .value :
String
- .index :
Number
- ~Slider
- new Slider(config)
- .value :
Number
- ~Text
- new Text(config)
- .value :
String
- ~Title
- ~Toggle
- new Toggle(config)
- .value :
Boolean
- .active :
Boolean
- ~TriggerButtons
- new TriggerButtons(config)
- .value :
String
- .index :
String
- ~DragAndDrop
Change the theme of the controllers, currently 3 themes are available:
'light'
(default)'grey'
'dark'
Kind: static method of basic-controllers
Param | Type | Description |
---|---|---|
theme | String |
Name of the theme. |
Drag and drop zone for audio files returning AudioBuffer
s and/or JSON
descriptor data.
Kind: inner class of basic-controllers
- ~DragAndDrop
- new DragAndDrop(config)
- .value :
Object.<String, (AudioBuffer|JSON)>
Param | Type | Default | Description |
---|---|---|---|
config | Object |
Override default parameters. | |
[config.label] | String |
'Drag and drop audio files' |
Label of the controller. |
[config.labelProcess] | String |
'process...' |
Label of the controller while audio files are decoded. |
[config.audioContext] | AudioContext |
|
Optionnal audio context to use in order to decode audio files. |
[config.container] | String | Element | basic-controller~Group |
|
Container of the controller. |
[config.callback] | function |
|
Callback to be executed when the value changes. |
Example
import * as controllers from 'basic-controllers';
const dragAndDrop = new controllers.DragAndDrop({
container: '#container',
callback: (results) => console.log(results),
});
Get the last results
Kind: instance property of DragAndDrop
Read only: true
Group of controllers.
Kind: inner class of basic-controllers
- ~Group
- new Group(config)
- .value :
String
- .state :
String
Param | Type | Default | Description |
---|---|---|---|
config | Object |
Override default parameters. | |
config.label | String |
Label of the group. | |
[config.default] | 'opened' | 'closed' |
'opened' |
Default state of the group. |
[config.container] | String | Element | basic-controller~Group |
|
Container of the controller. |
Example
import * as controllers from 'basic-controllers';
// create a group
const group = new controllers.Group({
label: 'Group',
default: 'opened',
container: '#container'
});
// insert controllers in the group
const groupSlider = new controllers.Slider({
label: 'Group Slider',
min: 20,
max: 1000,
step: 1,
default: 200,
unit: 'Hz',
size: 'large',
container: group,
callback: (value) => console.log(value),
});
const groupText = new controllers.Text({
label: 'Group Text',
default: 'text input',
readonly: false,
container: group,
callback: (value) => console.log(value),
});
State of the group ('opened'
or 'closed'
).
Kind: instance property of Group
Alias for value
.
Kind: instance property of Group
Number Box controller
Kind: inner class of basic-controllers
- ~NumberBox
- new NumberBox(config)
- .value :
Number
Param | Type | Default | Description |
---|---|---|---|
config | Object |
Override default parameters. | |
config.label | String |
Label of the controller. | |
[config.min] | Number |
0 |
Minimum value. |
[config.max] | Number |
1 |
Maximum value. |
[config.step] | Number |
0.01 |
Step between consecutive values. |
[config.default] | Number |
0 |
Default value. |
[config.container] | String | Element | basic-controller~Group |
|
Container of the controller. |
[config.callback] | function |
|
Callback to be executed when the value changes. |
Example
import * as controllers from 'basic-controllers';
const numberBox = new controllers.NumberBox({
label: 'My Number Box',
min: 0,
max: 10,
step: 0.1,
default: 5,
container: '#container',
callback: (value) => console.log(value),
});
Current value of the controller.
Kind: instance property of NumberBox
List of buttons with state.
Kind: inner class of basic-controllers
- ~SelectButtons
- new SelectButtons(config)
- .value :
String
- .index :
Number
Param | Type | Default | Description |
---|---|---|---|
config | Object |
Override default parameters. | |
config.label | String |
Label of the controller. | |
[config.options] | Array |
|
Values of the drop down list. |
[config.default] | Number |
|
Default value. |
[config.container] | String | Element | basic-controller~Group |
|
Container of the controller. |
[config.callback] | function |
|
Callback to be executed when the value changes. |
Example
import * as controllers from 'basic-controllers';
const selectButtons = new controllers.SelectButtons({
label: 'SelectButtons',
options: ['standby', 'run', 'end'],
default: 'run',
container: '#container',
callback: (value, index) => console.log(value, index),
});
Current value.
Kind: instance property of SelectButtons
Current option index.
Kind: instance property of SelectButtons
Drop-down list controller.
Kind: inner class of basic-controllers
- ~SelectList
- new SelectList(config)
- .value :
String
- .index :
Number
Param | Type | Default | Description |
---|---|---|---|
config | Object |
Override default parameters. | |
config.label | String |
Label of the controller. | |
[config.options] | Array |
|
Values of the drop down list. |
[config.default] | Number |
|
Default value. |
[config.container] | String | Element | basic-controller~Group |
|
Container of the controller. |
[config.callback] | function |
|
Callback to be executed when the value changes. |
Example
import * as controllers from 'basic-controllers';
const selectList = new controllers.SelectList({
label: 'SelectList',
options: ['standby', 'run', 'end'],
default: 'run',
container: '#container',
callback: (value, index) => console.log(value, index),
});
Current value.
Kind: instance property of SelectList
Current option index.
Kind: instance property of SelectList
Slider controller.
Kind: inner class of basic-controllers
- ~Slider
- new Slider(config)
- .value :
Number
Param | Type | Default | Description |
---|---|---|---|
config | Object |
Override default parameters. | |
config.label | String |
Label of the controller. | |
[config.min] | Number |
0 |
Minimum value. |
[config.max] | Number |
1 |
Maximum value. |
[config.step] | Number |
0.01 |
Step between consecutive values. |
[config.default] | Number |
0 |
Default value. |
[config.unit] | String |
'' |
Unit of the value. |
[config.size] | 'small' | 'medium' | 'large' |
'medium' |
Size of the slider. |
[config.container] | String | Element | basic-controller~Group |
|
Container of the controller. |
[config.callback] | function |
|
Callback to be executed when the value changes. |
Example
import * as controllers from 'basic-controllers';
const slider = new controllers.Slider({
label: 'My Slider',
min: 20,
max: 1000,
step: 1,
default: 537,
unit: 'Hz',
size: 'large',
container: '#container',
callback: (value) => console.log(value),
});
Current value.
Kind: instance property of Slider
Text controller.
Kind: inner class of basic-controllers
- ~Text
- new Text(config)
- .value :
String
Param | Type | Default | Description |
---|---|---|---|
config | Object |
Override default parameters. | |
config.label | String |
Label of the controller. | |
[config.default] | Array |
'' |
Default value of the controller. |
[config.readonly] | Array |
false |
Define if the controller is readonly. |
[config.container] | String | Element | basic-controller~Group |
|
Container of the controller. |
[config.callback] | function |
|
Callback to be executed when the value changes. |
Example
import * as controllers from 'basic-contollers';
const text = new controllers.Text({
label: 'My Text',
default: 'default value',
readonly: false,
container: '#container',
callback: (value) => console.log(value),
});
Current value.
Kind: instance property of Text
Title.
Kind: inner class of basic-controllers
Param | Type | Default | Description |
---|---|---|---|
config | Object |
Override default parameters. | |
config.label | String |
Label of the controller. | |
[config.container] | String | Element | basic-controller~Group |
|
Container of the controller. |
Example
import * as controller from 'basic-controllers';
const title = new controllers.Title({
label: 'My Title',
container: '#container'
});
On/Off controller.
Kind: inner class of basic-controllers
- ~Toggle
- new Toggle(config)
- .value :
Boolean
- .active :
Boolean
Param | Type | Default | Description |
---|---|---|---|
config | Object |
Override default parameters. | |
config.label | String |
Label of the controller. | |
[config.active] | Array |
false |
Default state of the toggle. |
[config.container] | String | Element | basic-controller~Group |
|
Container of the controller. |
[config.callback] | function |
|
Callback to be executed when the value changes. |
Example
import * as controllers from 'basic-controllers';
const toggle = new controllers.Toggle({
label: 'My Toggle',
active: false,
container: '#container',
callback: (active) => console.log(active),
});
Value of the toggle
Kind: instance property of Toggle
Alias for value
.
Kind: instance property of Toggle
List of buttons without state.
Kind: inner class of basic-controllers
- ~TriggerButtons
- new TriggerButtons(config)
- .value :
String
- .index :
String
Param | Type | Default | Description |
---|---|---|---|
config | Object |
Override default parameters. | |
config.label | String |
Label of the controller. | |
[config.options] | Array |
|
Options for each button. |
[config.container] | String | Element | basic-controller~Group |
|
Container of the controller. |
[config.callback] | function |
|
Callback to be executed when the value changes. |
Example
import * as controllers from 'basic-controllers';
const triggerButtons = new controllers.TriggerButtons({
label: 'My Trigger Buttons',
options: ['value 1', 'value 2', 'value 3'],
container: '#container',
callback: (value, index) => console.log(value, index),
});
Last triggered button value.
Kind: instance property of TriggerButtons
Read only: true
Last triggered button index.
Kind: instance property of TriggerButtons
Read only: true
BSD-3-Clause