1

I'm using the latest jQuery Knob.js and wondered if there is a way to link up 3 dials so that each value changes on "change" in order for the combined total to never go over 100%?

Initially all 3 dials are set to 33%. if a user changes one of the dial the other 2 should increase or decrease to equate to 100 in total.

Jonathan Smith
  • 11
  • 1

1 Answers1

0

Because I liked the idea I've just created a Fiddle : 

$(function () {
  $('.knob').knob({
    readOnly: false,
        'width': 150,
        'height': 150,
        'dynamicDraw': true,
        'thickness': 0.4,
        'tickColorizeValues': true,
        'skin': 'tron',
    displayInput: true,
    change: function (value) {
        var tKnobsVal = 0;
        $(".knob").each(function () {
            tKnobsVal += parseInt($(this).val());
        });
        var kDiff = tKnobsVal - 100;
        adjustKnob(this.$.attr("id"), kDiff);
    }
});

$('#btn').click(function () {
    $({
        value: $('.knob').val()
    }).animate({
        value: 33
    }, {
        duration: 700,
        easing: 'swing',
        progress: function () {
            $('.knob').val(Math.round(this.value)).trigger('change');
        }
    });
  });
});

function adjustKnob(id, value) {
  var cValue = value / 2;
  $(".knob").not("[id=" + id + "]").each(function () {
    changeKnob($(this).attr("id"), cValue);
  });
}

function changeKnob(id, value) {
  $({
    value: $("#" + id).val()
  }).animate({
    value: $("#" + id).val() - value
  }, {
    duration: 700,
    easing: 'swing',
    progress: function () {
        $("#" + id).val(Math.round(this.value)).trigger('change');
    }
  });
}

On the knob change event, the sum of all knob values is retrieved: 

var tKnobsVal = 0;
$(".knob").each(function () {
            tKnobsVal += parseInt($(this).val());
        });

Then the function adjustKnob() is called with the value var kDiff = tKnobsVal - 100; (for the difference from 100) and the id of the knob that has been changed. adjustKnob() then calls changeKnob() for every knob except the knob that was changed with half of kDiff.
In the Fiddle I added a button to set and reset all 3 knobs to the initial 33. Note that there is some finetuning missing (sometimes the sum of all knobs will equal a little bit above or less 100) but that's maybe caused e.g. by the sum of all knobs not having 100 as initial value because of the missing 1%.

matthias_h
  • 11,356
  • 9
  • 22
  • 40
  • I like it. I managed to get it to work after but it's still a little buggy. So my version changes the value immediately where as yours has a delay (which I quite like actually). There still seem to be some value deficiencies though as with mine. The values sometimes go over 100 if you keep changing it or 99% on 1 dial still leaves 1% on the other 2. Great work though dude – Jonathan Smith Nov 17 '14 at 20:53