Skip to main content
subieguy2
Inspiring
October 17, 2017
Answered

UI Format and passing input

  • October 17, 2017
  • 2 replies
  • 3428 views

I am trying to create a UI. My current code gives me the following....

How can I make it a 2 column format? I want the UI to look like this (photoshop mockup)....

Then once I get it formatted...

How do I pass the user input values to the next part of my code? When I type in some values for the correct CMYK fields and click OK, I get this message...

I am using Adobe Illustrator Creative Cloud.... Here is my code

#target illustrator-21

#targetengine main

var w = new Window('dialog', "CMYK Correction Tool\n");

w.orientation = 'column';

w.alignChildren = ["fill","fill"];

w.preferredSize = [150, 250];

w.wrongGroup = w.add('panel', undefined, "Wrong CMYK values");

w.wrongGroup.alignChildren = 'left';

//w.wrongGroup.spacing = 15;

w.wrongGroup.add('statictext{text: "Cyan Value: "}');

var wrongCyanColor = w.wrongGroup.add('edittext {characters: 12, active: true}');

w.wrongGroup.add('statictext{text: "Magenta Value: "}');

var wrongMagentaColor = w.wrongGroup.add('edittext {characters: 12, active: true}');

w.wrongGroup.add('statictext{text: "Yellow Value: "}');

var wrongYellowColor = w.wrongGroup.add('edittext {characters: 12, active: true}');

w.wrongGroup.add('statictext{text: "Black Value: "}');

var wrongBlackColor = w.wrongGroup.add('edittext {characters: 12, active: true}');

//w.separator = w.add ("panel");

//w.separator.minimumSize.height = w.separator.maximumSize.height = 3;

w.rightGroup = w.add('panel', undefined, "Correct CMYK values");

w.rightGroup.alignChildren = 'left';

w.rightGroup.add('statictext{text: "Cyan Value: "}');

var cyanColor = w.rightGroup.add('edittext {characters: 12, active: true}');

w.rightGroup.add('statictext{text: "Magenta Value: "}');

var magentaColor = w.rightGroup.add('edittext {characters: 12, active: true}');

w.rightGroup.add('statictext{text: "Yellow Value: "}');

var yellowColor = w.rightGroup.add('edittext {characters: 12, active: true}');

w.rightGroup.add('statictext{text: "Black Value: "}');

var blackColor = w.rightGroup.add('edittext {characters: 12, active: true}');

var okBtn = w.add("button", undefined, "OK");

okBtn.onClick = function() {

    w.close();

    return this.value = true;

}

var cancelBtn = w.add("button", undefined, "Cancel");

cancelBtn.onClick = function() {

    w.close();

    return this.value = true;

}

w.show();

alert("you entered\n" + "Cyan value: " + cyanColor + "\nMagenta value: " + magentaColor + "\nYellow value: " + yellowColor + "\nBlack value: " +blackColor);

This topic has been closed for replies.
Correct answer itsBenMason

https://prnt.sc/gymlwo

Sorry image is huge, screenshot things on this mac always end up massive,

Script:

try {

  var gui = createGUI();

  gui.show();

} catch (e) {

  alert(e);

}

function createGUI() {

  var gui = new Window("dialog", "CMYK Correction Tool");

  gui.alignChilren = ["fill", "fill"];

  gui.orientation = "column";

  var panelGroup = createGroup(gui, "row");

  //Wrong Stuff

  var wrongPanel = createPanel(panelGroup, "Wrong CMYK Values");

  var wrongCyan = createTextField(wrongPanel, "Cyan Value:", "");

  var wrongMagenta = createTextField(wrongPanel, "Magenta Value:", "");

  var wrongYellow = createTextField(wrongPanel, "Yellow Value:", "");

  var wrongBlack = createTextField(wrongPanel, "Black Value:", "");

  //Right Stuff

  var rightPanel = createPanel(panelGroup, "Right CMYK Values");

  var rightCyan = createTextField(rightPanel, "Cyan Value:", "");

  var rightMagenta = createTextField(rightPanel, "Magenta Value:", "");

  var rightYellow = createTextField(rightPanel, "Yellow Value:", "");

  var rightBlack = createTextField(rightPanel, "Black Value:", "");

  var buttons = createGroup(gui, "row");

  var confirmBtn = createButton(buttons, "Confirm", function() {

    try {

      alert("C: " + getText(rightCyan) + " M: " + getText(rightMagenta) + " Y: " + getText(rightYellow) + " K: " + getText(rightBlack));

    } catch (e) {

      alert(e);

    }

  });

  var cancelBtn = createButton(buttons, "Cancel", function() {

    gui.close();

  });

  return gui;

}

