IconButton - 'pressed' state showing borders

Advocate ,
Aug 29, 2013 Aug 29, 2013

Copy link to clipboard

Copied

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

TOPICS
Actions and scripting

Views

2.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Advocate , Aug 31, 2013 Aug 31, 2013
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-...

Likes

Translate

Translate
Advocate ,
Aug 31, 2013 Aug 31, 2013

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 31, 2013 Aug 31, 2013

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Aug 31, 2013 Aug 31, 2013

Copy link to clipboard

Copied

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'.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 31, 2013 Aug 31, 2013

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Aug 31, 2013 Aug 31, 2013

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 31, 2013 Aug 31, 2013

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 17, 2021 May 17, 2021

Copy link to clipboard

Copied

LATEST

A workaround for making underline in Ps CS6:

 

(win = new Window('dialog')).size = [150, 50]
stck = win.add('group{orientation: "stack"}');
(group = stck.add('group')).margins = [0, 15, 0, 0]
group.add('panel', [0, 0, 52, 1], '', {borderStyle:'black'})
stck.add('statictext', undefined, 'Underline'), win.show()

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines