• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Gripes with Adobe scripting UI

Community Expert ,
Feb 08, 2010 Feb 08, 2010

Copy link to clipboard

Copied

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.

TOPICS
Actions and scripting

Views

3.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Valorous Hero ,
Feb 08, 2010 Feb 08, 2010

Copy link to clipboard

Copied

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);
}}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 08, 2010 Feb 08, 2010

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 09, 2010 Feb 09, 2010

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Feb 09, 2010 Feb 09, 2010

Copy link to clipboard

Copied

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);
}}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 10, 2010 Feb 10, 2010

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Feb 10, 2010 Feb 10, 2010

Copy link to clipboard

Copied

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();
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 10, 2010 Feb 10, 2010

Copy link to clipboard

Copied

LATEST

Thanks, Mike, that makes sense.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Feb 08, 2010 Feb 08, 2010

Copy link to clipboard

Copied

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();
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 08, 2010 Feb 08, 2010

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines