ADOBE AFTER EFFECTS: Forum Expressions Tutorials Creative Cloud

how to create a color picker with extendscript

COW Forums : Adobe After Effects Expressions

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
paul chain
how to create a color picker with extendscript
on Oct 13, 2017 at 6:31:41 pm

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 Sensoy

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();
$.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 ();


Return to posts index

Xavier Gomez
Re: how to create a color picker with extendscript
on Oct 15, 2017 at 10:17:48 pm

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.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]