Calling functions from UI palette

[klemango]

Hello,

From what I understand, you can't call complex functions from a scripted UI palette, only from "dialog" windows (which are usless in my case) because I need the persistance of a palette.

I have a series of scripts in use now that are  accessed from the usual "file-scripts folder" within Illustrator itself (about 27 of them).  I want to script a palette window so users can acces them without the usual mouse clicks down the menu system.

I'm able to call a simple "Hello World" type function using the "onClick()" method from a button of a scripted palette window, but I cannot use my regular working scripts inside a function that's called from the button.  In X-Code, I was able to write my scripts individually, then just add them to a main floating window via a separate function when they were completed.  But, I'm finding Javascript a little more tricky.

If I copy my other's script code into the function in the palette window script, it runs, but it runs before I click the button! --  After in runs, then the palette window is displayed(?).  If I try to use the execute() method with "onClick", the script just opens in the SDK, it will not and does run in Illustrator.

I take both of these as clear indications that I have no clue what I'm doing (or that I'm trying to do the impossible).

I did find someone with a similar problem, but they were scripting After Effects and were offered this solution:

system.callSystem ('afterfx -r "/C/Program Files/Adobe/Adobe After Effects CS3/Support Files/Scripts/GlobalVars.jsx"');

Is there anything I can do in Illustrator that will allow me to call (or execute) my other scripts/functions and have them execute within Illustrator?

Thanks for any and all help!

[klemango]

Wow, this is starting to make sense now.  Do you know if each line is sent to illustrator in sequence or as a package deal?  The reason I ask, and you may have already answered this, is if you have  code such as yours (single statements, in order) and your code has other functions below the main body of the script, will those functions be called or will they fail?

[CarlosCanto]

the message is sent as one string, as long as it may be, functions and everything in between, and just like a regular script, functions will get executed as they are called.

[CarlosCanto]

don't worry,

the + is the concatenation operand, "a" + "b" = "ab";

I just added them at the end of each line, to make the code somewhat readable, same as this

"app.activeDocument.pageItems[0].selected = true; app.refresh();"

[klemango]

Yep, didn't know if that was something specific to the call or not.

[klemango]

So, to serialize:   Just a beginning and ending quote for the entire script?

[klemango]

I give up!  If I change that single statement in your script Carlos, nothing happens.  I can't even add a new layer.  If anyone get get this simple script to work, I'll modify it to work for the others.  I'll check back in after they let me out of my rubber room:

var thisDoc = app.activeDocument;

var tempSel = thisDoc.selection;

    brown = new CMYKColor();

    brown.black = 50;

    brown.yellow = 100;

    brown.magenta = 67.065;

    brown.cyan =0;

    black = new CMYKColor();

    black.black = 100;

    black.yellow = 0;

    black.magenta = 0;

    black.cyan = 0;

if (thisDoc.selection.length >0){

    copy();

    paste();

    thisDoc.rulerOrigin = [0,0]; 

    thisDoc.pageOrigin = [0,0];

    var pageWidth = thisDoc.width/2;

    var pageHeight = thisDoc.height/2;

    var artSel = thisDoc.selection;

    var selLen = artSel.length;

    var newLayer = thisDoc.layers.add();

        newLayer.name = "Die Layer";

    var artGroup = thisDoc.groupItems.add();

        artGroup.name = "Art Group Build";

    for(i=0;i<selLen;i++)

        artSel.moveToEnd(artGroup);

    var artGroupWidth = artGroup.width;

    var artGroupHeight = artGroup.height;

    drawBasicDie(brown,black);

}//end IF

else

    alert("Please select the artwork.");

function drawBasicDie(brown,black)

