JogDial

import { JogDial } from 'pixi-silk/ui/dial';

Experimental

A jog wheel. Press anywhere on it and drag around the centre: the value follows the angle and keeps adding up over full turns. Drag further out for finer control. A flick keeps it spinning and it slows down by itself. Past min or max it stretches like a rubber band and springs back. With a step, the value clicks through detents and each one pulses on the ring. A tap on the right half steps up, on the left half steps down. The dial is centred on its position.

Experimental: the API may change in a minor release.

Extends#

Container

Constructors#

Constructor#

new JogDial(options?: JogDialOptions): JogDial;

Experimental

Parameters#

Parameter	Type
`options`	`JogDialOptions`

Returns#

JogDial

Overrides#

Container.constructor

Properties#

Property	Modifier	Type	Description	Defined in
`state`	`readonly`	`DialState`	`Experimental` Value and drag flag. Writing `value` glides the dial there without calling `onChange`.	ui/dial.ts:117

Accessors#

shownValue#

Get Signature#

get shownValue(): number;

Experimental

The value as drawn, including rubber-band stretch and unsnapped motion.

Returns

number

Methods#

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Stops the animation. Destroys children unless options says otherwise.

Parameters#

Parameter	Type
`options?`	`DestroyOptions`

Returns#

void

Overrides#

Container.destroy

dragTo()#

dragTo(x: number, y: number): void;

Experimental

Turns the dial towards a point in its own coordinates, as a drag does. Pointer events call this. Call it yourself for gamepads or tests.

Parameters#

Parameter	Type
`x`	`number`
`y`	`number`

Returns#

void

nudge()#

nudge(count: number): void;

Experimental

Moves by count steps (or a 24th of a turn without a step) and commits.

Parameters#

Parameter	Type
`count`	`number`

Returns#

void

release()#

release(): void;

Experimental

Lets go: a fast drag keeps spinning (inertia), then the dial settles and commits.

Returns#

void

tick()#

tick(dt: number): boolean;

Experimental

Advances the animation by dt seconds (only needed with ticker: null). Returns true while moving.

Parameters#

Parameter	Type
`dt`	`number`

Returns#

boolean