Jquery Knob animate and change color

Question

I'd like to create a knob that switch color at some point. For example, at 35 is red, at 70 is yellow and 100 is green.

I also would like to make it animate.

this is my fiddle: http://jsfiddle.net/Tropicalista/jUELj/6/

My code is:

    enter code here

$(document).ready(function() {
    $('.dial').val(13).trigger('change').delay(2000);
    $(".dial").knob({
        'min':0,
        'max':100,
        'readOnly': true,
        'width': 120,
        'height': 120,
        'fgColor': '#b9e672',
        'dynamicDraw': true,
        'thickness': 0.2,
        'tickColorizeValues': true,
        'skin':'tron'
    })         

});

I had quick view over the source of the knob plugin and it doesn't seem to provide any callbacks, events or api for changing its settings on the fly. So you'll either have to dive in and add those features yourself (or find someone who's willing to commit a couple of hours to that), or try to find a more extensive plugin. — Andy, Nov 09 '12 at 21:07
I have tried to edit the code, but it seems too complex to me. I will serach another plugin. Many thanks — Tropicalista, Nov 09 '12 at 21:32

salih0vicX · Accepted Answer · 2016-09-06T05:40:18.910

6

You can acomplish that with setInterval/clearInterval functions:

$(document).ready(function (){
$('.dial').val(0).trigger('change').delay(2000);
$(".dial").knob({
    'min':0,
    'max':100,
    'readOnly': true,
    'width': 120,
    'height': 120,
    'fgColor': '#b9e672',
    'dynamicDraw': true,
    'thickness': 0.2,
    'tickColorizeValues': true,
    'skin':'tron'
})         

    var tmr = self.setInterval(function(){myDelay()},1000);        
    var m = 0;
    function myDelay(){
        m += 10;
        $('.dial').val(m).trigger('change');
        if(m==100) {            
            window.clearInterval(tmr);
        }
    }    
});

Here is the jsFiddle example: http://jsfiddle.net/PTM6R/597/

edited Sep 06 '16 at 05:40

answered Nov 09 '12 at 22:56

salih0vicX

1,363
1
8
9

Many thanks, this is a real nice example. But it is possible to change the knob color when it is on 30? for example I like to start with red color, on 30 became yellow, and on 60 green. – Tropicalista Nov 10 '12 at 03:13
Yes, it is possible - take a look here: http://jsfiddle.net/salih0vicX/PTM6R/1/ If I answered your question(s) please consider marking my answer as good to go so the other users could find it easier. Thanks :) – salih0vicX Nov 10 '12 at 04:03
1

Wow!!! this is exactly what I was looking for!!! many thanks man, you're hero of javascript... – Tropicalista Nov 10 '12 at 04:15
@Ayan Apparently the old reference to .knob.js file got broken. I've updated fiddle and it uses cdnjs.cloudflare.com now ... It worked for me. Sorry about that. – salih0vicX Sep 06 '16 at 03:15
@salih0vicX, just one more question because I see the Tron skin is in use here. Is it possible to change colour of only the inner ring(progressing bar) only while keeping the outer thin ring static? – Ayan Sep 06 '16 at 21:12

Jquery Knob animate and change color

1 Answers1

Linked