[JS CS3/4] ScriptUI How to color a button ?

Report · Oct 20, 2009

Is it a way to get a colored button in the ScriptUI DOM ?

I tried

dlg.button1.graphics.backgroundColor = dlg.button1.graphics.newBrush(dlg.button1.graphics.BrushType.SOLID_COLOR,[0.7,0.7,0.7],1);

But although the dialog is drawn, the button is not styled in best case, not visible in the worst case.

Is that possible to get a colored button ?

Hope so.

Do you have any tip ?

TIA

Loic

Report · Oct 21, 2009

If you just accept that the background color property is readonly and meant for your reference, it becomes pretty easy.

Extending the example of above, this works for me:

var dlg = new Window('dialog', 'Test');

var pnl = dlg.add('panel', undefined, 'My Panel');

var btn = pnl.add('button', undefined, 'My Button', {name:'ok'});

var btn2 = pnl.add('iconbutton', undefined, undefined, {name:'orange', style: 'toolbutton'});

btn2.size = [100,20];

btn2.onDraw = function()

{ with( this ) {

try {

var orange = graphics.newBrush( g.BrushType.SOLID_COLOR, [1, 0.7, 0, 1] );

graphics.newPath();

graphics.rectPath(0,0,bounds[2]-bounds[0],bounds[3]-bounds[1]);

graphics.fillPath(orange);

} catch( ex ) {

$.writeln(ex);

}

}} // onDraw

dlg.show();

Cheers 😉

Dirk

Report · Oct 21, 2009

Sorry to follow up on my own post, but this one is even shorter.

function fillRect()

{ with( this ) {

graphics.rectPath(0,0,size[0],size[1]);

graphics.fillPath(fillBrush);

}}

var dlg = new Window('dialog', 'Test');

var pnl = dlg.add('panel', undefined, 'My Panel');

var btn = pnl.add('button', undefined, 'My Button', {name:'ok'});

var btn2 = pnl.add('iconbutton', undefined, undefined, {name:'orange', style: 'toolbutton'});

btn2.size = [100,20];

btn2.fillBrush = btn2.graphics.newBrush( g.BrushType.SOLID_COLOR, [1, 0.7, 0, 1] );

btn2.onDraw = fillRect;

dlg.show();

Dirk

Report · Oct 22, 2009

Hi Dirk, really great input.

I will have a closer look on this.

Thank you a lot.

Loic

Report · Oct 22, 2009

Dirk Becker wrote:
If you just accept that the background color property is readonly and meant for your reference, it becomes pretty easy.
Extending the example of above, this works for me:
var dlg = new Window('dialog', 'Test');
var pnl = dlg.add('panel', undefined, 'My Panel');
var btn = pnl.add('button', undefined, 'My Button', {name:'ok'});
var btn2 = pnl.add('iconbutton', undefined, undefined, {name:'orange', style: 'toolbutton'});
btn2.size = [100,20];
btn2.onDraw = function()
{ with( this ) {
     try {
          var orange = graphics.newBrush( g.BrushType.SOLID_COLOR, [1, 0.7, 0, 1] );
          graphics.newPath();
          graphics.rectPath(0,0,bounds[2]-bounds[0],bounds[3]-bounds[1]);
          graphics.fillPath(orange);
     } catch( ex ) {
          $.writeln(ex);
     }
}} // onDraw
dlg.show();

Cheers 😉

Dirk

The problem with using onDraw is that it makes it necessary to repaint the entire Button Including the click effect the text and the round edges of the button, since we are overriding the default drawing.

Correct me if I'm mistaken, but thats how it seems on Win xp CS4

Steven

Report · Oct 22, 2009

Steve,

you're right if you want to recolor Apple's fancy, rounded, gradiented(?) and eventually pulsating Aqua buttons. For that, take a screen shot, recolor it in PhotoShop and draw an image! ScriptUI is a cross platform compromise anyway, I like the rectangular icon button because I need not go thru the headache to match curves. Furthermore, ScriptUIGraphics is missing a curveto() method.

Next version of the script below - it uses 0.5 alpha to let the original control shine thru.

Besides it fixes a bug where I fell victim to a global variable "g" that stayed around from earlier on - unlike InDesign the ESTK as target does not zap the main session after completion.

function fillRect()

{ with( this ) {

graphics.drawOSControl();

graphics.rectPath(0,0,size[0],size[1]);

graphics.fillPath(fillBrush);

}}

var dlg = new Window('dialog', 'Test');

var pnl = dlg.add('panel', undefined, 'My Panel');

var btn = pnl.add('button', undefined, 'My Button', {name:'ok'});

var btn2 = pnl.add('iconbutton', undefined, undefined, {name:'orange', style: 'toolbutton'});

