jquery Knob

by mmansion

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="https://github.com/aterrien/jQuery-Knob/blob/master/js/jquery.knob.js"></script>
<body style="background-color:#000000;">
    
<div style="display:inline;background-color:#000000;">
     
<div style="display:inline;">
<input class="knob" data-thickness=".3" data-skin="tron" data-width="120" data-min="0" data-max="255"data-displayPrevious=true data-angleOffset=-125 data-angleArc=250 data-fgColor="#FF0000" value="255">
</div> 
       
<div style="width:100px;margin-top:0px;display:inline;">
<input class="knob" data-thickness=".3" data-skin="tron" data-width="120" data-min="0" data-max="255"data-displayPrevious=true data-angleOffset=-125 data-angleArc=250 data-fgColor="#00ff00" value="255">
</div>

<div style="width:120px;margin-top:0px;display:inline;">
<input class="knob" data-thickness=".3" data-skin="tron" data-width="120" data-min="0" data-max="255"data-displayPrevious=true data-angleOffset=-125 data-angleArc=250 data-fgColor="#0000ff" value="255">
</div>   
  
<div style="width:100px;margin-top:0px;display:inline;">    
<input class="knob" data-thickness=".3" data-skin="tron" data-width="120" data-min="0" data-max="255"data-displayPrevious=true data-angleOffset=-125 data-angleArc=250 data-fgColor="#FFFFFF" value="255">
</div>

JavaScript

(function($) {

    /**
* Kontrol library
*/
    "use strict";

    /**
* Definition of globals and core
*/
    var k = {}, // kontrol
        max = Math.max,
        min = Math.min;

    k.c = {};
    k.c.d = $(document);
    k.c.t = function (e) {
        return e.originalEvent.touches.length - 1;
    };

    /**
* Kontrol Object
*
* Definition of an abstract UI control
*
* Each concrete component must call this one.
* <code>
* k.o.call(this);
* </code>
*/
    k.o = function () {
        var s = this;

        this.o = null; // array of options
        this.$ = null; // jQuery wrapped element
        this.i = null; // mixed HTMLInputElement or array of HTMLInputElement
        this.g = null; // 2D graphics context for 'pre-rendering'
        this.v = null; // value ; mixed array or integer
        this.cv = null; // change value ; not commited value
        this.x = 0; // canvas x position
        this.y = 0; // canvas y position
        this.$c = null; // jQuery canvas element
        this.c = null; // rendered canvas context
        this.t = 0; // touches index
        this.isInit = false;
        this.fgColor = null; // main color
        this.pColor = null; // previous color
        this.dH = null; // draw hook
        this.cH = null; // change hook
        this.eH = null; // cancel hook
        this.rH = null; // release hook

        this.run = function () {
            var cf = function (e, conf) {
                var k;
                for (k in conf) {
                    s.o[k] = conf[k];
                }
                s.init();
                s._configure()
                 ._draw();
            };

            if(this.$.data('kontroled')) return;
            this.$.data('kontroled', true);

            this.extend();
            this.o = $.extend(
                {
                    // Config
                    min : this.$.data('min') || 0,
                    max : this.$.data('max') || 100,
                    stopper : true,
             ...