6 Replies Latest reply on Aug 31, 2013 8:41 AM by DBarranca

    IconButton - 'pressed' state showing borders

    DBarranca Level 4

      Hello,

      is there a way to specify (in a ScriptUI window) a property of an iconbutton such as the 'pressed' state doesn't show the button border and shadowing?

       

      var dir = "" + File($.fileName).path + "/img/";
      var icons =  {          normal: File(dir + "createNew_normal.png"),
                                    disable: File(dir + "createNew_normal.png"), 
                                    pressed: File(dir + "createNew_pressed.png"), 
                                  rollover: File(dir + "createNew_rollover.png")
                               };
      var w = new Window("dialog");
      b = w.add ("iconbutton", undefined, ScriptUI.newImage (icons.normal, icons.disable, icons.pressed, icons.rollover), {style: "toolbutton"});
      w.show();
      

       

      With the {style: "toolbutton"} I can avoid the button borders on normal and rollover state, yet on pressed it shows (tested on PS CC and ESTK, OSX).

      Thank you!

       

      Davide Barranca

      www.davidebarranca.com

        • 1. Re: IconButton - 'pressed' state showing borders
          UQg Level 4

          You might be interested in this thread  http://forums.adobe.com/message/5447193#5447193 (post 21)

          I don't have CC. What i know is that issue is described there and they (Marc Autret) have found a work around.

           

          Xavier.

          • 2. Re: IconButton - 'pressed' state showing borders
            DBarranca Level 4

            Hi Xavier,

            I've been studying Marc workaround for some time yesterday, but as it is it doesn't work on Photoshop. For some reason the 'image' component itself, given the explicit onDraw() call and the refresh prototype he's written, doesn't crop the sprite image, so what you see is the full three-states shifting up and down. Flawless on InDesign and ESTK, flawed on PS.

            I've been able to tweak it and get a working Sprite using a 'customView' component instead of the 'image' - but it took some head-scratching time

            Apparently custom components (while a bit more annoying because they have no default appearance whatsoever) have a more standard behavior.

             

            For my own problem, I've found that if you explicitely set event listeners and the onDraw() method (as you would for a customButton), it finally works as expected:

             

            var dir = "" + File($.fileName).path + "/img/";
            var icons =  { normal: File(dir + "createNew_normal.png"),
                           disable: File(dir + "createNew_normal.png"), 
                           pressed: File(dir + "createNew_pressed.png"), 
                           rollover: File(dir + "createNew_rollover.png")
            };
            
            var w = new Window("dialog");
            b = w.add ('button'); // works for customButton, iconButton, button
            b.preferredSize = [200,100];
            
            var roll = ScriptUI.newImage(icons.rollover);
            var norm = ScriptUI.newImage(icons.normal);
            var down = ScriptUI.newImage(icons.pressed);
              
            b.image = norm;
            b.size = [140, 40]
            b.onDraw = function (state) {
                this.graphics.drawImage(this.image,0,0);
            }
            
            var mouseEventHandler = function(event) {
                switch (event.type) {
                    case 'mouseover': 
                        event.target.image = roll;
                        break;
                    case 'mouseout': 
                        event.target.image = norm;
                        break;
                    case 'mousedown': 
                        event.target.image = down;
                        break;
                    case 'mouseup': 
                        event.target.image = roll;
                        break;
                    default: 
                        event.target.image = norm;
                }
                event.target.notify("onDraw");
            }
            
            b.addEventListener('mouseover', mouseEventHandler, false);
            b.addEventListener('mouseout', mouseEventHandler, false);
            b.addEventListener('mousedown', mouseEventHandler, false);
            b.addEventListener('mouseup', mouseEventHandler, false);
            
            w.show();
            

             

            Davide

            • 3. Re: IconButton - 'pressed' state showing borders
              Michael L Hale Level 5

              Are you sure you need the line event.target.notify("onDraw");?

               

              It works for me in Photoshop CC without that line. And without that line it also works with 'image'.

              • 4. Re: IconButton - 'pressed' state showing borders
                DBarranca Level 4

                Yup, you're right - I've noticed that me too.

                Since I came up with this configuration with a lot of trial and error on a custom component, I guess the notify('onDraw') comes from early experiments and escaped the code-cleaning, thanks for pointing this out!

                • 5. Re: IconButton - 'pressed' state showing borders
                  Michael L Hale Level 5

                  Starting with CS5 I have had trouble with mouse events attached to an 'image' control. I only noticed that line was not needed because I tested your code changing the control to 'image' and that line throws an error with that type of control. I commented that line out and it worked. So I changed the type of control back to button and it still worked.

                   

                  So thanks for showing me how to have mouse events in newer versions of Photoshop.

                  • 6. Re: IconButton - 'pressed' state showing borders
                    DBarranca Level 4

                    Yet Mike there are things that I still don't get - for instance why the following works on ESTK and not PS (it comes from Marc Autret):

                     

                    // =====================================
                    // Underlined StaticText
                    // =====================================
                    var u,
                        w = new Window('dialog', "Underline Me!"),
                        s1 = w.add('statictext', u, "Not Underlined"),
                        s2 = w.add('statictext', u, "Underlined"),
                        b = w.add('button', u, "OK"),
                        // ---
                        wgx = w.graphics,
                        linePen = wgx.newPen(wgx.PenType.SOLID_COLOR,[0,0,0], 1);
                    
                    s2.preferredSize[1] += 3;
                    
                    s2.onDraw = function(/*DrawState*/)
                    {
                        var gx = this.graphics,
                            sz = this.preferredSize,
                            y = sz[1]-1;
                    
                        gx.drawOSControl();
                        gx.newPath();
                        gx.moveTo(0, y);
                        gx.lineTo(sz[0],y);
                        gx.strokePath(linePen);
                    };
                    
                    w.show();
                    

                     

                    Here the onDraw() is never executed, nor via a direct s2.notify("onDraw") call - the only way to simulate the underline is to use a customView, draw a string and a stroke - awful.