How to Set Swatch with Popup Window

[BryanPagenkopf]

This is part of a larger project but how can I set the fill color of a selected object to a named swatch color using a popup window with radio buttons?

// GENERATEPROOF
// =============
var generateProof = new Window("window"); 
    generateProof.text = "Generate Proof Options"; 
    generateProof.preferredSize.width = 600; 
    generateProof.preferredSize.height = 200; 
    generateProof.orientation = "column"; 
    generateProof.alignChildren = ["fill","top"]; 
    generateProof.spacing = 10; 
    generateProof.margins = [25,25,25,25]; 

// PANEL1
// ======
var panel1 = generateProof.add("panel", undefined, undefined, {name: "panel1"}); 
    panel1.text = "Raised"; 
    panel1.orientation = "column"; 
    panel1.alignChildren = ["center","top"]; 
    panel1.spacing = 10; 
    panel1.margins = 10; 

// RAISEDMETAL
// ===========
var raisedMetal = panel1.add("group", undefined, {name: "raisedMetal"}); 
    raisedMetal.orientation = "row"; 
    raisedMetal.alignChildren = ["left","center"]; 
    raisedMetal.spacing = 10; 
    raisedMetal.margins = 0; 

var radiobutton1 = raisedMetal.add("radiobutton", undefined, undefined, {name: "radiobutton1"}); 
    radiobutton1.text = "Aluminum\ SS"; 

var radiobutton2 = raisedMetal.add("radiobutton", undefined, undefined, {name: "radiobutton2"}); 
    radiobutton2.text = "Bronze"; 

var radiobutton3 = raisedMetal.add("radiobutton", undefined, undefined, {name: "radiobutton3"}); 
    radiobutton3.text = "Brass"; 

var radiobutton4 = raisedMetal.add("radiobutton", undefined, undefined, {name: "radiobutton4"}); 
    radiobutton4.text = "Flash Bronze"; 

var radiobutton5 = raisedMetal.add("radiobutton", undefined, undefined, {name: "radiobutton5"}); 
    radiobutton5.text = "Copper"; 

var radiobutton6 = raisedMetal.add("radiobutton", undefined, undefined, {name: "radiobutton6"}); 
    radiobutton6.text = "Custom Paint"; 

// GROUP1
// ======
var group1 = generateProof.add("group", undefined, {name: "group1"}); 
    group1.orientation = "row"; 
    group1.alignChildren = ["right","center"]; 
    group1.spacing = 10; 
    group1.margins = 0; 

var button1 = group1.add("button", undefined, undefined, {name: "button1"}); 
    button1.text = "OK"; 

var button2 = group1.add("button", undefined, undefined, {name: "button2"}); 
    button2.text = "Cancel"; 

var button3 = group1.add("button", undefined, undefined, {name: "button3"}); 
    button3.text = "Set Default"; 

// GENERATEPROOF
// =============
var statictext1 = generateProof.add("statictext", undefined, undefined, {name: "statictext1"}); 
    statictext1.text = "Creativity is intelligence having fun ~ Albert Einstein"; 
    statictext1.alignment = ["center","top"]; 

generateProof.show();

​
Thank you!!

[Charu Rajput]

@BryanPagenkopf 

You can add click event on ok button and fetch the selected radio button text to update the fillColor. Assuming radio button is the text of the swatches, you can add following

OK button click handler

button1.onClick = function () {
    var _selectedRadioButtonText = selected_rbutton(raisedMetal);
    if (app.selection.length) {
        app.selection[0].fillColor = app.activeDocument.swatches[_selectedRadioButtonText].color;
        app.redraw();
    }
}

To get selected text of radio button.

function selected_rbutton(rbuttons) {
    for (var i = 0; i < rbuttons.children.length; i++)
        if (rbuttons.children[i].value == true)
            return rbuttons.children[i].text;
}

[Charu Rajput]

Also, I have never seen 

var generateProof = new Window("window");

in the documentation, so either use palette or dialog.

var generateProof = new Window("dialog");
var generateProof = new Window("palette");

[CarlosCanto]

Hi guys, window of type "window" is a valid parameter. It works similarly to "palette" windows, you can interact with the illustrator application. The only difference between "window" and "palette" is that "window" includes the typical application window buttons, Minimize, Maximize, Close and "Control"?

from the OMV

Window (type: String , title: String , bounds: Bounds , properties: Object ) 
ScriptUI Classes 
Creates a new window.
type: Data Type: String 
The window type.
One of: 
window : Creates a simple window that can be used as a main window for an application. (Not supported by Photoshop CS3.) 
palette : Creates a modeless dialog, also called a floating palette. (Not supported by Photoshop CS3.) 
dialog : Creates a modal dialog. 
This argument can also be a ScriptUI resource specification; in that case, all other arguments are ignored. 
title (optional): Data Type: String 
The window title, a localizable string.
bounds (optional): Data Type: Bounds 
The window's position and size.
properties (optional): Data Type: Object 
An object containing creation-only properties.
Can contain any of these properties: 
resizeable : When true, the window can be resized by the user. Default is false. 
su1PanelCoordinates : Photoshop only. When true, the child panels of this window automatically adjust the positions of their children for compatability with Photoshop CS (in which the vertical coordinate was measured from outside the frame). Default is false. Individual panels can override the parent window’s setting. 