btn2.size = [100,20];

btn2.fillBrush = btn2.graphics.newBrush( btn2.graphics.BrushType.SOLID_COLOR, [1, 0.7, 0, 0.5] );

btn2.onDraw = fillRect;

dlg.show();

Report · Oct 22, 2009

Nice work Dirk,

The problem with icon buttons becomes apparent which you want them to

have some text. To get that to work, you need to stack three objects

like I've done here:

function namedButton (container,name,size,color){
     color = color || [0.1, 0.4, 0.9, 0.3];
     size = size || [100,20];
     var grp = container.add('group');
     grp.orientation = 'stack';
     var btn = grp.add('iconbutton', undefined, undefined, {style:'toolbutton'});
     btn.size = size;
     grp.add('statictext',undefined,name);
     btn.fillBrush=btn.graphics.newBrush( btn.graphics.BrushType.SOLID_COLOR, color );
     btn.onDraw = function (){
          this.graphics.drawOSControl();
          this.graphics.rectPath(0,0,this.size[0],this.size[1]);
          this.graphics.fillPath(this.fillBrush);
     }
     var clickButton = grp.add('iconbutton', undefined, undefined, {style:'toolbutton'});
     clickButton.size = size;
     clickButton.fillBrush=clickButton.graphics.newBrush( clickButton.graphics.BrushType.SOLID_COLOR,[0,0,0,0] );
     clickButton.onDraw = function (){
          //this.graphics.drawOSControl();
          this.graphics.rectPath(0,0,this.size[0],this.size[1]);
          this.graphics.fillPath(this.fillBrush);
     }
     return clickButton;
}

var dlg = new Window('dialog', 'Test');
var pnl = dlg.add('panel', undefined, 'My Panel');
var btn = pnl.add('button', undefined, 'Standard Button', {name:'ok'});
var btn2 = new namedButton(pnl,"Cool Button");
btn2.onClick = function(){
     alert("Yep. This is cool!");
}
dlg.show();

Harbs

http://www.in-tools.com

Innovations in Automation

Report · Oct 22, 2009

Harbs. wrote:
Nice work Dirk,
The problem with icon buttons becomes apparent which you want them to
have some text.

I assume you mean if you want text when custom drawing the color, or on top of the color. Otherwise the Icon Button has no issue showing text to the side of the image using text property. (CS3?)

Steven

Report · Oct 23, 2009

Yes. I mean using icon buttons instead of the standard ones (which

have a text property which displays inside the button).

Icon buttons do not have a text property.

Harbs

Report · Oct 23, 2009

I'm pretty sure that iconbuttons have text property, at least in CS4.

Give it a try.

Report · Oct 23, 2009

How 'bout you try it first!

Harbs

Report · Oct 23, 2009

C'mon Harbs you know I can't type code blind like you. OK here's a sample, only works with CS4

GS

Steven

Report · Oct 24, 2009

Hi Steven,

Hmm. It looks like you are right that icon buttons have a text

property. The OMV does not list it.

I did try using the text property, but it doesn't work when you color

in the button using Dirks method (i.e. the fill covers over the text).

When coloring the button, I don't see how the text property would help.

Harbs

http://www.in-tools.com

Innovations in Automation

Report · Oct 25, 2009

Using onDraw overrides the default drawing of the button, but using image doesn't override the drawing of the text.

Here's an example using Bob Stucky's neat image trick. (image created in microsoft Paint to keep it small, since Photoshop inflates image with metadata etc.)

Place in folder which doesn't need permission to create file and orange.jpg will be created for it

var rapidDlg = new Window('dialog',"Orange Button",undefined);
buildWindow();
rapidDlg.show();

