Brainiac

Answered

ScriptUI: How do I create a preview of the results while a palette is open?

Forum|Forum|5 years ago
March 27, 2020
5 replies
1457 views

My goal is to write a script that will draw a line, based on four coordinates of two points, which I enter into a palette. This is what I've got so far.

//Create palette to enter 4 coordinates of 2 points
#targetengine "session";
var window1 = new Window ("palette", "Line", undefined);
  group1 = window1.add ("group");
    group1.orientation = "row";  group1.alignment = "left";
    group1.add ("statictext {text: 'Point 1', characters: 10, justify: 'left'}");
    var entry1Text = group1.add ("edittext", undefined, "0");
      entry1Text.characters = 3;
    var entry2Text = group1.add ("edittext", undefined, "0");
      entry2Text.characters = 3;
  group2 = window1.add ("group");
    group2.orientation = "row"; group1.alignment = "left";
    group2.add ("statictext {text: 'Point 2', characters: 10, justify: 'left'}");
    var entry3Text = group2.add ("edittext", undefined, "0");
      entry3Text.characters = 3;
    var entry4Text = group2.add ("edittext", undefined, "0");
      entry4Text.characters = 3;
  var checkbox = window1.add ("checkbox", undefined, "Preview");
    checkbox.value = false;
  window1.add ("button", undefined, "OK");
window1.show ();

//Convert input text into four numbers, x1, y1, x2 and y2
var x1 = parseInt (entry1Text.text); var y1 = parseInt (entry2Text.text);
var x2 = parseInt (entry3Text.text); var y2 = parseInt (entry4Text.text);

//Draw line based on x1, y1, x2 and y2
var path1 = documents[0].pathItems.add();
var point1 = path1.pathPoints.add();
 point1.anchor = [x1, y1];
 point1.rightDirection = [x1, y1]; point1.leftDirection = [x1, y1];
var point2 = path1.pathPoints.add();
 point2.anchor = [x2, y2];
 point2.rightDirection = [x2, y2]; point2.leftDirection = [x2, y2];

My question is: How do I create a preview of the results? I want to see the results "on the fly", with the palette still open, before I press OK, for example when I check a checkbox. Also, I want to be able to re-enter the data ad infinitum and see a preview until I am happy with the result, at which point I press OK and get the last result.

I'm three quarters of the way through Peter Kahrel's ScriptUI doc, but I can't find anything on how do do this and I've searched for the word "preview" in the rest of the doc, but didn't find anything.

I presume this is done through an event loop.

Your help is appreciated and thanks in advance.

Scripting

This topic has been closed for replies.

Correct answer CarlosCanto

here's your code updated to do what I suggested above. Checking the checkbox will draw the path, unchecking it will delete it.

//Create palette to enter 4 coordinates of 2 points
//#targetengine "main";
var window1 = new Window ("dialog", "Line", undefined);
  group1 = window1.add ("group");
    group1.orientation = "row";  group1.alignment = "left";
    group1.add ("statictext {text: 'Point 1', characters: 10, justify: 'left'}");
    var entry1Text = group1.add ("edittext", undefined, "0");
      entry1Text.characters = 3;
    var entry2Text = group1.add ("edittext", undefined, "0");
      entry2Text.characters = 3;
  group2 = window1.add ("group");
    group2.orientation = "row"; group1.alignment = "left";
    group2.add ("statictext {text: 'Point 2', characters: 10, justify: 'left'}");
    var entry3Text = group2.add ("edittext", undefined, "100");
      entry3Text.characters = 3;
    var entry4Text = group2.add ("edittext", undefined, "-200");
      entry4Text.characters = 3;
  var checkbox = window1.add ("checkbox", undefined, "Preview");
    checkbox.value = false;
  var btnOk = window1.add ("button", undefined, "OK");

  var path1;
  
btnOk.onClick = function () {
    alert('you pressed the Ok button');
}

checkbox.onClick = function () {

    if (checkbox.value) {
        //Convert input text into four numbers, x1, y1, x2 and y2
        var x1 = parseInt (entry1Text.text); var y1 = parseInt (entry2Text.text);
        var x2 = parseInt (entry3Text.text); var y2 = parseInt (entry4Text.text);

        //Draw line based on x1, y1, x2 and y2
        path1 = documents[0].pathItems.add();
        var point1 = path1.pathPoints.add();
         point1.anchor = [x1, y1];
         point1.rightDirection = [x1, y1]; point1.leftDirection = [x1, y1];
        var point2 = path1.pathPoints.add();
         point2.anchor = [x2, y2];
         point2.rightDirection = [x2, y2]; point2.leftDirection = [x2, y2];
         
         app.redraw();
     }
     else {
         path1.remove();
         app.redraw();
     }
 }

