CS2 JS Color Picker

[Larry Ligon]

Here is CS2 JavaScript to allow the user to set the foreground color. If you want to change the background color, just replace foreground in the script with background.

Code: Select all // Program Name:  Set the foreground color
//
// Author:        Larry B. Ligon
//
// Purpose:       This JavaScript will allow the user to change the foreground color
//   

var newColor = new SolidColor;
newColor.rgb.red = 128;
newColor.rgb.green = 128;
newColor.rgb.blue = 128;

app.foregroundColor = newColor ;

var WindowPositionX = 100;
var WindowPositionY = 100;

var WindowWidth = 400;
var WindowHeight = 400;

var bounds = {x:WindowPositionX ,y:WindowPositionX ,width:WindowWidth ,height:WindowHeight };

var dlg = new Window('dialog', 'Color Picker' );
//Set the location of the dialog.  Put it near the foreground box in the tools dialog
dlg.frameLocation = [100, 300];

var uiButtonRun = "Run";

var uiButtonNewWindow = "New Window";

dlg.btnRun = dlg.add("button", undefined ,uiButtonRun );
dlg.btnRun.onClick = function() { this.parent.close(0); };
dlg.orientation = 'column';

//Add Red panel
dlg.RedPanel = dlg.add("panel",undefined,"Red");
dlg.RedPanel.alignChildren = "right";
dlg.RedPanel.orientation = 'row';
dlg.RedPanel.sliderRed = dlg.RedPanel.add('scrollbar', undefined, 128, 0, 255);
dlg.RedPanel.sliderRed.preferRedSize = [100,20];
dlg.RedPanel.RedValue = dlg.RedPanel.add('edittext');
dlg.RedPanel.RedValue.preferRedSize = [40,25];
dlg.RedPanel.RedValue.onChange = function (){
   if (!isNaN(dlg.RedPanel.RedValue.value)){
      alert("Red value is not a valid number");}
};
dlg.RedPanel.RedValue.text = Math.round(dlg.RedPanel.sliderRed.value);
dlg.RedPanel.sliderRed.onChanging = function () {
             dlg.RedPanel.RedValue.text = Math.round(dlg.RedPanel.sliderRed.value);
             newColor.rgb.red = Math.round(dlg.RedPanel.RedValue.text);
             newColor.rgb.green = Math.round(dlg.GreenPanel.GreenValue.text);
              newColor.rgb.blue =  Math.round(dlg.BluePanel.BlueValue.text);
              app.foregroundColor = newColor ;
};


//Add Green panel
dlg.GreenPanel = dlg.add("panel",undefined,"Green");
dlg.GreenPanel.alignChildren = "right";
dlg.GreenPanel.orientation = 'row';
dlg.GreenPanel.sliderGreen = dlg.GreenPanel.add('scrollbar', undefined, 128, 0, 255);
dlg.GreenPanel.sliderGreen.preferGreenSize = [100,20];
dlg.GreenPanel.GreenValue = dlg.GreenPanel.add('edittext');
dlg.GreenPanel.GreenValue.preferGreenSize = [40,25];
dlg.GreenPanel.GreenValue.onChange = function (){
   if (isNaN(dlg.GreenPanel.GreenValue.value)){
      alert("Green value is not a valid number");}
};
dlg.GreenPanel.GreenValue.text = Math.round(dlg.GreenPanel.sliderGreen.value);
dlg.GreenPanel.sliderGreen.onChanging = function () {
             dlg.GreenPanel.GreenValue.text = Math.round(dlg.GreenPanel.sliderGreen.value);
             newColor.rgb.red = Math.round(dlg.RedPanel.RedValue.text);
             newColor.rgb.green = Math.round(dlg.GreenPanel.GreenValue.text);
              newColor.rgb.blue =   Math.round(dlg.BluePanel.BlueValue.text);
              app.foregroundColor = newColor ;
};

//Add Blue panel
dlg.BluePanel = dlg.add("panel",undefined,"Blue");
dlg.BluePanel.alignChildren = "right";
dlg.BluePanel.orientation = 'row';
dlg.BluePanel.sliderBlue = dlg.BluePanel.add('scrollbar', undefined, 128, 0, 255);
dlg.BluePanel.sliderBlue.preferBlueSize = [100,20];
dlg.BluePanel.BlueValue = dlg.BluePanel.add('edittext');
dlg.BluePanel.BlueValue.preferBlueSize = [40,25];
dlg.BluePanel.BlueValue.text = Math.round(dlg.BluePanel.sliderBlue.value);
dlg.BluePanel.sliderBlue.onChanging = function () {
             dlg.BluePanel.BlueValue.text = Math.round(dlg.BluePanel.sliderBlue.value);
             newColor.rgb.red = Math.round(dlg.RedPanel.RedValue.text);
             newColor.rgb.green = Math.round(dlg.GreenPanel.GreenValue.text);
              newColor.rgb.blue = Math.round(dlg.BluePanel.BlueValue.text);
              app.foregroundColor = newColor ;
};

dlg.show();

Hope this helps.

[xbytor]

Thanks for getting this worked out. This is one of those things that I knew needed to get done but never got around to it.

I'll need to repackage it for my own purposes but I'll post that up when it's done.

-X

[xbytor]

Here's my extension of Larry's code. This will let you do things like:

Code: Select allvar c = ColorChooser.run();
if (c) {
   app.foregroundColor = c;
   textitem.color = c;
}

Other extensions could include passing the window title to 'run' or a default color to 'run'.
This would make usage look like:
Code: Select allapp.foregroundColor = ColorChooser.run(app.foregroundColor);
texitem.color = ColorChooser.run(textitem.color);


Here's the script:

Code: Select all//
// ColorChooser
//
// This script is an extension of Larry Ligon's color picker script.
// I have left as much of his code intact as is possible. I did fix
// one typo, added code to make the text entry fields functional,
// and set it up so that app.foreground is reset after the chooser is closed
//
// Description:
//   This class has one public function ('run') that will open an RGB
//   color selection dialog and return the selected color or 'undefined'
//   if the user canceled the operation.
//
// Usage:
//    var color = ColorChooser.run();
//
// $Id: ColorChooser.jsx,v 1.2 2006/04/27 18:09:51 anonymous Exp $
//
// Program Name:  Set the foreground color
//
// Author:        Larry B. Ligon
//
// Purpose:       This JavaScript will allow the user to change the foreground color
//

ColorChooser = function() {
};

ColorChooser.selectedColor = undefined;

