16 Replies Latest reply on Dec 12, 2013 11:12 AM by Laubender

    ScriptUI: replacing images

    Peter Kahrel Adobe Community Professional & MVP

      When you use graphic files (such as PNGs) for images, you can change the contents of an image control. The following script sets an image (iconA) but immediately replaces it with iconB, so that by the time the window is displayed, iconB is the one you see:

       

      iconA = File ('. . . ..png');
      iconB = File ('. . . ..png');
      
      w = new Window ('dialog');
          icon = w.add ('image', undefined, iconA);
          icon.image = iconB;
      w.show();
      

       

      But when you use strings for icons, as in this script:

       

      iconA = "\u0089PNG\r\n\x1A\ . . . `\u0082";
      iconB = "\u0089PNG\r\n\x1A\ . . . `\u0082";
      
      w = new Window ('dialog');
          icon = w.add ('image', undefined, iconA);
          icon.image = iconB;
      w.show();
      

       

      the image is not replaced.

       

      Does anyone know how to replace images using strings?

       

      Thanks,

       

      Peter

        • 1. Re: ScriptUI: replacing images
          Vamitul Level 4

          hmm.. using your own technique:

           

          write iconA and iconB to temp PNG files, and use them as is.

          • 2. Re: ScriptUI: replacing images
            Marc Autret Level 4

            Hi Peter,

             

            Assuming iconA and iconB have the same size this should do the trick:

             

            var iconA = "\x89PNG...\x82",
                iconB = "\x89PNG...\x82";
            
            var w = new Window ('dialog'),
                icon = w.add ('image', undefined, iconA);
            
            // . . .
            
            icon.onDraw = function()
                {
                this.graphics.drawImage(ScriptUI.newImage(iconB),0,0);
                delete this.onDraw;
                };
            
            w.show();
            

             

            Anyway I don't see the reason why you should have to reset the inner ScriptUIImage of the icon object between the construction of w and the invokation of w.show(). [?]

             

            @+

            Marc

            • 3. Re: ScriptUI: replacing images
              Peter Kahrel Adobe Community Professional & MVP

              Thanks both.

               

              Vamitul -- Well, yes. I now have separate PNGs that need to be in the script's folder. But I'd rather have everything in the script file. Besides, If I can't get something to work I want to know if it's really not possible

               

              Marc -- That example where a graphic is replaced immediately was just to show the problem. What I'm after is a checkbox such as some of InDesign's checkboxes, which can show either of three states: on, off, or mixed.

               

              var icon_on = File ('. . ./checkbox_on.png');
              var icon_off = File ('. . ./checkbox_off.png');
              var icon_mixed = File ('. . ./checkbox_mixed.png');
              
              var w = new Window ('dialog');
                  var icon = w.add ('image', undefined, icon_on);
                  icon.id = 'on';
              
                  icon.addEventListener ('click', function () {
                      switch (this.id){
                          case 'on' : {this.id = 'off'; icon.image = icon_off; break}
                          case 'off' : {this.id = 'mixed'; icon.image = icon_mixed; break}
                          case 'mixed' : {this.id = 'on'; icon.image = icon_on}
                      }
                  });
              
              w.show();
              

               

              This script works fine. But I can't get it to work with string variables for the icons. I rummaged around with various variants of your solution, but I guess I'm missing something because I can't get it to work.

               

              Thanks,

               

              Peter

              • 4. Re: ScriptUI: replacing images
                Vamitul Level 4

                Hi Peter!

                 

                I think you missunderstod me.

                 

                what i meant was something like this:

                 

                 

                var iconA = "\u0089PNG\r\n\x1A\ . . . `\u0082";
                var myIcon=new File( Folder.userData.absoluteURI + "/ScriptUI_IconA.png" );
                if (!myIcon.exist){
                          myIcon.encoding = "BINARY";
                          myIcon.open( "w" );
                          myIcon.write( iconA );
                          myIcon.close();
                }
                
                • 5. Re: ScriptUI: replacing images
                  Marc Autret Level 4

                  Hi Peter,

                   

                  In that case you need something more subtle, for changing the underlying ScriptUIImage at runtime through a PNG-string is not supported. You then need both to trigger onDraw (using my 'refresh' trick) and to invoke graphics.drawImage() within, as follows:

                   

                   

                  // Trigger onDraw on demand [CS4/CS5/CS6/CC compatibility routine]
                  // ---
                  const CC_FLAG = +(9 <= parseFloat(app.version));
                  
                  Image.prototype.refresh = CC_FLAG ?
                      function()
                      {
                          var wh = this.size;
                          this.size = [1+wh[0],1+wh[1]];
                          this.size = [wh[0],wh[1]];
                          wh = null;
                      }:
                      function()
                      {
                          this.size = [this.size[0],this.size[1]];
                      };
                  
                  // Your code
                  // ---
                  var PNGS = [
                      /*on*/    "\x89PNG . . . `\x82",
                      /*off*/   "\x89PNG . . . \x82",
                      /*mixed*/ "\x89PNG . . . \x82"
                      ];
                  
                  var w = new Window('dialog'),
                      icon = w.add('image', undefined, PNGS[0], {id:0});
                  
                  icon.onDraw = function()
                      {
                      this.graphics.drawImage(ScriptUI.newImage(PNGS[this.properties.id]),0,0);
                      };
                  
                  icon.addEventListener('click', function()
                      {
                      this.properties.id = (1 + this.properties.id) % 3;
                      this.refresh();
                      });
                  
                  w.show();
                  

                   

                  However, I do not recommend this approach, because it leads to an expensive use of ScriptUI.newImage()—that is, every onDraw has to process a new ScriptUIImage. One option—not tested—is to pre-convert each PNG string into a ScriptUIImage using ScriptUI.newImage(PNGS[0..3]) and then to access these ScriptUIImages through an array (from onDraw, as done above).

                   

                  Another option (my preferred way) is to create a single PNG, that is, a single ScriptUIImage, and then to apply a shift accordingly, as showed in my "Sprite Buttons" technique:

                  http://www.indiscripts.com/post/2011/04/sprite-buttons-in-scriptui

                   

                  @+

                  Marc

                  • 6. Re: ScriptUI: replacing images
                    Bob Stucky Adobe Employee

                    Write your "string" images to file, then use the files...

                    • 7. Re: ScriptUI: replacing images
                      Bob Stucky Adobe Employee

                      To be clear, your strings are strings, until you write them to file as binaries.

                      • 8. Re: ScriptUI: replacing images
                        Peter Kahrel Adobe Community Professional & MVP

                        Vamitul (and Bob) -- No, I didn't misunderstand you, I was just trying to avoid that method, but I may have to use it anyway.

                         

                        Marc -- I had forgotten about your sprite method and will give that a shot. What I want to achieve seems a good candidate as the trhee images I'm using are equally sized squares. If it all becomes too cumbersome I'll go for the Vamitul/Bob method.

                         

                        Thanks,

                         

                        Peter

                        • 9. Re: ScriptUI: replacing images
                          Trevorׅ Adobe Community Professional

                          Hi Peter,

                           

                          Marc certainly doesn't need my approval but I found his new sprite button very effective and easy to use.

                           

                          I set up the 3 picture using fireworks, divide the canvas into 3 and then place the icons accordingly even if they are not the same size as long as you line them up properly and use transparency it will work.

                           

                          Trevor

                          • 10. Re: ScriptUI: replacing images
                            Marc Autret Level 4

                            Peter,

                             

                            Just to be sure, did you try my code above (#5)? Can you tell me on which platform/version it fails?

                             

                            Thanks,

                            Marc

                            • 11. Re: ScriptUI: replacing images
                              Peter Kahrel Adobe Community Professional & MVP

                              Marc,

                               

                              It doesn't fail at all! Did I give you that impression? It works very well, in fact (finished adding it to my code just now, which is why I didn't respond earlier). It's a very nice solution. The (relative) complexity of the code is compensated by the lack of the need of external files. Thanks very much for reminding me of your sprite method.

                               

                              I did notice something strange, though. When you use the sprite method in a script run from the ESTK, the spinning wheel in the status bar at the bottom of the screen stays there (not spinning). The ESTK isn't frozen, you can work, though some keys don't work and the ESTK seems to degrade slowly. This is on Windows 7/64 CS6.

                               

                              Peter

                              • 12. Re: ScriptUI: replacing images
                                Peter Kahrel Adobe Community Professional & MVP

                                PS: On Windows & ESTK CC this doesn't happen; in CS6 when the script is run from the panel, there's no problem either, so it's an ESTK problem.

                                 

                                P.

                                • 13. Re: ScriptUI: replacing images
                                  Trevorׅ Adobe Community Professional

                                  Hi Peter,

                                   

                                  I always found on CS5 & 6 (I think CC fixed this but could very well be wrong) that an image string run in the ESTK causes it to have some form of nervous breakdown.  If the script is targeted to indesign either with #target or the dropdown menu then it runs fine.  I always use the batch conversion script from your guide and  it took me quite a few breakdowns to figure out the problem so maybe you could put a little footnote in version 2.3?

                                   

                                  Trevor

                                  • 14. Re: ScriptUI: replacing images
                                    Peter Kahrel Adobe Community Professional & MVP

                                    Trevor -- After the exchanges and my adventures the last few days I was planning a rewrite of the sections dealing with icons.

                                     

                                    Peter

                                    • 15. Re: ScriptUI: replacing images
                                      DBarranca Level 4

                                      Hi Bob,

                                      I was unaware of this topic when I asked for help here (same issue) Is it that what you meant? (export the string as JSXBIN) - I did try, but to no avail.

                                      Regards,

                                       

                                      Davide Barranca

                                      • 16. Re: ScriptUI: replacing images
                                        Laubender Adobe Community Professional & MVP

                                        @Davide – I know it's cheating and absolutely not waterproof, also I did not test it, but couldn't you write the file as myFile.hidden = true ?

                                         

                                        Uwe