{

   var artWidth = artGroup.width/2;

    var artHeight = artGroup.height/2;

    artGroup.position = [0-artWidth,0+artHeight];

    var rec_group1 = thisDoc.groupItems.add();

        rec_group1.name = "1";

        artGroup.moveToBeginning(rec_group1);

    var DieStar = (artHeight + 10);

    var star1 = rec_group1.pathItems.star(-76.5, DieStar,1,4,11);

        star1.filled =true;

        star1.stroked =false;

         star1.fillColor =black;

    var star2 = rec_group1.pathItems.star(-76.5, -DieStar,1,4,11);

        star2.filled = true;

        star2.stroked =false;

        star2.fillColor = black;

    var star3 = rec_group1.pathItems.star(69, DieStar,1,4,11);

        star3.filled =true;

        star3.stroked =false;

         star3.fillColor = black;

    var star4 = rec_group1.pathItems.star(69,-DieStar,1,4,11);

        star4.filled = true;

        star4.stroked =false;

        star4.fillColor = black;

    var DieStar = (artGroup.height/2+22);

    var DieCord1 = (rec_group1.width/2+10);

    var DieCord2 = (rec_group1.height/2+10);

    rec_group1.selected = true;

    x = app.activeDocument.selection[0].position[0];

    y = app.activeDocument.selection[0].position[1];

    var DieBoxW= (rec_group1.width/2);

    var DieBoxH = (rec_group1.height/2);

    var LeftCord = (DieBoxW-(DieBoxW*2)-15);

    var RtCord = (DieBoxH + 13);

    var BoxW = (rec_group1.width+25);

    var BoxH = (rec_group1.height+25);

    var rect_1 = rec_group1.pathItems.rectangle (RtCord, LeftCord,BoxW,BoxH);

        rect_1.filled = false;

        rect_1.stroked = true;

        rect_1.strokeColor = brown;

    var filename = activeDocument.fullName;

    var filename = filename.name;

    var filename = filename.substr(0,7);

    var die_num = thisDoc.textFrames.add();

        die_num.contents = filename + ".01";

        die_num.moveToBeginning(rec_group1);

    var myParagraph = die_num.paragraphs[0];

        myParagraph.characterAttributes.size = 12;

        myParagraph.characterAttributes.textFont=app.textFonts.getByName("MyriadPro-Regular");

        myParagraph.characterAttributes.fillColor = brown;

    die_num.top = rec_group1.height/2-5;

    die_num.left = -(die_num.width/2);

    die_num.filled = true;

    rec_group1.selected = true;

    rec_group1.position=[(pageWidth-(rec_group1.width/2)),(pageHeight+(rec_group1.height/2))];

} //  end

[Larry G. Schneider]

You mean like this

Corrected the two extra spaces and added the #target illustrator at the head of the script to get the ESTK to force it into Illustrator. In back is the original selection I made.

[CarlosCanto]

do baby steps...start by making a small script to add new a layer and reame that layer...show us your bridge talk code, we'll help you make it work, once you get the hang of it, you can go on to bigger things.

[klemango]

Okay, here we go.  I've used your example Carlos to contiuously add lines to the code and check each one as I go.  Things were going pretty well until I got to another function call and with the "else" statement.  I found that if I didn't have a semi-colon after the "else" statement, it wouldn't execute when there wasn't anything selected on the artboard.  When I do have something selected, the second function is called as expected and the "Hello" message is shown, but then the "else" statement also executes, telling the user to select the art.

#target illustrator;

#targetengine main;

var win = new Window('palette', 'Copy Objects');

var btnSelect = win.add('button', undefined, 'Copy');

btnSelect.onClick = function(){

    var bt = new BridgeTalk;

    bt.target = "illustrator";

    var script =

        "var thisDoc = app.activeDocument;" +

        "var artSel = thisDoc.selection;"+

        "var selLen = artSel.length;"+

        "brown = new CMYKColor();"+

        "brown.black = 50;"+

        "brown.yellow = 100;"+

        "brown.magenta = 67.065;"+

        "brown.cyan =0;"+

        "black = new CMYKColor();"+

        "black.black = 100;"+

        "black.yellow = 0;"+

        "black.magenta = 0;"+

        "black.cyan = 0;"+

        "if (thisDoc.selection.length >0){"+

                "copy();"+

                "paste();"+

                "thisDoc.rulerOrigin = [0,0]; "+

                "thisDoc.pageOrigin = [0,0];"+

                "var pageWidth = thisDoc.width/2;"+

                "var pageHeight = thisDoc.height/2;"+

                "var newLayer = thisDoc.layers.add();" +

                "newLayer.name = \"Die Layer\";"+

                "var artGroup = thisDoc.groupItems.add();"+

                "artGroup.name = \"Art Group Build\";"+

                "for(i=0;i<selLen;i++)"+

                "artSel.moveToEnd(artGroup);"+

                "var artGroupWidth = artGroup.width;"+

                "var artGroupHeight = artGroup.height;"+

                "drawBasicDie(brown,black);}"+

        "else;"+

            "alert(\"Please select the artwork\");"+

"function drawBasicDie(brown,black){"+

       "alert(\"Hello\");}"

         bt.body = script;

    bt.send();

       }// end function

   win.center();

win.show();

[klemango · Accepted solution]

Well, here it is!!

I found this link:

http://www.davidebarranca.com/2012/11/scriptui-bridgetalk-persistent-window-examples/

(If you stumble on this by chance, thank you davide barranca!)

Now, I can make changes to the scripts in just one location and everyone will get the updates once they restart their window. 

