Graphics to ScriptUI

[StrongBeaver]

Is it possible to change, not only the color of a ScriptUI window but add graphics to a ScriptUI window ?

[Pedro Cortez Marques]

Hi,

Yes it is.

Script UI differs its version/framework, dependind on the app you are using. For example key event listeners  don't work in Bridge but they work on photoshop, just an example.

Although, I use ScriptUI on Bridge a lot even for complex live team KPIs. For example, you can create lots of inner images, paths, circles, rectangles, fills, transparencies, using a single "iconbutton" updating it using onDraw function.

This image shows an example of an single icon button showing a team of retouchers KPIs live-update graph. It is done using Bridge frameowork ScriptUI iconbutton.

[StrongBeaver]

How did you import graphics using ScriptUI ?

[Pedro Cortez Marques]

Hi

Before testing this, you must run it from the folder that contains a image named "image1.png".

The other graphics, are all script code.

Code with some example graphics and image.

You can add properties to the icon button and change them later using other buttons or scripts.

For example, you can add specific images depending on a property value to a icon button.

var dlg = new Window('dialog', 'Test');
var pnl = dlg.add('panel', undefined, 'My Panel');
var myIconbutton = pnl.add('iconbutton', undefined, undefined, {style: 'toolbutton', myProp:false});
myIconbutton.size = [200,200];
myIconbutton.fillBrush = myIconbutton.graphics.newBrush( myIconbutton.graphics.BrushType.SOLID_COLOR, [1, 0.7, 0, 0.5] );
myIconbutton.text = " Press Me";
myIconbutton.textPen = myIconbutton.graphics.newPen (myIconbutton.graphics.PenType.SOLID_COLOR,[0,0.99,0,1], 1);
myIconbutton.onDraw = function (h){
    with( this ) {
        if(h.mouseOver==true){
            fillBrush = graphics.newBrush( graphics.BrushType.SOLID_COLOR, [1, 0.2, 1, 1] );
            textPen = graphics.newPen (graphics.PenType.SOLID_COLOR,[1,1,1,1], 1);
        }else{
            fillBrush = graphics.newBrush( graphics.BrushType.SOLID_COLOR, [1, 0.7, 0, 1] );
            textPen = graphics.newPen (graphics.PenType.SOLID_COLOR,[1,1,1,1], 1);
        }
        graphics.drawOSControl();
        graphics.rectPath(0,0,size[0],size[1]);
        graphics.fillPath(fillBrush);
        // new grapich strokePath
        graphics.newPath();
        graphics.moveTo(2, size[1]/2);
        graphics.lineTo(size[0]-4, size[1]/2);
        graphics.strokePath(graphics.newPen(graphics.PenType.SOLID_COLOR, [87/255, 134/255, 255/255, 1], 4));
        // new grapich strokePath
        if (properties.myProp) { // visible if myProp is true
            graphics.newPath();
            graphics.moveTo(2, 12);
            graphics.lineTo(33, 44);
            graphics.lineTo(55, 44);
            graphics.lineTo(55, 0);
            graphics.fillPath(graphics.newBrush( graphics.BrushType.SOLID_COLOR, [0, 0.5, 0, 0.55] )); // 0.55 is transparency
            graphics.strokePath(graphics.newPen(graphics.PenType.SOLID_COLOR, [87/255, 134/255, 255/255, 1], 4)); // 4 is the stroke size
        }
        // little square
        graphics.newPath();
        graphics.rectPath(20,size[1]-24,20,20);
        graphics.strokePath(graphics.newPen(graphics.PenType.SOLID_COLOR, [1, 1, 1, 1], 2));
        graphics.newPath();
        graphics.ellipsePath(60,20,40,60);
        graphics.fillPath(graphics.newBrush( graphics.BrushType.SOLID_COLOR, [0, 0, 0, 0.3] )); // 0.3 is transparency
        // adding image
        var img = File (File(decodeURI($.fileName)).parent +"/image1.png");
        if (img.exists) {
            var image = ScriptUI.newImage(img);
            graphics.drawImage(ScriptUI.newImage(img), size[0]/2, size[1] - image.size[1] -12, image.size[0], image.size[1]);
        }
        // text
        if( text ) graphics.drawString(text,textPen,(size[0]-graphics.measureString (text,graphics.font,size[0])[0])/2,3,graphics.font);
    }
}
myIconbutton.onClick = function () {
    this.properties.myProp = true;
}
var btn = pnl.add('button', undefined, 'Close', {name:'ok'});
dlg.show();

[StrongBeaver]

Thanks