function buildWindow(){


// Properties for rapidDlg.IconButton1
createImage ();
rapidDlg.IconButton1 = rapidDlg.add('iconbutton',undefined,getScriptFolder() + "/orange.jpg");
rapidDlg.IconButton1.text = 'Orange';
rapidDlg.IconButton1.titleLayout = new Object ({alignment:['center','center']});

}
function createImage(){
var myImageFile = new File(getScriptFolder() + "/orange.jpg");
if(myImageFile.exists ==false|| myImageFile.constructor != File)
     {
          var binS = new String("\u00FF\u00D8\u00FF\u00E0\x00\x10JFIF\x00\x01\x01\x01\x00`\x00`\x00\x00\u00FF\u00E1\x00\x16Exif\x00\x00II*\x00\b\x00\x00\x00\x00\x00\x00\x00\x00\x00\u00FF\u00DB\x00C\x00\b\x06\x06\x07\x06\x05\b\x07\x07\x07\t\t\b\n\f\x14\r\f\x0B\x0B\f\x19\x12\x13\x0F\x14\x1D\x1A\x1F\x1E\x1D\x1A\x1C\x1C $.' \",#\x1C\x1C(7),01444\x1F'9=82<.342\u00FF\u00DB\x00C\x01\t\t\t\f\x0B\f\x18\r\r\x182!\x1C!22222222222222222222222222222222222222222222222222\u00FF\u00C0\x00\x11\b\x00\x14\x00d\x03\x01\"\x00\x02\x11\x01\x03\x11\x01\u00FF\u00C4\x00\x1F\x00\x00\x01\x05\x01\x01\x01\x01\x01\x01\x00\x00\x00\x00\x00\x00\x00\x00\x01\x02\x03\x04\x05\x06\x07\b\t\n\x0B\u00FF\u00C4\x00\u00B5\x10\x00\x02\x01\x03\x03\x02\x04\x03\x05\x05\x04\x04\x00\x00\x01}\x01\x02\x03\x00\x04\x11\x05\x12!1A\x06\x13Qa\x07\"q\x142\u0081\u0091\u00A1\b#B\u00B1\u00C1\x15R\u00D1\u00F0$3br\u0082\t\n\x16\x17\x18\x19\x1A%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz\u0083\u0084\u0085\u0086\u0087\u0088\u0089\u008A\u0092\u0093\u0094\u0095\u0096\u0097\u0098\u0099\u009A\u00A2\u00A3\u00A4\u00A5\u00A6\u00A7\u00A8\u00A9\u00AA\u00B2\u00B3\u00B4\u00B5\u00B6\u00B7\u00B8\u00B9\u00BA\u00C2\u00C3\u00C4\u00C5\u00C6\u00C7\u00C8\u00C9\u00CA\u00D2\u00D3\u00D4\u00D5\u00D6\u00D7\u00D8\u00D9\u00DA\u00E1\u00E2\u00E3\u00E4\u00E5\u00E6\u00E7\u00E8\u00E9\u00EA\u00F1\u00F2\u00F3\u00F4\u00F5\u00F6\u00F7\u00F8\u00F9\u00FA\u00FF\u00C4\x00\x1F\x01\x00\x03\x01\x01\x01\x01\x01\x01\x01\x01\x01\x00\x00\x00\x00\x00\x00\x01\x02\x03\x04\x05\x06\x07\b\t\n\x0B\u00FF\u00C4\x00\u00B5\x11\x00\x02\x01\x02\x04\x04\x03\x04\x07\x05\x04\x04\x00\x01\x02w\x00\x01\x02\x03\x11\x04\x05!1\x06\x12AQ\x07aq\x13\"2\u0081\b\x14B\u0091\u00A1\u00B1\u00C1\t#3R\u00F0\x15br\u00D1\n\x16$4\u00E1%\u00F1\x17\x18\x19\x1A&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz\u0082\u0083\u0084\u0085\u0086\u0087\u0088\u0089\u008A\u0092\u0093\u0094\u0095\u0096\u0097\u0098\u0099\u009A\u00A2\u00A3\u00A4\u00A5\u00A6\u00A7\u00A8\u00A9\u00AA\u00B2\u00B3\u00B4\u00B5\u00B6\u00B7\u00B8\u00B9\u00BA\u00C2\u00C3\u00C4\u00C5\u00C6\u00C7\u00C8\u00C9\u00CA\u00D2\u00D3\u00D4\u00D5\u00D6\u00D7\u00D8\u00D9\u00DA\u00E2\u00E3\u00E4\u00E5\u00E6\u00E7\u00E8\u00E9\u00EA\u00F2\u00F3\u00F4\u00F5\u00F6\u00F7\u00F8\u00F9\u00FA\u00FF\u00DA\x00\f\x03\x01\x00\x02\x11\x03\x11\x00?\x00\u00D7\u00A2\u008A+\u00F33\u00F4 \u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x00\u00A2\u008A(\x03\u00FF\u00D9");
          myImageFile.open("w");
          myImageFile.encoding = "BINARY";
          myImageFile.write(binS);
          myImageFile.close();
     }
}
function getScriptFolder(){
     try { 
          var activeScript = File(app.activeScript); 
     } catch(e) { 
          // running from ESTK ... 
          var activeScript = File(e.fileName); 
     } 
     return activeScript.parent;
}

One issue is that if default margin is left then there is a little border uncolored, however if margin is set to 0 then we lose the rounded edges unless they are part of the image.

I attached file of code since copying code from forum created new error in code, so just test with code from text file

Report · Mar 13, 2010

Hi all,

I used with enjoyment, bob's script to encapsulate a png into a scriptui UI.

I wanted to let you know that I was reported an error on Windows7 environment meanwhile on any other systems, it always have perfectly worked.

