Maybe you know that color picker on Era, which you can use to choose your nickname color.
Well, I decided to release it
First off, the code for the "colorpicker" class:
PHP Code:
//#CLIENTSIDE
//open the color picker
public function open() {
//stop the execution if theres no key/id
if (this.key == nil)
return;
//adjust the tweaking vars
temp.vars = { "cx", "cy", "cw", "ch" };
for (temp.v: temp.vars) {
if (this.( @ v) > 100)
this.( @ v) = 100;
}
if (this.cw == nil)
this.cw = 100;
if (this.ch == nil)
this.ch = 100;
for (temp.v: temp.vars) {
temp.( @ v) = this.( @ v);
}
//end adjustment
//set the color to white if it doesnt exist yet
temp.key = this.key;
if (client.("cColor_" @ temp.key)[3] != "valid")
client.("cColor_" @ temp.key) = { 1, 1, 1, "valid" };
//initialize all the fancy gui control crap
new GuiWindowCtrl("ColorPicker_" @ temp.key) {
profile = "CrowWindow";
extent = { 126, 96 + temp.ch };
x = GraalControl.width / 2 - width / 2;
y = GraalControl.height / 2 - height / 2;
canresize = false;
canclose = canmaximize = canminimize = false;
destroyonhide = true;
text = "ColorPicker";
new GuiControl("CP_Cycle_Base_" @ temp.key) {
x = 12; y = 56;
width = 2 + temp.cw;
height = 2 + temp.ch;
new GuiShowImgCtrl("CP_Cycle_Poly_" @ temp.key) {
x = y = 0; width = 2 + temp.cw; height = 2 + temp.ch;
polygon = { 0, 0, width, 0, width, height, 0, height };
new GuiShowImgCtrl("ColorPicker_Cycle_" @ temp.key) {
x = y = 1;
width = temp.cw;
height = temp.ch;
image = "crow_colorcycle.png";
red = green = blue = mode = alpha = 1;
new GuiShowImgCtrl("CP_Pointer_" @ temp.key) {
x = client.("cCoords_" @ temp.key)[0] - 4;
y = client.("cCoords_" @ temp.key)[1] - 4;
width = height = 9;
image = "crow_cc-pointer.png";
mode = 1;
alpha = .85;
red = 1 - client.("cColor_" @ temp.key)[0];
green = 1 - client.("cColor_" @ temp.key)[1];
blue = 1 - client.("cColor_" @ temp.key)[2];
}
new GuiControl("CP_Overlay_" @ temp.key) {
x = y = 0;
width = temp.cw; height = temp.ch;
}
}
}
}
new GuiControl("CP_Demo_Base_" @ temp.key) {
x = 12; y = 22;
width = height = 26;
new GuiShowImgCtrl("CP_Demo_Poly_" @ temp.key) {
x = y = 0; width = height = 26;
polygon = { 0, 0, width, 0, width, height, 0, height };
new GuiShowImgCtrl("ColorPicker_Demo_" @ temp.key) {
x = y = 1;
width = height = 24;
polygon = { 0, 0, width, 0, width, height, 0, height };
red = client.("cColor_" @ temp.key)[0];
green = client.("cColor_" @ temp.key)[1];
blue = client.("cColor_" @ temp.key)[2];
alpha = mode = 1;
}
}
}
//buttons
new GuiButtonCtrl("CP_Button_Cancel_" @ temp.key) {
profile = "CrowButton";
x = 12; y = 66 + temp.ch;
width = 48; height = 18;
text = "Cancel";
} new GuiButtonCtrl("CP_Button_Apply_" @ temp.key) {
profile = "CrowButton";
x = 66; y = 66 + temp.ch;
width = 48; height = 18;
text = "Apply";
}
}
//end initialization
//catch some events
catchEvent(("CP_Overlay_" @ temp.key), "onMouseDown", "onPickColor");
catchEvent(("CP_Overlay_" @ temp.key), "onMouseDragged", "onPickColor");
catchEvent(("CP_Button_Apply_" @ temp.key), "onAction", "onApply");
catchEvent(("CP_Button_Cancel_" @ temp.key), "onAction", "onCancel");
}
//button actions
function onApply() {
if (this.key == nil)
return;
temp.key = this.key;
//get the colors
temp.xy = { ("CP_Pointer_" @ temp.key).x + 4,
("CP_Pointer_" @ temp.key).y + 4 };
temp.rgb = { ("ColorPicker_Demo_" @ temp.key).red,
("ColorPicker_Demo_" @ temp.key).green,
("ColorPicker_Demo_" @ temp.key).blue,
"valid" };
//set the color and the remembered coords
client.("cColor_" @ temp.key) = temp.rgb;
client.("cCoords_" @ temp.key) = temp.xy;
//set the color of the quick-access button
if ((this.linkName) != nil) {
(this.linkName @ "_color").red = rgb[0];
(this.linkName @ "_color").green = rgb[1];
(this.linkName @ "_color").blue = rgb[2];
}
//trigger the event
if (this.applyEvent)
findWeapon(this.caller).trigger("Applied", nil);
("ColorPicker_" @ this.key).destroy();
}
function onCancel() {
("ColorPicker_" @ this.key).destroy();
}
//end button actions
//onMouseDown and onMouseDragged are redirected here
function onPickColor(cN, mod, mx, my) {
if (this.key == nil)
return;
//get the coords and the color
temp.xy = ("ColorPicker_Cycle_" @ this.key).globalToLocalCoord(mx, my);
temp.c = getImgPixel("crow_colorcycle.png", xy[0], xy[1]);
//set the color and the coords of the pointer
("CP_Pointer_" @ this.key).x = xy[0] - 4;
("CP_Pointer_" @ this.key).y = xy[1] - 4;
("CP_Pointer_" @ this.key).red = 1 - c[0];
("CP_Pointer_" @ this.key).green = 1 - c[1];
("CP_Pointer_" @ this.key).blue = 1 - c[2];
//set the color of the demo
("ColorPicker_Demo_" @ this.key).red = c[0];
("ColorPicker_Demo_" @ this.key).green = c[1];
("ColorPicker_Demo_" @ this.key).blue = c[2];
}
//create a small preview square button...whatever
public function demoButton(linkWH, linkRGB) {
if (this.key == nil)
return;
//fix the width and height of this button
if (linkWH == nil)
linkWH = 16;
temp.key = this.key;
temp.cName = "CP_Link_Base_" @ temp.key;
if (client.("cColor_" @ temp.key)[3] != "valid")
client.("cColor_" @ temp.key) = { 1, 1, 1, "valid" };
new GuiControl ((@ cName)) {
width = height = linkWH;
new GuiShowImgCtrl( @ cName @ "_border") {
x = y = 0;
width = height = linkWH;
polygon = { 0, 0, width, 0, width, height, 0, height };
red = linkRGB[0];
green = linkRGB[1];
blue = linkRGB[2];
alpha = mode = 1;
new GuiShowImgCtrl( @ cName @ "_color") {
x = y = 1;
width = height = linkWH - 2;
polygon = { 0, 0, width, 0, width, height, 0, height };
red = client.("cColor_" @ temp.key)[0];
green = client.("cColor_" @ temp.key)[1];
blue = client.("cColor_" @ temp.key)[2];
alpha = mode = 1;
}
}
new GuiControl( @ cName @ "_overlay") {
x = y = 0;
width = height = linkWH;
}
}
//store the name of the base in a var and make this thing act like a button
this.linkName = cName;
catchEvent(( @ cName @ "_overlay"), "onMouseDown", "open");
return cName;
}
//return the object type
public function objecttype() {
return "TColorPicker";
}
To use this, add the following code to any wnpc:
PHP Code:
//#CLIENTSIDE
function onCreated() {
this.cp = new TStaticVar("TColorPicker");
this.cp.join("colorpicker");
}
After you've done this, you can use the following to create a color picker anywhere on the clientside:
PHP Code:
this.cPicker = new TColorPicker();
this.cPicker.key = "key";
this.cPicker.caller = this.name;
this.cPicker.applyEvent = false;
this.cPicker.cx = 0;
this.cPicker.cy = 0;
this.cPicker.cw = 100;
this.cPicker.ch = 80;
with (this.cPicker.demoButton(32, { 0, 0, 0 })) {
x = 32;
y = 32;
}
This is just an example though. You always have to set the key/id to something unique. The picked color will be stored in client.("cColor_" @ key).
Setting the caller variable is needed if you want the color picker to trigger an event after the apply button has been pressed (applyEvent = true). The color picker always uses findWeapon() to trigger the event though, so if you got a color picker somewhere else, you might want to change the code of the class.
cx, cy, cw and ch are used to change the size of the color picker window and the image used to pick the colors. Using this, you can restrict people to only a few colors.
Last but not least, theres a function:
PHP Code:
demoButton(width_and_height, { r, g, b });
It will create a bordered button (specify { r, g, b } to change the border color) being the size of width_and_height. It displays the stored color and can be used to open the color picker. You can change the coords by using with() as I've done above. Or rewrite the code if you dont like to do it this way
That's all there is to say to the color picker itself I guess. Here's the code for the GUI profiles I have used, attached are the images of the GUI and the two images for the color picker.
PHP Code:
new GuiControlProfile("CrowWindow") {
bitmap = "guicrow_window.png";
fontcolor = { 220, 220, 220, 255 };
fontcolorhl = fontcolor;
fonttype = "Arial";
fontstyle = "b";
fontsize = 14;
opaque = true;
}
new GuiControlProfile("CrowButton") {
bitmap = "guicrow_button.png";
fontcolor = { 109, 196, 109, 255 };
fontcolorhl = fontcolorna = fontcolor;
fonttype = "Arial";
fontsize = 14;
align = "center";
opaque = true;
}
I hope this is somewhat helpful to you. Enjoy!