WebSynthUI

HTML5 UI components for synthesizer controls.

Installation

WebSynthUI requires interact.js.
Include src/vendor/interact/interact.js, src/js/web-synth-ui.js and src/css/web-synth-ui.css in your HTML document:

<script type="text/javascript" src="<path-to-web-synth-ui>/src/vendor/interact/interact.js"></script>
<script type="text/javascript" src="<path-to-web-synth-ui>/src/js/web-synth-ui.js"></script>
<link rel="stylesheet" type="text/css" href="<path-to-web-synth-ui>/src/css/web-synth-ui.css">

Usage

WebSynthUI currently provides three types of control: Knob, Segmented Switch and Toggle Switch.

Knob

HTML:

<div class="web-synth-ui knob" id="knob">
	<div class="handle"></div>
</div>

JavaScript:

var knob = new Knob(document.getElementById('knob'), {
	onUpdate: function(value) {
		// The current value is passed to the onUpdate function when the knob is turned.
	}
});

// Update the knob to display and send its current value (optional):
knob.update();

Options:

The Knob() constructor accepts several options:

var knob = Knob(document.getElementById('knob'), {
	minAngle: -135.0,
	maxAngle: 135.0,
	angle: -135.0,
	minValue: 0.0,
	maxValue: 1.0,
	value: 0.0,
	speed: 1.0,
	onUpdate: function(value) {
		...
	}
});

Options may also be provided as data attributes:

<div class="web-synth-ui knob" id="knob" 
	data-min-angle="-135" 
	data-max-angle="135" 
	data-angle="-135" 
	data-min-value="0" 
	data-max-value="1" 
	data-value="0" 
	data-speed="1">
	<div class="handle"></div>
</div>

Options passed to the constructor take precedence over options provided as data attributes. The following options are available:

minAngle (data-min-angle):

The angle that restricts the knob's rotation to the left (in degrees). Defaults to -135.0.

maxAngle (data-max-angle):

The angle that restricts the knob's rotation to the right (in degrees). Defaults to 135.0.

angle (data-angle):

The initial angle (in degrees). Defaults to -135.0.

minValue (data-min-value):

The value produced when the knob is rotated fully to the left. Defaults to 0.0.

maxValue (data-max-value):

The value produced when the knob is rotated fully to the right. Defaults to 1.0.

value (data-value):

The initial value. This will be converted to the appropriate angle and will take precedence over the angle option.

speed (data-speed):

The speed of rotation. Defaults to 1.0. When set to 1.0, the knob rotates 1 degree per pixel of mouse movement. Values below 1.0 slow the rotation down and make the knob feel less responsive but more accurate. Values above 1.0 speed the rotation up and make the knob feel more responsve but less accurate.

Segmented Switch

HTML:

<div class="web-synth-ui switch segmented-switch" id="segmented-switch">
	<div class="pole selected" data-value="1">1</div>
	<div class="pole" data-value="2">2</div>
	<div class="pole" data-value="3">3</div>
</div>

• Include one .pole element for each switch segment.
• Use .selected to indicate the segment that is selected by default.
• Each segment should have a data-value attribute to provide a value when the segment is selected.

JavaScript

var switch = new SegmentedSwitch(document.getElementById('segmented-switch'), {
	onUpdate: function(index, value) {
		// The selected segment index and value are passed to the onUpdate function when the switch is clicked.
	}
});

// Update the switch to display and send its current value (optional):
switch.update();

Toggle Switch

HTML:

<div class="web-synth-ui switch toggle-switch" id="toggle-switch">
	<div class="indicator"></div>
</div>

JavaScript

var switch = new ToggleSwitch(document.getElementById('toggle-switch'), {
	onUpdate: function(on) {
		// The switch state (boolean) is passed to the onUpdate function when the switch is clicked.
	}
});

// Update the switch to display and send its current state (optional):
switch.update();

View /demo/index.html for examples of the default behaviour for each control.

License

WebSynthUI is made available under the MIT License. See LICENSE.txt for details.

Credits

WebSynthUI was created by Tony Wallace.