14 Replies Latest reply on May 4, 2008 10:29 AM by (Daniel_Rodney)

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

    Level 1
      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
        • 1. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
          Level 1
          Does this help? Run this in ESTK and look at the result in the Console:

          for (j in UIColors) {
          $.writeln(j);
          }

          Because UIColors is an object, you can get the names of each of its properties using the for ... in construction.

          Dave
          • 2. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
            Dirk Becker  Level 4
            Dave is right. I used this with a ScriptUI dialog:

            for( n in UIColors ) {
            s = n.split("_");
            for( i in s )
            s[i] = s[i].substr(0,1) + s[i].substr(1).toLowerCase();
            win.colorDDn.add("item",s.join(" ")).value = UIColors[n];
            }

            Recently I've submitted a feature request to add draw event handling to dropdown items ...

            Dirk
            • 3. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
              Level 1
              I did not know about that "in" construction, very interesting. But the writeIn seems to only work in CS3. Below is my code that works in CS3. Keep in mind that I can't use ScriptUI because I am supporting CS2. Is there anyway to make this work in both CS2 and CS3?

              myInDesignListOfLayerColors = new Array()
              counter = 0
              for (j in UIColors) {
              $.writeln( j )
              myInDesignListOfLayerColors.push( j )
              counter ++
              }
              myLayerColorMenu = dropdowns.add( {stringList:myInDesignListOfLayerColors, selectedIndex:0} )

              Thanks again for your quick replies! This is getting close.
              Dan
              • 4. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                Level 1
                The $.writeln was for illustrative purposes only. You don't need it for building your list -- neither do you seem to need the counter variable.

                The for ... in construction is JavaScript and has worked since CS, so what you have should work.

                Dave
                • 5. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                  Level 1
                  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
                  • 6. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                    Level 1
                    What are you adding that dropdown to?

                    I'm surprised that code works in CS3.

                    Dave
                    • 7. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                      Level 1
                      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.
                      • 8. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                        Kasyan Servetsky Level 5
                        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
                        • 9. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                          Kasyan Servetsky Level 5
                          I don't know why, but it doesn't work in CS2. :-(
                          • 10. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                            Level 1
                            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
                            • 11. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                              Level 1
                              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.
                              • 12. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                                Level 1
                                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
                                • 13. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                                  Kasyan Servetsky Level 5
                                  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
                                  • 14. Re: [JS] User Interface to Choose Layer Color (Get List of UIColors)
                                    Level 1
                                    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();