How to Pass a Field Value to Create a Shape?

[BryanPagenkopf]

Hello I have a script that doesn't seem to be passing the field values I enter to create either a new Rectangle or Elliptical shape within the active document and layer.  Where did I go wrong?

var doc = app.activeDocument
var myLayer = doc.activeLayer


// Create the window
var win = new Window("dialog", "Path Dimensions");

// Create a group to hold the width and height fields
var dimGroup = win.add("group");

// Add the width and height input fields
dimGroup.add("statictext", undefined, "Width (inches):");
var widthField = dimGroup.add("edittext", undefined, 5);
widthField.value = 5;
widthField.preferredSize.width = 50; 
dimGroup.add("statictext", undefined, "Height (inches):");
var heightField = dimGroup.add("edittext", undefined, 5);
heightField.value = 5;
heightField.preferredSize.width = 50; 

win.add("statictext", undefined, "Offset (inches):");
var offsetField = win.add("edittext", undefined, 0);
offsetField.value = 0;
offsetField.preferredSize.width = 50; 

// Add the radio buttons
var radioGroup = win.add("group");
var rectButton = radioGroup.add("radiobutton", undefined, "Rectangle");
rectButton.value = true;
var ellipseButton = radioGroup.add("radiobutton", undefined, "Elliptical");

// Add the OK and cancel buttons
var btnGroup = win.add("group");
btnGroup.add("button", undefined, "OK", {name: "ok"});
btnGroup.add("button", undefined, "Cancel", {name: "cancel"});

// Show the window
win.show();

// Check if the OK button was clicked
if (win.ok) {
    // Get the width, height, and offset values
    var wdth = widthField.value*72;
    var hdth = heightField.value*72;
    var offset = offsetField.value*72;

    alert("Width is set to" + wdth)
    alert("Height is set to" + hdth)
    alert("Offset is set to" + offset)

    // Create the path
    if (rectButton.value) {
        var myRect = createRectangle(myLayer, 200, 200, wdth, hdth);
        function createRectangle(layer, x, y ,h ,w){
             return layer.pathItems.rectangle((x), (y), (wdth), (hdth))
        
        }
    } else {
        var path = app.activeDocument.pathItems.ellipse(0, 0, wdth, hdth);
    }
    path.stroked = false;
    path.fillColor = new CMYKColor();
    path.fillColor.cyan = 100;
    path.fillColor.magenta = 100;
    path.fillColor.yellow = 100;
    path.fillColor.black = 100;
    if(offset != 0) {
        path.createOutline(offset);
    }
} else {
    alert("No path created");
}

Thank you for your advice! 

[jduncan]

Move `win.show()` into your if statement like so...

...
// Check if the OK button was clicked
if (win.show() == 1) {
  // Get the width, height, and offset values
  var wdth = widthField.value * 72;
  var hdth = heightField.value * 72;
  var offset = offsetField.value * 72;
...

[BryanPagenkopf]

That allows the Rectangle to be created at 5 x 5 which I wanted as default values.
Apparently, I have two other issues 😞 
1. 5 x 5 must be hard-coded in because I just tried to do 10 x 5 and it still created a 5 x 5 rectangle.
2. I tried to do the ellipse and it crashes my illustrator.

[jduncan]

Ha! I didn't run the code, I just looked glanced at your post. I'll run it and let you know what is wrong.

[BryanPagenkopf]

@jduncan Thanks, the final piece to this script I need is to have the offset create an offset rectangle/ellipse path, if the value entered is not 0 (or Blank), centered with the parent shape.   Basic Scripts I can read and tweak... these last several have been way out of my league...

[jduncan · Accepted solution]

I didn't rearrange anything, I just made it work how I understand you want it to. Please note, on the "offset", it acts like the built-in offset where an offset of 1" actually increases the shape size by 2" (with a 1" offset on each side). The offset shape is stroked and centered on the parent shape. Let me know if this works for you?

var doc = app.activeDocument;
var myLayer = doc.activeLayer;

// Create the window
var win = new Window("dialog", "Path Dimensions");

// Create a group to hold the width and height fields
var dimGroup = win.add("group");

// Add the width and height input fields
dimGroup.add("statictext", undefined, "Width (inches):");
var widthField = dimGroup.add("edittext", undefined, 5);
widthField.text = 5;
widthField.preferredSize.width = 50;
dimGroup.add("statictext", undefined, "Height (inches):");
var heightField = dimGroup.add("edittext", undefined, 5);
heightField.text = 5;
heightField.preferredSize.width = 50;

win.add("statictext", undefined, "Offset (inches):");
var offsetField = win.add("edittext", undefined, 0);
offsetField.text = 0;
offsetField.preferredSize.width = 50;

// Add the radio buttons
var radioGroup = win.add("group");
var rectButton = radioGroup.add("radiobutton", undefined, "Rectangle");
rectButton.value = true;
var ellipseButton = radioGroup.add("radiobutton", undefined, "Elliptical");

// Add the OK and cancel buttons
var btnGroup = win.add("group");
btnGroup.add("button", undefined, "OK", { name: "ok" });
btnGroup.add("button", undefined, "Cancel", { name: "cancel" });

// Check if the OK button was clicked
if (win.show() == 1) {
  // Get the width, height, and offset values
  var wdth = widthField.text * 72;
  var hdth = heightField.text * 72;
  var offset = offsetField.text * 72;

  // Create the path
  var pathTop = 0;
  var pathLeft = 0;
  var path = rectButton.value
    ? myLayer.pathItems.rectangle(pathTop, pathLeft, wdth, hdth)
    : myLayer.pathItems.ellipse(pathTop, pathLeft, wdth, hdth);

  // Set path colors
  var pathColor = new CMYKColor();
  pathColor.cyan = 100;
  pathColor.magenta = 100;
  pathColor.yellow = 100;
  pathColor.black = 100;
  path.stroked = false;
  path.fillColor = pathColor;

  // Create Offset Path
  if (offset != 0) {
    var offsetPath = rectButton.value
      ? myLayer.pathItems.rectangle(
          pathTop + offset,
          pathLeft - offset,
          wdth + offset * 2,
          hdth + offset * 2
        )
      : myLayer.pathItems.ellipse(
          pathTop + offset,
          pathLeft - offset,
          wdth + offset * 2,
          hdth + offset * 2
        );

    // Enable the following line if you want the offset path below the path
    // offsetPath.move(path, ElementPlacement.PLACEAFTER);

    // Set offset path color
    var offsetColor = new CMYKColor();
    offsetColor.cyan = 0;
    offsetColor.magenta = 100;
    offsetColor.yellow = 100;
    offsetColor.black = 0;
    offsetPath.filled = false;
    offsetPath.strokeColor = offsetColor;
    offsetPath.strokeWidth = 3;
  }
} else {
  alert("No path created");
}

[jduncan]

Oh, and to get the value of the "edittext" field in your dialog, use ".text" not ".value".