Display thumbnail of PSD on ScriptUI dialog

[JJ_Fulks]

I'm wanting to display a thumbnail sized jpeg or png image representation of a high resolution PSD on my ScriptUI dialog, and without having the PSD open and active. Any advice or suggestions to get me started in the right direction is much appreciated.

JJ

[Muppet_Mark-QAl63s]

What OS are you on?

[JJ_Fulks]

Windows XP Pro 32-bit

[Muppet_Mark-QAl63s]

Sorry… my suggestion would have been to use SIPS on the mac. Bridge can create new bitmaps from thumbnails… I have not needed to use this myself but it 'might' be a possible route on Windows…? Paul has used this before so maybe he would know…?

[Paul Riggott]

Yes it's possible in Bridge here is an example, the folder path to the psds needs to altered to suit....

#target bridge
var Image =  File(Folder.temp+ "/scriptUI.jpg")
var bitmap = new BitmapData(50,50); 
bitmap.exportTo(Image );
/////////////////////////////////////////////////////////////////////////////////////
//get list of psds
var PSD = Folder("/c/pictures").getFiles("*.psd");
//////////////////////////////////////////////////////////////////////////////////////////////////////////
var win = new Window ("dialog", "Image test");
win.pnl1 = win.add('panel', undefined, undefined, {borderStyle:'black'});
win.pnl1.preferredSize=[200,200];
win.Im1 = win.pnl1.add ("image", undefined,Image);
win.Im1.size = [150,150];
win.pnl2 = win.add('panel', undefined, undefined, {borderStyle:'black'});
win.pnl2.dd1 = win.pnl2.add('dropdownlist');
for(var a in PSD){
    win.pnl2.dd1.add('item',decodeURI(PSD.name).toString());
    }
win.pnl2.dd1.selection=0;
win.grp100 = win.add('group');
win.grp100.bu1 = win....
win.pnl2.dd1.onChange=function(){
var Thumb1 = new Thumbnail(File(PSD[win.pnl2.dd1.selection.index]));
app.synchronousMode = true; 
Thumb1.core.preview.preview; 
app.synchronousMode = false; 
var md = Thumb1.synchronousMetadata; 
md.namespace = "http://ns.adobe.com/tiff/1.0/";
var orientation = md.Orientation.replace(/(\w+)(\s+)(.)(\d+)(.)/,"$3$4");
orientation = orientation.replace(/°/,'');
orientation = orientation.replace(/Rotate/,'');
if(orientation == 'Normal') orientation =0;
var bm = undefined;
bm = Thumb1.core.preview.preview; 
if(bm.width != undefined) bm = bm.rotate(orientation);
bm = bm.resize(150,BitmapData.bicubicSharper);
bm.exportTo(new File(Folder.temp+ "/scriptUI.jpg"),100);    
win.Im1.image = File(Folder.temp+ "/scriptUI.jpg")
}
win.pnl2.dd1.onChange();
win.show();

[JJ_Fulks]

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

Paul Riggott wrote:

Yes it's possible in Bridge here is an example, the folder path to the psds needs to altered to suit....

Paul, thanks for your example. Can this be done from a script executed from within PS CS5, using the selected preview(s) in Bridge's content pane as the source for the PSD to thumbnail conversion?

I'm new to ScriptUI, JS, and scripting in PS, Bridge, InDesign, and etc., so at this point I'm trying to familiarize myself with it and seeing what is and is not possible while planning the functionality of my script. So, please forgive me in advance if my questions seem basic or if the answers to them are obvious.

[Paul Riggott]

This example is for Bridge, if you wanted the script to run from Photoshop or another Adobe app it would need to use BridgeTalk to send a script to Bridge to create the thumbnail so Bridge would need to open as well as your other app.

[JJ_Fulks]

Great, thanks Paul and Mark! This may work for my specific application.

Are there updated JS reference guides available for Bridge and BridgeTalk, as there is for PS and InDesign?  The most recent reference guide I found for Bridge is for the CS2 version.

[Michael_L_Hale]

You can find updated info about BridgeTalk in the JavaScript Tools guide. You can find that in a subfolder where ExtendScript Toolkit is istalled.

Below is Paul's code for creating the preview image converted to a BridgeTalk script that will run in Photoshop.

