jquery knob display input on complete

Question

I'm using jquery knob to graphically represent my data.

https://github.com/aterrien/jQuery-Knob

I'm trying to show the input value (in the center of the circle) only after the animation, but I didn't found how. My aproach was to initially set'displayInput' to false, and use the complete function to set it to true after the animation. I can see it's working for the fgColor attribute, but not for displayInput attribute.

elm.knob({
    'width': 60,
    'height': 60,
    'min': 0,
    'max': 6,
    'step': 0.1,
    'readOnly': true,
    'thickness': .5,
    'dynamicDraw': true,
    'displayInput': false,
    'fgColor': dangerLevelColor,
    'inputColor': '#7F8C8D',
    format: function (value) {
        return value + '/6';
    }
});
$({value: 0}).animate({value: dangerLevel}, {
    duration: 1500,
    easing: 'swing',
    progress: function () {
        elm.val(this.value).trigger('change');
    },
    complete: function () {
        elm.trigger(
                'configure', {
                    'displayInput': true,
                    'fgColor': 'green'
                });
    }
});

Any idea? thanks!!

Answer 1

I was having a similar issue. Appears to be some type of bug, but I couldn't track it down. It works in reverse (starting with displayInput: true and using configure to change to false later on). What I did as a work around was set displayInput to true and use the inputColor option to 'hide' it by making it the same color as the background and setting to some other visible color when you want to show it.

Initialize to Hide (on a white background)

 $(".knob").knob({ 'inputColor': '#FFFFFF' });

Show

$(".knob").trigger('configure', { 'inputColor': '#87CEEB' });