Works like a charm and is just what I was needing!  Thank you all again for your help!

#target illustrator

var scriptToLoad = new File("S:/NEW SCRIPTS/JAVASCRIPTS IN USE NOW/02) Make/01b) Shape P - 16 UP.jsx");

var win = new Window('palette', 'Copy Objects');

var btnSelect = win.add('button', undefined, 'Copy');

btnSelect.onClick = function(){

   scriptToLoad.open("r");

   var bt = new BridgeTalk;

   bt.target = "illustrator";

   var script = scriptToLoad.read();

   scriptToLoad.close();

   bt.body = script;

   bt.send();

}// end function

win.center();

win.show();

[CarlosCanto]

thanks for the link, it'll come handy, just for educational purposes here's your script, I ended up moving the function to the beginning, also the function is still a string, it needs to be converted back into a function with 'eval()'

#target illustrator;
#targetengine main;
var win = new Window('palette', 'Copy Objects');
var btnSelect = win.add('button', undefined, 'Copy');
btnSelect.onClick = function(){
    var bt = new BridgeTalk;
    bt.target = "illustrator";
    var script =
    "main();" +
"function main() {" +
 "var drawBasicDie = function (textstring){"+
    "alert('hola '+textstring);" +
       "alert('Hello');" +
  "}" + 
        "var thisDoc = app.activeDocument;" +
        "var artSel = thisDoc.selection;"+
        "var selLen = artSel.length;"+
        "brown = new CMYKColor();"+
        "brown.black = 50;"+
        "brown.yellow = 100;"+
        "brown.magenta = 67.065;"+
        "brown.cyan =0;"+
        "black = new CMYKColor();"+
        "black.black = 100;"+
        "black.yellow = 0;"+
        "black.magenta = 0;"+
        "black.cyan = 0;" +
        "if (thisDoc.selection.length >0){"+
                "copy();"+
                "paste();"  +
                "thisDoc.rulerOrigin = [0,0]; "+
                "thisDoc.pageOrigin = [0,0];"+
                "var pageWidth = thisDoc.width/2;"+
                "var pageHeight = thisDoc.height/2;"+
                "var newLayer = thisDoc.layers.add();" +
                "newLayer.name = 'Die Layer';" +
                "var artGroup = thisDoc.groupItems.add();"+
                "artGroup.name = 'Art Group Build';"+
                "for(i=0;i<selLen;i++) {"+
                "artSel.moveToEnd(artGroup);" +
                "}"+
                "var artGroupWidth = artGroup.width;"+
                "var artGroupHeight = artGroup.height;"+
                "var funct = eval(drawBasicDie);" +
                "funct('Carlos');" +
         "}" +
        "else {" +
            "alert('Please select the artwork');}" +
"}"
         bt.body = script;
    bt.send();
       }// end function
win.center();
win.show();

[klemango]

Thanks for all your help, Carlos.  I really appreaciate your time and patience (you have no idea).  This BT thing is finally beginning to click and the Tools Guide for the UI section is finally starting to make sense.

I have one other question with regards to your script above (with a little back story...).  Way back in the early 90's (Pascal, anyone?) when I had my first programming class, we were taught to keep all functions below the function call.  I'm not sure if this was just the instructor's preference or mandatory, but I've always tried to keep the functions at the bottom of my scripts, and in the order (if possible) they were called.  I notice many scripts on the net now that have them as you do, at the top.  Is there a fundamental programming reason for this?  I'm just wondering if I need to change my flow now with JS, and if some of the problems I've had in the past were as result of my layout.

** Thanks for correcting the "else" statement, too.  I see now that I was missing the {}'s around the statement.

Klemango

[CarlosCanto]

you're welcome

yeah, BT is a little bit obscure at first, once you get one or two scripts going, it starts to make sense.

I don't have formal training, all by experimentation, I noticed when you call your function it returned 'undefined' when it is at the bottom, as you noticed this is not a problem if you run your script normally in the ESTK, I tried a couple of things and moving it to to top worked. I kind of remember that in C++ one has to 'declare' a function so it registers before it is called, otherwise the compiler doesn't know it exist.

all that must be some weird BT implementation, you also noticed for (....) alert(...) does not work as it should, same with else alert(...), one liners must be enclosed in {}

...so, I keep my functions at the bottom too, as much as I'm allowed.

[W_J_T]

Great thread/work everyone, this has been an interesting and enlightening thread.

I was curious are ScriptUI window palettes able to be saved as part of a workspace and thus dockable so with each start they will be part of the users workspace? If not then what is the best way to execute or initialize such scripts, as startup scripts? I am just trying to get my head around this as klemango mentioned a bunch of artists/designers using this and I was curious in such a case how it would then be implemented for use and deployment as part of their workflows?

