Scaling images with ScriptUI

[JJ_Fulks]

Is it possible to selectively scale an image for display in a window/container with ScriptUI? The best I can get is a cropped image, but what I'm really needing is a thumbnail sized image.

JJ

[_Jongware_-9BC6tI · Accepted solution]

Peter Kahrel describes how to do just that in his ScriptUI Beginners' Guide. (He credits Marc Autret for this trick, by the way, but I don't know where to find that particular post.)

[JJ_Fulks]

Jongware, thanks for the link to Kahrel's ScriptUI guide. In the example he shows, it looks like the Image.onDraw() event callback function is being overwritten by way of prototyping it. I'm still very new to ScriptUI and JS, so my interpretation of Kahrel's/Marc's method may be off. If this is the case, though, then it would scale every Image object that is displayed in a ScriptUI dialog. I'm looking to scale images variably and not to a specific ratio across the board.

Here's Kahrel's function ...

Image.prototype.onDraw = function()
{ // written by Marc Autret
   // "this" is the container; "this.image" is the graphic
   if( !this.image ) return;
   var WH = this.size,
   wh = this.image.size,
   k = Math.min(WH[0]/wh[0], WH[1]/wh[1]),
   xy;
   // Resize proportionally:
   wh = [k*wh[0],k*wh[1]];
   // Center:
   xy = [ (WH[0]-wh[0])/2, (WH[1]-wh[1])/2 ];
   this.graphics.drawImage(this.image,xy[0],xy[1],wh[0],wh[1]);
   WH = wh = xy = null;
}

[Marc Autret]

JJ_Fulks wrote:

In the example he shows, it looks like the Image.onDraw() event callback function is being overwritten by way of prototyping it. (...) If this is the case, though, then it would scale every Image object that is displayed in a ScriptUI dialog. I'm looking to scale images variably and not to a specific ratio across the board.

You are absolutely right. I sent this code to Peter to illustrate a way to get a common (=prototyped) image rescale routine, but of course you might want to use it only on a specific Image container. Then you have to specificaly write a myImage.onDraw handler. That's exactly the method I use in that script:

http://www.indiscripts.com/post/2010/12/scriptui-challenge-jpeg-links-explorer

[The Adobe documentation is not very explicit about the (fundamental!) difference between the ScriptUI Image and the ScriptUI ScriptUIImage objects. Peter and I have conducted some investigations on that subject. The next release of ScriptUI for Dummies might provide more details and secret tricks...]

@+

Marc

[JJ_Fulks]

function(){return A.apply(null,[this].concat($A(arguments)))}function(){return A.apply(null,[this].concat($A(arguments)))}

Marc Autret wrote:

You are absolutely right. I sent this code to Peter to illustrate a way to get a common (=prototyped) image rescale routine, but of course you might want to use it only on a specific Image container. Then you have to specificaly write a myImage.onDraw handler. That's exactly the method I use in that script:

http://www.indiscripts.com/post/2010/12/scriptui-challenge-jpeg-links- explorer

Marc, the prototype code is an elegant solution that you came up with, and your jpeg-splorer looks like a great example of how to push this code and ScriptUI to the limits.

function(){return A.apply(null,[this].concat($A(arguments)))}function(){return A.apply(null,[this].concat($A(arguments)))}function(){return A.apply(null,[this].concat($A(arguments)))}

Marc Autret wrote:

[The Adobe documentation is not very explicit about the (fundamental!) difference between the ScriptUI Image and the ScriptUI ScriptUIImage objects. Peter and I have conducted some investigations on that subject. The next release of ScriptUI for Dummies might provide more details and secret tricks...]

Only having exposure to ScriptUI for several days now, I have found Adobe's documentation on ScriptUI to be quite ambiguous in many areas, leaving a lot up for question. ScriptUI for Dummies nicely fills many of voids left by Adobe's documentation of ScriptUI. I can't wait to read the next release!

[DBLjan]

Hello together, i tried various sources, but could not get a listbox image to scale. Please ScriptUI-toTheLimit-pushers…Is that possible?

I changed the first 2 lines of Marcs function to:

var myImage = File("~/Desktop/500x500px.jpg");
myImage.onDraw = function()

to use in

myList.items[0].image = myImage;

But that doesnt work. Any clue why?

[DBLjan]

Is it possibble after all to scale a picture into a given listbox? I have a bunch of jpg-exports, i want to throw at the use as a report.
Im no ace at JS and dont know how to implement "prototypes" or an onDraw-handler for listitems.

Heres my list:

var myList = w.add ("listbox", undefined, "", {multiselect: false, numberOfColumns: 4, showHeaders: true, columnTitles: ["PreView","ExportPath", "FileName", "FileSize"], columnWidths: [50,60,390,80]});

at the end of my window i set myList.itemSize= [590,50];

But instead of a 50x50 scaled picture i get a cropped one.

[Vamitul]

I don't think it is possible to scale images inside listbox items.
It is, however, possible to create your own component to display that "list".

For that you would need a scrollable panel (Peter ScriptUI guide has that) that you can populate with "subgroups" containing the scaled image and whatever other information you want.

[DBLjan]

I thought I had to work around it since myList.item[0].image.size is readonly. But, thankfully, you made me not continue looking for that, noone answerded that since december here and at stackoverflow and hilf-dir-selbst. Glad to have that off my chest, ill try to build a scrollable thumbnaillist.

[JJ_Fulks]

I think I got it. It works after an Image control's size property is explicity set, allowing each image to be individually scaled. Very slick code!