Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ircam/basic-controllers

Package Overview
Dependencies
Maintainers
2
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ircam/basic-controllers

Set of simple controllers for rapid prototyping

  • 1.0.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

Basic Controllers

Set of simple controllers for rapid prototyping

examples

Install

npm install [--save] @ircam/basic-controllers

Examples

components
factory

Available components

  • DragAndDrop
  • Group
  • NumberBox
  • SelectButtons
  • SelectList
  • Slider
  • Text
  • Title
  • Toggle
  • TriggerButtons

Usage

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));

API

basic-controllers

basic-controllers.setTheme(theme)

Change the theme of the controllers, currently 3 themes are available:

  • 'light' (default)
  • 'grey'
  • 'dark'

Kind: static method of basic-controllers

ParamTypeDescription
themeStringName of the theme.

basic-controllers~DragAndDrop

Drag and drop zone for audio files returning AudioBuffers and/or JSON descriptor data.

Kind: inner class of basic-controllers

new DragAndDrop(config)
ParamTypeDefaultDescription
configObjectOverride 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]AudioContextOptionnal audio context to use in order to decode audio files.
[config.container]String | Element | basic-controller~GroupContainer of the controller.
[config.callback]functionCallback 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),
});

dragAndDrop.value : Object.<String, (AudioBuffer|JSON)>

Get the last results

Kind: instance property of DragAndDrop
Read only: true

basic-controllers~Group

Group of controllers.

Kind: inner class of basic-controllers

new Group(config)
ParamTypeDefaultDescription
configObjectOverride default parameters.
config.labelStringLabel of the group.
[config.default]'opened' | 'closed''opened'Default state of the group.
[config.container]String | Element | basic-controller~GroupContainer 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),
});

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

basic-controllers~NumberBox

Number Box controller

Kind: inner class of basic-controllers

new NumberBox(config)
ParamTypeDefaultDescription
configObjectOverride default parameters.
config.labelStringLabel of the controller.
[config.min]Number0Minimum value.
[config.max]Number1Maximum value.
[config.step]Number0.01Step between consecutive values.
[config.default]Number0Default value.
[config.container]String | Element | basic-controller~GroupContainer of the controller.
[config.callback]functionCallback 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),
});

numberBox.value : Number

Current value of the controller.

Kind: instance property of NumberBox

basic-controllers~SelectButtons

List of buttons with state.

Kind: inner class of basic-controllers

new SelectButtons(config)
ParamTypeDefaultDescription
configObjectOverride default parameters.
config.labelStringLabel of the controller.
[config.options]ArrayValues of the drop down list.
[config.default]NumberDefault value.
[config.container]String | Element | basic-controller~GroupContainer of the controller.
[config.callback]functionCallback 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),
});

selectButtons.value : String

Current value.

Kind: instance property of SelectButtons

selectButtons.index : Number

Current option index.

Kind: instance property of SelectButtons

basic-controllers~SelectList

Drop-down list controller.

Kind: inner class of basic-controllers

new SelectList(config)
ParamTypeDefaultDescription
configObjectOverride default parameters.
config.labelStringLabel of the controller.
[config.options]ArrayValues of the drop down list.
[config.default]NumberDefault value.
[config.container]String | Element | basic-controller~GroupContainer of the controller.
[config.callback]functionCallback 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),
});

selectList.value : String

Current value.

Kind: instance property of SelectList

selectList.index : Number

Current option index.

Kind: instance property of SelectList

basic-controllers~Slider

Slider controller.

Kind: inner class of basic-controllers

new Slider(config)
ParamTypeDefaultDescription
configObjectOverride default parameters.
config.labelStringLabel of the controller.
[config.min]Number0Minimum value.
[config.max]Number1Maximum value.
[config.step]Number0.01Step between consecutive values.
[config.default]Number0Default value.
[config.unit]String''Unit of the value.
[config.size]'small' | 'medium' | 'large''medium'Size of the slider.
[config.container]String | Element | basic-controller~GroupContainer of the controller.
[config.callback]functionCallback 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),
});

slider.value : Number

Current value.

Kind: instance property of Slider

basic-controllers~Text

Text controller.

Kind: inner class of basic-controllers

new Text(config)
ParamTypeDefaultDescription
configObjectOverride default parameters.
config.labelStringLabel of the controller.
[config.default]Array''Default value of the controller.
[config.readonly]ArrayfalseDefine if the controller is readonly.
[config.container]String | Element | basic-controller~GroupContainer of the controller.
[config.callback]functionCallback 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),
});

text.value : String

Current value.

Kind: instance property of Text

basic-controllers~Title

Title.

Kind: inner class of basic-controllers

new Title(config)
ParamTypeDefaultDescription
configObjectOverride default parameters.
config.labelStringLabel of the controller.
[config.container]String | Element | basic-controller~GroupContainer of the controller.

Example

import * as controller from 'basic-controllers';

const title = new controllers.Title({
  label: 'My Title',
  container: '#container'
});

basic-controllers~Toggle

On/Off controller.

Kind: inner class of basic-controllers

new Toggle(config)
ParamTypeDefaultDescription
configObjectOverride default parameters.
config.labelStringLabel of the controller.
[config.active]ArrayfalseDefault state of the toggle.
[config.container]String | Element | basic-controller~GroupContainer of the controller.
[config.callback]functionCallback 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),
});

toggle.value : Boolean

Value of the toggle

Kind: instance property of Toggle

toggle.active : Boolean

Alias for value.

Kind: instance property of Toggle

basic-controllers~TriggerButtons

List of buttons without state.

Kind: inner class of basic-controllers

new TriggerButtons(config)
ParamTypeDefaultDescription
configObjectOverride default parameters.
config.labelStringLabel of the controller.
[config.options]ArrayOptions for each button.
[config.container]String | Element | basic-controller~GroupContainer of the controller.
[config.callback]functionCallback 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),
});

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

License

BSD-3-Clause

FAQs

Package last updated on 13 Feb 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc