9 Replies Latest reply on Mar 28, 2012 3:02 PM by Peter Kahrel

    Adding and removing images from UI group

    InternRandy

      We are trying to make a user interface to preview images three at a time using pageination.

       

      In the Code below, I can succesfully remove the three images currently in my group, however when I go to add the next three images, they successfully add but they do not show up in the group. The result of the alert is my three new image objects.

       

      myImageGroup.remove(myImageGroup.children[2]);panel.layout.layout(1);

                                    myImageGroup.remove(myImageGroup.children[1]);panel.layout.layout(1);

                                    myImageGroup.remove(myImageGroup.children[0]);panel.layout.layout(1);

                                    alert(myImageGroup.children);

                                    activeImage = activeImage + 3;

                                    myImageGroup.add("image", undefined, imageArray[activeImage]);

                                    myImageGroup.add("image", undefined, imageArray[activeImage + 1]);

                                    myImageGroup.add("image", undefined, imageArray[activeImage + 2]);

      alert(myImageGroup.children);

       

      Any Ideas as to how to get them to show up?

       

      Thank you,

      Randy

        • 1. Re: Adding and removing images from UI group
          Marc Autret Level 4

          Hi Randy,

           

          Considering your code, there are good reasons to think you just need to add:

           

          panel.layout.layout(1);
          

           

          after adding images in the group—as well as you invoke it after removing the previous images.

           

          By the way, there is no point in executing the LayoutManager at each step. This should run faster:

           

          // Remove image(s) from the group

          myImageGroup.remove(. . .)

           

          // Add new image(s)

          myImageGroup.add(. . .)

           

          // Refresh the UI

          panel.layout.layout(1);

           

          @+

          Marc

          1 person found this helpful
          • 2. Re: Adding and removing images from UI group
            InternRandy Level 1

            Hi Marc,

             

            Thank you for responding to my question! I implemented your suggestion, but still no luck.... Im thinking that I am adding image objects into my group but they are blank images... Do you know if


            myImageGroup.add("image", undefined, imageArray[activeImage]);


            Is the correct way to re-add an image you have already stored in an array, or if there is any way to do that?

             

            As of right now I am just trying to make this code work with hardcoding the same image into an array multiple times with this code

             

            for (var k=0; k<16;k++)

            {

                      var image = myImageGroup.add("image", undefined, File("~/Desktop/Ultimate.gif"));

                      image.size = [300,300];

                      imageArray[k] = image;

            }

             

            Thank you for your reply!!!


            • 3. Re: Adding and removing images from UI group
              InternRandy Level 1

              Hey Marc,

               

              I was able to confirm that the problem now is with my

               

              myImageGroup.add("image", undefined, imageArray[activeImage]);

               

              code, as when I just change it to

              myImageGroup.add("image", undefined, File("~/Desktop/Ultimate.gif"));

               

              It will show the Image again... Do you have any Idea how to insert an image that is already stored in an array back into the group?

               

              Thanks again! Randy

              • 4. Re: Adding and removing images from UI group
                Marc Autret Level 4

                Indeed, your code cannot work!

                 

                In my original post I made the assumption that you were storing in imageArray your image paths (String or File), but your previous snippet shows that you are trying something very different:

                 

                for(var k=0 ; k<16 ; k++)
                {
                    var image = myImageGroup.add("image", undefined, File("~/Desktop/Ultimate.gif"));
                    image.size = [300,300];
                    imageArray[k] = image;
                }
                

                 

                Thus, your imageArray contains Image objects—which are pure ScriptUI containers dedicated to host ScriptUIImage instances. (Note that the Image widget is not a ScriptUIImage instance. This fact is pretty undocumented, but it makes an important difference here.)

                 

                Given that each imageArray[k] is in fact a Image widget, the below statement cannot work:

                 

                myImageGroup.add("image", undefined, imageArray[activeImage]); // Attempt to supply an 'Image' widget to create an 'Image' widget!
                

                 

                because the add('image'...) method simply does not support such parameter. The 3rd argument must be: a File, a String, or an existing ScriptUIImage!

                 

                What is fun is that, given a non-empty Image widget, you can access its ScriptUIImage content through the .image property!

                 

                So, if you replace the previous statement by:

                 

                myImageGroup.add("image", undefined, imageArray[activeImage].image); // Supply an 'ScriptUIImage' widget to create an 'Image' widget
                

                 

                this probably will work—provided that imageArray[activeImage] is still valid.

                 

                However, I definitively do not recommand such strategy in your case. There is no sense in storing Image widgets in your array since your script removes these widgets! Best is to store image paths or File and simply use them when you (re)create any Image widget. Another approach is to directly handle ScriptUIImage references. This could also work (not tested).

                 

                @+

                Marc

                1 person found this helpful
                • 5. Re: Adding and removing images from UI group
                  InternRandy Level 1

                  Thanks again Marc!

                   

                  I saw what you are talking about with making the widgets then just removing them anyways and you are definately right! That isnt a very productive thing to do... But my problem is that I want to eventually have this code be able to access images from across the net and store each of them once in an array (or any other way that would make this easier) In order to make a GUI that will allow a user to cycle through the images.

                   

                  I have starting messing around with the ScriptUIImage refrences, but even when all of the image objects are ScriptUIImage widgets in my array, this code still doesnt seem to work!

                   

                  myImageGroup.add("image", undefined, imageArray[0]);

                   

                  The whole reason why im trying to remove from and add to the group is because I want to be able to cycle through the images by removing the current three and adding the next three, or removing the current three and adding the previous three. If you have any Ideas they would be much appreciated!

                   

                  Randy

                  • 6. Re: Adding and removing images from UI group
                    Marc Autret Level 4

                    Hi again, Randy,

                     

                    The problem is that we don't see the global structure of your process, as you only show code fragments. For example, I don't know why you need to remove and recreate 'on the fly' these Image widgets—I suppose you have a good reason to do so, anyway.

                     

                    Technically, as I already wrote, Image widgets are just containers. In usual situations, when I need to update the picture within a container, I keep the widget in place and I only update its .image property with another ScriptUIImage instance. So I don't remove any ScriptUI widget. Let's illustrate this with a stupid sample code:

                     

                    var u,
                        w = new Window('dialog'),
                        p = w.add('panel'),
                        img1 = p.add('image', u, "path/to/test.png"),
                        img2 = p.add('image'), // empty container, size=[0,0]
                        b = w.add('button', u, "Test");
                    
                    b.onClick = function()
                    {
                        img2.image = img1.image;
                        img2.size = img1.size;
                        w.layout.layout(1);
                    };
                    
                    w.show();
                    

                     

                    Note that img1 and img2 are two distinct Image containers that already exist when the dialog show up. The onClick event handler just load img1.image into img2.image, which actually duplicates the link to the existing ScriptUIImage instance. Then I resize the container accordingly and update the layout. A similar approach could be used if you only had to dynamically change/switch image contents within a set of fixed Image containers. Is that all you need to do?

                     

                    @+

                    Marc

                    1 person found this helpful
                    • 7. Re: Adding and removing images from UI group
                      InternRandy Level 1

                      Yes! This is right along the lines of what I have been trying to do! Thank you so much Marc!

                       

                      I know this is probably very basic inDesign scripting but I am very new to it so it is all really advanced for me! hahaha

                       

                      I am going to take this code as a basis and try to make it fit what we need here and If I have any more big problems I will let you know... Again thank you so much!

                       

                      Randy

                      • 8. Re: Adding and removing images from UI group
                        Marc Autret Level 4

                        Great!

                         

                        Now, this article may help you to go further:

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

                         

                        @+

                        Marc

                        1 person found this helpful
                        • 9. Re: Adding and removing images from UI group
                          Peter Kahrel Adobe Community Professional & MVP

                          > I know this is probably very basic inDesign scripting

                           

                          Not at all!

                           

                          Apart from Marc's script, Gerald Singelmann has a script on his blog (http://indesign-faq.de/de/ScriptUI_scrollbar) which does exactly what you want. His code might be instructive for you.

                           

                          Peter