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);
1 Correct answer
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:", ""
Explore related tutorials & articles
12
Replies
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);
Thank you so much! It is getting all of the ai files in the subfolders. However I am now getting an error.
I am still learning javascript. So I appreciate all your help! I am assuming this is because I am not passing the wrongCyan variable to my function?
If you wouldn't mind itsBenMason .... how do I pass that variable? Here is the full updated code with the UI and searching subfolders as well as what I want the script to do.
/*
This script is targeted for Adobe Illustrator Creative Cloud.
*/
#target illustrator-21
#targetengine main
var changesMade = 0;
try {
var gui = createGUI();
gui.show();
} catch (e) {
alert(e);
}
try {
// Select folder that contains your files
var dir = Folder.selectDialog("Select your file directory...");
if (dir != null) {
var files = dir.getFiles("*.ai");
//Get all sub folders
var folders = getSubFolders(dir, []);
//Loop over folders
for (var i = 0; i < folders.length; i++) {
var folder = folders;
// Only look for files with the .ai extension and collect them
var folderFiles = folder.getFiles("*.ai");
for (var j = 0; j < folderFiles.length; j++) {
files.push(folderFiles
); }
}
//Loop over files
if (files.length > 0) {
for (var i = 0; i < files.length; i++) {
alert(files.length);
var file = files;
if (file.constructor == File) {
var doc = app.open(file);
//Do w/e it is you do with your 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();
}
}
}
}
} catch (e) {
alert(e);
}
// Go through subfolders as well
function getSubFolders(dir, collection) {
if (collection === undefined) collection = [];
var files = dir.getFiles();
if (files.length > 0) {
for (var i = 0; i < files.length; i++) {
var file = files;
if (file.constructor == Folder && file.name !== "") {
collection.push(file);
getSubFolders(file, collection);
}
}
}
return collection;
}
// Panel fields and information
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();
} catch (e) {
alert(e);
}
});
// Cel 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;
}
AdChoices