Skip to main content
Known Participant
May 2, 2008
Question

[JS] User Interface to Choose Layer Color (Get List of UIColors)

  • May 2, 2008
  • 14 replies
  • 1642 views
I know how to set layer color with UIColors so I am not somewhat familiar with how it works. I want to create a dialog (which I know how to do) that has a menu that lets a user choose their layer color. So I want to get a list of all the UIColors and present that as a menu to the user. I cannot figure out how to get this list of colors. I know how to access them individually, but I'd think it would act similar to an array. I can't figure out the code to access the list to use it in a menu. Is this possible and if so how?

P.S. I am supporting InDesign CS2 and CS3.

Thanks in advance.
Dan
This topic has been closed for replies.

14 replies

Known Participant
May 4, 2008
Thanks for all the help everyone. We finally have the answer. Here's the following code that I'll be using. While Kasyan's works, I went ahead and made the menu a little nicer to read (like InDesign's actual menu is). My first array is for the dialog's menu, the second array contains the proper code I need later for setting the menu color. Again, thanks for all the input. Doing this in just CS3 was so much easier, but I also need to support CS2, so this works just fine (in both CS2 and CS3).


myLayerColorMenuArray = [ "Light Blue" ,
"Red" ,
"Green" ,
"Blue" ,
"Yellow" ,
"Magenta" ,
"Cyan" ,
"Gray" ,
"Black" ,
"Orange" ,
"Dark Green" ,
"Teal" ,
"Tan" ,
"Brown" ,
"Violet" ,
"Gold" ,
"Dark Blue" ,
"Pink" ,
"Lavender" ,
"Brick Red" ,
"Olive Green" ,
"Peach" ,
"Burgundy" ,
"Grass Green" ,
"Ochre" ,
"Purple" ,
"Light Gray" ,
"Charcoal" ,
"Grid Blue" ,
"Grid Orange" ,
"Fiesta" ,
"Light Olive" ,
"Lipstick" ,
"Cute Teal" ,
"Sulphur" ,
"Grid Green" ,
"White" ]

myInDesignUIColorArray = [ "lightBlue" ,
"red" ,
"green" ,
"blue" ,
"yellow" ,
"magenta" ,
"cyan" ,
"gray" ,
"black" ,
"orange" ,
"darkGreen" ,
"teal" ,
"tan" ,
"brown" ,
"violet" ,
"gold" ,
"darkBlue" ,
"pink" ,
"lavender" ,
"brickRed" ,
"oliveGreen" ,
"peach" ,
"burgundy" ,
"grassGreen" ,
"ochre" ,
"purple" ,
"lightGray" ,
"charcoal" ,
"gridBlue" ,
"gridOrange" ,
"fiesta" ,
"lightOlive" ,
"lipstick" ,
"cuteTeal" ,
"sulphur" ,
"gridGreen" ,
"white" ]

var myDoc = app.activeDocument;
var myDialog = app.dialogs.add({name:"Select Color"});
with(myDialog.dialogColumns.add()){
staticTexts.add({staticLabel:"Choose a color for the active layer."});
var myDropdown = dropdowns.add( {stringList:myLayerColorMenuArray, selectedIndex:0} )
}
var myResult = myDialog.show();
var myIndex = myDropdown.selectedIndex;
if(myResult == true){
myDoc.layoutWindows[0].activeLayer.layerColor = eval('UIColors.' + myInDesignUIColorArray[myIndex]);
}
else{
alert("You clicked the Cancel button.");
}
myDialog.destroy();
Kasyan Servetsky
Legend
May 4, 2008
Dave, you are right. Let’s just create an array, listing all UIColors. This way it works both in CS2 and CS3.
//---------------------------------------------------
var myDoc = app.activeDocument;

var myDialog = app.dialogs.add({name:"Select Color"});
with(myDialog.dialogColumns.add()){
staticTexts.add({staticLabel:"Choose a color for the active layer."});
var myColors = ['LIGHT_BLUE',
'RED',
'GREEN',
'BLUE',
'YELLOW',
'MAGENTA',
'CYAN',
'GRAY',
'BLACK',
'ORANGE',
'DARK_GREEN',
'TEAL',
'TAN',
'BROWN',
'VIOLET',
'GOLD',
'DARK_BLUE',
'PINK',
'LAVENDER',
'BRICK_RED',
'OLIVE_GREEN',
'PEACH',
'BURGUNDY',
'GRASS_GREEN',
'OCHRE',
'PURPLE',
'LIGHT_GRAY',
'CHARCOAL',
'GRID_BLUE',
'GRID_ORANGE',
'FIESTA',
'LIGHT_OLIVE',
'LIPSTICK',
'CUTE_TEAL',
'GRID_GREEN',
'WHITE']
var myDropdown = dropdowns.add( {stringList:myColors, selectedIndex:0} )
}
var myResult = myDialog.show();
var myIndex = myDropdown.selectedIndex;
if(myResult == true){
myDoc.layoutWindows[0].activeLayer.layerColor = eval('UIColors.' + myColors[myIndex]);
}
else{
alert("You clicked the Cancel button.");
}
myDialog.destroy();

//---------------------------------------------------------
Kasyan
Inspiring
May 3, 2008
Now you're triggering a memory. I seem to recall that in CS2 you had to use an enumeration before it became accessible. Hmm, it is either worse than I thought or there is something special about UIColors. This variation of your script:
var myDialog = app.dialogs.add({name:"Select Color"});

with(myDialog.dialogColumns.add()){
staticTexts.add({staticLabel:"Choose a color for the active layer."});
myInDesignListOfLayerColors = new Array()
var myTemp = UIColors.lightBlue;
var myTemp = UIColors.red;
for (j in UIColors) {
myInDesignListOfLayerColors.push( j );
}
var myDropdown = dropdowns.add( {stringList:myInDesignListOfLayerColors, selectedIndex:0} )
}
var myResult = myDialog.show();
var myIndex = myDropdown.selectedIndex;
if(myResult == true){
var myColor = myInDesignListOfLayerColors[myIndex];
app.activeDocument.activeLayer.layerColor = eval('UIColors.' + myColor);
}
else{
alert("You clicked the Cancel button.");
}
myDialog.destroy();

//----------------------------------------
This puts two colors (lightBlue and red) in the drop-down. That, as they say, is a bit useless. Looks like you're going to have to copy the list out of the CS2 JavaScript Reference to make the list in CS2.

Sorry.

Dave
Known Participant
May 3, 2008
Remember that this is a standard InDesign dialog, not a ScriptUI dialog. Thanks Kasyan for adding the rest of the code around to finish the dialog so everyone could see. You beat me to it :)

What specifically doesn't work is that the menu is empty.

The dialog is created, the menu is created, but nothing is in the menu! In CS2 the menu is displayed and empty, but in CS3 the menu is filled with the color list. So I don't think the problem is in the dialog code, but in how we're trying to create the list of UIColors.
Inspiring
May 3, 2008
When you say it doesn't work, what doesn't work? I don't see you switching on user interaction -- if the dialog isn't displaying at all, then that's the problem.

Dave
Kasyan Servetsky
Legend
May 3, 2008
I don't know why, but it doesn't work in CS2. :-(
Kasyan Servetsky
Legend
May 3, 2008
Hi Daniel,
//----------------------------------------
var myDialog = app.dialogs.add({name:"Select Color"});

with(myDialog.dialogColumns.add()){
staticTexts.add({staticLabel:"Choose a color for the active layer."});
myInDesignListOfLayerColors = new Array()
for (j in UIColors) {
myInDesignListOfLayerColors.push( j );
}
var myDropdown = dropdowns.add( {stringList:myInDesignListOfLayerColors, selectedIndex:0} )
}
var myResult = myDialog.show();
var myIndex = myDropdown.selectedIndex;
if(myResult == true){
var myColor = myInDesignListOfLayerColors[myIndex];
app.activeDocument.activeLayer.layerColor = eval('UIColors.' + myColor);
}
else{
alert("You clicked the Cancel button.");
}
myDialog.destroy();

//----------------------------------------
Kasyan
Known Participant
May 3, 2008
I am adding the dropdown to a dialog. It's inside of a with( dialogColumns.add() ) that is in a row, in a column, in a dialog. I just didn't bother posting the whole rest of the dialog code that surrounds this.

The dialog code is the easy part. My problem is getting that stringList for the dropdown to work also in CS2, not just CS3. I just don't get how to use the UIColors like an array for it.
Inspiring
May 3, 2008
What are you adding that dropdown to?

I'm surprised that code works in CS3.

Dave
Known Participant
May 2, 2008
Oops, I missed removing the counter. I had been experimenting with something. But here I've stripping it down to the essentials and it still doesn't work in CS2. I even put an alert in there and CS2 doesn't even display the alert. Everything works fine in CS3, but nothing in CS2.

myInDesignListOfLayerColors = new Array()
for (j in UIColors) {
alert("hello")
myInDesignListOfLayerColors.push( j )
}
myLayerColor = dropdowns.add( {stringList:myInDesignListOfLayerColors, selectedIndex:0} )

Any help is appreciated.
Thanks,
Dan