ColorChooser.createDialog = function() {
  var WindowPositionX = 100;
  var WindowPositionY = 100;

  var WindowWidth = 400;
  var WindowHeight = 400;

  var bounds = {x:WindowPositionX, y:WindowPositionX,
                width:WindowWidth, height:WindowHeight };

  var dlg = new Window('dialog', 'Color Chooser' );
  //Set the location of the dialog.  Put it near the foreground box
  // in the tools dialog
  dlg.frameLocation = [100, 300];

  var uiButtonRun = "Run";

  var uiButtonNewWindow = "New Window";

  var newColor = app.foregroundColor;

  dlg.newColor = newColor;

  dlg.btnRun = dlg.add("button", undefined ,uiButtonRun );
  dlg.btnRun.onClick = function() { this.parent.close(1); };
  dlg.orientation = 'column';

  dlg.setColor = function() {
    newColor.rgb.red = Math.round(dlg.RedPanel.RedValue.text);
    newColor.rgb.green = Math.round(dlg.GreenPanel.GreenValue.text);
    newColor.rgb.blue =  Math.round(dlg.BluePanel.BlueValue.text);
    app.foregroundColor = newColor ;
    dlg.newColor = newColor;
  };

  //Add Red panel
  dlg.RedPanel = dlg.add("panel",undefined,"Red");
  dlg.RedPanel.alignChildren = "right";
  dlg.RedPanel.orientation = 'row';
  dlg.RedPanel.sliderRed = dlg.RedPanel.add('scrollbar', undefined,
                                            128, 0, 255);
  dlg.RedPanel.sliderRed.preferRedSize = [100,20];
  dlg.RedPanel.RedValue = dlg.RedPanel.add('edittext');
  dlg.RedPanel.RedValue.preferRedSize = [40,25];

  dlg.RedPanel.RedValue.onChange = function () {
    if (isNaN(dlg.RedPanel.RedValue.text)) {
      alert("Red value is not a valid number");
    }
    dlg.RedPanel.sliderRed.value = Number(dlg.RedPanel.RedValue.text);
    dlg.RedPanel.sliderRed.onChanging();
  };
  dlg.RedPanel.RedValue.text = Math.round(dlg.RedPanel.sliderRed.value);
  dlg.RedPanel.sliderRed.onChanging = function () {
    dlg.RedPanel.RedValue.text = Math.round(dlg.RedPanel.sliderRed.value);
    dlg.setColor();
  };


  //Add Green panel
  dlg.GreenPanel = dlg.add("panel",undefined,"Green");
  dlg.GreenPanel.alignChildren = "right";
  dlg.GreenPanel.orientation = 'row';
  dlg.GreenPanel.sliderGreen = dlg.GreenPanel.add('scrollbar', undefined,
                                                  128, 0, 255);
  dlg.GreenPanel.sliderGreen.preferGreenSize = [100,20];
  dlg.GreenPanel.GreenValue = dlg.GreenPanel.add('edittext');
  dlg.GreenPanel.GreenValue.preferGreenSize = [40,25];
  dlg.GreenPanel.GreenValue.onChange = function (){
    if (isNaN(dlg.GreenPanel.GreenValue.text)){
      alert("Green value is not a valid number");
    }
    dlg.GreenPanel.sliderGreen.value = Number(dlg.GreenPanel.GreenValue.text);
    dlg.GreenPanel.sliderGreen.onChanging();
  };
  dlg.GreenPanel.GreenValue.text = Math.round(dlg.GreenPanel.sliderGreen.value);
  dlg.GreenPanel.sliderGreen.onChanging = function () {
    dlg.GreenPanel.GreenValue.text = Math.round(dlg.GreenPanel.sliderGreen.value);
    dlg.setColor();
  };

  //Add Blue panel
  dlg.BluePanel = dlg.add("panel",undefined,"Blue");
  dlg.BluePanel.alignChildren = "right";
  dlg.BluePanel.orientation = 'row';
  dlg.BluePanel.sliderBlue = dlg.BluePanel.add('scrollbar', undefined,
                                               128, 0, 255);
  dlg.BluePanel.sliderBlue.preferBlueSize = [100,20];
  dlg.BluePanel.BlueValue = dlg.BluePanel.add('edittext');
  dlg.BluePanel.BlueValue.preferBlueSize = [40,25];
  dlg.BluePanel.BlueValue.onChange = function (){
    if (isNaN(dlg.BluePanel.BlueValue.text)){
      alert("Blue value is not a valid number");
    }
    dlg.BluePanel.sliderBlue.value = Number(dlg.BluePanel.BlueValue.text);
    dlg.BluePanel.sliderBlue.onChanging();
  };
  dlg.BluePanel.BlueValue.text = Math.round(dlg.BluePanel.sliderBlue.value);
  dlg.BluePanel.sliderBlue.onChanging = function () {
    dlg.BluePanel.BlueValue.text = Math.round(dlg.BluePanel.sliderBlue.value);
    dlg.setColor();
  };

  // Do this to force rounding of the RGB values
  dlg.BluePanel.sliderBlue.onChanging();

  return dlg;
};