// adapted from Paul Riggott
var previewFile = new File(Folder.temp+'/ScriptUI.jpg');
if( previewFile.exists ) previewFile.remove();
createPreview( '~/Desktop/Untitled1.psd');// returns true if preview file is created
function createPreview( image ){
     var fileName = new File( image );
     var preveiwExists = undefined;
     var res = undefined;
     var bt = new BridgeTalk;
     bt.target = "bridge";
     var myScript = ("var ftn = " + psRemote.toSource() + "; ftn("+fileName.toSource()+");");
     bt.body = myScript; 
     bt.onResult = function( inBT ) {myReturnValue(inBT.body); }
     bt.send(500);
     return preveiwExists;
     
     function psRemote( sourceImage ){
          var f = new File(Folder.temp+ "/scriptUI.jpg");
          var Thumb1 = new Thumbnail( sourceImage );
          app.synchronousMode = true; 
          Thumb1.core.preview.preview; 
          app.synchronousMode = false; 
          var md = Thumb1.synchronousMetadata; 
          md.namespace = "http://ns.adobe.com/tiff/1.0/";
          var orientation = md.Orientation.replace(/(\w+)(\s+)(.)(\d+)(.)/,"$3$4");
          orientation = orientation.replace(/°/,'');
          orientation = orientation.replace(/Rotate/,'');
          if(orientation == 'Normal') orientation =0;
          var bm = undefined;
          bm = Thumb1.core.preview.preview; 
          if(bm.width != undefined) bm = bm.rotate(orientation);
          bm = bm.resize(150,BitmapData.bicubicSharper);
          bm.exportTo( f,100);
          return f.exists;
     };
     function myReturnValue(str){
          res = str;
          preveiwExists = str;
     };
};

[JJ_Fulks]

Michael, thanks for pointing me to the BridgeTalk information found in the JS tool guide. It looks like there's a lot of good information there. And thanks for adapting Paul's code to be run in PS. I understand what's going on in most of it, except for the statements involving metadata and orientation regex.

In Bridge, are the bitmap thumbnails the same size and resolution of the full-sized (PSD) files they represent?

[Paul Riggott]

A fullsize JPG  can be extracted instead of using

bm = Thumb1.core.preview.preview;
Use

bm = Thumb1.core.fullsize.fullsize;

The fullsize could take a lot more time though depending how your preferences are set up (Keep 100% previews in cache).

There is a lot more information if you download the Bridge SDK.

http://www.adobe.com/devnet/bridge.html

[Muppet_Mark-QAl63s]

Paul, have you worked out a method for looping thru an array of images previews within a dialog? I must have spent a whole day the other week trying this… All I was trying was to have two buttons 'previous' & 'next'… But I'll be shot if I could work this out this ScriptUI stuff is still very new to me… I can remove an image from its parent window container but can I put a replacement back… nope…

[Paul Riggott · Accepted solution]

Yes here is an example, BUT it will not work with Photoshop CS5 (Yet another bug!) works with Photoshop CS3 and CS4

It will work with Bridge and Illustrator CS5 though.

function main(){
inputFolder = Folder.selectDialog("Please select the folder with Files to process");
var fileList = inputFolder.getFiles(/\.(jpg|png)$/i);
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;
}
var win = new Window ("dialog", "Image test");
win.pnl1 = win.add('panel', undefined, undefined, {borderStyle:'black'});
win.pnl1.preferredSize=[200,200];
win.Im1 = win.pnl1.add ("image", undefined,fileList[0]);
win.Im1.size = [180,180];
win.pnl2 = win.add('panel', undefined, undefined, {borderStyle:'black'});
win.pnl2.bu1 = win.pnl2.add('button',undefined,'Next');
win.pnl2.bu2 = win.pnl2.add('button',undefined,'Previous');
win.grp100 = win.add('group');
win.grp100.bu1 = win.grp100.add('button',undefined,'Cancel');
var PIC = 0;
win.pnl2.bu1.onClick=function(){
//Next picture
if(PIC == fileList.length -1) return;
PIC++;
win.Im1.image = fileList[PIC];
    }
win.pnl2.bu2.onClick=function(){
//Previous
if(PIC == 0 ) return;
PIC--;
win.Im1.image = fileList[PIC];
    }
