Skip to main content
Known Participant
August 11, 2023
Answered

Javascript code to create preview in dialog box Adobe Illustrator

  • August 11, 2023
  • 3 replies
  • 2561 views

I have code to create copies of an object on the layer. The code also includes a dialog box for entering information. I need to adapt a code to generate a preview of the copies when the checkbox is checked. I've seen some scripts with this function, but I couldn't adapt it for myself. Does anyone have any ideas?

This topic has been closed for replies.
Correct answer renél80416020

Une approche rapide, non affinée...

 

 

// JavaScript Document
//Criar caixa de diálogo
var Undo = false;
    if (app.selection.length === 1 && app.selection[0].typename === "GroupItem") {
      var grupoSelecionado = app.selection[0];
      createDialog();
    }
    else {
      alert("Selecione um único grupo na Camada 1.");
    }
// -------
function createColumnGroup(parent, name) {
  var group = parent.add("group", undefined, { name: name });
      group.orientation = "column";
      group.alignChildren = ["left", "top"];
      group.spacing = 10;
      group.margins = 0;
  return group;
}
// -------
function createEditText(parent, config) {
  var editText = parent.add('edittext {properties: {name: "edittext"}}');
      editText.preferredSize.width = config.preferredWidth;
      editText.alignment = config.alignment;
  return editText;
}
// -------
function createDialog() {
  var dialog = new Window("dialog", "Multiplicar e distribuir");
  var mainGroup = createColumnGroup(dialog, "mainGroup");

  var quantidadeGroup = createColumnGroup(mainGroup, "quantidadeGroup");
  var espacamentoGroup = createColumnGroup(mainGroup, "espacamentoGroup");
  var sharedConfig = {
      preferredWidth: 100,
      alignment: ["left", "center"],
};

var quantidadeLabel = quantidadeGroup.add("statictext", undefined, undefined, { name: "quantidadeLabel" });
    quantidadeLabel.text = "Quantidade:";


var quantidadeEditText = createEditText(quantidadeGroup, sharedConfig);
     quantidadeEditText.text = 3;
var espacamentoLabel = espacamentoGroup.add("statictext", undefined, undefined, { name: "espacamentoLabel" });
    espacamentoLabel.text = "Espaçamento:";

var espacamentoEditText = createEditText(espacamentoGroup, sharedConfig);
    espacamentoEditText.text = 1;
var visualizarCheckbox = mainGroup.add("checkbox", undefined, undefined, { name: "visualizarCheckbox" });
    visualizarCheckbox.text = "Visualizar";
    visualizarCheckbox.preferredSize.width = 80;
    visualizarCheckbox.preferredSize.height = 20;

var buttonGroup = dialog.add("group", undefined, { name: "buttonGroup" });
    buttonGroup.orientation = "row";
    buttonGroup.alignChildren = ["center", "center"];
    buttonGroup.spacing = 10;
    buttonGroup.margins = 0;
    buttonGroup.alignment = ["center", "top"];

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

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

    okButton.onClick = function () {
        if (Undo == false) {
          var q = quantidadeEditText.text;
          var k = espacamentoEditText.text;  alert(q+"  "+k)
              traitement(q,k);
        }
    dialog.close();
    };
    visualizarCheckbox.onClick = function() {
      if (visualizarCheckbox.value == true) {
        var q = quantidadeEditText.text;
        var k = espacamentoEditText.text;  //alert(q+"  "+k)
          traitement(q,k);
          app.redraw();
          Undo = true;
      }
      if (visualizarCheckbox.value == false) {
          app.executeMenuCommand("undo");
          app.redraw();
          Undo = false;
      }
    }
  cancelButton.onClick = function () {
    if (Undo) {
      app.executeMenuCommand("undo");
      app.redraw();
    }
    dialog.close();
  };
  dialog.show();
}
// -------
function traitement(q,k) {
  // Código principal
  // Verifica se o grupo está selecionado
    var distanciaHorizontal = parseFloat(k.replace(".", "").replace(",", ".")) * 28.3465;
  // Armazena a altura do grupo selecionado
    var alturaGrupoInicial = grupoSelecionado.height;
    var quantidadeCopias = parseInt(q);

    if (isNaN(quantidadeCopias) || quantidadeCopias < 1) {
    alert("Quantidade inválida. O valor deve ser um número inteiro maior que zero.");
    return;
    }
    else {
    // Define a posição do grupo selecionado em relação à prancheta
    var prancheta = app.activeDocument.artboards[0];
    var posX = prancheta.artboardRect[0] + 4.5 * 28.3465;
    var posY = prancheta.artboardRect[1] - 0.5 * 28.3465;
        grupoSelecionado.position = [posX, posY];
    var posXAtual = posX + grupoSelecionado.width + distanciaHorizontal;
    var posYAtual = posY;

      for (var i = 1; i < quantidadeCopias; i++) {
        var novaCopia = grupoSelecionado.duplicate();
            novaCopia.position = [posXAtual, posYAtual];
            posXAtual += grupoSelecionado.width + distanciaHorizontal;

        if (posXAtual + grupoSelecionado.width > 129 * 28.3465) {
          posXAtual = posX;
          posYAtual -= alturaGrupoInicial + distanciaHorizontal;
        }
      }
    }
}

 

 

de elleere

3 replies

femkeblanco
Legend
August 11, 2023

Do you mean something like this? 

var path1;
var w = new Window("dialog");
var checkbox = w.add("checkbox");
checkbox.onClick = function() {
    if (checkbox.value == true) {
        main();
        app.redraw();
    }
    if (checkbox.value == false) {
        path1.remove();
        app.redraw();
    }
}
var button = w.add("button", undefined, "Done");
button.onClick = function() {
    w.close();
}
w.show();

