Set of simple controllers for rapid prototyping
npm install @ircam/basic-controllers> Set of simple controllers for rapid prototyping
```
npm install [--save] @ircam/basic-controllers
> components
> factory
- DragAndDrop
- Group
- NumberBox
- SelectButtons
- SelectList
- Slider
- Text
- Title
- Toggle
- TriggerButtons
Controllers can be instanciated individually:
`js
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:
`js
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_
* .setTheme(theme)
* _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
* new Title(config)
* ~Toggle
* new Toggle(config)
* .value : Boolean
* .active : Boolean
* ~TriggerButtons
* new TriggerButtons(config)
* .value : String
* .index : String
(default)
- 'grey'
- 'dark'Kind: static method of basic-controllers
| Param | Type | Description |
| --- | --- | --- |
| theme | String | Name of the theme. |
$3
Drag and drop zone for audio files returning AudioBuffers and/or JSON
descriptor data.Kind: inner class of basic-controllers
* ~DragAndDrop
* new DragAndDrop(config)
* .value : Object.<String, (AudioBuffer\|JSON)>
#### new DragAndDrop(config)
| 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
`js
import * as controllers from 'basic-controllers';const dragAndDrop = new controllers.DragAndDrop({
container: '#container',
callback: (results) => console.log(results),
});
`
#### dragAndDrop.value : Object.<String, (AudioBuffer\|JSON)>
Get the last results
Kind: instance property of DragAndDrop
Read only: true
$3
Group of controllers.Kind: inner class of basic-controllers
* ~Group
* new Group(config)
* .value : String
* .state : String
#### new Group(config)
| 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
`js
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),
});
`
#### group.value : String
State of the group (
'opened' or 'closed').Kind: instance property of Group
#### group.state : String
Alias for
value.Kind: instance property of Group
$3
Number Box controllerKind: inner class of basic-controllers
* ~NumberBox
* new NumberBox(config)
* .value : Number
#### new NumberBox(config)
| 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
`js
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),
});
`
#### numberBox.value : Number
Current value of the controller.
Kind: instance property of NumberBox
$3
List of buttons with state.Kind: inner class of basic-controllers
* ~SelectButtons
* new SelectButtons(config)
* .value : String
* .index : Number
#### new SelectButtons(config)
| 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
`js
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),
});
`
#### selectButtons.value : String
Current value.
Kind: instance property of SelectButtons
#### selectButtons.index : Number
Current option index.
Kind: instance property of SelectButtons
$3
Drop-down list controller.Kind: inner class of basic-controllers
* ~SelectList
* new SelectList(config)
* .value : String
* .index : Number
#### new SelectList(config)
| 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
`js
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),
});
`
#### selectList.value : String
Current value.
Kind: instance property of SelectList
#### selectList.index : Number
Current option index.
Kind: instance property of SelectList
$3
Slider controller.Kind: inner class of basic-controllers
* ~Slider
* new Slider(config)
* .value : Number
#### new Slider(config)
| 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
`js
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),
});
`
#### slider.value : Number
Current value.
Kind: instance property of Slider
$3
Text controller.Kind: inner class of basic-controllers
* ~Text
* new Text(config)
* .value : String
#### new Text(config)
| 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
`js
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),
});
`
#### text.value : String
Current value.
Kind: instance property of Text
$3
Title.Kind: inner class of basic-controllers
#### new Title(config)
| 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
`js
import * as controller from 'basic-controllers';const title = new controllers.Title({
label: 'My Title',
container: '#container'
});
`
$3
On/Off controller.Kind: inner class of basic-controllers
* ~Toggle
* new Toggle(config)
* .value : Boolean
* .active : Boolean
#### new Toggle(config)
| 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
`js
import * as controllers from 'basic-controllers';const toggle = new controllers.Toggle({
label: 'My Toggle',
active: false,
container: '#container',
callback: (active) => console.log(active),
});
`
#### toggle.value : Boolean
Value of the toggle
Kind: instance property of Toggle
#### toggle.active : Boolean
Alias for
value.Kind: instance property of Toggle
$3
List of buttons without state.Kind: inner class of basic-controllers
* ~TriggerButtons
* new TriggerButtons(config)
* .value : String
* .index : String
#### new TriggerButtons(config)
| 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
`js
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),
});
``#### triggerButtons.value : String
Last triggered button value.
Kind: instance property of TriggerButtons
Read only: true
#### triggerButtons.index : String
Last triggered button index.
Kind: instance property of TriggerButtons
Read only: true
BSD-3-Clause