Question 419686 in Javascript Question posted in
A very good W3school tutorial can be found here.

Illustrator javascript CSV to Array to pathItems coordinates

I have a CSV File with the following data:

10, 23, 55, 123, 150 ...

I have a Javascript File which I use in Adobe Illustrator.

The following code creates 10 rectangles that are each shifted by 20 pixels and placed on the artboard. So far it works.

var myDocument = app.activeDocument;
var artLayer = myDocument.activeLayer;
var mypos = 0;
var i = 0;
while (i < 10) {
    var rect = artLayer.pathItems.rectangle( 0, mypos, 200, 600 );
    i++;
    mypos = mypos + 20;
  }

Now I want to use the values ​​from the CSV file for the coordinates/position of the rectangles instead of mypos + 20. The open dialog appears and I can select the CSV file.So far it works.

Now I don’t know how to process the data from the CSV file and go through the array to use the values.

  var csvFile = File.openDialog("Choose CSV file.", "*.csv");
    var csvContents = "";
    if (csvFile) {
       csvFile.open('r');
       csvContents = csvFile.read();
       csvFile.close();
    }
Tags:

2

Answers


  1. 0

    This is roughly what you’ll want to do:

    1. Parse the CSV file into an array of values
    2. Cycle through each value in the array
    3. Render a square on screen at the coordinate corresponding to this value

    To create one row of rectangles (i.e. all with the same y coordinates), you want to use a for loop:

    // Split CSV line into array of x-coordinates
let xCoordinates = csvContents.split(',');
// Cycle through all the x-coordinates
for (let i = 0; i < xCoordinates.length; i++)
{
    // Multiply the x-coordinate by 20 (your squares' widths)
    // and draw the rectangle at point (x, 0)
    artLayer.pathItems.rectangle(+xCoordinates[i] * 20, 0, 200, 600);
}

    Now of course you might want to draw rectangles using different y coordinates as well — in that case, you can use two for-loops, splitting your CSV file first into rows (using .split('n')) then each row into individual coordinates (using .split(',')). Then your code might look something like this:

    // Store y-coordinate
let y = 0;
// Split CSV sheet into rows
let rows = csvContents.split('n');
// Cycle through all the rows
for (let i = 0; i < rows.length; i++)
{
    // Split the row into individual x-coordinates
    xCoordinates = rows[i].split(',');
    // Cycle through each x-coordinate
    for (let j = 0; j < xCoordinates.length; j++)
    {
        // Multiply the x- and y-coordinates by 20 (your squares' widths)
        // and draw the rectangle at point (x, y)
        artLayer.pathItems.rectangle(+xCoordinates[j] * 20, y * 20, 200, 600);
    }
    // Add 1 to the y-coordinate for the next row
    y++;
}
    Login or Signup to reply.
  2. 0

    It can be something like this:

    var myDocument = app.activeDocument;
var artLayer = myDocument.activeLayer;

var csvFile = File.openDialog("Choose CSV file.", "*.csv");
var csvContents = "";
if (csvFile) {
    csvFile.open("r");
    csvContents = csvFile.read(); // read the row
    csvFile.close();
}

var mypos = csvContents.split(","); // split the row into an array

// loop through the array and draw the boxes 
for (var i=0; i<mypos.length; i++) {
    var box = artLayer.pathItems.rectangle(0, mypos[i], 200, 600);
}

    The result for the csv data 10,23,55,123,150 :

    screenshot with the page and the created boxes

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search