Instructions

Creating a widget

The easiest way to start is to download the entire repository and look into the demo folder where you can see and fiddle with working examples.

Widget options

Here’s an example how you would use all of the provided options for your widget (you can specify them in any order):

var options = {
	canvas: document.getElementById('canvasId'),
	spritesheetUrl: '../src/img/decapitator_pot_med.png',
	bgImgUrl: '../src/img/decapitator_background_md.png',
	bounds: {
		left: 8,
		right: 92
	}
};

canvas (required) - Specifies the <canvas> element that you want to instantiate the widget on. The <canvas> can be brought in by using document.getElementById('canvasId').

spritesheetUrl (required) - URL pointing to the sprite sheet from which to draw the knobs.

bgImgUrl - URL pointing to the background image file. In our case the background image contains dial plate (you can see it in demo2.html).

verticalDrag - This is set to true if you want the user to control the knobs by clicking and dragging the mouse up or down. The default value is false, which means the knobs are controlled by rotation. If you’re using smaller knobs it’s probably better to set verticalDrag to true.

sensitivity - If you’re using verticalDrag you can specify this option. It determines how easy or hard it is to move the knobs by dragging the mouse. The default sensitivity value is 3. If you want the knobs to rotate more easily set it to a lower number and vice-versa.

bounds - Sets the limits on how far to the left or to the right the knob can be turned. This is only a visual thing, the value of the knob still ranges from 0 to 100.

left     - left bound  (min. and default values are 0)
right    - right bound (max. and default values are 100)

Widget methods

.getValue()

Returns the potentiometer value. (Potentiometer’s value ranges from 0 to 100).

.setValue(value)

Sets the potentiometer’s value and positions it properly.

value - Integer value from 0 to 100.

Widget events

'potValueChanged'

Whenever the pot’s value is changed it will emit this event.

'potDoubleClick'

This event is emitted if the user double-clicks a pot widget (the double-click must be performed precisely on the knob, not outside of it or near it).

You can listen to these events like this:

document.addEventListener('potDoubleClick', function(event) {
	var sourceValue    = event.srcValue;
	var eventEmitterId = event.srcId;
}, false);

The event object itself comes with 2 (relevant) properties - srcValue and srcId.

event.srcValue - gives us the numeric value (0-100) of the knob that’s emitting the event.

event.srcId - gives us the id of the <canvas> element whose knob is emitting the event.