function getText(field) {

  return field.text !== undefined ? field.text : "";

}

function createPanel(parent, title) {

  //Create Panel

  var panel = parent.add("panel", undefined, title);

  panel.orientation = "column";

  //Return panel

  return panel;

}

function createButton(parent, title, onClick) {

  //Create Button

  var button = parent.add("button", undefined, title);

  if (onClick !== undefined) button.onClick = onClick;

  //Return button

  return button;

}

function createTextField(parent, title, content) {

  //Create a group for title and field

  var group = createGroup(parent, "column");

  group.alignChildren = 'left';

  //Create title

  var title = group.add("statictext", undefined, title);

  var field = group.add("edittext", undefined, content);

  field.preferredSize = [200, 23];

  //Return the field as its all you'll use

  return field;

}

function createGroup(parent, orientation) {

  //Create Group

  var group = parent.add("group");

  group.orientation = orientation;

  //Return Group

  return group;

}

2 replies

itsBenMason
itsBenMasonCorrect answer
Inspiring
October 17, 2017

https://prnt.sc/gymlwo

Sorry image is huge, screenshot things on this mac always end up massive,

Script:

try {

  var gui = createGUI();

  gui.show();

} catch (e) {

  alert(e);

}

function createGUI() {

  var gui = new Window("dialog", "CMYK Correction Tool");

  gui.alignChilren = ["fill", "fill"];

  gui.orientation = "column";

  var panelGroup = createGroup(gui, "row");

  //Wrong Stuff

  var wrongPanel = createPanel(panelGroup, "Wrong CMYK Values");

  var wrongCyan = createTextField(wrongPanel, "Cyan Value:", "");

  var wrongMagenta = createTextField(wrongPanel, "Magenta Value:", "");

  var wrongYellow = createTextField(wrongPanel, "Yellow Value:", "");

  var wrongBlack = createTextField(wrongPanel, "Black Value:", "");

  //Right Stuff

  var rightPanel = createPanel(panelGroup, "Right CMYK Values");

  var rightCyan = createTextField(rightPanel, "Cyan Value:", "");

  var rightMagenta = createTextField(rightPanel, "Magenta Value:", "");

  var rightYellow = createTextField(rightPanel, "Yellow Value:", "");

  var rightBlack = createTextField(rightPanel, "Black Value:", "");

  var buttons = createGroup(gui, "row");

  var confirmBtn = createButton(buttons, "Confirm", function() {

    try {

      alert("C: " + getText(rightCyan) + " M: " + getText(rightMagenta) + " Y: " + getText(rightYellow) + " K: " + getText(rightBlack));

    } catch (e) {

      alert(e);

    }

  });

  var cancelBtn = createButton(buttons, "Cancel", function() {

    gui.close();

  });

  return gui;

}

function getText(field) {

  return field.text !== undefined ? field.text : "";

}

function createPanel(parent, title) {

  //Create Panel

  var panel = parent.add("panel", undefined, title);

  panel.orientation = "column";

  //Return panel

  return panel;

}

function createButton(parent, title, onClick) {

  //Create Button

  var button = parent.add("button", undefined, title);

  if (onClick !== undefined) button.onClick = onClick;

  //Return button

  return button;

}

function createTextField(parent, title, content) {

  //Create a group for title and field

  var group = createGroup(parent, "column");

  group.alignChildren = 'left';

  //Create title

  var title = group.add("statictext", undefined, title);

  var field = group.add("edittext", undefined, content);

  field.preferredSize = [200, 23];

  //Return the field as its all you'll use

  return field;

}

function createGroup(parent, orientation) {

  //Create Group

  var group = parent.add("group");

  group.orientation = orientation;

  //Return Group

  return group;

}

