15 Replies Latest reply on Oct 13, 2016 7:15 PM by Whatevermajorloser

    Remove ScriptUI Image Data?

    Whatevermajorloser Level 1

      I've got a customisable section in one of my scripts that displays a window allowing users to assign images to tasks, which are then presented to them depending on what kind of file they run the script on. Now, if they select that they want to create a new task, I'd like to remove the image for the currently selected task in the window whilst still keeping the image element so that they can add their new image to it. To give you an example:

       

      var w = new Window('dialog')  
      w.taskImage = w.add('image')  
      w.taskImage.image = 'link/to/image.png'  
      w.show()
      
      

       

       

      When this displays and the users specifies that they want to add a new task, I was hoping to be able to clear the current image from taskImage by using something like this:

       

       

      w.taskImage.image = undefined  

       

      However, this doesn't work and just returns a Bad argument error.

       

      Is there a way to do this?

        • 1. Re: Remove ScriptUI Image Data?
          Chuck Uebele Adobe Community Professional & MVP

          You need to change the variables then use a command to redraw the ui:

           

            w.layout.layout(true);

          • 2. Re: Remove ScriptUI Image Data?
            Whatevermajorloser Level 1

            Thanks for the reply, Chuck! Unfortunately when I include the layout command it completely messes up the layout of my dialog..

             

            Also, when you say change the variables, do you just mean changing the image path to undefined?

            • 3. Re: Remove ScriptUI Image Data?
              Chuck Uebele Adobe Community Professional & MVP

              I'm not 100% sure on what you're doing, but if you want to change the image, then change the path then do the redraw. If you want to just not show the image, leave a blank space, use visible = true on that part. How is the layout.layout = true changing your UI? If it's moving things around, maybe you need to group things differently to those elements don't move. What version of PS are you using. There was a really bad bug with the layout command in version 2015, but it's been fixed in 2015.5.

              • 4. Re: Remove ScriptUI Image Data?
                Whatevermajorloser Level 1

                I've got the latest version of Photoshop. I guess my grouping is an issue then. Am I able to target specific elements with layout.layout? Like, for instance, a panel that houses an image?

                 

                By blank space, do you mean like this?

                 

                w.taskImage.image = '' 
                

                 

                Because that just returns a 'File or Folder does not exist' error?

                • 5. Re: Remove ScriptUI Image Data?
                  pixxxel schubser MVP & Adobe Community Professional

                  Hi Whatevermajorloser,

                  do you want to remove the image? Or only hide?

                   

                  You can hide elements (in this case an image) in a dialog e.g. like this:

                  var w = new Window('dialog');
                  w.bt = w.add("button", [0, 0, 150, 0], "change imgs visibility");
                  w.taskImage1 = w.add('image');
                  w.taskImage2 = w.add('image');
                  w.taskImage1.image = '~/desktop/1.png'; // be sure that 1.png exists
                  w.taskImage2.image = '~/desktop/1.png'; // the same image in opposites state
                  w.taskImage2.visible = false;
                  w.bt.onClick = function() {
                      w.taskImage1.visible = !w.taskImage1.visible;
                      w.taskImage2.visible = !w.taskImage2.visible;
                  }
                  
                  w.show();
                  //note: escape will close the window
                  

                   

                  ---------------------------

                   

                  For removing the image you really need w.layout.layout()

                  var w = new Window('dialog');
                  w.bt = w.add("button", [0, 0, 150, 0], "remove first img");
                  w.taskImage1 = w.add('image');
                  w.taskImage2 = w.add('image');
                  w.taskImage1.image = '~/desktop/1.png'; // be sure that 1.png exists
                  w.taskImage2.image = '~/desktop/1.png'; // the same image
                  //w.taskImage2.visible = true;
                  w.bt.onClick = function() {
                      w.remove(w.taskImage1);
                      w.layout.layout(true);
                  }
                  
                  w.show();
                  //note: escape will close the window
                  

                   

                  Have fun

                   

                  • 6. Re: Remove ScriptUI Image Data?
                    Whatevermajorloser Level 1

                    Hey pixxxel schubser, thanks for the reply! I appreciate you going into detail about removing and hiding elements, but I already know how to do this

                     

                    Here's a screenshot of the part of my dialog that I'm referring to:

                     

                    Screen Shot 2016-10-04 at 08.53.38.png

                     

                    The iconbutton element has an onClick function attached to it which opens up a dialog for the user to select their image, so I don't want to remove or hide it. If a user chooses to add a new task (template) for a particular file, it clears all the info in the fields and I want to be able to clear the image that is currently in there too without actually removing/hiding the element.

                     

                    Chuck Uebele hinted at the possibility of being able to do this by leaving a blank space along with using layout.layout, but I can't get it to do it without it returning a File or Folder does not exist error (see my reply above).

                    • 7. Re: Remove ScriptUI Image Data?
                      Chuck Uebele Adobe Community Professional & MVP

                      Okay, that's starting to make some sense. You can create a blank image, and I would try making it a transparent png, so that it would show whatever UI color is selected, and just swap the image path for that. I think you may still need to do the layout.layout(true) statement to get the image to change, but instead of attaching it to the entire ui, just attach it to the group or container that the image is in.

                      • 8. Re: Remove ScriptUI Image Data?
                        Whatevermajorloser Level 1

                        That is what I currently have in place after I couldn't figure out how to do what I wanted. I was hoping to avoid having to do this because I want the script to just be able to exist/function on its own, without requiring any pre-existing images

                        • 9. Re: Remove ScriptUI Image Data?
                          Chuck Uebele Adobe Community Professional & MVP

                          Can you create a group and specify a size for that group that matches the image, then you can remove the image, and the layout should remain consistent with the layout.layout command?

                          • 10. Re: Remove ScriptUI Image Data?
                            Tomas Sinkunas Adobe Community Professional

                            If there's a will - there's a way. Hope this is something you might find useful.

                            What I did is I created a fixed size group and assigned eventListener. Once event is triggered, it prompts to select image.

                             

                            // Create UI
                            var win = new Window("dialog");
                            var grp = win.add("group");
                              grp.preferredSize = [200, 200];
                              grp.addEventListener("mousedown", function() { toggleImage(grp) });
                            
                            win.show();
                            
                            function toggleImage(container) {
                              // Select new image
                              var newImage = selectFiles(false, "png");
                              if (!newImage) return;
                            
                              // Remove old image
                              while(container.children[0])
                              container.remove(container.children[0]);
                            
                              // Add new image to UI
                              container.add("image", undefined, newImage);
                            
                              // Refresh UI
                              container.layout.layout(true);
                            }
                            
                            function selectFiles (multiSelect, extension) {
                              var theString = "Please select files";
                            
                              if ($.os.search(/windows/i) != -1)
                              var theFiles = File.openDialog (theString, "*." + extension, multiSelect);
                              else
                              var theFiles = File.openDialog (theString, getFiles, multiSelect);
                            
                              function getFiles(theFiles) {
                              var re = new RegExp("\.(" + extension + ")$","i");
                              if (theFiles.name.match(re) || theFiles.constructor.name == "Folder") {
                              return true
                              }
                              }
                            
                              return theFiles;
                            }
                            
                            • 11. Re: Remove ScriptUI Image Data?
                              Whatevermajorloser Level 1

                              Nicely done, thank you Tomas! Sorry for the late response, I've been away on holiday. I've just tested it and it works wonderfully. I wonder if I can wrap the group with some sort of border so that the user knows they can click there, because right now there is no indication.

                               

                              Also, I didn't realise openDialog had those extra two extension and multi select parameters - quite useful!

                               

                              Thank you

                              • 12. Re: Remove ScriptUI Image Data?
                                Tomas Sinkunas Adobe Community Professional

                                Sure you can - use panel instead of group.

                                Switch var grp = win.add("group");

                                To var grp = win.add("panel", undefined, "panel name");

                                • 13. Re: Remove ScriptUI Image Data?
                                  Whatevermajorloser Level 1

                                  Yeah, I tried this and the eventListener stopped working..

                                  • 14. Re: Remove ScriptUI Image Data?
                                    Tomas Sinkunas Adobe Community Professional

                                    Interesting. Seems as if Panel has a bug with eventListeners.

                                    Oh, it's so Adobe:)

                                     

                                    Anyways, what if you had group element but with some background color? Check it out.

                                     

                                    // Create UI
                                    var win = new Window("dialog");
                                    var grp = win.add("group");
                                      grp.preferredSize = [200, 200];
                                      grp.graphics.backgroundColor = win.graphics.newBrush(win.graphics.BrushType.SOLID_COLOR, [0.5,0.5,0.5], 1);
                                      grp.addEventListener("mousedown", function() { toggleImage(grp) });
                                    
                                    win.show();
                                    
                                    function toggleImage(container) {
                                      // Select new image
                                      var newImage = selectFiles(false, "png");
                                      if (!newImage) return;
                                    
                                      // Remove old image
                                      while(container.children[0])
                                      container.remove(container.children[0]);
                                    
                                      // Add new image to UI
                                      container.add("image", undefined, newImage);
                                    
                                      // Refresh UI
                                      container.layout.layout(true);
                                    }
                                    
                                    function selectFiles (multiSelect, extension) {
                                      var theString = "Please select files";
                                    
                                      if ($.os.search(/windows/i) != -1)
                                      var theFiles = File.openDialog (theString, "*." + extension, multiSelect);
                                      else
                                      var theFiles = File.openDialog (theString, getFiles, multiSelect);
                                    
                                      function getFiles(theFiles) {
                                      var re = new RegExp("\.(" + extension + ")$","i");
                                      if (theFiles.name.match(re) || theFiles.constructor.name == "Folder") {
                                      return true
                                      }
                                      }
                                    
                                      return theFiles;
                                    }
                                    
                                    • 15. Re: Remove ScriptUI Image Data?
                                      Whatevermajorloser Level 1

                                      Good thinking. I might try a combination of that and maybe wrapping a panel around the group, all depends on how it looks Thank you again for your help!