Bridge UI not displaying images, OK in ESTK. Why?

[Matt Stec]

Can anyone shed some light at a following problem.

I have a UI that will be displayed in Bridge, part of it is a file preview of an image. Everything works well when I run it in ESTK, but when Bridge is targeted, I get a blank frame.

Yes all my images are jpg.

Code is as simple as:

var myNewFile = "~/Desktop/temp/mytestfile.jpg"; 

var w = new Window ("palette", "Thumbnail");

var thumbnail = w.add ("image",undefined, myNewFile);

w.show();

[I have gone]

Sounds as if you are using CS6 or CC, bugs in UI programming were reported before CS6 was released but sadly they were never fixed and there were numerous bugs!

CS5 is the last good version, anything newer and you are going to encounter major problems.

[Matt Stec]

I'm using CC. Thanks for your answer, not good news tho.

[Pedro Cortez Marques · Accepted solution]

Yes its true that there are bugs from Bridge CS6 (and still on CC) using its scriptUI.

The framework name used on Bridge is 'Mondo'. On Photoshop CS6 is 'flex' and on ESTK is 'Win32'.

I really manage to create an work around on Bridge to get the image appear using an icon button and script UI (its your choice to use it as button or not...).

You can add this image to:

• an UI panel;
• to the navBar (fileSystem);
• to your TabbedPalette created using SDK CS6

// create a panel here:

var tbPanel = (...)

//

var fileFoto = File(Folder.desktop + '/temp/mytestfile.jpg');

if (fileFoto.exists) {

     var myImg = ScriptUI.newImage(fileFoto);

     tbPanel.photo = tbPanel.add('iconbutton', [0,0, undefined,undefined], myImg, {style:"toolbutton"});

     tbPanel.photo.size = [44,50]; // this should be the size of the image. If it doesn't exists it will add space around the image

     tbPanel.photo.onDraw = function () { // this is necessary, but if you use it many times, put this function outside and call it when needed.

          with( this ) {

               graphics.drawOSControl();

               graphics.drawImage (image, 0, 0, image.size[0], image.size[1]);

          }

     }

}

Hope it helps.

[Matt Stec]

This seems to be working fine Pedro, thanks, now I just have to figure out how to scale the image so it doesn't crop it, but at least the image is being displayed. Thanks very much.

[Matt Stec]

OK, this worked for me if anyone is looking for the same:

var w = new Window ("palette", "Thumbnail");

var fileFoto = File("~/Desktop/P1010627.JPG");

if (fileFoto.exists) {

  var myImg = ScriptUI.newImage(fileFoto);

  image = w.add('iconbutton', [0,0, 400,400], myImg, {style:"toolbutton"}); //400 x400 being the size of the window

  image.onDraw = function () {

  with( this ) {

  if( !this.image ) return;

  var WH = this.size,

  wh = this.image.size,

  k = Math.min(WH[0]/wh[0], WH[1]/wh[1]),xy;

  wh = [k*wh[0],k*wh[1]];

  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;

  graphics.drawOSControl();

  }

  }

}

w.show();

not sure what graphics.drawOSControl(); does, seems to be working without it, Pedro?

[Pedro Cortez Marques]

Hi Matt

Invoke the ScriptUIGraphics.drawOSControl() method when you need to produce the default widget skin before further customization. This means that if you don't need to test the iconbutton behaviour on every computer platform, you don't need it.

Personally I prefer to put it just in case, but the fact is that it works without it (windows7 64bit)

I found that your code need to remove several 'this'. I have clean it.

When you have

with( this ) {  something  }

where ´something' must not start with this again (it is pre-assumed when invoked on with(this)

var w = new Window ("palette", "Thumbnail");

var fileFoto = File(Folder.desktop+"/P1010627.JPG");