ColorChooser.run = function() {
  var fgColor = app.foregroundColor;

  try {
    var newColor = new SolidColor;
    newColor.rgb.red = 128;
    newColor.rgb.green = 128;
    newColor.rgb.blue = 128;
    app.foregroundColor = newColor;
   
    var win = ColorChooser.createDialog();
    var rc = win.show();
    if (rc == 1) {
      ColorChooser.selectedColor = win.newColor;
    }
  } finally {
    app.foregroundColor = fgColor;
  }

  return ColorChooser.selectedColor;
};

//
// Sample usage
//
function main() {
  var c = ColorChooser.run();
  if (c) {
    c = c.rgb;
    alert("RGB=[" + c.red + ", " + c.green + ", " + c.blue + "]");
  } else {
    alert("No color chosen");
  }
};
main();

"ColorChooser.jsx"
// EOF

[miked]

Can someone advise what the license/usage is for this script please?

Thanks

...Mike

[xbytor]

For my part, it's free. Technically, I always license my code like this:

Code: Select allThis is Open Software. Use it. Pass it around. Sell it if you want. Just make sure this copyright, license, and contact information go with the software.

Copyright: (c)2006, xbytor
License: http://creativecommons.org/licenses/LGPL/2.1
Contact: xbytor@gmail.com


I don't know if Larry has said one way or another how his stuff is classified and since this is almost all his, I'll leave it to him to answer.

-X

[miked]

Thanks for the clarification. I'll wait to hear from Larry before I include it in my code.

...Mike

[Larry Ligon]

You are free to use any code snippets that I post here.

Just give me credit for any code snippets that you use.

[miked]

Am I correct in reading from that code that it returns a SolidColor object?

I inserted the code at the end of the script and tried a test call at the beginning, and it is throwing an error for me:

Error 2: ColorChooser is undefined.
Line: 488
-> var c = ColorChooser.run();

Is this CS or CS2 code? And does it rely on anything else? I don't program using objects so it's tough for me to read what is going on, or figure out how to fix it.

For example, this line
ColorChooser = function() {
};

Should this not be

function ColourChooser () {
}

or is the original text doing something I am not aware of?

I also notice in ContactSheetX_!.js that you have a line that simply says

"ColorChooser.jsx"

What is the purpose of that?

Thanks for any help!

...Mike

[xbytor]

I've updated the ColorChooser once again, this time to use the ESTK2 color chooser API. I also reworked the code some more for robustness and readability.

-X

Code: Select all//
// ColorChooser
//
// This script has undergone a lof of change. Larry's basic idea is still
// in there, but much of it has been reworked.
//
// This script is an extension of Larry Ligon's color picker script.
// Found at: bb/viewtopic.php?t=659
//
// I have left as much of his code intact as is possible. I did fix
// one typo, added code to make the text entry fields functional,
// and set it up so that app.foreground is reset after the chooser is closed
//
// Description:
//   This class has one public function ('run') that will open an RGB
//   color selection dialog and return the selected color or 'undefined'
//   if the user canceled the operation.
//
// Usage:
//    var color = ColorChooser.run();
//
// $Id: ColorChooser.jsx,v 1.6 2007/07/26 02:56:53 anonymous Exp $
//
// Program Name:  Set the foreground color
//
// Author:        Larry B. Ligon
//
// Purpose:       This JavaScript will allow the user to change the foreground color
//

ColorChooser = function() {
};

ColorChooser.selectedColor = undefined;

ColorChooser.numericKeystrokeFilter = function() {
  if (this.text.match(/[^\d]/)) {
    this.text = this.text.replace(/[^\d]/g, '');
  }
};

