Knob

Knob

A rotary knob for selecting numerical values. The knob value can be changed by clicking and dragging, scrolling with a mouse wheel or trackpad or the use of the keyboard (arrow keys, page up/down, home/end).

Constructor

# new Knob(parent, x, y, label, value, min, max, defaultHandler)

Constructor
Parameters:
Name Type Description
parent HTMLElement The element to add this knob to.
x number The x position of the knob. Default 0.
y number The y position of the knob. Default 0.
label string The text label of the knob. Default empty string.
value number The initial value of the knob. Default 0.
min number The minimum value of the knob. Default 0.
max number The maximum value of the knob. Default 100.
defaultHandler function A function that will handle the "change" event.
Source:
Example 
const panel = new Panel(document.body, 20, 20, 200, 200);
new Knob(panel, 20, 20, "Knob", 50, 0, 100, event => console.log(event.target.value));

Extends

Classes

Knob

Members

# (static) decimals

Default decimals of all Knobs.
Source:

# (static) labelsSwapped

Default labelsSwapped of all Knobs.
Source:

# (static) sensitivity

Default sensitivity of all Knobs.
Source:

# (static) size

Default size of all Knobs.
Source:

# decimals

Sets and gets the number of decimals of precision to be used for the knob. This will effect what is shown in the value label as well as the value property of the knob. A decimals value of 0 will display integers only. Negative decimals will round to the nearest power of 10.
Source:

# enabled

Sets and gets whether or not this component is enabled. Non-enabled components will be faded out and not respond to events.
Overrides:
Source:

# height

Sets and gets the height of this component.
Overrides:
Source:

# label

Gets and sets the text of the text label of the knob.
Source:

# labelsSwapped

Gets and sets whether the text label and value label will be swapped. If true, the text label will be on the bottom and the value label will be on the top.
Source:

# max

Gets and sets the maximum value of the knob.
Source:

# min

Gets and sets the minimum value of the knob.
Source:

# sensitivity

Gets and sets the sensitivity of the knob when clicking and dragging to set a value. Default is 100, which means you'll have to drag the mouse 100 pixels to make the knob value go from its minimum value to its maximum. A higher sensitivity means that the knob will rotate a smaller amount for the same amount of vertical mouse movement.
Source:

# value

Gets and sets the value of the knob.
Source:

# width

Sets and gets the width of this component.
Overrides:
Source:

# x

Sets and gets the x position of this component.
Overrides:
Source:

# y

Sets and gets the y position of this component.
Overrides:
Source:

Methods

# addHandler(handler)

Adds a handler function for the "change" event on this knob.
Parameters:
Name Type Description
handler function A function that will handle the "change" event.
Source:
Returns:
This instance, suitable for chaining.

# bind(target, prop)

Automatically changes the value of a property on a target object with the main value of this component changes.
Parameters:
Name Type Description
target object The target object to change.
prop string The string name of a property on the target object.
Source:
Returns:
This instance, suitable for chaining.

# getDecimals()

Source:
Returns:
the number of decimals of precision that will be used.

# getEnabled()

Gets whether the component is enabled.
Overrides:
Source:
Returns:
Whether or not the component is enabled.

# getHeight()

Gets the height of the component.
Overrides:
Source:
Returns:
The height of the component.

# getLabel()

Source:
Returns:
the text in the label.

# getLabelsSwapped()

Source:
Returns:
whether the text and value labels are swapped.

# getMax()

Source:
Returns:
the minimum value of the knob.

# getMin()

Source:
Returns:
the minimimum value of the knob.

# getSensitivity()

Source:
Returns:
the sensitivity of the knob.

# getValue()

Source:
Returns:
the current value.

# getWidth()

Gets the width of the component.
Overrides:
Source:
Returns:
The width of the component.

# getX()

Gets the x position of the component.
Overrides:
Source:
Returns:
The x position of the component.

# getY()

Gets the y position of the component.
Overrides:
Source:
Returns:
The y position of the component.

# move(x, y)

Moves the component to a specified position.
Parameters:
Name Type Description
x number The new x position of the component.
y number The new y position of the component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# rotate(rad)

Rotates the component.
Parameters:
Name Type Description
rad number The number of radians to rotate the component by.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# rotateDeg(deg)

Rotates the component.
Parameters:
Name Type Description
deg number The number of degrees to rotate the component by.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setDecimals(decimals)

Sets the number of decimals of precision to be used for the knob. This will effect what is shown in the value label as well as the value property of the knob. A decimals value of 0 will display integers only. Negative decimals will round to the nearest power of 10.
Parameters:
Name Type Description
decimals number The decimals of precision to use.
Source:
Returns:
This instance, suitable for chaining.

# setEnabled(enabled)

Sets the enabled state of this component.
Parameters:
Name Type Description
enabled boolean Whether or not the component will be enabled.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setHeight(height)

Sets the height of the knob container. Of course the knob itself will always be round, so it will be sized according to the minimum of width and height if they are different, and centered within the container rectangle.
Parameters:
Name Type Description
height number The height of the knob.
Overrides:
Source:
Returns:
This instance.

# setLabel(label)

Sets the label of this knob.
Parameters:
Name Type Description
label string The label to set on this knob.
Source:
Returns:
This instance, suitable for chaining.

# setLabelsSwapped(swapped)

Sets whether the text label and value label will be swapped. If true, the text label will be on the bottom and the value label will be on the top.
Parameters:
Name Type Description
swapped boolean Whether the labels will be swapped.
Source:
Returns:
This instance, suitable for chaining.

# setLabelSwapped(swapped)

Sets whether the text and value labels will be swapped (value on top, text on bottom).
Parameters:
Name Type Description
swapped boolean Whether the labels will be swapped.
Source:
Returns:
This instance, suitable for chaining.

# setMax(max)

Sets the maximum value of this knob.
Parameters:
Name Type Description
max number The maximum value of this knob.
Source:
Returns:
This instance, suitable for chaining.

# setMin(min)

Sets the minimum value of this knob.
Parameters:
Name Type Description
min number The minimum value of this knob.
Source:
Returns:
This instance, suitable for chaining.

# setSensitivity(sensitivity)

Sets the mouse drag sensitivity.
Parameters:
Name Type Description
sensitivity number How many pixels of mouse motion are required to move the value between min and max.
Source:
Returns:
This instance, suitable for chaining.

# setSize(w, h)

Sizes the component.
Parameters:
Name Type Description
w number The new width of the component.
h number The new height of the component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setValue(value)

Sets the value of this knob.
Parameters:
Name Type Description
value number The value of this knob.
Source:
Returns:
This instance, suitable for chaining.

# setValueMinMax(value, min, max)

Sets the value, minimum and maximum of this knob.
Parameters:
Name Type Description
value number The value of this knob.
min number The minimum value of this knob.
max number The maximum value of this knob.
Source:
Returns:
This instance, suitable for chaining.

# setWidth(width)

Sets the width of the knob container. Of course the knob itself will always be round, so it will be sized according to the minimum of width and height if they are different, and centered within the container rectangle.
Parameters:
Name Type Description
width number the width (and height) of the knob.
Overrides:
Source:
Returns:
This instance.

# setX(x)

Sets the x position of this component.
Parameters:
Name Type Description
x number The x position of this component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setY(y)

Sets the y position of this component.
Parameters:
Name Type Description
y number The y position of this component.
Overrides:
Source:
Returns:
this instance, suitable for chaining.