Webpage for Games
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

278 lines
7.2 KiB

class ColorPicker {
constructor(){
this.movingObject = "";
}
updateFromGraphical(){
this.h = (1 - $("#hue_picker").position().top / $("#hue").height()) * 360;
this.s = ($("#sb_picker").position().left + 8) / $("#saturation").width() * 100;
this.v = (1 - ($("#sb_picker").position().top + 8) / $("#value").height()) * 100;
this.r = HSVtoRGB(this.h, this.s, this.v).r;
this.g = HSVtoRGB(this.h, this.s, this.v).g;
this.b = HSVtoRGB(this.h, this.s, this.v).b;
this.hex = RGBtoHEX(this.r, this.g, this.b);
this.updateInterface();
}
updateFromHSV(){
this.h = $($("#color_picker_hsv input")[0]).val();
this.s = $($("#color_picker_hsv input")[1]).val();
this.v = $($("#color_picker_hsv input")[2]).val();
this.r = HSVtoRGB(this.h, this.s, this.v).r;
this.g = HSVtoRGB(this.h, this.s, this.v).g;
this.b = HSVtoRGB(this.h, this.s, this.v).b;
this.hex = RGBtoHEX(this.r, this.g, this.b);
this.updateFromHEX(null, true);
this.updateInterface();
}
updateFromRGB(){
this.r = $($("#color_picker_rgb input")[0]).val();
this.g = $($("#color_picker_rgb input")[1]).val();
this.b = $($("#color_picker_rgb input")[2]).val();
this.h = RGBtoHSV(this.r, this.g, this.b).h;
this.s = RGBtoHSV(this.r, this.g, this.b).s;
this.v = RGBtoHSV(this.r, this.g, this.b).v;
this.hex = RGBtoHEX(this.r, this.g, this.b);
this.updateFromHEX(null, true);
this.updateInterface();
}
updateFromHEX(input, otf){
if (!otf){ //Not on the fly
if ($(input).val().isValidHEX()) this.hex = $(input).val();
else {
alert("Error!");
return;
}
}
this.r = HEXtoRGB(this.hex).r;
this.g = HEXtoRGB(this.hex).g;
this.b = HEXtoRGB(this.hex).b;
this.h = RGBtoHSV(this.r, this.g, this.b).h;
this.s = RGBtoHSV(this.r, this.g, this.b).s;
this.v = RGBtoHSV(this.r, this.g, this.b).v;
this.updateInterface();
}
updateInterface(){
let r = $($("#color_picker_rgb input")[0]),
g = $($("#color_picker_rgb input")[1]),
b = $($("#color_picker_rgb input")[2]),
h = $($("#color_picker_hsv input")[0]),
s = $($("#color_picker_hsv input")[1]),
v = $($("#color_picker_hsv input")[2]),
hex = $("#color_picker_hex"),
bgColor;
r.val(round(this.r));
g.val(round(this.g));
b.val(round(this.b));
h.val(round(this.h));
s.val(round(this.s));
v.val(round(this.v));
bgColor = color(this.r, 0, 0);
r.css({
"background-color": bgColor.toString(),
"color": fontColor(bgColor)
});
bgColor = color(0, this.g, 0);
g.css({
"background-color": bgColor.toString(),
"color": fontColor(bgColor)
});
bgColor = color(0, 0, this.b);
b.css({
"background-color": bgColor.toString(),
"color": fontColor(bgColor)
});
colorMode(HSL);
bgColor = color(this.h, 100, 50);
h.css({
"background-color": bgColor.toString(),
"color": fontColor(bgColor)
});
bgColor = color(this.h, this.s, 100 - this.s / 2);
s.css({
"background-color": bgColor.toString(),
"color": fontColor(bgColor)
});
bgColor = color(this.h, 100, this.v / 2);
v.css({
"background-color": bgColor.toString(),
"color": fontColor(bgColor)
});
colorMode(RGB);
hex.val(this.hex);
hex.css({
"background-color": this.hex,
"color": fontColor(color(this.hex))
});
let sRGB = HSVtoRGB(this.h, 100, 100);
let saturationBackground = "linear-gradient(to right, #FFF 0%, rgb("
+ sRGB.r + ","
+ sRGB.g + ","
+ sRGB.b + ") 100%)";
$("#hue_picker").css("top", (1 - this.h / 360) * $("#hue").height());
$("#sb_picker").css({
"left": this.s / 100 * $("#saturation").width() - 8,
"top": (1 - this.v / 100) * $("#value").height() - 8
});
$("#saturation").css("background", saturationBackground);
}
mousePressed(){
let x = winMouseX - $("#saturation").offset().left;
let y = winMouseY - $("#value").offset().top;
if (x > 0 && x < $("#saturation").width() && y > 0 && y < $("#value").height()){
this.movingObject = "sb";
}
if (x > $("#saturation").width() + 6 && x < $("#saturation").width() + 6 + $("#hue").width() && y > 0 && y < $("#hue").height()){
this.movingObject = "hue";
}
this.mouseDragged();
}
mouseDragged(){
if (this.movingObject == "hue"){
let objH = $("#hue");
let picker = $("#hue_picker");
let h = winMouseY - objH.offset().top;
if (h > 0 && h < objH.height()){
picker.css("top", h - 1);
} else if (h > objH.height()){
picker.css("top", objH.height() - 1);
} else if (h < 0){
picker.css("top", -1);
}
}
if (this.movingObject == "sb"){
let objS = $("#saturation");
let objV = $("#value");
let picker = $("#sb_picker");
let s = winMouseX - objS.offset().left;
let v = winMouseY - objV.offset().top;
if (s > 0 && s < objS.width()){
picker.css("left", s - 8);
} else if (s < 0){
picker.css("left", -8);
} else if (s < objS.width()){
picker.css("left", objS.width() - 8);
}
if (v > 0 && v < objV.height()){
picker.css("top", v - 8);
} else if (v < 0){
picker.css("top", -8);
} else if (v > objV.height()){
picker.css("top", objV.height() - 8);
}
}
this.updateFromGraphical();
}
mouseReleased(){
this.movingObject = "";
}
getColor(){
return this.hex;
}
}
function fontColor(bg){
//http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
let o = (red(bg) * 299 + green(bg) * 587 + blue(bg) * 114) / 1000;
return (o > 125) ? "#000" : "#CCC";
}
//www.stackoverflow.com -->
function RGBtoHEX(r, g, b) {
let rgb = b | (g << 8) | (r << 16);
return '#' + (0x1000000 + rgb).toString(16).slice(1);
}
function HEXtoRGB(hex) {
let shorthandRegex = /^#?([a-fA-F\d])([a-fA-F\d])([a-fA-F\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
let result = /^#?([a-fA-F\d]{2})([a-fA-F\d]{2})([a-fA-F\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function HSVtoRGB(h, s, v) {
let r, g, b, i, f, p, q, t;
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
h /= 360;
s /= 100;
v /= 100;
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return {
r: r * 255,
g: g * 255,
b: b * 255
};
}
function RGBtoHSV(r, g, b) {
if (arguments.length === 1) {
g = r.g, b = r.b, r = r.r;
}
let max = Math.max(r, g, b), min = Math.min(r, g, b),
d = max - min,
h,
s = (max === 0 ? 0 : d / max),
v = max / 255;
switch (max) {
case min: h = 0; break;
case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
case g: h = (b - r) + d * 2; h /= 6 * d; break;
case b: h = (r - g) + d * 4; h /= 6 * d; break;
}
return {
h: h * 360,
s: s * 100,
v: v * 100
};
}