subieguy2
subieguy2Author
Inspiring
October 18, 2017

Looks great!!!!

Thank you so much!

subieguy2
subieguy2Author
Inspiring
October 18, 2017

Ok so here is the tool that I am building with this UI.....

/*       Start of panel building script       */

try {

    var gui = createGUI();

    gui.show();

} catch (e) {

    alert(e);

}

function createGUI() {

    var gui = new Window("dialog", "CMYK Correction Tool");

    gui.alignChilren = ["fill", "fill"];

    gui.orientation = "column";

    var panelGroup = createGroup(gui, "row");

    // Wrong CMYK 

    var wrongPanel = createPanel(panelGroup, "Wrong CMYK Values");

    var wrongCyan = createTextField(wrongPanel, "Cyan Value:", "");

    var wrongMagenta = createTextField(wrongPanel, "Magenta Value:", "");

    var wrongYellow = createTextField(wrongPanel, "Yellow Value:", "");

    var wrongBlack = createTextField(wrongPanel, "Black Value:", "");

    // Right CMYK 

    var rightPanel = createPanel(panelGroup, "Right CMYK Values");

    var rightCyan = createTextField(rightPanel, "Cyan Value:", "");

    var rightMagenta = createTextField(rightPanel, "Magenta Value:", "");

    var rightYellow = createTextField(rightPanel, "Yellow Value:", "");

    var rightBlack = createTextField(rightPanel, "Black Value:", "");

    var buttons = createGroup(gui, "row");

    // Confirm button

    var confirmBtn = createButton(buttons, "Confirm", function() {

        try {

            gui.close();

            /*       Start of batch processing script       */

            // Counter for how many changes were made

            var changesMade = 0;

            // Select folder that contains your files

            var dir = Folder.selectDialog("Select your file directory...");

            /*

            If directory is selected continue the script.

            If cancel button is clicked go to else statement.

            */

            if (dir != null) {

                // Only look for files with the .ai extension and collect them

                var files = dir.getFiles("*.ai");

                if (files.length > 0) {

                    // Loop through all the collected .ai files

                    for (var i = 0; i < files.length; i++) {

                        //alert(files.length);

                        // Open the document in Illustrator

                        var doc = app.open(files);

                        // Collect all of the open document pathItems

                        var allPaths = doc.pathItems;

                        // Loop through all of the open document pathItems

                        for (var z = 0; z < allPaths.length; z++) {

                            // Only look for a specific CMYK fillColor

                            if (Math.round(allPaths.fillColor.cyan) == getText(wrongCyan) &&

                                Math.round(allPaths.fillColor.magenta) == getText(wrongMagenta) &&

                                Math.round(allPaths.fillColor.yellow) == getText(wrongYellow) &&

                                Math.round(allPaths.fillColor.black) == getText(wrongBlack)) {

                                // Change the fillColor properties

                                allPaths.fillColor.cyan = getText(rightCyan);

                                allPaths.fillColor.magenta = getText(rightMagenta);

                                allPaths.fillColor.yellow = getText(rightYellow);

                                allPaths.fillColor.black = getText(rightBlack);

                                changesMade++;

                                doc.save();

                            }

                        }

                        // Close the document and save the changes

                        //doc.close(SaveOptions.SAVECHANGES);

                        doc.close();

                    }

                    alert(changesMade + " color changes were made.");

                } else {

                    alert('This folder doesn\'t contain any Adobe Illustrator files');

                }

            }

            // Cancel button was selected

            else {

                alert("Script cancelled. \nHave a nice day! :-)");

            }

            // End batch

        } catch (e) {

            alert(e);

        }

    });

    // Cancel Button

    var cancelBtn = createButton(buttons, "Cancel", function() {

        gui.close();

    });

    return gui;

}

// Function to collect user input

function getText(field) {

    return field.text !== undefined ? field.text : "";

}

// Function to build panel

function createPanel(parent, title) {

    // Create Panel 

    var panel = parent.add("panel", undefined, title);

    panel.orientation = "column";

    // Return panel 

    return panel;

}

// Function to create button

