-
how to create a color picker with extendscript
Hi, I’m trying to analyze the following code for creating a simple dialog window with 2 black icon buttons.
These buttons call the color picker and selecting a new color the button should change its color with the new one.
The problem is that the button changes its color only when you move the mouse pointer over the button.
I would like to understand how to modify this code in order to change the button color when I confirm the new color through the color picker.
The original code is a script for Photoshop so I’ve just replaced the app.refresh() command with w.update() but maybe it is not necessary.
Please help me.
Thank you// Simple Color Picker SCRIPTUI
// Script by Mehmet Sensoyfunction colorpicker (result_color) {
var hexToRGB = function(hex) {
var r = hex >> 16;var g = hex >> 8 & 0xFF;var b = hex & 0xFF;
return [r, g, b]; };var color_decimal = $.colorPicker();
$.writeln(color_decimal);
var color_hexadecimal = color_decimal.toString(16);
$.writeln(color_hexadecimal);
var color_rgb = hexToRGB(parseInt(color_hexadecimal, 16));
$.writeln(color_rgb);
var result_color = [color_rgb[0] / 255, color_rgb[1] / 255, color_rgb[2] / 255];
$.writeln(result_color);
return result_color;
return color_rgb;}
function customDraw()
{ with( this ) {
graphics.drawOSControl();
graphics.rectPath(0,0,size[0],size[1]);
graphics.fillPath(fillBrush);
if( text ) graphics.drawString(text,textPen,(size[0]-graphics.measureString (text,graphics.font,size[0])[0])/2,3,graphics.font);
}}var w = new Window ("dialog");
var pnl =w.add('panel', undefined, 'Color Options');
var colorbutton1 = pnl.add('iconbutton', undefined, undefined, {name:'coloroption1', style: 'toolbutton'});
colorbutton1.size = [200,20];
colorbutton1.fillBrush = colorbutton1.graphics.newBrush( colorbutton1.graphics.BrushType.SOLID_COLOR, [0, 0, 0, 1] );
colorbutton1.text = "First Color";
colorbutton1.textPen = colorbutton1.graphics.newPen (colorbutton1.graphics.PenType.SOLID_COLOR,[1,1,1], 1);
colorbutton1.onDraw = customDraw;var colorbutton2 = pnl.add('iconbutton', undefined, undefined, {name:'coloroption1', style: 'toolbutton'});
colorbutton2.size = [200,20];
colorbutton2.fillBrush = colorbutton2.graphics.newBrush( colorbutton2.graphics.BrushType.SOLID_COLOR, [0, 0, 0, 1] );
colorbutton2.text = "Second Color";
colorbutton2.textPen = colorbutton2.graphics.newPen (colorbutton2.graphics.PenType.SOLID_COLOR,[1,1,1], 1);
colorbutton2.onDraw = customDraw;// ******************* COLOR BUTTONS ******************///
colorbutton1.onClick = function () {
var newcolor1 = colorpicker ();
colorbutton1.fillBrush = colorbutton1.graphics.newBrush( colorbutton1.graphics.BrushType.SOLID_COLOR,newcolor1);
w.update();
colorbutton1.onDraw = customDraw;}
colorbutton2.onClick = function () {
var newcolor2 = colorpicker ();
colorbutton2.fillBrush = colorbutton2.graphics.newBrush( colorbutton2.graphics.BrushType.SOLID_COLOR,newcolor2);
w.update();
colorbutton2.onDraw = customDraw;}
w.center();
w.show (); -
3 Replies
-
try replace you colorpicker() function with this one:
function colorpicker (result_color) {
var hexToRGB = function(hex) {
var r = hex >> 16;var g = hex >> 8 & 0xFF;var b = hex & 0xFF;
return [r, g, b]; };var color_decimal = $.colorPicker();
if (color_decimal<0) return null; // added this line, to handle the case where the dialog is dismissed (else: errors)
var color_hexadecimal = color_decimal.toString(16);
var color_rgb = hexToRGB(parseInt(color_hexadecimal, 16));
var result_color = [color_rgb[0] / 255, color_rgb[1] / 255, color_rgb[2] / 255];
return result_color;
}and the onClick callbacks for buttons by this:
function onButtonClick(){var newcolor1 = colorpicker ();
if (newcolor1===null) return; // dialog dismissed
this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, newcolor1);
// no need to call w.update()
// no need to reassign onDraw for the button, it's done already
// call onDraw for the button:
this.notify("onDraw");
}colorbutton1.onClick = onButtonClick;
colorbutton2.onClick = onButtonClick;It should work, but beware, there are a few bugs with ScriptUI and onDraw now (in CC2014 and later i think).
Xavier.
-
It Works!!! thank you very much for your support!
-
Thanks so much for posting this code. I appreciate it was a while ago, but i’m struggling to make this work on a dockable UI panel. The swatch appears in the correct default color, but after clicking and selecting a new color, the swatch fails to update. Is it possible to get this working or is there a limitation that’s causing the color to revert to the default? Really appreciate any help to get this working, look forward to your reply 🙂
Reply to this Discussion! Login or Sign Up