winwaed winwaed - 1 day ago 4
Javascript Question

Overriding units on a jQuery Knob does not redraw correctly on page reload

I have a readonly jQuery Knob. I have been able to add units to the numeric display (as per How to display units with Jquery Knob ), but the foreground (ie. graphical value indicator) of the dial is no longer displayed when the page is reloaded.

Here's my HTML:

<input class="knob" id="workload" data-angleoffset=-125 data-anglearc=250 value="{{ workload }}" >


(
{{ workload }}
is a floating point Django template value - it is being substituted correctly )

Inside my jQuery ready function, I have:

if (jQuery().knob && ! App.isIE8()) {

// Workload Indicator
$(".knob").knob({
'dynamicDraw': true,
'min': 0, 'max':100,
'thickness': 0.2,
'tickColorizeValues': true,
'readOnly': true,
'skin': 'tron',
'fgColor': '#F00',
'inputColor':'#3D3D3D',
'bgColor': '#3D3D3D',
'width' : 150,
'draw' : function () {
$(this.i).val( parseInt(this.cv) + '%');
}
});
}


fgColor
was originally set from the template value, but the above code with a hard-coded
fgColor
produces the same result.

Commenting out the
draw
callback works as expected: The knob is drawn complete with a numeric value in the middle and a red colored indicator on the outside arc.
Uncommenting the
draw
fixes the numeric formatting (no decimal points + a percentage sign). The numeric formatting remains correct for initial display and on re-load.
However the red arc only appears on the initial display - it disappears when the page is re-loaded!

So what is going on? Is
draw
over-riding jquery-knob's own canvas draw method? If so, how can I call the graphical draw part?

Answer

Here is the solution, sent to me by Sally Maughan (not of this parish):

$(".knob").each( function () {
     this.value = Math.round( this.getAttribute('value') );
    }).knob({

    'dynamicDraw': true,
    'min': 0, 'max':100,
    'thickness': 0.2,
    'tickColorizeValues': true,
    'readOnly': true,
    'skin': 'tron',
    'fgColor': wcol,
    'inputColor':'#3D3D3D',
    'bgColor': '#3D3D3D',
    'width' : 150,
    'draw' : function () {
        this.i.val( this.cv + '%');
    }
});

The above version uses a new value from the HTML with each reload. If you want to keep the same value through the reload, then Sally suggests replacing the this.value assignment with:

this.value = Math.round( this.value.replace('%','') );
Comments