window1.show ();

renél80416020

Inspiring

Bonjour à vous deux,

Je trouve l'idée de la case aperçu pour vérifier le tracé excellente, je vais l'exploiter pour éditer un script plus complet.
(série de segments en un seul lancement, choix de l'unité avec par défaut celle des règles, modes absolu et relatif, chaînage pour que les segments soient bout à bout avec actualisation automatique des coordonnées du points P1, coordonnée polaire (rayon, angle caractère ° pour le point P2), segment (espace vide), possibilité de démarrer à partir d'un point sélectionné, aperçu d'une autre couleur, gestion des erreurs de frappe).

Un peut comme cela:

Bon, il y a du travail...

CarlosCanto

Community Expert

oh that's correct, redraw() does the trick.

femkeblancoAuthor

Brainiac

Thanks.

CarlosCanto

Community Expert

you're welcome.

do you mean an alert() result? close will be the last action. Do you want to dismiss it before showing your result?

femkeblancoAuthor

Brainiac

No, I meant drawing the path. I thought that could only happen once the Dialog was closed.

CarlosCantoCorrect answer

Community Expert

here's your code updated to do what I suggested above. Checking the checkbox will draw the path, unchecking it will delete it.

//Create palette to enter 4 coordinates of 2 points
//#targetengine "main";
var window1 = new Window ("dialog", "Line", undefined);
  group1 = window1.add ("group");
    group1.orientation = "row";  group1.alignment = "left";
    group1.add ("statictext {text: 'Point 1', characters: 10, justify: 'left'}");
    var entry1Text = group1.add ("edittext", undefined, "0");
      entry1Text.characters = 3;
    var entry2Text = group1.add ("edittext", undefined, "0");
      entry2Text.characters = 3;
  group2 = window1.add ("group");
    group2.orientation = "row"; group1.alignment = "left";
    group2.add ("statictext {text: 'Point 2', characters: 10, justify: 'left'}");
    var entry3Text = group2.add ("edittext", undefined, "100");
      entry3Text.characters = 3;
    var entry4Text = group2.add ("edittext", undefined, "-200");
      entry4Text.characters = 3;
  var checkbox = window1.add ("checkbox", undefined, "Preview");
    checkbox.value = false;
  var btnOk = window1.add ("button", undefined, "OK");

  var path1;
  
btnOk.onClick = function () {
    alert('you pressed the Ok button');
}

checkbox.onClick = function () {

    if (checkbox.value) {
        //Convert input text into four numbers, x1, y1, x2 and y2
        var x1 = parseInt (entry1Text.text); var y1 = parseInt (entry2Text.text);
        var x2 = parseInt (entry3Text.text); var y2 = parseInt (entry4Text.text);

        //Draw line based on x1, y1, x2 and y2
        path1 = documents[0].pathItems.add();
        var point1 = path1.pathPoints.add();
         point1.anchor = [x1, y1];
         point1.rightDirection = [x1, y1]; point1.leftDirection = [x1, y1];
        var point2 = path1.pathPoints.add();
         point2.anchor = [x2, y2];
         point2.rightDirection = [x2, y2]; point2.leftDirection = [x2, y2];
         
         app.redraw();
     }
     else {
         path1.remove();
         app.redraw();
     }
 }

window1.show ();

femkeblancoAuthor

Brainiac

Thanks. This is practically what I wanted.

Please excuse my naivety, but I have a follow-up question: I was surprised to see a Dialog show a result before it was closed. Is this because of the redraw() function?

Thanks again.

CarlosCanto

Community Expert

hmm...you're 1/4" of the way there, maybe less.

as you might have found out by now, making Palettes are a lot trickier than making Dialogs. If you're new to ScriptUI, I suggest you start with Dialogs then venture out into making Palettes.

as is, afte showing the palette, your code continues executing and creates an empty path. It's empty because at that point the values of your text boxes are 0. Run your code, when you see the window don't do anything. You should see a path in the layers panel. Then when you press the Ok button nothing happens because there are no events attached to that button.

you need to add an Event to the Ok button that will execute the path making code.

so, here's the deal

- there's no "preview" built in function. You would have to make your path, and if you're not happy with it, probably delete it and make another one.

- you would need to attach the "path making" code to the Preview check box

- the problem with palettes is that they don't communicate with the Document. You would have to use BridgeTalk

- BridgeTalk wraps a separate script in a string, sends it to Illustrator and Illustrator executes that script.

Carlos

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded