9 Replies Latest reply on Feb 10, 2010 12:51 PM by Chuck Uebele

    Gripes with Adobe scripting UI

    Chuck Uebele Adobe Community Professional & MVP

      Spent a lot of time trying to get fillPath() to work in a UI.  Looked to be simple in the scripting guide but no luck.  The sample script colorselector.jsx with the Bridge SDK claimed to have paths used in it.  I couldn't find it.  Maybe Adobe can't get it to work either.  Tried a half-baked second approach to use a group and change the bg color.  My main intent is to create a visual model of a print with borders that can be adjusted with sliders for the user to get a good idea of that they're going to get.  Made a black group and a white group and got it to work in CS3.  Went to work and tried it on CS4 and it completely fell apart.  The stack order was different than CS3 and I could only get one color to show instead of the two I had in CS3.  Can't figure out why Adobe made this much of a change with the scripting to cause this much change.  We're having big issues with CS4 and custom XMP templates along with Flash extendscript interface due to some limit our company (I think) is placing on the use of ActiveX.  So as Adobe is moving more towards the use of Flash/flex with their other programs, this is causing problems in companies like mine that have tight controls on program interaction.

       

      Don't know if someone from Adobe actually reads these forums, but just want to vent and let them know that there maybe some bugs in their products.

        • 1. Re: Gripes with Adobe scripting UI
          Paul Riggott Level 6

          Here is a modified script from the ID forum, it may be of help...

          var dlg = new Window('dialog', 'Test');
          var pnl = dlg.add('panel', undefined, 'My Panel');
          var btn = pnl.add('button', undefined, 'My Button', {name:'ok'});
          var btn2 = pnl.add('iconbutton', undefined, undefined, {name:'orange', style: 'toolbutton'});
          btn2.size = [200,20];
          btn2.fillBrush = btn2.graphics.newBrush( btn2.graphics.BrushType.SOLID_COLOR, [1, 0.7, 0, 0.5] );
          btn2.text = " Press Me";
          btn2.textPen = btn2.graphics.newPen (btn2.graphics.PenType.SOLID_COLOR,[0,0.99,0,1], 1);
          btn2.onDraw = customDraw;
          btn2.onClick=function(){
              alert("Ouch");
              }
          dlg.show();
          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);
          }}
          
          1 person found this helpful
          • 2. Re: Gripes with Adobe scripting UI
            Chuck Uebele Adobe Community Professional & MVP

            Thanks, Paul.  I'll have to take a closer look at your script, but it worked when I ran it.  Looks like the use of .fillBrush might be the ticket.

            • 3. Re: Gripes with Adobe scripting UI
              Michael L Hale Level 5

              I agree that the Tools guide could be a lot more helpful than it is. Most of the time when I am trying something new with ScriptUI I end up going in hyperlink circles until I give up.

               

              And it doesn't help that once you do get something working in one version on one OS, it doesn't work the same in a different version or OS.

               

              colorselector.jsx is in both the ESTK and Bridge SDK. For what it's worth it seems to work the same in CS3 and CS4. Here is the CS3 version script. At a quick glance it is the same in the CS4 SDKs

               

              ////////////////////////////////////////////////////////////////////////////
              // ADOBE SYSTEMS INCORPORATED
              // Copyright 1998 - 2006 Adobe Systems Incorporated
              // All Rights Reserved
              //
              // NOTICE:  Adobe permits you to use, modify, and distribute this file in accordance with the
              // terms of the Adobe license agreement accompanying it.  If you have received this file from a
              // source other than Adobe, then your use, modification, or distribution of it requires the prior
              // written permission of Adobe.
              /////////////////////////////////////////////////////////////////////////////
              
              /** 
                @fileoverview Shows how to use graphic objects to customize the drawing of ScriptUI elements.
                @class Shows how to use graphic objects to customize the drawing of ScriptUI elements.
              
                <h4>Usage</h4>
                <ol>
                <li> Open this file and run it in the ExtendScript Toolkit. 
                     You can choose as the target any application that supports ScriptUI, although we recommend Adobe Bridge CS3.
                <li> Move the sliders up and down to change the color of the top panel.
                </ol>
               
                <h4>Description</h4>
              
              <p>Changes the colors of ScriptUI components dynamically, using the graphics customization objects.
                 Displays sliders that allow the user to set the RGB components of a color, then 
                 creates new Pen and Brush types using those colors with methods of the ScriptUIGraphics objects 
                 associated with the window and panels.
                 
              <p>To make the change in how the colors are drawn into the window on the screen, the example places the 
                 new Pen and Brush objects into the appropriate color properties of the graphics objects. The Pen is
                 used to change the foreground, and the Brush is used to change the background.
                
              <p>Each Pen and Brush object is created with a brush type, a color value, and a line width.
                The color is given as an array of RGB values with a fourth number representing the Alpha
                channel (transparency) value.  The range for all values is 0 to 1.   
                For example, to set the background color of a window to a light grey:
              
              <pre>
              graphicsObject.backgroundColor = graphicsObject.newBrush (g.PenType.SOLID_COLOR, [0.75, 0.75, 0.75, 1], 1);
              </pre>
              
                See the JavaScript Tools Guide for more details.<br />
              
                 @constructor Constructor
               */
              function ColorSelector() { }
              
              /**
              <p>Functional part of this snippet, creates a Window and its ScriptUI components.
               Defines three panels: an instruction panel, a panel that displays the current
               color values, and a control panel.
               
               <p>The control panel contains radio buttons to choose the background or
               foreground, and sliders to choose new color values.  As the sliders move, 
               their event handlers apply the new colors to the  background or foreground 
               of the window. The event handlers use a helper function, changeColor(), which actually
               performs the color change, by creating Pen and Brush objects and using them to set
               the color properties of the graphics objects associated with the window and with 
               each panel.
              
               @return True if the snippet ran as expected, false otherwise
               @type Boolean
              */
              ColorSelector.prototype.run = function() 
              {
                   
                   $.writeln("About to run ColorSelector");
                   
                   // Construct the window and the components
                   var win = new Window("window", "Color Selector", undefined, { resizeable: false });
                   win.alignChildren = "fill";
              
                   // The instructions panel - the text color of this panel will change
                   var instPanel = win.add("panel", undefined, "Instructions");
                   //instPanel.alignment = "fill";
                   instPanel.alignChildren = "left";
                   var st = instPanel.add("statictext", undefined, "", {multiline: true } );
                   st.text = "Use the radio buttons to select either the forground or background.  Then adjust "
                   + "the sliders in the bottom panel.  Each of the sliders represent a color, Red, Green or Blue.   "
                   + "The values of the sliders are show in the 'Color Values' panel.\n\n"
                   + "Using a Graphics Object you can:\n"
                   + "*   Change the background color\n"
                   + "*   Change the foreground color\n"
                   + "*   Change individual elements or the entire window\n\n"
                   + "This sample changes the colors within this panel.";
                   st.characters = 50;
              
                   // Panel to display the current color values
                   var colPanel = win.add("panel", undefined, "Color Values");
                   colPanel.orientation = "column";
                   gp1 = colPanel.add("group");
                   gp1.orientation = "row";
                   gp1.add("statictext", undefined, "Red:");
                   var RedText = gp1.add("edittext", undefined, "0.5000");
                   gp1.add("statictext", undefined, "Green:");
                   var GreenText = gp1.add("edittext", undefined, "0.5000");
                   gp1.add("statictext", undefined, "Blue:");
                   var BlueText = gp1.add("edittext", undefined, "0.5000");
              
                   // Panel to control how the sliders move and to set the foreground/background
                   var sliderPanel = win.add("panel", undefined, "Color Controls");
                   sliderPanel.alignChildren = ["fill", "fill"];
              
                   gp3 = sliderPanel.add("group");
                   gp3.orientation = "row";
                   gp3.alignment ="center";
              
                   var foreBtn = gp3.add("radiobutton", undefined, "Foreground");
                   var backBtn = gp3.add("radiobutton", undefined, "Background");
                   var lockBtn = gp3.add("checkbox", undefined, "Lock Sliders");
                   foreBtn.value = true;
              
                   sliderRed = sliderPanel.add("slider", undefined, 5, 0, 10);
                   sliderGreen = sliderPanel.add("slider", undefined, 5, 0, 10);
                   sliderBlue = sliderPanel.add("slider", undefined, 5, 0, 10);
              
                   // Handlers for sliders to capture changed values and apply colors
                   sliderRed.onChanging = function() 
                   {
                        newVal = 0;
                        if(sliderRed.value != 0)
                        {
                             newVal = sliderRed.value / 10;
                        }
              
                        RedText.text = newVal;
                        if(lockBtn.value)
                        {
                             sliderGreen.value = sliderBlue.value = this.value;
                             GreenText.text = BlueText.text = RedText.text;
                        }
                        // apply color
                        changeColor(1, newVal, foreBtn.value);
                   }
              
                   sliderGreen.onChanging = function() 
                   {
                        newVal = 0;
                        if(sliderGreen.value != 0)
                        {
                             newVal = sliderGreen.value / 10;
                        }
              
                        GreenText.text = newVal;
                        if(lockBtn.value)
                        {
                             sliderRed.value = sliderBlue.value = this.value;
                             BlueText.text = RedText.text = GreenText.text;
                        }
                        // apply color
                        changeColor(2, newVal, foreBtn.value);
                   }
              
                   sliderBlue.onChanging = function() 
                   {
                        newVal = 0;
                        if(sliderBlue.value != 0)
                        {
                             newVal = sliderBlue.value / 10;
                        }
              
                        BlueText.text = newVal;
                        if(lockBtn.value)
                        {
                             sliderGreen.value = sliderRed.value = this.value;
                             RedText.text = GreenText.text = BlueText.text;
                        }
                   
                        // apply color
                        changeColor(3, newVal, foreBtn.value);
              
                   }
              
                   win.show();
              
                   // Apply the color changes to the window and panels
                   function changeColor(color, val, foreground)
                   {
                        try
                        {
                             var Red = parseFloat(RedText.text);
                             var Green = parseFloat(GreenText.text);
                             var Blue = parseFloat(BlueText.text);
              
                             switch(color)
                             {
                                  case 1:
                                       Red = val;
                                       break;
                                  case 2:
                                       Green = val;
                                       break;
                                  case 3:
                                       Blue = val;
                                       break;
                                  default:
                                       return;     
                             }
              
                             // Colors: Red, Green, Blue, Alpha
                             var colArr = [Red, Green, Blue, 1];
                             // Get ScriptUIGraphics object associated with the window and each panel
                             var g = win.graphics;
                             var g2 = sliderPanel.graphics;
                             var g3 = colPanel.graphics;
                             var c, c2, c3;
              
                             if(foreground)      // do the foreground
                             {
                                  // Create a Pen object for each color
                                  // specifying type, color, linewidth
                                  c  = g.newPen (g.PenType.SOLID_COLOR, colArr, 1);
                                  c2  = g2.newPen (g2.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);
                                  c3  = g3.newPen (g3.PenType.SOLID_COLOR, [0, 0, 0, 1], 1);
                                  // Set the new Pen object as the foregroundColor of the graphics objects
                                  g.foregroundColor = c;
                                  g2.foregroundColor = c2;
                                  g3.foregroundColor = c3;
                             }
                             else // do the background
                             {
                                  // Create a Brush object for each color
                                  // specifying type, color, linewidth
                                  c  = g.newBrush (g.BrushType.SOLID_COLOR, colArr, 1);
                                  if(File.fs == "Windows")
                                  {
                                       defColor = [0.933, 0.918, 0.848, 1];
                                  }
                                  else
                                  {
                                       defColor = [0.949, 0.949, 0.949, 1];
                                  }
                                  c2  = g2.newBrush (g2.BrushType.SOLID_COLOR, defColor, 1);
                                  c3  = g3.newBrush (g3.BrushType.SOLID_COLOR, defColor, 1);
                                  // Set the new Brush object as the backgroundColor of the graphics objects
                                  g.backgroundColor = c;
                                  g2.backgroundColor = c2;
                                  g3.backgroundColor = c3;
                             }
                        }
                        catch(error){ alert(error); }
                   }
                   
                   $.writeln("Ran ColorSelector");
                   
                   return true;
              }
              
              /**
               "main program": construct an anonymous instance and run it
                as long as we are not unit-testing this snippet.
              */
              if(typeof(ColorSelector_unitTest ) == "undefined") {
                   new ColorSelector().run();
              }
              
              
              • 4. Re: Gripes with Adobe scripting UI
                Chuck Uebele Adobe Community Professional & MVP

                Thanks, Mike.  I'm with you on the hyperlinks.  You can really get lost in those.  I've been doing scripting off and on for quite a few years and finally I starting to understand a bit of what they are talking about, but my head still starts swimming after a few pages.  I too just don't know why some things are so different between versions that, especially something that doesn't look like any changes were made to the scripting guide.  Like this test I did with two groups applying a background color.  In the CS3 version, I got a white and black group, which I overlapped.  The white group was declared first then the black, and the black was on top of the overlap.  In CS4, the white was gone, but it was on top of the black.  I'll have to post a sample.

                • 5. Re: Gripes with Adobe scripting UI
                  Chuck Uebele Adobe Community Professional & MVP

                  Paul,

                   

                  I picked apart your script and got it down to just the basic of making filling a path.  I kept getting a runtime error, until I used the with statement in the ondraw function.  That seems odd to me in that the with statement is just suppose to be a short hand way of adding the prefix of an object.  It shouldn't change how the scripts runs.  I've heard in at least Flash ActionScript that With statements can slow down processing a file, but in such a short one as this it doesn't matter.  I was not able to resize the path once it was  filled, which was my original intent, nor have I tried it in CS4.

                  • 6. Re: Gripes with Adobe scripting UI
                    Michael L Hale Level 5

                    In keeping with the color choices, here is another way to do a mouse rollover.

                     

                    var dlg = new Window('dialog', 'Test');
                    var pnl = dlg.add('panel', undefined, 'My Panel');
                    var btn = pnl.add('button', undefined, 'My Button', {name:'ok'});
                    var btn2 = pnl.add('iconbutton', undefined, undefined, {name:'orange', style: 'toolbutton'});
                    btn2.size = [200,20];
                    btn2.fillBrush = btn2.graphics.newBrush( btn2.graphics.BrushType.SOLID_COLOR, [1, 0.7, 0, 0.5] );
                    btn2.text = " Press Me";
                    btn2.textPen = btn2.graphics.newPen (btn2.graphics.PenType.SOLID_COLOR,[0,0.99,0,1], 1);
                    btn2.onDraw = customDraw;
                    btn2.onClick=function(){
                        alert("Ouch");
                        }
                    dlg.show();
                    function customDraw(h){
                         if(h.mouseOver==true){
                              this.fillBrush = this.graphics.newBrush( this.graphics.BrushType.SOLID_COLOR, [0, 0.7, 1, 0.5] );
                              this.textPen = this.graphics.newPen (this.graphics.PenType.SOLID_COLOR,[1,0,1,1], 1);
                         }else{
                              this.fillBrush = this.graphics.newBrush( this.graphics.BrushType.SOLID_COLOR, [1, 0.7, 0, 0.5] );
                              this.textPen = this.graphics.newPen (this.graphics.PenType.SOLID_COLOR,[0,0.99,0,1], 1);
                         }
                        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);
                    }}
                    
                    
                    • 7. Re: Gripes with Adobe scripting UI
                      Chuck Uebele Adobe Community Professional & MVP

                      That's neat, Mike.  I've got a question.  In the customDraw function, it take an argument of 'h,' and in the main body of the script the call to customDraw has no ().  Where does the 'h' come from or what defines it?  Also why don't you need the () when calling the function?

                      • 8. Re: Gripes with Adobe scripting UI
                        Michael L Hale Level 5

                        This is just as I understand it so it could be wrong, but...

                         

                        onDraw set the function to handle a draw event. If you notice it's customDraw without the (). That means onDraw == that function instead of that functions result if it had be customDraw().

                         

                        Page 142 of the tool guide has a list of ( I think ) events that fire the handler. So 'h' was just what I named the event so I would have a reference to it. You could use anything you like.

                         

                        I haven't had time to play with it but it looks like you could set up a button to respond differently to a left or right click. For the left click you would use the normal onClick and for the right something like this( untested )

                         

                        function customDraw( event ){
                            if( event.rightButtonPressed == true ) this.onRightClick();
                        }
                        
                        • 9. Re: Gripes with Adobe scripting UI
                          Chuck Uebele Adobe Community Professional & MVP

                          Thanks, Mike, that makes sense.