jQuery-Knob
jQuery-Knob copied to clipboard
aterrien
Changing progressively the color from -> to at the entire knob or with a fading thru...
Changing progressively the color from -> to at the entire knob or with a fading thru would be super great! Maybe setting some sort of a mask canvas over a graduated color image/other canvas... I never really learn canvas but for sure I will o e day or maybe soner for adding my touchFork on this amazing knob!
Imagine a thermometer knob: higher = warmer
Yes, in regards to using knob as a clock/timer, changing the colour over time would be fantastic.
how about doing it with existing knob? this is some result how to make it change the color at 70%
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<input type="text" id="inp1-min" class="knob1" value="0" data-width="120" data-thickness="0.4" />
jQuery(document).ready(function ($) {
//initialize all
$('.knob1').knob({
'min': 0,
'max': 100,
'step': 1,
'readOnly': false,
'linecap': 'round',
'displayInput': true,
'displayPrevious': false,
'angleOffset': -125,
'angleArc': 250
});
$('#inp1-min').trigger('configure', {
'draw': function (v) {
v=parseInt(document.getElementById('inp1-min').value);
//console.log(v);
if (v > 70 ) {
this.o.fgColor='red';
$("#inp1-min").css("color", "red");
//this.o.inputColor='red';
}
if (v <= 70 ) {
this.o.fgColor='#87CEEB';
$("#inp1-min").css("color", "#87CEEB");
//this.o.inputColor='#87CEEB';
}
},
'format': function (v) {
return v + ' %';
}
});
$('#inp1-min').trigger('change');
});
for those who love animation, have a look at http://jsfiddle.net/u76xj/1/
knob provides 0 - 100% with breaks at 25% and 75% with smooth animation lesson learned - check value at release function, do animation asynchronously
code sample here
HTML
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<input type="text" id="inp1-min" class="knob1" value="0" data-width="120" data-thickness="0.4" />
javascript/jQuery
jQuery(document).ready(function ($) {
// linear interpolation between two values a and b
// u controls amount of a/b and is in range [0.0,1.0]
lerp = function (a, b, u) {
return (1 - u) * a + u * b;
};
fade = function (element, property, start, end, duration, fn) {
var interval = 20;
var steps = duration / interval;
var step_u = 1.0 / steps;
var u = 0.0;
var theInterval = setInterval(function () {
if (u >= 1.0) {
clearInterval(theInterval);
}
var r = parseInt(lerp(start.r, end.r, u), 10);
var g = parseInt(lerp(start.g, end.g, u), 10);
var b = parseInt(lerp(start.b, end.b, u), 10);
var colorname = 'rgb(' + r + ',' + g + ',' + b + ')';
fn(property, colorname);
//el.style.setProperty(property, colorname);
u += step_u;
}, interval);
};
//var current_color = 0; //0 for base,1 for upper
var min_std = 25;
var std_max = 75;
var effect_duration = 300;
var color_blue = {
r: 135,
g: 206,
b: 235
};
var color_green = {
r: 0,
g: 128,
b: 0
};
var color_red = {
r: 178,
g: 34,
b: 34
};
//initialize all
$('.knob1').knob({
'min': 0,
'max': 100,
'step': 1,
'readOnly': false,
'linecap': 'round',
'displayInput': true,
'displayPrevious': false,
'angleOffset': -125,
'angleArc': 250
});
function change_color(v, element) {
var v1 = v;
var last_val = $(element).data('last_val');
var current_color = $(element).data('current_color');
//console.log('last: ' + last_val + ' v: ' + v1);
if (last_val != v1) {
//console.log(v);
if (v1 > std_max && current_color !== 2) { //go red
console.log('calling fade to red');
if (current_color === 1) {
startColor = color_green;
} else {
startColor = color_blue;
}
endColor = color_red;
fade(this, 'color', startColor, endColor, effect_duration, function (property, colorname) {
//console.log('fade color:'+colorname);
$(element).trigger('configure', {
'fgColor': colorname
});
$(element).trigger('change');
$(element).css("color", colorname);
});
$(element).data('current_color', 2);
}
if (v1 > min_std && v1 <= std_max && current_color !== 1) { //go green
//this.o.fgColor='red';
console.log('calling fade to green');
if (current_color === 0) {
startColor = color_blue;
} else {
startColor = color_red;
}
endColor = color_green;
fade(this, 'color', startColor, endColor, effect_duration, function (property, colorname) {
//console.log('fade color:'+colorname);
$(element).trigger('configure', {
'fgColor': colorname
});
$(element).trigger('change');
$(element).css("color", colorname);
});
$(element).data('current_color', 1);
}
if (v1 <= min_std && current_color !== 0) { //go blue
console.log('calling fade to blue');
if (current_color === 1) {
startColor = color_green;
} else {
startColor = color_red;
}
endColor = color_blue;
fade(this, 'color', startColor, endColor, effect_duration, function (property, colorname) {
//console.log('fade color:'+colorname);
$(element).trigger('configure', {
'fgColor': colorname
});
$(element).trigger('change');
$(element).css("color", colorname);
});
$(element).data('current_color', 0);
}
$(element).data('last_val', v1);
}
}
$('#inp1-min').data('current_color', 0);
$('#inp1-min').data('last_val', 0);
$('#inp1-min').trigger('configure', {
'release': function (v) {
change_color(v, '#inp1-min');
},
'format': function (v) {
return v + ' %';
}
});
$('#inp1-min').trigger('change');
});
it is important to note that we need to store last_val and current_color in element's data part with jquery, so we will be able to scale multiple knobs at one page
i would love to see somebody else implementation of full-scale colour change, but having above function to provide stepping of colour and assigning release function will do the trick for your beloved thermometer knob :)
It should be doable, you'll probably have to change color definition to arrays of color, and store in another value of element which color scheme (array element) you want. so for setting custom value, something like
$('#inp1-min').data('color_scheme', 0);
but a bit more changes to the code would be needed.
But definitely doable