CODEWITHSUNDEEP
javascriptjqueryjquery-uireturn-valuejquery-knob
SNos
SNos

Reputation: 3470

dynamically Controlling a Knob With Another one jQuery

I have two knobs, I would like to control dynamically the value of the first one when moving the second one.

so far I have: (First Knob)

$('#inf-knob').knobRot({

                    classes: ['inf-knob'],
                    frameWidth: 250,
                    frameHeight: 250,
                    frameCount: 100,
                    detent: false,                  
                    discreteSteps: false,
                    stepCount: 0,
                    minimumValue: 0,
                    maximumValue: 2,
                    dragMultiplier: 0.01,
                    hideInput: true,
});

$('#inf-knob').on('knobdrag', function(e){
    //called until mouse button released

                    var dial = (500 * $('#inf-knob').val()).toFixed(1);

                    document.getElementById('freqmain').value = dial + " Hz";    
                    document.getElementById('freqmain2').value = dial;                   

});

(Second Knob Should Change the first one dynamically when moved)

$('#black-knob').on('knobdrag', function(e){

                  gainNode.gain.value = this.value;
                  console.log(this.value * 2);

                  $('#inf-knob').val(this.value * 2);

});

I have also tried using:

document.getElementById('inf-knob').value = this.value;

with no results.

What am I Missing?

Thanks

Upvotes: 0

Views: 379

Answers (1)

Runcorn
Runcorn

Reputation: 5224

As the Document of KnobRot states , you should use :

To return the value of the specified knob:

$('myselector').knobRot('get')

To set the value of the specified knob, or knobs (will work with a collection):

$('myselector').knobRot('set', value)

And then you need to trigger KnobRot refresh. So in your case you can use it as : 

 $('#black-knob').knobRot({           
    }).on('knobdrag', function(e){
        console.log(this.value * 2);
        $('#inf-knob').knobRot('set', this.value);
        $('#inf-knob').trigger('knobrefresh');
    });

And , here is the Working JsFiddle Demo

P.S

  1. The Fiddle demo doesn't show the graphical icon of Knob as i couldn't figure out all the inclusion required by KnobRot. But , you can drag hover below the text-field and drag when a expand cursor shows up.
  2. I have never used such type of plugin.And the plugin documentation seems to be poor and not frequently updated. Why not use a different plugin fore-say jQuery-Knob demo and code base.

Upvotes: 1

Related Questions