31 Replies Latest reply: Mar 3, 2013 2:09 PM by Paul Riggott RSS

    Display thumbnail of PSD on ScriptUI dialog

    JJ Fulks Community Member

      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

        • 1. Re: Display thumbnail of PSD on ScriptUI dialog
          Muppet Mark-QAl63s Community Member

          What OS are you on?

          • 2. Re: Display thumbnail of PSD on ScriptUI dialog
            JJ Fulks Community Member

            Windows XP Pro 32-bit

            • 3. Re: Display thumbnail of PSD on ScriptUI dialog
              Muppet Mark-QAl63s Community Member

              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…?

              • 4. Re: Display thumbnail of PSD on ScriptUI dialog
                Paul Riggott Community Member

                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[a].name).toString());
                    }
                win.pnl2.dd1.selection=0;
                win.grp100 = win.add('group');
                win.grp100.bu1 = win.grp100.add('button',undefined,'Cancel');
                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();
                
                • 5. Re: Display thumbnail of PSD on ScriptUI dialog
                  JJ Fulks Community Member

                  Mark, thanks anyway. Your idea on using Bridge might work for me ... I'll have research it more and see how to interface with Bridge.

                  • 6. Re: Display thumbnail of PSD on ScriptUI dialog
                    JJ Fulks Community Member
                    function(){return A.apply(null,[this].concat($A(arguments)))}

                    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.

                    • 7. Re: Display thumbnail of PSD on ScriptUI dialog
                      Paul Riggott Community Member

                      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.

                      • 8. Re: Display thumbnail of PSD on ScriptUI dialog
                        Muppet Mark-QAl63s Community Member

                        The example posted by Paul is meant to be run in Bridge. But if Bridge can create you a .jpg or .png file to use in ScriptUI without you seeing it being done then it should be possible to use bridgetalk and call this from within a Photoshop script… well that was my thinking when I said it was a possibility…

                        • 9. Re: Display thumbnail of PSD on ScriptUI dialog
                          JJ Fulks Community Member

                          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.

                          • 10. Re: Display thumbnail of PSD on ScriptUI dialog
                            Michael L Hale Community Member

                            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;
                                 };
                            };
                            
                            • 11. Re: Display thumbnail of PSD on ScriptUI dialog
                              JJ Fulks Community Member

                              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?

                              • 12. Re: Display thumbnail of PSD on ScriptUI dialog
                                Paul Riggott Community Member

                                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

                                • 13. Re: Display thumbnail of PSD on ScriptUI dialog
                                  Muppet Mark-QAl63s Community Member

                                  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…

                                  • 14. Re: Display thumbnail of PSD on ScriptUI dialog
                                    Paul Riggott Community Member

                                    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();
                                    
                                    • 15. Re: Display thumbnail of PSD on ScriptUI dialog
                                      Muppet Mark-QAl63s Community Member

                                      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…

                                      • 16. Re: Display thumbnail of PSD on ScriptUI dialog
                                        Paul Riggott Community Member

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

                                        • 17. Re: Display thumbnail of PSD on ScriptUI dialog
                                          Muppet Mark-QAl63s Community Member

                                          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…

                                          • 18. Re: Display thumbnail of PSD on ScriptUI dialog
                                            Paul Riggott Community Member

                                            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!

                                            • 19. Re: Display thumbnail of PSD on ScriptUI dialog
                                              Muppet Mark-QAl63s Community Member

                                              Hum… mine were/are png…

                                              • 20. Re: Display thumbnail of PSD on ScriptUI dialog
                                                JJ Fulks Community Member
                                                function(){return A.apply(null,[this].concat($A(arguments)))}

                                                Paul Riggott wrote:

                                                 

                                                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

                                                 

                                                Thanks again for the great information, Paul. I found the updated Bridge CS5 JS guide and reference in the SDK download, and these resources will help immensely. And thanks for the heads up on the fullsize JPG Thumbnail option. Yes, using the fullsize JPG in my particular application may prove to be too resource heavy and time consuming, but it's nice to know it's an option ... for this script and future ones I may attempt.

                                                 

                                                Scripting CS5 is proving to be a challenge, but it's also quite addictive.

                                                • 21. Re: Display thumbnail of PSD on ScriptUI dialog
                                                  JJ Fulks Community Member
                                                  function(){return A.apply(null,[this].concat($A(arguments)))}

                                                  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

                                                  • 22. Re: Display thumbnail of PSD on ScriptUI dialog
                                                    Paul Riggott Community Member

                                                    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

                                                    • 23. Re: Display thumbnail of PSD on ScriptUI dialog
                                                      JJ Fulks Community Member
                                                      function(){return A.apply(null,[this].concat($A(arguments)))}

                                                      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.

                                                      • 24. Re: Display thumbnail of PSD on ScriptUI dialog
                                                        Michael L Hale Community Member

                                                        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?

                                                        • 25. Re: Display thumbnail of PSD on ScriptUI dialog
                                                          Paul Riggott Community Member

                                                          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.

                                                          • 26. Re: Display thumbnail of PSD on ScriptUI dialog
                                                            Michael L Hale Community Member

                                                            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();
                                                            
                                                            • 27. Re: Display thumbnail of PSD on ScriptUI dialog
                                                              Paul Riggott Community Member

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

                                                              • 28. Re: Display thumbnail of PSD on ScriptUI dialog
                                                                DBarranca Community Member

                                                                Paul,

                                                                do you happen to know why that script fails in Bridge CS6 (Mac) reporting a useless "Internal Error", line:

                                                                 

                                                                win.Im1 = win.pnl1.add ("image", undefined,Image);

                                                                 

                                                                While in Bridge CS5 it works?

                                                                Thanks,

                                                                 

                                                                Davide

                                                                • 29. Re: Display thumbnail of PSD on ScriptUI dialog
                                                                  Paul Riggott Community Member

                                                                  The problem is that there are numerous problems with Bridge CS6 scripting, these have been reported but  have not been fixed or acknowledged by the Bridge team.

                                                                  As it is, it looks as it will be CS7 before these get fixed.

                                                                  Images, Treeview, Fonts, Colours etc just do not work as they should.

                                                                  • 30. Re: Display thumbnail of PSD on ScriptUI dialog
                                                                    DBarranca Community Member

                                                                    Thanks Paul,

                                                                    I'm not too much into Bridge scripting, but I've to admit I've experienced weird things. Too bad scripting appears not to be taken into higher consideration from Adobe!