[CarlosCanto]

very interesting topic

are ScriptUI window palettes able to be saved as part of a workspace and thus dockable so with each start they will be part of the users workspace?

No

startup scripts?

I would say yes, but if you have several runing at the same time, I'm not sure how resource demanding that would be. The other option would be to start them up on demand as they're needed, just like other window-less scripts.

[W_J_T]

Hi CarlosCanto thanks so much for the reply.

Yeah I thought not concerning the workspace, wish it was that simple however. In regards to startup scripts I would think in this type of case since it requires user interaction to start the scripts via onClick then it would would just launch and establish the window and wait for interaction. I was just curious as klemango mentioned having a floating palette on a second monitor waiting for user interaction to launch scripts and run commands. I was curious how it could be implemented once developed for the staff that will use it as mentioned.

I have to admit I am still unclear why bridgetalk was needed in this case? I ask because I can create a palette window and launch various external script files via onClick as needed and when called upon, much the same as the outcome being discussed here (I think?) however without bridgetalk and by way of includes. What am I not understanding and missing within this discussion and concerning why bridgetalk was required and needed? Please forgive me, I am learning as well and want to understand both the hows and the whys as I continue forth with my own learning.

[CarlosCanto]

I meant having multiple palettes at the same time, but if you have only one palette that will execute scripts then it might not be as demanding...still, is the loaded script destroyed after it's done? I haven't done any research on it yet.

as for Illustrator needing to bridgeTalk itself to be able to use a palette, I don't know, the guide doesn't give us any hints about it, it suggest it should work the same as the dialog. I got the idea of using bridge talk from the included FlashPanel.jsx sample.

[W_J_T]

CarlosCanto wrote:

I meant having multiple palettes at the same time, but if you have only one palette that will execute scripts then it might not be as demanding...still, is the loaded script destroyed after it's done? I haven't done any research on it yet.

Good point on is the script destroyed, garbage collection etc..., given all the things that don't work and cant be done via scripting illy I would be amazed if they spent a ton of time of that, but maybe they did and thats why so much else is lacking. 😉

CarlosCanto wrote:

as for Illustrator needing to bridgeTalk itself to be able to use a palette, I don't know, the guide doesn't give us any hints about it, it suggest it should work the same as the dialog. I got the idea of using bridge talk from the included FlashPanel.jsx sample.

Oh gosh, I feel so stupid, I sincerely apologize my testing was seriously flawed. In my test I was simply using alerts (of course which are application wide and not dependent on documents or content at all) for testing the calls and executions, when I rewrote things using some actual simple code to execute I saw how/why it didn't work with palette/dialogs/lists/etc. I am really sorry for my silly mistake which led to my misunderstanding of things. I too am self taught and learn much from trial and error, unfortunately my trials seem inundated with errors most times, some of which are ridiculously silly like this one 😉 sorry for the confusion. WOW, now that I am on the same page here, this thread has really opened my understanding to possibilities of how and why bridgetalk can be used.

[klemango]

Great idea to put this in the startup scripts.  I will definitely give that a shot. 

