CTRL

Generic user interface components designed to interact with synthesizers or other realtime applications.

Download

Builds

Example

Navigate to CTRL

Installation

npm i @rnd7/ctrl

Include

Via script tag

<script src="node_modules/@rnd7/ctrl/dist/ctrl-min.js"></script>

Using require

constctrl=require('@rnd7/ctrl')

Using import

import{Rotary}from'@rnd7/ctrl'

Usage

newRotary({selector:'#rotary'}).on("change",e=>console.log(e.detail.value))

Defaults

{observeSize: false,// poll for parent size changessizeFromParent: true,// fit within parent boundseventMode: VALUE,// define when change events are triggeredspeed: .01,// value per framevalue: 0.,// 0-1initialChangeEvent: true,// trigger change event when listener addedkeepTarget: false,// value setter does not overwrite target disabled: false,// non interactiveneutralAngle: -HALF_PI,// track orientationborderRadius: 2,borderColor: 'rgb(12,12,12)',borderFocusColor: 'rgb(0,0,80)',backgroundColor: 'rgb(36,36,36)',steps: 0,// 2-n to specify stepsstepGap: TAU/360,// stepper only. gap between segmentstrackSize: 12,// width of the tracktrackSector: TAU*.8,// track span as circular sectortrackSectorColor: 'rgb(66,66,66)',valueSector: TAU/48,// size of value indicatorvalueSectorColor: 'rgb(255,255,255)',targetSector: TAU/48,// size of target indicatortargetSectorColor: 'rgba(170,170,255,.5)',}

API

These method are primarily used by the component itself but you might also call those intentionally.

startDrag(e)drag(e)stopDrag(e)focus(e)blur(e)

Register event listeners. Listen for the "change" event to react on user interaction.

on(...args)addEventListener(...args)off(...args)removeEventListener(...args)

Assign mutliple values at once. Pass one or more Objects as args. Those values are guaranteed not interfere.

assign(...args)

Getters and Setters

setselector(val)getselector()setparent(val)getparent()setinitialChangeEvent(val)getinitialChangeEvent()seteventMode(val)geteventMode()setvalue(val)getvalue()settrackSector(val)gettrackSector()settarget(val)gettarget()setkeepTarget(val)getkeepTarget()setsteps(val)getsteps()setstep(val)// virtual, affecting valuegetstep()// virtual, returns transformed valuesettargetStep(val)// virtual, affecting targetgettargetStep()// virtual, returns transformed targetsetneutralAngle(val)getneutralAngle()setsizeFromParent(val)getsizeFromParent()setwidth(val)getwidth()setheight(val)getheight()setspeed(val)getspeed()settargetSector(val)gettargetSector()setvalueSector(val)getvalueSector()setstepGap(val)getstepGap()setdisabled(val)getdisabled()setobserveSize(val)getobserveSize()setborderRadius(val)getborderRadius()settrackSize(val)gettrackSize()setvalueSectorColor(val)getvalueSectorColor()settrackSectorColor(val)gettrackSectorColor()setborderColor(val)getborderColor()setborderFocusColor(val)getborderFocusColor()setbackgroundColor(val)getbackgroundColor()settargetSectorColor(val)gettargetSectorColor()getdomElement()// getter only

Force resize and draw

fitParent()redraw()

Event Modes

exportconstNONE="none"// no events firedexportconstVALUE="value"// only on value changesexportconstTARGET="target"// only on target changesexportconstSTEP="step"// only on step changesexportconstCOMPLETE="complete"// only when value reaches targetexportconstALWAYS="always"// while user interacts

Development

You need git and npm.

Get the sources

git clone https://github.com/rnd7/ctrl.git

Install development devDependencies such as gulp and webpack.

npm install

Build example and watch changes (no hot reload)

npm run watch

Open example in your favorite browser.

docs/index.html

Production build

npm run build

License

See the LICENSE file for software license rights and limitations (MIT).