Trackpad

live example

Explore the API in the live example.

api reference

Trackpad(name[, parent])

The trackpad control widget. Inherits all API from the [Widget] ../components/widget.html component. The trackpad is constrained to a rectangle defined by the width/height and the margins (it fills the container as much as the margins allow). The scale ticks are implemented using BottomAxis and LeftAxis , making all the API for those component available for the trackpad.

Parameters

Name	Type	Description
name	string	Name of the widget. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

Trackpad.callback(callback)

Binds a callback to the trackpad. Note that this is called every time the handle is dragged (you may want to debounce it).

Parameters

Name	Type	Description
callback	Function	Callback to bind when the handle is dragged. The current values are passed as two separate parameters.

Returns

Trackpad

Reference to the Trackpad API.

Examples

// Print current values to console.
const trackpad = dalian.Trackpad('my-control')
  .callback((x, y) => console.log(x, y))
  .render()

// Remove callback.
trackpad.callback()
  .render()

Trackpad.color([color])

Sets the color of the trackpad.

Parameters

Name	Type	Description
color	string	optionalColor to set. Default value is `grey`.

Returns

Trackpad

Reference to the Trackpad API.

Examples

// Set trackpad color.
const trackpad = dalian.Trackpad('my-control')
  .color('royalblue')
  .render()

// Reset color.
trackpad.color()
  .render()

Trackpad.guide([on])

Turns on/off guiding lines.

Parameters

Name	Type	Description
on	boolean	optionalWhether to turn on guiding lines. Default value is `false`.

Returns

Trackpad

Reference to the Trackpad API.

Examples

// Show guides.
const trackpad = dalian.Trackpad('my-control')
  .guide(true)
  .render()

// Turn off guides.
trackpad.guide()
  .render()

Trackpad.range()

Sets the X range.

Returns

Trackpad

Reference to the Trackpad API.

Examples

// Set X range.
const trackpad = dalian.Trackpad('my-control')
  .xRange([1, 2])
  .render()

Trackpad.range()

Sets the Y range.

Returns

Trackpad

Reference to the Trackpad API.

Examples

// Set Y range.
const trackpad = dalian.Trackpad('my-control')
  .yRange([3, 4])
  .render()

Trackpad.values(values)

Sets the trackpad coordinates.

Parameters

Name	Type	Description
values	number[]	Array containing the X and Y coordinates.

Returns

Trackpad

Reference to the Trackpad API.

Examples

// Set both values.
const trackpad = dalian.Trackpad('my-control')
  .value([1, 2])
  .render()