<xy-input>

A two axis input with scaling, ticks, units and multiple handles.

Envelope

Import

Import and register the <xy-input> custom element, upgrading any instances already in the DOM:

import XYInput from 'literal/documentation/templates/xy-input.js';

Use

The <xy-input> element may now be written in your HTML:

<xy-input value="0 0, 0.2 0.4 step 0.4 1.5 exponential 0.6 1 linear 0.8 0 target 0.4" ymin="-0.5" ymax="2" yticks xmin="0" xmax="1.4" xticks>
    Envelope
</xy-input>

Attributes

xmin ="0"

Value at upper limit of fader. Can interpret string values with recognised units, eg. "0dB" or "200Hz", or numbers.

xmax ="1"

Value at upper limit of fader. Can interpret string values with recognised units, eg. "0dB" or "200Hz", or numbers.

ymin ="0"

Value at upper limit of fader. Can interpret string values with recognised units, eg. "0dB" or "200Hz", or numbers.

ymax ="1"

Value at upper limit of fader. Can interpret string values with recognised units, eg. "0dB" or "200Hz", or numbers.

xscale ="linear"

Scale on the x axis. This is the name of a transform to be applied over the x range of the fader travel. Possible values are:

yscale ="linear"

Scale on the y axis. This is the name of a transform to be applied over the y range of the fader travel. Possible values are:

xstep

Step is either:

ystep

Step is either:

xticks

A space or comma separated list of values at which to display tick marks. Values may be listed with or without units, eg:

xticks="0 0.2 0.4 0.6 0.8 1"
xticks="-48dB -36dB -24dB -12dB 0dB"

yticks

A space or comma separated list of values at which to display tick marks. Values may be listed with or without units, eg:

yticks="0 0.2 0.4 0.6 0.8 1"
yticks="-48dB -36dB -24dB -12dB 0dB"

xdisplay

The units to display the value in. The output value and all ticks are displayed in this unit. Possible values are:

ydisplay

The units to display the value in. The output value and all ticks are displayed in this unit. Possible values are:

ordered

Boolean attribute. When set, data points may not overlap their neighbours, keeping the order of points on the x axis constant.

value ="0,0"

The initial value of the element. This is a series of space or comma separated x,y values such as:

value="0,0 1,0.5 2,0"

Values may also be given an optional label.

value="0,0 [First] 1,0 [Second] 2,0 [Last]"

An <xy-input> supports WebAudio automation data. Labels must be one of the types 'step', 'linear', 'exponential' or 'target'. The type 'target' must be followed by a fourth parameter duration:

value="0,0 step 1,0 linear 2,0 target 0.2"

Properties

.xmin

Value at upper limit of fader. Can interpret string values with recognised units, eg. "0dB" or "200Hz", or numbers.

.xmax

Value at upper limit of fader. Can interpret string values with recognised units, eg. "0dB" or "200Hz", or numbers.

.ymin

Value at upper limit of fader. Can interpret string values with recognised units, eg. "0dB" or "200Hz", or numbers.

.ymax

Value at upper limit of fader. Can interpret string values with recognised units, eg. "0dB" or "200Hz", or numbers.

.value

The value of the element. Returns an array of objects representing each point in the input. The array is a live object. Objects mutate in response to handles being moved, and handles are moved if the objects are mutated.

When submitted as part of a form the array is serialised to a formdata parameters.

.data

The value of the element as an array of objects representing the values of the input. The array is ‘live’ – objects mutate in response to moved handles, and handles move when the object values are set.

Events

"input"

Emitted from the element during the movement of an xy handle.

"change"

Emitted from the element when an xy handle has been moved.

Variables

--line-color

Colour of axis lines drawn on the graph background.

--line-color-x

Colour of vertical x-axis lines drawn on the graph background.

--line-color-y

Colour of horizontal y-axis lines drawn on the graph background.

--envelope-color

Colour of envelope plot. The envelope is rendered in WebAudio, and is an accurate reflection of a WebAudio automation curve.

--crosshair-color

Colour of crosshairs. Defaults to none.

Contribute

Support development: Sponsor

Built by Stephen Band for Cruncher logo Cruncher.

Documentation set in Euclid and Martian Mono. Fonts used for documentation not included as part of the license covering the use of xy-input.