// example
function main () {
    var doc = app.activeDocument;
    path1 = doc.pathItems.rectangle(
        - doc.height / 4, doc.width / 4, doc.width / 2, doc.height / 2
    );
}

 

 

Known Participant
August 23, 2023

I believe so, but as I am a layman, I would not know how to adapt it to my code. But thanks for the help

renél80416020
Inspiring
August 23, 2023

Merci pour la réponse timide mais positive...

René

Community Expert
August 11, 2023

I have moved your post to the Illustrator forum so that you get better help. I think I am not getting your ask properly. Creation of dialog and all is fine but what do you mean by preview is confusing me. Hopefully someone better versed with Illustrator will chime in.

-Manan

-Manan
Known Participant
August 11, 2023

I need a preview before it clicks "ok" when checking the checkbox. But I appreciate your effort.

renél80416020
Inspiring
August 23, 2023

Thank you for your commitment. The previous code served well. I'm still trying to improve it. That last one sent didn't work.


J'ai testé le dernier script sur Illustrator CS6, il fonctionne.

Quel est le problème pour vous, il se passe quoi ? (la boîte de dialogue s'affiche en haut à gauche [100,300] ?)

René.

Community Expert
August 11, 2023

Can you share samples of the script where you see the functionalty you want. Then it would be easier to integrate it with your code(share that as well).

-Manan

-Manan
Known Participant
August 11, 2023

This is the complete code. It is for specific use, so your clipboard needs to be at least 1.50m wide. As you can see, in the dialog box I already inserted the "Visualize" checkbox, but I couldn't implement the code for the visualization of the copies that the main code performs. I've seen preview commands in other scripts, so I imagine it's possible through codes.

//Criar caixa de diálogo

function createColumnGroup(parent, name) {
var group = parent.add("group", undefined, { name: name });
group.orientation = "column";
group.alignChildren = ["left", "top"];
group.spacing = 10;
group.margins = 0;
return group;
}

function createEditText(parent, config) {
var editText = parent.add('edittext {properties: {name: "edittext"}}');
editText.preferredSize.width = config.preferredWidth;
editText.alignment = config.alignment;
return editText;
}

function createDialog() {
var dialog = new Window("dialog", "Multiplicar e distribuir");
var mainGroup = createColumnGroup(dialog, "mainGroup");

var quantidadeGroup = createColumnGroup(mainGroup, "quantidadeGroup");
var espacamentoGroup = createColumnGroup(mainGroup, "espacamentoGroup");

var sharedConfig = {
preferredWidth: 100,
alignment: ["left", "center"],
};

var quantidadeLabel = quantidadeGroup.add("statictext", undefined, undefined, { name: "quantidadeLabel" });
quantidadeLabel.text = "Quantidade:";

var quantidadeEditText = createEditText(quantidadeGroup, sharedConfig);

var espacamentoLabel = espacamentoGroup.add("statictext", undefined, undefined, { name: "espacamentoLabel" });
espacamentoLabel.text = "Espaçamento:";

var espacamentoEditText = createEditText(espacamentoGroup, sharedConfig);

var visualizarCheckbox = mainGroup.add("checkbox", undefined, undefined, { name: "visualizarCheckbox" });
visualizarCheckbox.text = "Visualizar";
visualizarCheckbox.preferredSize.width = 80;
visualizarCheckbox.preferredSize.height = 20;

var buttonGroup = dialog.add("group", undefined, { name: "buttonGroup" });
buttonGroup.orientation = "row";
buttonGroup.alignChildren = ["center", "center"];
buttonGroup.spacing = 10;
buttonGroup.margins = 0;
buttonGroup.alignment = ["center", "top"];

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

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

okButton.onClick = function () {

// Código principal
// Verifica se o grupo está selecionado
if (app.selection.length === 1 && app.selection[0].typename === "GroupItem") {
var grupoSelecionado = app.selection[0];
var distanciaHorizontal = parseFloat(espacamentoEditText.text.replace(".", "").replace(",", ".")) * 28.3465;

// Armazena a altura do grupo selecionado
var alturaGrupoInicial = grupoSelecionado.height;

// Define a posição do grupo selecionado em relação à prancheta
var prancheta = app.activeDocument.artboards[0];
var posX = prancheta.artboardRect[0] + 4.5 * 28.3465;
var posY = prancheta.artboardRect[1] - 0.5 * 28.3465;
grupoSelecionado.position = [posX, posY];

var quantidadeCopias = parseInt(quantidadeEditText.text);

if (isNaN(quantidadeCopias) || quantidadeCopias < 1) {
alert("Quantidade inválida. O valor deve ser um número inteiro maior que zero.");
} else {
var posXAtual = posX + grupoSelecionado.width + distanciaHorizontal;
var posYAtual = posY;

for (var i = 1; i < quantidadeCopias; i++) {
var novaCopia = grupoSelecionado.duplicate();
novaCopia.position = [posXAtual, posYAtual];
posXAtual += grupoSelecionado.width + distanciaHorizontal;

if (posXAtual + grupoSelecionado.width > 129 * 28.3465) {
posXAtual = posX;
posYAtual -= alturaGrupoInicial + distanciaHorizontal;
}
}
}
} else {
alert("Selecione um único grupo na Camada 1.");
}

dialog.close();
};

cancelButton.onClick = function () {
dialog.close();
};

dialog.show();
}

createDialog();