function createButton(parent, title, onClick) {

    // Create Button 

    var button = parent.add("button", undefined, title);

    if (onClick !== undefined) button.onClick = onClick;

    // Return button 

    return button;

}

// Function to create field in panel

function createTextField(parent, title, content) {

    // Create a group for title and field 

    var group = createGroup(parent, "column");

    group.alignChildren = 'left';

    // Create title 

    var title = group.add("statictext", undefined, title);

    var field = group.add("edittext", undefined, content);

    field.preferredSize = [200, 23];

    // Return the field as its all you'll use 

    return field;

}

// Function to organize the panel layout

function createGroup(parent, orientation) {

    // Create Group 

    var group = parent.add("group");

    group.orientation = orientation;

    // Return Group 

    return group;

}

Any chance itsBenMason​  you can tell me how to make this loop through all sub-directories as well?... not just the selected folder.

itsBenMason
Inspiring
October 17, 2017

Re-written to be nice and tidy (wrote off me head, if it doesnt work, check for spellings)

try {

     var gui = createGUI();

     gui.show();

} catch (e) {

     alert(e);

}

function createGUI() {

  var gui = new Window("dialog", "CMYK Correction Tool");

  gui.orientation = "column";

  gui.alignChilren = ["fill", "fill"];

  //Wrong Stuff

  var wrongPanel = createPanel(gui, "Wrong CMYK Values");

  var wrongCyan = createTextField(wrongPanel, "Cyan Value:", "");

  var wrongMegenta = createTextField(wrongPanel, "Cyan Value:", "");

  var wrongYellow = createTextField(wrongPanel, "Cyan Value:", "");

  var wrongBlack = createTextField(wrongPanel, "Cyan Value:", "");

  //Right Stuff

  var rightPanel = createPanel(gui, "Right CMYK Values");

  var rightCyan = createTextField(rightPanel, "Cyan Value:", "");

  var rightMegenta = createTextField(rightPanel, "Cyan Value:", "");

  var rightYellow = createTextField(rightPanel, "Cyan Value:", "");

  var rightBlack = createTextField(rightPanel, "Cyan Value:", "");

  var buttons = createGroup(gui, "row");

  var confirmBtn = createButton(buttons, "OK", function() {

    alert("you entered\n" +

     "Cyan value: " + rightCyan.text +

     "\nMagenta value: " + rightMagenta.text +

     "\nYellow value: " + rightYellow.text +

     "\nBlack value: " + rightBlack.text);

  });

  var cancelBtn = createButton(buttons, "Cancel", function() {

    gui.close();

  });

  return gui;

}

function createPanel(parent, title) {

  //Create Panel

  var panel = parent.add("panel", undefined, title);

  panel.orientation = "column";

  //Return panel

  return panel;

}

function createButton(parent, title, onClick) {

  //Create Button

  var button = parent.add("button", undefined, title);

  if (onClick !== undefined) button.onClick = onClick;

  //Return button

  return button;

}

function createTextField(parent, title, content) {

  //Create a group for title and field

  var group = createGroup(parent, "column");

  //Create title

  var title = group.add("statictext", undefined, title);

  var field = group.add("edittext", undefined, content);

  field.characters = 12;

  //Return the field as its all you'll use

  return field;

}

function createGroup(parent, orientation) {

  //Create Group

  var group = parent.add("group");

  group.orientation = orientation;

  //Return Group

  return group;

}

OLD STUFF

to get the inputs do for example:

var value = wrongMagentaColor.text;

and to get two columns do:

w.orientation = "row";

var wrongPanel = w.add('panel', undefined, "Wrong CMYK values");

wrongPanel.orientation = "column";

var rightPanel = w.add('panel', undefined, "Right CMYK Values");

rightPanel.orientation = "column";

//Wrong Values

wrongPanel.add('statictext{text: "Cyan Value: "}'); 

var wrongCyanColor = w.wrongGroup.add('edittext'); 

 

 

wrongPanel.add('statictext{text: "Magenta Value: "}'); 

var wrongMagentaColor = wrongPanel.add('edittext'); 

 

 

wrongPanel.add('statictext{text: "Yellow Value: "}'); 

var wrongYellowColor = wrongPanel.add('edittext'); 

 

 