Obviously, in this situation, the script didn't create the picture but understanding why is something out of my actual skills.

I thoght about a specific encoding but ain't have a W7 at hand for test.

Have any of you encountered such issue ?

Loic

Report · Jan 21, 2011

Hi all,

maybe I totally missed the point you are discussing here... but why not using the example provided in the scriptUI tutorial by Peter Kahrel?

Does it do the thing you were looking for?

var w = new Window ("dialog");
var s = w.add ("statictext", undefined, "Static");
var e = w.add ("edittext", undefined, "Edit");
var b = w.add ("button", undefined, "Button");
// The window's backround
w.graphics.backgroundColor = w.graphics.newBrush (w.graphics.BrushType.SOLID_COLOR, [0.5, 0.0, 0.0]);
// Font and its colour for the first item, statictext
s.graphics.font = ScriptUI.newFont ("Helvetica", "Bold", 30);
s.graphics.foregroundColor = s.graphics.newPen (w.graphics.PenType.SOLID_COLOR, [0.7, 0.7, 0.7], 1);
// Font and colours for the second item, edittext
e.graphics.font = ScriptUI.newFont ("Letter Gothic Std", "Bold", 30);
e.graphics.foregroundColor = e.graphics.newPen (e.graphics.PenType.SOLID_COLOR, [1, 0, 0], 1);
e.graphics.backgroundColor = e.graphics.newBrush (e.graphics.BrushType.SOLID_COLOR, [0.5, 0.5, 0.5]);
// Font for the tird control, a button. Can't set colours in buttons
b.graphics.font = ScriptUI.newFont ("Minion Pro", "Italic", 30);
w.show ();

Report · Jan 21, 2011

Hi,

unless I am wrong, this amazing resource didn't exist at the time I asked this

Report · Jan 21, 2011

Oh... sorry, I did not recognize the date of the post

Report · Jun 11, 2014

Steven,

Is there a way to create the orange button with an image on top of it (a real iconbutton)? I have tried to set something like this btn2.image = "imagePath.png" without success. What i need is a button with a dark color with an white icon on top of it. thanks a lot,

Alex

Report · Oct 23, 2009

> To get that to work, you need to stack three objects like I've done here:

or add three lines, like I've done here ...

function customDraw()

{ with( this ) {

graphics.drawOSControl();

graphics.rectPath(0,0,size[0],size[1]);

graphics.fillPath(fillBrush);

if( text ) graphics.drawString(text,textPen,(size[0]-graphics.measureString (text,graphics.font,size[0])[0])/2,3,graphics.font);

}}

var dlg = new Window('dialog', 'Test');

var pnl = dlg.add('panel', undefined, 'My Panel');

var btn = pnl.add('button', undefined, 'My Button', {name:'ok'});

var btn2 = pnl.add('iconbutton', undefined, undefined, {name:'orange', style: 'toolbutton'});

btn2.size = [200,20];

btn2.fillBrush = btn2.graphics.newBrush( btn2.graphics.BrushType.SOLID_COLOR, [1, 0.7, 0, 0.5] );

btn2.text = "Hello, Harbs";

btn2.textPen = btn2.graphics.newPen (btn2.graphics.PenType.SOLID_COLOR,[0,0.5,0,1], 1);

btn2.onDraw = customDraw;

dlg.show();

Report · Oct 23, 2009

Mucho bravo, congrats,

I wish I saw your post a week ago. This is exactly the kind of aspect I was looking at.

Thanks a lot for all of you guys, the infos you dropped here shine like a gold mine !

Let me say it in french 'MERCI MILLE FOIS !!!'

Take care,

Loic

Report · Oct 23, 2009

Hi Dirk,

Very nice. Much more elegant than mine!

Harbs

Report · Dec 03, 2017

I'd appreciate understanding why 'customDraw' appears to be triggered by a mouse over the button (no click, just hover).

many thanks.

Report · Oct 20, 2009

The reasor Rapid ScriptUI doesn't have background color for button is because of the mentioned error. IconButtons in CS4 have Title Layout which can have the text of the button in any color, also an image can be added without using onDraw

Steven Bryant

www.scriptui.com

Report · Dec 14, 2012

I have another way to tackle this-

1.Use edittext control instead.

2.Easy to set fg and bg.

3.Instead of onClick, use onActivate as a callback to make it act like a button.

4.Also use readonly creation paramater as it helps make it look like a button.

Working for me...

Report · Dec 14, 2012

Interesting idea. But onActivate is not compatible with readonly, though that needn't be too much of a problem. On the plus side, using your method you can do multi-line buttons on Windows, which you can't with standard buttons (on a mac that works fine).

[JS CS3/4] ScriptUI How to color a button ?

1 Correct answer

Photos