JogDial.js

A JavaScript plugin for jog dial controls.

JogDial is a simple JavaScript plugin that help you to create dial style controller easily on the webpage.

Supported browsers and device

JogDial supports Chrome, Safari, FireFox, Internet Explorer 7+ and most of modern browsers include mobile device.

Features

• Does not require any other JavaScript library like jQuery.
• Cross-browser support (IE7+)
• Multi-touch support (you can control multiple number of JogDial elements at once in touch screen)
• DOM Events
• AMD Support (RequreJS)

Demo

Click here

Usage

Basics

Here is a basic example of JogDial.js initialization. This will start the JogDial in debug mode.

You must create the target element for the JogDial and setup the width and height property before the code start.

var el = document.getElementById('your_element');
var dial = JogDial(el, {debug: true});

You can change the setting by passing an options (array) in second argument.

var options = {debug: true, wheelSize: 90%, knobSize: 50%, minDegree: 0};
var dial = JogDial(el, options);

Styling

The easiest way to style the JogDial is adding background image to your target element and knob element created from JogDial script.

JodDial always return the knob id name append to the target element name you've created.

For an example, if you named the tag element id as "dial", then knob id will be "dial_knob".

#dial {
    width: 200px;
    height: 200px;
}

#dial_knob {
    // This is your knob style
}

You can add any additional elements inside of your target element and it won't interfere the JogDial function.

Options

Here is a list of options can be used on JogDial.

Options	Descriptions	Default
debug bool	Show debug overlay on the top of screen	false
touchMode string	Set the active touch area of JogDial control. 'knob' or 'wheel'	knob
knobSize int	Set the diameter of knob in percentage or pixel	30%
wheelSize int	Set the diameter of wheel in percentage or pixel	100%
zIndex int	Set the z-index of JogDial	9999
degreeStartAt int	Set the degree of wheel at start	0
minDegree int	Set the minimum degree of wheel rotation	null (infinite)
maxDegree int	Set the maximum degree of wheel rotation	null (infinite)

Events

Events can be added or removed with the on and off methods and those are chainable like a jQuery.

JogDial(el, {debug: true})
.on("mousemove", function(event){ console.log(event.target.rotation); })
.on("mouseup", function(event){ console.log(event.target.rotation); });

Event list

• mousedown
• mousemove
• mouseup

Event Data list from callback

event.target.rotation  {number}     total sum of rotated degree from the start.
event.target.degree    {number}     Current degree of circle in clock angle.

Triggering

You can change the angle of JogDial element by passing the number value to 'angle' function.

var dial = JogDial(el, {debug: true});
dial.angle(45); 
// This will change the JogDial degree to 45.

Copyright

Licensed under the MIT license