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

[Loic.Aigon]

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

[D¡rk Becker]

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

[D¡rk Becker]

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

[Loic.Aigon]

Hi Dirk, really great input.

I will have a closer look on this.

Thank you a lot.

Loic

[Steven__]

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

[Dirk Becker]

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();

[Harbs.]

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

[Steven__]

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

[Harbs.]

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

[Steven__]

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

Give it a try.

[Harbs.]

How 'bout you try it first!

Harbs

[Steven__]

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

var rapidDlg = new Window('dialog',"Lets try",undefined); buildWindow(); rapidDlg.show(); function buildWindow(){      // Properties for rapidDlg.IconButton1      rapidDlg.IconButton1 = rapidDlg.add('iconbutton',undefined,undefined);      rapidDlg.IconButton1.text = 'Works for me';      rapidDlg.IconButton1.onClick = function(){           alert('Hurray!');      }      rapidDlg.IconButton1.titleLayout = new Object ({alignment:['center','center']}); }

GS

Steven

[Harbs.]

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

[Steven__]

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

[Loic.Aigon]

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

[adrian_n]

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 ();

[Loic.Aigon]

Hi,

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

[adrian_n]

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

[d3mac123]

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

[D¡rk Becker · Accepted solution]

> 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();

[Loic.Aigon]

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

[Harbs.]

Hi Dirk,

Very nice. Much more elegant than mine!

Harbs

[FitzFoto]

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

many thanks.

[Steven__]

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

[Alan_AEDScripts]

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

[Peter Kahrel]

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