ImageButton styles?

digitaldork · Post by **digitaldork** » Sun Jun 12, 2005 8:06 pm

I have tried to create an image button with the 'toolbutton' style but it never looks any different than the default.

Code: Select allgpEff2.add('iconbutton', undefined, GetImage("image1.png"), {style:'button'});
gpEff2.add('iconbutton', undefined, GetImage("image1.png"), {style:'toolbutton'});

I am trying to create an ImageButton without the square outline around the image.

Any help would be appreciated.

Larry Ligon · Post by **Larry Ligon** » Mon Jun 13, 2005 12:21 am

You have to put the iconbutton in a group and then make the iconbutton just a litte bigger than the group to hide the borders.

Try this:
Code: Select all#target photoshop
//$.level = 2

// Borderless icon button

var WindowPositionX = 100;
var WindowPositionY = 100;

var WindowWidth = 230;
var WindowHeight = 90;

var BoundsControlPositionX = 30;
var BoundsControlPositionY = 20;

var BoundsControlWidth = 50;
var BoundsControlHeight = 50;

//Create dialog box

var bounds = {x:WindowPositionX ,y:WindowPositionX ,
width:WindowWidth ,height:WindowHeight };

var dlg = new Window('dialog', 'Borderless image button',bounds );

//Create a Close button
var uiButtonClose = "Close";
var bounds = {x:WindowPositionX + 50,y:30,width:50 ,height:20 };
dlg.btnClose = dlg.add("button",bounds ,uiButtonClose );
dlg.btnClose.onClick = function() { this.parent.close(0); };

//Create a bounds control
var bounds = {x:BoundsControlPositionX ,y:BoundsControlPositionY ,
width:BoundsControlWidth ,height:BoundsControlHeight };
dlg.buttonBounds = dlg.add('group',bounds );

//Add an iconbutton to the bounds control and make it just a few
//pixels bigger than the bounds control so the borders won't show
var bounds = {x:-2,y:-2,width:BoundsControlWidth + 5 ,height:BoundsControlHeight + 5 };
imageButton = dlg.buttonBounds.add("iconbutton",bounds , "SourceFolderIcon",{style:'toolbutton'});
imageButton.onClick = function(){alert("Clicked on image");};

dlg.center();
dlg.show();

I hope this helps,
Larry

digitaldork · Post by **digitaldork** » Mon Jun 13, 2005 5:13 am

Thanks for the tip. This worked out well.

I figured out how to do this while letting auto layout do its thing as well.

Code: Select all// image is 75x75
var g = groupParent.add('group', {x:0, y:0, width:75, height:75});
var b = g.add('iconbutton', {x:0, y:0, width:77, height:77}, GetImage("image.png"));

Andrew · Post by **Andrew** » Mon Jun 13, 2005 5:31 am

I take it this discussion relates to CS2?

Andrew

Larry Ligon · Post by **Larry Ligon** » Mon Jun 13, 2005 7:01 am

Yes. This only works in Photoshop CS 2. There is no group in CS.

Anytime that you see the statement: #target photoshop

That means Photoshop CS 2.

Larry

jkozniewski · Post by **jkozniewski** » Tue Jun 14, 2005 2:46 pm

Hmm...

Strange but I haven't experienced such problem...
With such code everything works fine...

Code: Select allvar w = new Window('dialog', 'Alert Box Builder', [100,100,480,490]);

var ico = w.add("iconbutton", [20,20,50,50], "/c/Program Files/Adobe/Adobe Photoshop CS2/Presets/Scripts/pngIcon.png",{style:"button"})
w.add("iconbutton", [200,20,250,100], "/C/Program Files/Adobe/Adobe Photoshop CS2/Presets/Scripts/test.png", {style:"toolbutton"})

BTW.

Can someone explain how "named resources" work ?
Code: Select alldlg.buttonBounds.add("iconbutton",bounds , "SourceFolderIcon",{style:'toolbutton'})

"SourceFolderIcon" is a reference to fixed photoshop icon library or something like that ?

I need this information for next version of CSUIB....

digitaldork · Post by **digitaldork** » Tue Jun 14, 2005 3:23 pm

jkozniewski wrote:Hmm...

Strange but I haven't experienced such problem...
With such code everything works fine...

BTW.

Can someone explain how "named resources" work ?
Code: Select alldlg.buttonBounds.add("iconbutton",bounds , "SourceFolderIcon",{style:'toolbutton'})

"SourceFolderIcon" is a reference to fixed photoshop icon library or something like that ?

I need this information for next version of CSUIB....

Could you post a screen shot of your dialog above? Maybe it is working for you because of your images or because you have used fixed size and positioning.

To my knowledge there are only a few named resources images available:

Photoshop CS2 defines these icon resources:
Step1Icon
Step2Icon
Step3Icon
Step4Icon
SourceFolderIcon
DestinationFolderIcon

If you are not using one of these you have to provide the full path (wish this could be relative to the executing script) or a File object.

/dd

digitaldork · Post by **digitaldork** » Tue Jun 14, 2005 3:28 pm

jkozniewski wrote:Hmm...

I need this information for next version of CSUIB....

BTW, CSUIB is great. I'm excited to see a CS2 version.

One request: if possible, allow for the option to create resources with auto layout. This is a great new feature and very flexable.

/dd

jkozniewski · Post by **jkozniewski** » Tue Jun 14, 2005 4:25 pm

One request: if possible, allow for the option to create resources with auto layout. This is a great new feature and very flexable.

I do think that I'll introuduce such feature into upcomming version...
AutoLayout is some kind of alternative for visual layout creation...
Something like pure HTML, you just put elements into the bag and they are
layed in proper way by specific algorithm...

If someone need to lay elements with more control and flexibility,
absolute positioning (when generated in drag'n'drop way) is much
better...
And that's what CSUIB is made for...

digitaldork · Post by **digitaldork** » Tue Jun 14, 2005 5:08 pm

Being able to load a resource back into CSUIB to make modifications would be really useful as well.

/dd