Really useful color conversion code
Thanks for the sharing the really slick and useful HSV/RGB conversion code.
Note: I had to make the following change in the daylight example for it to run on Ext JS Core....
Code:
paint: function()
{
//added this ... setStyle supported by Ext Core
this.El.setStyle('backgroundColor', Daylight.HSV.toRgb().toString() );
/* REMOVED THIS - applyStyles not available in the Core
this.El.applyStyles({
backgroundColor: Daylight.HSV.toRgb().toString()
});
*/
//console.log('paint! - ' + new Date() + ' - ' + Daylight.HSV.toRgb().toString());
},
You see quite a few ways to create a class out there. The comments in this post prompted me to write up a quick post on the method used by the Ext JS Core examples and why they are like they are .. and how you can make protected variables using that technique ...
http://www.extjs.com/forum/showthrea...622#post326622
I updated your classes to use this technique last night:
Code:
Ext.ns('Color');
/* Color Conversion Classes
* Based on code/classes by: Csaba Dobai (prometheus) <csaba.dobai@php-sparcle.com>
*/
(function() {
Color.HSV = function(h, s, v) {
Ext.apply(this, { h: h, s: s, v: v });
}
Ext.extend(Color.HSV, Object, {
/**
* Returns this color in a new RGB object.
* @return {Color.RGB}
*/
toRgb: function() {
var r, g, b;
var h = this.h / 360;
var s = this.s / 100;
var v = this.v / 100;
var var_h, var_i, var_1, var_2, var_3, var_r, var_g, var_b;
if (s == 0) {
r = v * 255;
g = v * 255;
b = v * 255;
}
else {
var_h = h * 6;
var_i = Math.floor(var_h);
var_1 = v * (1 - s);
var_2 = v * (1 - s * (var_h - var_i));
var_3 = v * (1 - s * (1 - (var_h - var_i)));
if (var_i == 0) { var_r = v; var_g = var_3; var_b = var_1 }
else if (var_i == 1) { var_r = var_2; var_g = v; var_b = var_1 }
else if (var_i == 2) { var_r = var_1; var_g = v; var_b = var_3 }
else if (var_i == 3) { var_r = var_1; var_g = var_2; var_b = v }
else if (var_i == 4) { var_r = var_3; var_g = var_1; var_b = v }
else { var_r = v; var_g = var_1; var_b = var_2 };
r = var_r * 255;
g = var_g * 255;
b = var_b * 255;
}
return new Color.RGB(Math.round(r), Math.round(g), Math.round(b));
}
});
Color.RGB = function(r, g, b) {
if (r === undefined) {
this.r = 0;
this.g = 0;
this.b = 0;
}
else if (r instanceof String) {
this.fromHex(r);
}
else {
this.r = r;
this.g = g;
this.b = b;
}
}
Ext.extend(Color.RGB, Object, {
/**
* Returns this color as HTML formatted RGB String ('#001122').
* @return {String}
*/
toHex: function() {
return '#' + this.hexify(this.r) + this.hexify(this.g) + this.hexify(this.b);
},
/**
* Setup this color by HTML formatted RGB color.
* @param {String} colorString Color in format '#001122'.
*/
fromHex: function(colorString) {
this.r = decimalize(colorString.substring(1, 3));
this.g = decimalize(colorString.substring(3, 5));
this.b = decimalize(colorString.substring(5, 7));
},
// private - helper
hexify: function(number) {
var digits = '0123456789ABCDEF';
var lsd = number % 16;
var msd = (number - lsd) / 16;
var hexified = digits.charAt(msd) + digits.charAt(lsd);
return hexified;
},
// private - helper
decimailze: function(hexNumber) {
var digits = '0123456789ABCDEF';
return ((digits.indexOf(hexNumber.charAt(0).toUpperCase()) * 16) + digits.indexOf(hexNumber.charAt(1).toUpperCase()));
},
/**
* Helping represent this color as HTML formatted RGB String.
* @return {String}
*/
toString: function() {
return this.toHex();
}
});
})();
The Daylight works fine using that update.
Again, thanks for that code. I was able to prototype a really nice web-based color selector last night using this conversion code. I hope to have a demo of that up when my free time permits :)
Happy ExtJSing!