ColorChooser.createDialog = function(defColor, winX, winY) {
  if (!winX) {
    winX = 100;
  }
  if (!winY) {
    winY= 100;
  }

  var winW = 400;
  var winH = 400;

  var bounds = { x : winX, y : winY, width : winW, height : winH };

  var win = new Window('dialog', 'Color Chooser' );

  if (!defColor) {
    defColor = app.foregroundColor;
  }

  win.orientation = 'column';

  win.updateColor = function() {
    var win = this;
    var clr = new SolidColor();
    clr.rgb.red   = Math.round(win.redPnl.cslider.value);
    clr.rgb.green = Math.round(win.greenPnl.cslider.value);
    clr.rgb.blue  = Math.round(win.bluePnl.cslider.value);
    win._color = clr;
    app.foregroundColor = clr;
  };

  function createChannelPanel(win, name) {
    var pnl = win.add("panel", undefined, name);
    pnl.updateColor = function() {
      var win = this.parent;
      win.updateColor();
    }
    pnl.alignChildren = "right";
    pnl.orientation = 'row';
    pnl.cslider = pnl.add('scrollbar', undefined,
                                255, 0, 255);
    pnl.cslider.csize = [100,20];
    pnl.cvalue = pnl.add('edittext');
    pnl.cvalue.preferRedSize = [40,25];

    pnl.cvalue.onChanging = ColorChooser.numericKeystrokeFilter;

    pnl.cvalue.onChange = function () {
      var pnl = this.parent;
      var cn = Number(pnl.cvalue.text);
      if (isNaN(cn)) {
        alert(pnl.name + " value is not a valid number");
      }
      if (cn > 255) {
        cn = 255;
        pnl.cvalue.text = 255;
      }
      if (cn < 0) {
        cn = 0;
        pnl.cvalue.text = 0;
      }
      pnl.cslider.value = cn;
      pnl.cslider.onChanging();
    };

    pnl.cvalue.text = Math.round(pnl.cslider.value);
    pnl.cslider.onChanging = function () {
      var pnl = this.parent;
      pnl.cvalue.text = Math.round(pnl.cslider.value);
      pnl.updateColor();
    };

    return pnl;
  }

  win.redPnl = createChannelPanel(win, "Red");
  win.greenPnl = createChannelPanel(win, "Green");
  win.bluePnl = createChannelPanel(win, "Blue");

  win.ok = win.add("button", undefined, "OK" );
  win.ok.onClick = function() {
    this.parent.close(1);
  };

  win.layout.layout(true);

  win.redPnl.cslider.value = defColor.rgb.red;
  win.redPnl.cslider.onChanging();
  win.greenPnl.cslider.value = defColor.rgb.green;
  win.greenPnl.cslider.onChanging();
  win.bluePnl.cslider.value = defColor.rgb.blue;
  win.bluePnl.cslider.onChanging();

  return win;
};

ColorChooser.runCS3 = function(defColor) {
  var color = undefined;
  if (!defColor) {
    defColor = app.foregroundColor;
  }

  try {
    var bytes;
    var rgb = defColor.rgb;
    bytes = (rgb.red << 16) + (rgb.green << 8) + rgb.blue;
    bytes = $.colorPicker(bytes);
   
    if (bytes != -1) {
      var c = new SolidColor();
      c.rgb.red = (bytes >> 16);
      c.rgb.green = (bytes >> 8) & 0xFF;
      c.rgb.blue = bytes & 0xFF;
      color = c;
    }
  } catch (e) {
    alert(e);
  }

  return color;
};

ColorChooser.run = function(def) {
  // if (isCS3()) {
  if (app.version.match(/^10\./)) {
    return ColorChooser.runCS3(def);
  }

  var fgOrig = app.foregroundColor;
  var fgColor = app.foregroundColor;
  if (def) {
    app.foregroundColor = def;
    fgColor = def;
  }

  try {
    var win = ColorChooser.createDialog(fgColor);
    var rc = win.show();

    if (rc == 1) {
      ColorChooser.selectedColor = win._color;
    }

  } finally {
    app.foregroundColor = fgOrig;
  }

  return ColorChooser.selectedColor;
};

//
// Sample usage
//
ColorChooser.main = function() {
  var c = ColorChooser.run();
  if (c) {
    c = c.rgb;
    alert("RGB=[" + c.red + ", " + c.green + ", " + c.blue + "]");
  } else {
    alert("No color chosen");
  }
};
//ColorChooser.main();

"ColorChooser.jsx";
// EOF

[yogiyang]

Thanks for the script.

I will help me in my development...