Generic user interface components designed to interact with synthesizers or other realtime applications.
Navigate to CTRL
npm i @rnd7/ctrl
Via script tag
<script src="node_modules/@rnd7/ctrl/dist/ctrl-min.js"></script>
Using require
const ctrl = require('@rnd7/ctrl')
Using import
import { Rotary } from '@rnd7/ctrl'
new Rotary({ selector:'#rotary' }).on("change", e => console.log(e.detail.value))
{
observeSize: false, // poll for parent size changes
sizeFromParent: true, // fit within parent bounds
eventMode: VALUE, // define when change events are triggered
speed: .01, // value per frame
value: 0., // 0-1
initialChangeEvent: true, // trigger change event when listener added
keepTarget: false, // value setter does not overwrite target
disabled: false, // non interactive
neutralAngle: -HALF_PI, // track orientation
borderRadius: 2,
borderColor: 'rgb(12,12,12)',
borderFocusColor: 'rgb(0,0,80)',
backgroundColor: 'rgb(36,36,36)',
steps: 0, // 2-n to specify steps
stepGap: TAU / 360, // stepper only. gap between segments
trackSize: 12, // width of the track
trackSector: TAU * .8, // track span as circular sector
trackSectorColor: 'rgb(66,66,66)',
valueSector: TAU / 48, // size of value indicator
valueSectorColor: 'rgb(255,255,255)',
targetSector: TAU / 48, // size of target indicator
targetSectorColor: 'rgba(170,170,255,.5)',
}
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
set selector(val)
get selector()
set parent(val)
get parent()
set initialChangeEvent(val)
get initialChangeEvent()
set eventMode(val)
get eventMode()
set value(val)
get value()
set trackSector(val)
get trackSector()
set target(val)
get target()
set keepTarget(val)
get keepTarget()
set steps(val)
get steps()
set step(val) // virtual, affecting value
get step() // virtual, returns transformed value
set targetStep(val) // virtual, affecting target
get targetStep() // virtual, returns transformed target
set neutralAngle(val)
get neutralAngle()
set sizeFromParent(val)
get sizeFromParent()
set width(val)
get width()
set height(val)
get height()
set speed(val)
get speed()
set targetSector(val)
get targetSector()
set valueSector(val)
get valueSector()
set stepGap(val)
get stepGap()
set disabled(val)
get disabled()
set observeSize(val)
get observeSize()
set borderRadius(val)
get borderRadius()
set trackSize(val)
get trackSize()
set valueSectorColor(val)
get valueSectorColor()
set trackSectorColor(val)
get trackSectorColor()
set borderColor(val)
get borderColor()
set borderFocusColor(val)
get borderFocusColor()
set backgroundColor(val)
get backgroundColor()
set targetSectorColor(val)
get targetSectorColor()
get domElement() // getter only
Force resize and draw
fitParent()
redraw()
Event Modes
export const NONE = "none" // no events fired
export const VALUE = "value" // only on value changes
export const TARGET = "target" // only on target changes
export const STEP = "step" // only on step changes
export const COMPLETE = "complete" // only when value reaches target
export const ALWAYS = "always" // while user interacts
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
See the LICENSE file for software license rights and limitations (MIT).