if (fileFoto.exists) {

    var myImg = ScriptUI.newImage(fileFoto);

    image = w.add('iconbutton', [0,0, 400,400], myImg, {style:"toolbutton"}); //400 x400 being the size of the window

    image.onDraw = function () {

        with( this ) {

            if( !image ) return;

            var WH = size,

            wh =image.size,

            k = Math.min(WH[0]/wh[0], WH[1]/wh[1]),xy;

            wh = [k*wh[0],k*wh[1]];

            xy = [ (WH[0]-wh[0])/2, (WH[1]-wh[1])/2 ];

            graphics.drawImage(image,xy[0],xy[1],wh[0],wh[1]);

            WH = wh = xy = null;

        }

    }

}

w.show();

Regards

[Matt Stec]

Thanks Pedro, that makes sense.

I ran into another problem. When I cycle through selected images with the next button, they seem to be displayed on top of one another (if you select landscape and portrait oriented files) instead of just replacing graphics.

How do I zero the image.image value. I tried null, or false, doesn't work. Code below: I do the temporary bitmap file because I need to preview pdf files as well.

[code]

var counter = 0;

var myImg;

var w = new Window ("palette", "Thumbnail");

makeThumbnail(counter);

myImg = ScriptUI.newImage(fileFoto);

image = w.add('iconbutton', [0,0, 400,400], myImg);

var closeBtn = w.add("button",undefined,"Close");

var nextBtn = w.add("button",undefined,"Next");

function makeThumbnail(counter){

var _sourceFile = new File(app.document.selections[counter].path);

var _sourceFolder = new File(app.document.selections[counter].parent.path);

            Folder("~/Desktop/temp").create(); 

            var loc = new Thumbnail(Folder(_sourceFolder)); 

            loc.open(); 

            var t = new Thumbnail(File(_sourceFile)); 

            app.document.select(t); 

            var bmd = new BitmapData(t.spec); 

            if(bmd instanceof BitmapData) 

            { 

                var expPath = "~/Desktop/temp/" + t.name + ".jpg"; 

                bmd.exportTo(new File(expPath)); 

            } 

  var myNewFile =File (expPath);

fileFoto = File(myNewFile);

return myImg;

}

image.onDraw = function () {

  with( this ) {

  if( !image ) return;

  var WH = size,

  wh = image.size,

  k = Math.min(WH[0]/wh[0], WH[1]/wh[1]),xy;

  wh = [k*wh[0],k*wh[1]];

  xy = [ (WH[0]-wh[0])/2, (WH[1]-wh[1])/2 ];

  graphics.drawImage(image,xy[0],xy[1],wh[0],wh[1]);

  WH = wh = xy = null;

  }

  }

w.show();

closeBtn.onClick = function(){

w.close();

  }

nextBtn.onClick = function(){

counter++

makeThumbnail(counter);

$.writeln( myImg );

//image.image =0;

myImg = ScriptUI.newImage(fileFoto);

image.image = myImg;

}

[Pedro Cortez Marques]

It seams that this function has some errors, because when you invoke app.document.selections[] that means this object is already a thumbnail.

So it is not necessary invoke new Thumbnail() after that:

function makeThumbnail(counter) {

     var _sourceFile = app.document.selections[counter];

     var _sourceFolder = app.document.selections[counter].parent;

     Folder("~/Desktop/temp").create();

     sourceFolder.open();

     var t = _sourceFile;

     app.document.select(_sourceFile);

     var bmd = new BitmapData(t.spec);

     if (bmd instanceof BitmapData) {

          var expPath = "~/Desktop/temp/" + t.name + ".jpg";

          bmd.exportTo(new File(expPath));

     }

     var myNewFile =File (expPath);

     fileFoto = File(myNewFile);

     return myImg;

}

Regarding the problem that the graphics doesn't refresh when  invoke new image, I have try that time ago, and I didn't get the solution. But the previous image that still is seen bellow, it isn't real. For example, if you change the x,y location of the image, you will see that the back image will vanish. But if you go back to the same x.y location it still be there.

I wander if would be possible to get the generated thumbs could be allways square filling white(or othe color) the non image areas.