Just a note on that subject.  I was able to link every button (see pic--Many more  to add!) on the palette so far to a script located on a central server, so when I make changes to scripts, everyone gets (or will, when it's complete) the updates automatically.  No more copying/pasteing into everyone's scripts folders.  I wonder if the startup script could point to the server as well?  That way, any changes made to the working palette could be loaded each time illustrator started.  It would be great just to give a "shout-out" to everyone to reboot illustrator at their earliest convienence, no?

Also, how can I get the input from this text field and launch a script containing that value?  I have a working script now that searches an incoming art depository folder based on the first 7 digits of the filename and opens it in Illustrator for the artist to work on. **ex. 1234567-Bob's Car Wash.ai. 

I need to to send the artist's input into the search script.  The other script does all the error checking.  I need to save that value into a variable, then either somehow figure out if they pressed enter, or use a "go" button, right?

[klemango]

At some point in the future, I would like to use symbols for all of this and have the palette look similar to the Tools Palette in Illustrator, and add scripts just like new tools, so to speak.

[W_J_T]

Nice job on your progress klemango, great work.

klemango wrote:

Great idea to put this in the startup scripts.  I will definitely give that a shot. .... I wonder if the startup script could point to the server as well?

It seems startup scripts for both application specific and general have distinct locations per the documentation at least that I see. I hope this is proven otherwise by someone however so you can fulfill your workflow and ease in updating as yes that would be nice. * I wonder if you could have a simple pointer .jsx in the startup folder which houses an #include statement to reference/launch the actual script on the server?

EDIT: I just tested using a slug.jsx in the illustrator start scripts folder, the slug referenced another js file using an #incude and launched a window successfully from the referenced script. This was tested locally but it seems it would work fine over a server also since its just a reference.

[CarlosCanto]

you nailed it WJT, it does work exactly as you described it, a jsx with a single line including the switchboard script will do the trick. (newtwork folder using windows)

#include '/z/Production/Carlos2/temp2/switchboardPalette.jsx'

[KennethWebb1]

I've run across an interesting issue with the startup scripts while trying to implement a startup script with the "#include" method Carlos mentioned.

I created a "Startup Scripts" folder and included a single startup script.

To be fair, everything starts up fine and runs when the Startup Scripts is present... but Illustrator now runs the startup script anytime a script is run while the folder exists.

I tried loading Illustrator without the folder present, adding it while the application is running and then running a script.  Lo and behold, it doesn't seem to matter in what order the folder is added or removed, as long as "Startup Scripts" exists in the main "Adobe Illustrator CS5" folder (mac), it runs any scripts in the folder before any in-application execution of scripts. It doesn't seem to matter what's in the script... its not dependent on content.

Interesting, and frustrating...

Am I missing something? I looked through the documentation but didn't find anything specifically pertaining to this situation.

Any idea what's going on?

[CarlosCanto]

all scripts in the startup folder will run when illustrator starts, they should not run again unless they're explicitly called.

[KennethWebb1]

Well, obviously something's broken, because so far as I can tell its doing something very consistently that it should not do... if I can figure out why its doing it I'll let you know.

In the mean time, here is the simple button UI generator I wrote inspired by this thread.

I'm pretty happy with it so far.  Its definitely not my end-goal, but its working great for the time being as I work through more advanced UI scripting options. (and get to understanding BridgeTalk better... its tough when the majority of my scripting time is spent a few minutes here or there in between regular projects)

I'd be happy to have some feedback as I'm sure its still pretty clunky.  I'm exploring ways of quickly generating script  palettes based on user input (ie: give them a list of scripts so they can select any number and generate a custom pallete based on that selection). 

#target Illustrator

// script.name = Script Palette Generator

// script.description = Generates a button panel UI to run the scripts added to the "scriptList" array.

// script.parent = KennethWebb // 01/11/2013

var scriptList = new Array();

//scriptList[array#] = new Array("Script File Name.jsx", "Name to Display on Button", "variableName");

scriptList[0] = new Array("", "", "");

var renderUI,loadCode;

var btnInterface = new Array();

var scriptFile = new Array();

var btnFunction = new Array();

var btnCode = "";

scriptStringGen();

//alert(loadCode);

//uncomment to see the full the block of code before it gets sent to Illustrator

var bt = new BridgeTalk;

bt.target = "illustrator"

bt.body = loadCode;

bt.send();

function scriptStringGen(){

    for (i = 0;i<= (scriptList.length-1); i++) {

        btnInterface = scriptList[2]+"btnInterface: Button {text:'"+scriptList[1]+"', preferredSize: [130, 22]},";

//formats part of a resource specification string used to create a UI button for each script

//(note: I created the buttons at a specific size suited to my needs. Feel free to leave out the "preferredSize" part of the UI string)

        scriptFile = "//INSERT/SCRIPTS/FILE/FOLDER/PATH/HERE/"+scriptList[0];

//formats the filepath string for each script (note: this is designed to point to a single folder holding all the scripts you want to run)

    };

renderUI = "palette { text: 'Scripts', orientation: 'column', alignment: 'fill', alignChildren: 'left', btnGp: Group {alignment: 'top', orientation: 'column',";

//opening section of the resource specification string

    for (i = 0; i <= (scriptList.length-1); i++) {

        renderUI += btnInterface

    };

renderUI +='}};'

//adds the button strings to the resource specification string

    for (i = 0; i<=(scriptList.length-1); i++) {

        btnFunction="win.btnGp."+scriptList[2]+"btnInterface.onClick = function() {;var scriptToLoad = new File('"+scriptFile+"');scriptToLoad.open('r');var script = scriptToLoad.read();scriptToLoad.close();var bt = new BridgeTalk;bt.target = 'illustrator'; bt.body = script; bt.send();};"

    }; //generates individual button function strings

    for (i = 0; i<=(scriptList.length-1);i++) {

        btnCode += btnFunction

    };

// combines all the button function strings into one

loadCode = 'var renderUI ="'+renderUI+'"; var win = new Window(renderUI); win.center(); win.show(); '+btnCode;

//compiles the final BridgeTalk string

};