closeButton : When true, the title bar includes a button to close the window, if the platform and window type allow it. When false, it does not. Default is true. Not used for dialogs. 
maximizeButton : When true, the title bar includes a button to expand the window to its maximum size (typically, the entire screen), if the platform and window type allow it. When false, it does not. Default is false for type palette, true for type window. Not used for dialogs. 
minimizeButton : When true, the title bar includes a button to minimize or iconify the window, if the platform and window type allow it. When false, it does not. Default is false for type palette, true for type window. Main windows cannot have a minimize button in Mac OS. Not used for dialogs. 
independent : When true, a window of type window is independent of other application windows, and can be hidden behind them in Windows. In Mac OS, has no effect. Default is false. 
borderless : When true, the window has no title bar or borders. Properties that control those features are ignored. 

[Charu Rajput]

@CarlosCanto - You are correct!. Earlier when I tried it does not work for me, nothing was visible on UI, but I tried again with just static text, it works.. May be I tested in sleep state..😂😂

Thankyou Carlos😊😊

[m1b · Accepted solution]

Hi @BryanPagenkopf, @Charu Rajput is right about the window type. In your case you need a "dialog". Otherwise the button events didn't seem to work. Here is an example implementation of what you asked. - Mark

(function () {

    // GENERATEPROOF
    // =============
    var generateProof = new Window("dialog");
    generateProof.text = "Generate Proof Options";
    generateProof.preferredSize.width = 600;
    generateProof.preferredSize.height = 200;
    generateProof.orientation = "column";
    generateProof.alignChildren = ["fill", "top"];
    generateProof.spacing = 10;
    generateProof.margins = [25, 25, 25, 25];

    // PANEL1
    // ======
    var panel1 = generateProof.add("panel", undefined, undefined, { name: "panel1" });
    panel1.text = "Raised";
    panel1.orientation = "column";
    panel1.alignChildren = ["center", "top"];
    panel1.spacing = 10;
    panel1.margins = 10;

    // RAISEDMETAL
    // ===========
    var raisedMetal = panel1.add("group", undefined, { name: "raisedMetal" });
    raisedMetal.orientation = "row";
    raisedMetal.alignChildren = ["left", "center"];
    raisedMetal.spacing = 10;
    raisedMetal.margins = 0;

    var radiobutton1 = raisedMetal.add("radiobutton", undefined, undefined, { name: "radiobutton1" });
    radiobutton1.text = "Aluminum\ SS";

    var radiobutton2 = raisedMetal.add("radiobutton", undefined, undefined, { name: "radiobutton2" });
    radiobutton2.text = "Bronze";

    var radiobutton3 = raisedMetal.add("radiobutton", undefined, undefined, { name: "radiobutton3" });
    radiobutton3.text = "Brass";

    var radiobutton4 = raisedMetal.add("radiobutton", undefined, undefined, { name: "radiobutton4" });
    radiobutton4.text = "Flash Bronze";

    var radiobutton5 = raisedMetal.add("radiobutton", undefined, undefined, { name: "radiobutton5" });
    radiobutton5.text = "Copper";

    var radiobutton6 = raisedMetal.add("radiobutton", undefined, undefined, { name: "radiobutton6" });
    radiobutton6.text = "Custom Paint";

    // GROUP1
    // ======
    var group1 = generateProof.add("group", undefined, { name: "group1" });
    group1.orientation = "row";
    group1.alignChildren = ["right", "center"];
    group1.spacing = 10;
    group1.margins = 0;

    var button1 = group1.add("button", undefined, undefined, { name: "ok" });
    button1.text = "OK";
    generateProof.defaultElement = button1;

    var button2 = group1.add("button", undefined, undefined, { name: "button2" });
    button2.text = "Cancel";

    var button3 = group1.add("button", undefined, undefined, { name: "button3" });
    button3.text = "Set Default";

    // GENERATEPROOF
    // =============
    var statictext1 = generateProof.add("statictext", undefined, undefined, { name: "statictext1" });
    statictext1.text = "Creativity is intelligence having fun ~ Albert Einstein";
    statictext1.alignment = ["center", "top"];

    button1.onClick = function () { generateProof.close(1) };
    button2.onClick = function () { generateProof.close(2) };
    button3.onClick = function () { generateProof.close(3) };

    var result = generateProof.show();
    $/*debug*/.writeln('result = ' + result);

    if (result == 2)
        // user cancelled
        return;

    if (result == 1) {

        // user clicked OK

        // get selected swatch name
        var radioButtonCount = 6,
            selectedSwatchName;
        for (var i = 1; i <= radioButtonCount; i++) {
            var radio = raisedMetal['radiobutton' + i];
            if (radio.value == true) {
                selectedSwatchName = radio.text;
                break;
            }
        }

        var doc = app.activeDocument;

        // get the swatch
        var swatch = getByName(doc.swatches, selectedSwatchName);

        if (swatch == undefined) {
            alert('No Swatch called "' + selectedSwatchName + '" was found in document.');
            return;
        }

        if (!swatch.hasOwnProperty('color')) {
            alert('To do: work out how to handle swatch "' + selectedSwatchName + '".');
            return;
        }

        // set the fillColor
        var item = doc.selection[0];

        if (
            item != undefined
            && item.hasOwnProperty('fillColor')
        ) {
            item.fillColor = swatch.color;
        }

    }

    else if (result == 3) {

        // user clicked Set Default


    }


    function getByName(things, name) {
        for (var i = 0; i < things.length; i++)
            if (things[i].name == name)
                return things[i];
    };


})();

 Note: I put it in a function expression just so I could conveniently return when errors or user cancelled.

[m1b]

Thanks @Charu Rajput, that is a much nicer handling of the radio buttons than mine! 🙂

- Mark