How to call functions depending on values of UI Window (droplist, checkbox, editabletext)

[SWAndrea]

Hello everybody! this is the first time that I write on this community. Since I'm new in coding maybe someone can guide me on how to get my UI to work propperly. My problem in concret is when clicking on the UI, how can I trigger this functions depending on the droplists and the checkbox of the UI. Usually I work with actions to develop my projects, but this one is getting really tedious to work with actions. So, I decided to do a step forward into scripts.

I've been following different posts about creating Scripts UI  in order to automatize my work with Adobe. First, I have to say thanks to Joonas and his ScriptUI Dialog Builder that safed me alot of time on creating the layout:

The UI should work in this order, first it should open a file, then it should create sectors on the file and export them as PNG (they will be use later), after exporting, it should open a Template.PSD acording to the droplist selection (I have a Template.PSD already created for each combination, for example TemplateOption1Color1Size1.PSD and they are all in the same folder). Then, after opening the correct PSD it should change colorlayerPSD and the Serial Number with the ones I had on the UI and depending on wich color checkboxes were selected, it has to save a PNG file for each one. Like this:

For all that, I have actions/scripts created to do so. I made them all with ActionToScript.jsx scripts like this one to safeAsPNG:

function saveAsPNG(Destination,Name) {
// Safe
function step1(enabled, withDialog) {
if (enabled != undefined && !enabled)
return;
var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
var desc1 = new ActionDescriptor();
var desc2 = new ActionDescriptor();
desc2.putEnumerated(cTID('Mthd'), sTID("PNGMethod"), sTID("quick"));
desc2.putEnumerated(sTID("PNGInterlaceType"), sTID("PNGInterlaceType"), sTID("PNGInterlaceNone"));
desc2.putEnumerated(sTID("PNGFilter"), sTID("PNGFilter"), sTID("PNGFilterAdaptive"));
desc2.putInteger(cTID('Cmpr'), 6);
desc1.putObject(cTID('As '), sTID("PNGFormat"), desc2);
desc1.putPath(cTID('In '), new File(Destination+'/'+Name+'.png'));
desc1.putInteger(cTID('DocI'), 388);
desc1.putBoolean(cTID('Cpy '), true);
executeAction(sTID('save'), desc1, dialogMode); // I ASSUME THAT HERE IS ACCTUALLY JUST EXECUTING THE ACTION
};

step1(); // SAVE
};

In my script https://github.com/GHSWAndrea/CodeMockup/blob/main/MockupCreator.jsx can be seen that I have problems calling the functions with the button OK in the last part:

okbtn.onClick = function () {

dlg.close() //CLOSE DIALOG
open (selectFileOpen); //OPEN FIRST FILE
FUNCTIONS // HERE I MUST CALL ALL MY WORK FUNCTIONS (CREATESECTORS, OPENPSD, CHANGETEXT AND CHANGECOLOR ONPSD) DEPENDING ON VALUES FROM WINDOWS UI

// I GUESS I WILL USE A FOR HERE TO SAVE
var name = staticserial.text+editserial.text;+capcolor // SO BASSICALLY I NEED TO SAVE EVERY CAP COLOR THAT I SELECTED ON THE UI
saveAsPNG(decodeURI(selectFileSave.fsName),name)

}

I have actually no idea on how to check which checkbox or droplist were selected and also how to call a function on the onclickbuton function.

Thanks for any support!

[jazz-y]

You are accessing the controls after you have closed the dialog. Write the values of all the controls you want to variables before calling dlg.close () and then use them in your code.

[SWAndrea]

Thanks for replying!. Let me see if I understood well what you're saying:

okbtn.onClick = function () {

// SET HERE VARIABLES

var name = staticserial.text+editserial.text; 
open (selectFileOpen); //OPEN FIRST FILE
saveAsPNG(decodeURI(selectFileSave.fsName),name)
dlg.close() //CLOSE DIALOG

}

This is not working either. Its just opening the document but its not saving it after as PNG

[jazz-y]

Are you getting errors while debugging?

In the saveAsPNG function, you are using shortcuts for the charIDToTypeID and stringIDToTypeID functions, but i cannot see their definion in the code.

If you add the missing functuions, then everything works (at least in this part)

function saveAsPNG(Destination,Name) {
  // Guardar
  cTID = charIDToTypeID;
  sTID = stringIDToTypeID;
  
  function step1(enabled, withDialog) {
    if (enabled != undefined && !enabled)
      return;
    var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
    var desc1 = new ActionDescriptor();
    var desc2 = new ActionDescriptor();
    desc2.putEnumerated(cTID('Mthd'), sTID("PNGMethod"), sTID("quick"));
    desc2.putEnumerated(sTID("PNGInterlaceType"), sTID("PNGInterlaceType"), sTID("PNGInterlaceNone"));
    desc2.putEnumerated(sTID("PNGFilter"), sTID("PNGFilter"), sTID("PNGFilterAdaptive"));
    desc2.putInteger(cTID('Cmpr'), 6);
    desc1.putObject(cTID('As  '), sTID("PNGFormat"), desc2);
    desc1.putPath(cTID('In  '), new File(Destination+'/'+Name+'.png'));
    desc1.putInteger(cTID('DocI'), 388);
    desc1.putBoolean(cTID('Cpy '), true);
    executeAction(sTID('save'), desc1, dialogMode); // I ASSUME THAT HERE IS ACCTUALLY JUST EXECUTING THE ACTION
  };

  step1();      // SAVE
};

[SWAndrea]

Ohh I see! that was because I simplify the main code to do this post and forgot to add them. You're right! And works fine with opening and saving (what it has). Now, how could I get the variables from the layout? For example if I click on black and blue it should generate 2 differents PNG files from an action. Or if I select different options on the droplist it should trigger different functions.

[jazz-y]

Not sure if I understood the problem correctly.

Define global variables and change their value when the state of the control changes, for example:

var redState,
type;

capred.onClick = function () {redState = this.value}
optionstype.onChange = function () {type = this.selection.text}

Or put the properties of the elements you need in variables before closing the dialog in the body of okbtn.onClick (), for example:

var redState = capred.value,
type = optionstype.selection.text;

[SWAndrea]

Images are worth more than 1000 words haha. This is the idea.

I create labels (designs) that have diferent sizes according to the final mockup. This is an example of the smallest size:

This is the file that I have already created and I will open it with the script (OPENFILEGRP). Then the action will do sectors of it to generate the 3 different views of the mockup like here:

On the mockup I will change the serial number (that I wrote in the UI Script) and also do more things like selecting different layers (to change cap color or for example the color of the botlle itself).

The thing is that I have to make the variables to determine on which document the script have to work since I have like 10 different bottles and each one can vary it cap color

The final thing is to save each combination as png. As I said, I have the actions ready as script (like the one to saveAsPNG). I just need to know how to check which parameters were selected before clicking the ok button.