win.show();
}
main();

[Muppet_Mark-QAl63s]

Paul, thats a great help thanks very much… Typically I was trying this with PS as my target and yes it no work… Do you just get a white corner too? That explains my wasted afternoon… Should have mowed the lawn instead…

[Paul Riggott]

Yes I just get a white area, a definite bug Mark.

[Muppet_Mark-QAl63s]

I gave up last night. Marc's image resizing amongst a few others was the reason for my prototyping question… Glad to know its a bug thou and not just me…

[Paul Riggott]

Just did another test, the problem is that CS5 doesn't like JPEGS, the script will work if the files are PNG.

Oh and I got shut of all my grass, covered it with 10 tons of pebbles, much less hassle!

[Muppet_Mark-QAl63s]

Hum… mine were/are png…

[JJ_Fulks]

Paul Riggott wrote:

Oh and I got shut of all my grass, covered it with 10 tons of pebbles, much less hassle!

Ok, Paul, now this is funny!   During mowing season, I have often threatened to cover my lawn with concrete or gravels and convert it to one giant parking lot, but I've never known someone who actually did it! haha

[Paul Riggott]

I ripped up all the hedge as well, as it was my job to cut the hedge and cut the grass so all the gardening is done by my wife now, mostly fruit trees and flowers left

[JJ_Fulks]

Paul Riggott wrote:

I ripped up all the hedge as well, as it was my job to cut the hedge and cut the grass so all the gardening is done by my wife now, mostly fruit trees and flowers left

hahahaha! I'm inspired, and would try this myself but my wife would probably divorce me, so I'll hold the thought (for the day that I should ever want a divorce)

I have Leyland cypress hedges, and they grow extremely fast. So, I'm trimming them heavily each year, and I would love nothing more than to rip them out of the ground and be done with them.

[Michael_L_Hale]

Muppet Mark wrote:

Marc's image resizing amongst a few others was the reason for my prototyping question…

From my limited understanding of prototyping, you use it when you want to extend a class( Image in this case ). Then all instances of the extended class will have the added method.

As the example script only uses one instance of the Image class you could just extend that instance without using prototyping.

function main(){
inputFolder = Folder.selectDialog("Please select the folder with Files to process");
var fileList = inputFolder.getFiles(/\.(jpg|png)$/i);

var win = new Window ("dialog", "Image test");
win.pnl1 = win.add('panel', undefined, undefined, {borderStyle:'black'});
win.pnl1.preferredSize=[200,200];
win.Im1 = win.pnl1.add ("image", undefined,fileList[0]);
win.Im1.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;
}
win.Im1.size = [180,180];
win.pnl2 = win.add('panel', undefined, undefined, {borderStyle:'black'});
win.pnl2.bu1 = win.pnl2.add('button',undefined,'Next');
win.pnl2.bu2 = win.pnl2.add('button',undefined,'Previous');
win.grp100 = win.add('group');
win.grp100.bu1 = win.grp100.add('button',undefined,'Cancel');
var PIC = 0;
win.pnl2.bu1.onClick=function(){
//Next picture
if(PIC == fileList.length -1) return;
PIC++;
win.Im1.image = fileList[PIC];
    }
win.pnl2.bu2.onClick=function(){
//Previous
if(PIC == 0 ) return;
PIC--;
win.Im1.image = fileList[PIC];
    }
win.show();
}
main();

[Michael_L_Hale]

Paul Riggott wrote:

Yes here is an example, BUT it will not work with Photoshop CS5 (Yet another bug!) works with Photoshop CS3 and CS4.

Paul, the scrip you posted works the same in CS5 as CS4 on my system(WinXP 32bit). It resizes and displays any jpg or png file in the selected folder. I wonder if the problem you and Mark are seeing is an OS issue or a 32 vs 64bit issue?

[Paul Riggott]

Thanks for doing a test Mike, had another play and it worked fine with PNGs so tried again with JPGs and that worked so tried yet again with both and it now works. So I have no idea why I got the same as Mark just a white area the first few tries I made?

Windows 7 Ultimate CS5 32bit.

I have some JPGs that it doesn't like though, I will have to try and find out why they don't work.

[Paul Riggott]

Found the problem, it was a large JPG and was getting server interface error. I reduced the size and all was well.