jQuery Kontrol Test

by firegroove

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://anthonyterrien.com/demo/kontrol/jquery.kontrol.js"></script>
<input type="text" class="xy" value='{"x": 50, "y": 67}' data-width=200 data-height=200>

<input type="text" class="pad" value='{"x": 50, "y": 67}' data-width=100 data-height=100>

JavaScript

/* var context = new webkitAudioContext(); */
/* var osc = context.createOscillator(); */
/* var gain = context.createGain(); */
/* osc.connect(gain); */
/* gain.connect(context.destination); */
/* osc.noteOn(0); */
/* gain.gain.value = 0; */


$(".xy")
    .xy({
    displayPrevious: true,
    min: 0,
    max: 255,
    fgColor: "#ff0000",
    bgColor: "#288edf",
        'change' : function(x){
/*         gain.gain.value = 1; */
/*         osc.frequency.value = v; */
/*         console.log(x);    */
        
        },
        'release' : function(){
        gain.gain.value = 0;
        }
})
    .css({
    'border': '1px solid #288edf'
});

var $pad = $(".pad")
                    .xy({
                        displayPrevious:false,
                        min : -100,
                        max : 100,
                        fgColor:"#222222",
                        bgColor:"#EEEEEE",
                        /*, change : function (value) {
                         console.log("change : ", value);
                         }*/
                    })
                    .css({'border':'5px solid #BBB'});