wrongPanel.add('statictext{text: "Black Value: "}'); 

var wrongBlackColor = wrongPanel.add('edittext'); 

//Right Values

rightPanel = w.add('panel', undefined, "Correct CMYK values"); 

rightPanel.alignChildren = 'left'; 

 

 

rightPanel.add('statictext{text: "Cyan Value: "}'); 

var cyanColor = rightPanel.add('edittext'); 

 

 

rightPanel.add('statictext{text: "Magenta Value: "}'); 

var magentaColor = rightPanel.add('edittext'); 

 

 

rightPanel.add('statictext{text: "Yellow Value: "}'); 

var yellowColor = rightPanel.add('edittext'); 

 

 

rightPanel.add('statictext{text: "Black Value: "}'); 

var blackColor = rightPanel.add('edittext'); 

//Buttons

var buttonGroup = w.add("group");

var okBtn = buttonGroup.add("button", undefined, "OK"); 

okBtn.onClick = function() { 

    

    w.close(); 

    return this.value = true; 

var cancelBtn = buttonGroup.add("button", undefined, "Cancel"); 

cancelBtn.onClick = function() { 

    w.close(); 

    return this.value = true; 

subieguy2
subieguy2Author
Inspiring
October 17, 2017

Thank you for the input. When I try to run the code I get undefined is not an object.

Here is the code I am running....

#target illustrator-21

#targetengine main

var w = new Window('dialog', "CMYK Correction Tool\n");

w.orientation = "row";

var wrongPanel = w.add('panel', undefined, "Wrong CMYK values");

wrongPanel.orientation = "column";

var rightPanel = w.add('panel', undefined, "Right CMYK Values");

rightPanel.orientation = "column";

//Wrong Values

wrongPanel.add('statictext{text: "Cyan Value: "}'); 

var wrongCyanColor = w.wrongGroup.add('edittext {characters: 12, active: true}'); 

 

wrongPanel.add('statictext{text: "Magenta Value: "}'); 

var wrongMagentaColor = wrongPanel.add('edittext {characters: 12, active: true}'); 

var valueWrongMagenta = wrongMagentaColor.text;   

 

wrongPanel.add('statictext{text: "Yellow Value: "}'); 

var wrongYellowColor = wrongPanel.add('edittext {characters: 12, active: true}'); 

 

 

wrongPanel.add('statictext{text: "Black Value: "}'); 

var wrongBlackColor = wrongPanel.add('edittext {characters: 12, active: true}'); 

//Right Values

rightPanel = w.add('panel', undefined, "Correct CMYK values"); 

rightPanel.alignChildren = 'left'; 

 

 

rightPanel.add('statictext{text: "Cyan Value: "}'); 

var cyanColor = rightPanel.add('edittext {characters: 12, active: true}'); 

 

 

rightPanel.add('statictext{text: "Magenta Value: "}'); 

var magentaColor = rightPanel.add('edittext {characters: 12, active: true}'); 

 

 

rightPanel.add('statictext{text: "Yellow Value: "}'); 

var yellowColor = rightPanel.add('edittext {characters: 12, active: true}'); 

 

 

rightPanel.add('statictext{text: "Black Value: "}'); 

var blackColor = rightPanel.add('edittext {characters: 12, active: true}'); 

//Buttons

var buttonGroup = w.add("group");

var okBtn = buttonGroup.add("button", undefined, "OK"); 

okBtn.onClick = function() { 

    

    w.close(); 

    return this.value = true; 

var cancelBtn = buttonGroup.add("button", undefined, "Cancel"); 

cancelBtn.onClick = function() { 

    w.close(); 

    return this.value = true; 

}

w.show();

alert("you entered\n" + "Cyan value: " + cyanColor + "\nMagenta value: " + valueWrongMagenta + "\nYellow value: " + yellowColor + "\nBlack value: " +blackColor);

itsBenMason
Inspiring
October 17, 2017

Try the new updated version i amended my post.

the issue is on Row 10 of the original code i posted, missed that one! (change w.wrongGroup.add() to wrongPanel.add()).

Though ucan amend that, id recommend using my new improved version so you only need to change 1 thing to change all your text fields and such so much easier to maintain