onResizing

Similar Questions

• New UI element does not 'fill' correctly

  I have a hard time with the addition of a new element in the user interface while making it 'fill' correctly with current elements.

  Let's say I have a container that is 500px. The container has 2 buttons set to fill, so that they resume 250px each and are very much same.

  When I add another button in this container, I expect each button to 500px/3 or 166.667px now since all 3 buttons can fit into the container of 500px evenly.

  This isn't the case, and instead of it, the les deux two buttons which themselves were originally only shrink very little, making it the third new tiny button. Basically, it is not yet.

  No idea why this is happening?

  I am SEO example of an interface user changed from David Torno (dynamically add and remove ScriptUI elements ) to illustrate this, as my current project is too large to post.

      function SCRIPTNAME(thisObj){  
            function SCRIPTNAME_buildUI(thisObj){  
                var pal = (thisObj instanceof Panel) ? thisObj : new Window("palette", "SCRIPTNAME", undefined, {resizeable:true});  
                if (pal != null){  
                      var res ="group {orientation:'column', alignment:['fill','fill'], alignChildren:['fill','fill'],\
                                group1: Group{orientation:'row', alignment:['fill','top'], alignChildren:['fill','top'],\
                                    addButton: Button{text:'ADD'},\
                                    removeButton: Button{text:'REMOVE'},\
                                },\
                                group2: Group{orientation:'row', alignment:['fill','fill'], alignChildren:['fill','fill'],\
                                },\
                      }";
    
    
                      pal.grp = pal.add(res);  
    
    
                      ///CONTROL VARIABLES  
                      var group1 = pal.grp.group1;  
                      var addButton = group1.addButton;  
                      var removeButton = group1.removeButton;  
                      var group2 = pal.grp.group2;  
                       
                      ///ADD NEW CONTENT TO GROUP2  
                      addButton.onClick = function(){  
                          var g = group2.add('panel', undefined, "myPanel");    //Add a group  
                          g.orientation = "row";  
                          g.add('button', undefined, "btn1");    //Add a button to that group  
                          g.add('button', undefined, "btn2");    //Add another button to that group  
                          updateUILayout(group2);    //Update UI  
                      }  
                 
                      ///REMOVE CONTENT FROM GROUP2  
                      removeButton.onClick = function(){  
                          var kids = group2.children;  
                          var numKids = kids.length;  
                          if(numKids > 0){    //Verify that at least one child exists  
                                group2.remove(kids[numKids-1]);    //Remove last child in the container  
                          }  
                          updateUILayout(group2);    //Update UI  
                      }  
                       
                      ///UPDATE UI EASILY TO REFLECT ADD/REMOVE CHANGES  
                      function updateUILayout(container){  
                          container.layout.layout(true);    //Update the container  
                          pal.layout.layout(true);    //Then update the main UI layout  
                      }  
                }  
    
    
                pal.layout.layout(true);  
                pal.grp.minimumSize = pal.grp.size;  
                pal.layout.resize();  
                pal.onResizing = pal.onResize = function () {this.layout.resize();}  
                       
                return pal;  
            }  
             
            var SCRIPTNAMEPal = SCRIPTNAME_buildUI(thisObj);  
            if (SCRIPTNAMEPal != null){  
                if (SCRIPTNAMEPal instanceof Window){  
                      SCRIPTNAMEPal.center();  
                      SCRIPTNAMEPal.show();  
                }  
            }  
      }  
    
    
      SCRIPTNAME(this);  
  

  

  When to do this way, the UI has how I expect and resizing evenly to add items. What becomes interesting, is that if you change line 26 to remove the Panel. (Replace the line var g = group 2, so let's just add buttons directly in Group 2 rather than add a new Board every time). Now, if you add buttons directly to the group, the buttons not resize uniformly more differently than when they are added to the Panel.

  Any help would be appreciated!

  If the buttons or groups are added as left or right alignment, it seems to work perfectly. Filling seems to cause the problem. I tried to resize the window manually to the smallest width and it will actually bring the buttons a bit back to normal, it seems while keeping the job of filling.

  If you change the alignment or alignChildren for the container property:

  container.alignment = ['left', 'fill'];
  

  in the updateUILayout function, it will make the buttons display correctly. Simply not filling.

  I even tried to change the alignment of the button in the updateUILayout function and only left and right works. Filling is ignored or just simply not correctly calculated maybe?

  function updateUILayout(container){
      container.layout.layout(true);    //Update the container
      var kids = container.children;
      for(var k=0; k
  I guess maybe it's a bug with the automatic layout manager and the parameter 'filler '.
  		   

• How to change the Source with EditText text in my Script?

  Here is my code, actually, the thing is I want to change my myEditText text in my control panel:

  function myScript(thisObj) {
            function myScript_buildUI(thisObj) {
                      var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My Panel Name", [0, 0, 300, 300]);
  
                      res="group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
                                myEditText: EditText{text:'EditText text'},\
                                myButton: Button{text:'Button Name'},\
                      }"
  
                      //Add resource string to panel
                      myPanel.grp = myPanel.add(res);
                      
                      
                      var texto = myPanel.grp.myEditText.text.value
                      
                      var btn =  myPanel.grp.myButton
                      
                      
                      
                      btn.onClick = function (){
                          
                          app.project.item(2113).layer("TXT 1").property("Text").property("Source Text").setValue = texto
                          
                          }
                      
                      
                      
                      
  
  
                      //Setup panel sizing and make panel resizable
                      myPanel.layout.layout(true);
                      myPanel.grp.minimumSize = myPanel.grp.size;
                      myPanel.layout.resize();
                      myPanel.onResizing = myPanel.onResize = function () {this.layout.resize();}
  
                      return myPanel;
            }
  
  
            var myScriptPal = myScript_buildUI(thisObj);
  
  
            if ((myScriptPal != null) && (myScriptPal instanceof Window)) {
                      myScriptPal.center();
                      myScriptPal.show();
                      }
            }
  
  
            myScript(this);
  

  Something like this should work:

  function myScript(thisObj) { 
  
    var textStr = "";
  
    function myScript_buildUI(thisObj) {
  
    var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My Panel Name", [0, 0, 300, 300]);  
  
    res = "group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
    myEditText: EditText{text:'EditText text'},\
    myButton: Button{text:'Button Name'},\
    }"
  
    //Add resource string to panel
    myPanel.grp = myPanel.add(res);
  
    // I added the next two lines.
    textStr = myPanel.grp.myEditText.text;
    myPanel.grp.myEditText.onChange =  myPanel.grp.myEditText.onChanging = textStringUpd;
  
    myPanel.grp.myButton.onClick = function (){
  
    app.project.item(2113).layer("TXT 1").sourceText.setValue(textStr);
    //or tell the script to change the soureText property of the currently selected layer (remove the two slashes from the line below and add them to the line above)
    //app.project.activeItem.selectedLayers[0].sourceText.setValue(textStr);
  
    }
  
    //Setup panel sizing and make panel resizable
    myPanel.layout.layout(true);
    myPanel.grp.minimumSize = myPanel.grp.size;
    myPanel.layout.resize();
    myPanel.onResizing = myPanel.onResize = function () {this.layout.resize();}
  
    return myPanel;
  
    }  
  
    var myScriptPal = myScript_buildUI(thisObj);
  
    // I added this function.
    function textStringUpd() {
  
    textStr = this.text;
  
    }
  
    if ((myScriptPal != null) && (myScriptPal instanceof Window)) {
              myScriptPal.center();
    myScriptPal.show();
    }
    }  
  
  myScript(this);
  

  I've added comments to indicate the changes that I made

• several onClick

  Hello

  What should I do in order to make all the Butts to index onClick alert button?

  var myWin = buildUI (this);

  If (myWin! = null & & myWin window instanceof) {}

  myWin.show ();

  }

  function buildUI (Cetobjet) {}

  If {(Cetobjet instanceof Panel)

  var myWin = Cetobjet;

  } else {}

  var myWin = new window ("palette", undefined, [200, 200, 600, 500], {resizable: true});

  }

  If (myWin! = null) {}

  btnGroup = myWin.add ('group');

  btnGroup.orientation = "column"

  var AIBtns = [];

  filse var = 4;

  var r = 0;

  for (r; r < filse; r ++) {}

  AIBtns [r] = btnGroup.add ("button", undefined, name = [r 1], {style: "toolbutton"});

  AIBtns [r] .onClick = function (AIBtns) {}

  Alert (r) / / < <

  }

  }

  ~ alert (AIBtns)

  myWin.layout.layout (true);

  myWin.layout.resize ();

  myWin.onResizing = myWin.onRize = function () {}

  This.Layout.Resize () ;}

  } //if (myWin! = null)

  return myWin;

  } //function buildUI (Cetobjet)

  Because the buttons are objects, you can add a property, say 'label' (or what you want, but not a property that already have buttons), then:

  for(r;r
  Xavier
  		   

• ListBox ScriptUi beyond window resize

  I know that it's not specifically about InDesign scripts, but it will be integrated in an InDesign script and InDesign scripting have a reputation for being the smartest!

  What I find is when a listbox is larger than the window, it extends beyond the window and is not accessible. If I apply a layout.resize () function to the event window onResize, fixed list box its self when I resize the window.

  var w = new Window('dialog', undefined, undefined, {
          resizeable: true
      });
      
      w.orientation = 'row';
      w.alignChildren = 'top';
      w.maximumSize.height = 400;
      
      var myList = w.add ('listbox');
      myList.alignment = ['fill', 'fill'];
      
      var item;
      for (var i = 0; i < 200; i ++) {
          item = myList.add('Item', i);
          item.checked = true;
      }
      
      w.onResizing = w.onResize = function() {
          this.layout.resize();
      }
      
  w.show ();
  

  

  How can I do so that the listbox control is part of the window show?

  Also a second problem: I have a condition where the controls are not displayed when I scroll through them quickly. When I click on the element with the missing check marks, they appear suddenly. This seems to be a problem of refresh. Is there something I can do to solve this problem as well?

  For the first question, add an onShow event:

  w.onShow = w.onResizing = w.onResize = function() {}

  I am not able to reproduce the second question, however.

  Ariel

• String question ScriptUI Panel resources

  I have created a small tool to use to keep my projects organized and want to create a drop down list that will contain the broad list of rendering templates I created. At the present time, for the trial (since I'm new on ExtendScript), I just trying to transmit a pre-created table of a function so that I can build in the code to display rendering models later.

  {

  function joshPipe (thisObj) {}

  function joshPipe_buildUI (thisObj) {}

  var pipePanel = (thisObj instanceof Panel)? thisObj: new window ("palette", "Josh Pipeline", undefined, {resizable: true} ");

  var rsdPath = "workspace has not loaded ';

  var presetList = ["make model 1', 'make model 2', 'make model 3'];

  GetExtension() {} function

  return 'project manager ';

  }

  function getPresets() {}

  List = ['make model 1', 'make model 2', 'make model 3'];

  back list;

  }

  queueTab = ' group {orientation: 'column', alignment: 'fill', alignChildren:------['fill ', ' fill'],} ".

  Group0: group {orientation: 'column', alignChildren: 'fill'------}

  loadPipeButton: button {text: 'Installation work space'}, \

  },\

  Group1: Panel {orientation: 'row', text: 'Render Settings', alignChildren: ["fill", "fill"],------}

  group1_1: group {orientation: 'column', alignChildren: 'left',------}

  fullRadioButton: RadioButton {text: 'Full (delivery)'}, \

  halfRadioButton: RadioButton {text: "half (review)"},

  },\

  group1_2: group {orientation: 'column', alignment: 'just'------}

  renderTemplateDD: DropDownList {properties: {items: ['model 1', '2 ', 'model 3']}}, \

  },\

  },\

  Group 2: group {orientation: 'column', alignChildren: 'fill'------}

  rsdString: StaticText {multiline: 'true', text: ' "+ rsdPath +" "},

  renderButton: button {text: "Making Setup",},

  },\

  }}";

  pipePanel.grp = pipePanel.add (queueTab);

  var loadPipeCtrl = pipePanel.grp.group0.loadPipeButton;

  var fullRenderSelCtrl = pipePanel.grp.group1.group1_1.fullRadioButton;

  var halfRenderSelCtrl = pipePanel.grp.group1.group1_1.halfRadioButton;

  var renderTemplateDDCtrl = pipePanel.grp.group1.group1_2.renderTemplateDD;

  var rsdStringCtrl = pipePanel.grp.group2.rsdString;

  var renderButtonCtrl = pipePanel.grp.group2.renderButton;

  loadPipeCtrl.onClick = function() {}

  rsdPath = GetExtension();

  rsdStringCtrl.text = rsdPath;

  renderTemplateDDCtrl.item [0] = 'yo momma';

  }

  renderButtonCtrl.onClick = function() {}

  rsdStringCtrl.text = 'unloaded project. "

  }

  Default values

  pipePanel.grp.group1.group1_2.renderTemplateDD.selection = 0;

  size of the window

  pipePanel.layout.layout (true);

  pipePanel.grp.minimumSize = pipePanel.grp.size;

  resize panels

  pipePanel.layout.resize ();

  pipePanel.onResizing = pipePanel.onResize = function() {this.layout.resize ()};

  Return pipePanel;     Returns the final result of pipePanel

  }

  var pipeScriptPal = joshPipe_buildUI (thisObj);

  If ((pipeScriptPal! = null) & & (pipeScriptPal instanceof window)) {}

  pipeScriptPal.center ();

  pipeScriptPal.show ();

  }

  }

  joshPipe (this);

  }

  The problem is that want this tool to be a sign that I can anchor. Near as I can tell (using the Extendscript of David Torno series as my guide) I have to read in the user interface and its options initially as a string resource, and I cannot understand how to operate. Any suggestions?

  It dawned on me that I needed to actually get a string with a different function, rather than a table.

  var presetList = ["make model 1', 'make model 2", "make model 3", "make model 4"];

  var presetString = getPresets();

  function getPresets() {}

  list = presetList;

  tempString = "["; ".

  for (var i = 0; i)< list.length;="">

  tempString = tempString.concat("'",list[i],"'");

  If (i<>

  tempString = tempString.concat(",");

  }

  }

  tempString = tempString.concat("]");

  Return tempString;

  }

  ...

  group1_2: group {orientation: 'column', alignment: 'just'------}

  renderTemplateDD: DropDownList {properties: {elements: "+ presetString +"}},

• .onActivate callback for object Panel

  Hello.

  I'm working on a user interface that uses a lot of eventListeners. I would like to add and remove depending on the State of the window.

  To do this, I use reminders:

  .onActivate

  .onDeactivate

  The script below works like a charm when it is run from file > Scripts > run Script file...

  When recorded in the Scripts/ScriptUI Panels/scriptname.jsx and then run it from the window menu in AE, the recall of .onActivate doesn't seem to work.

  In any case not when right clicking on the window.

  But when you click on the first button, the .onActivate callback is triggered.

  The recall of .onDeactivate works as expected; he get is triggered when I click on another part of the interface of AE.

  Any ideas?

  {
  function safeEventWindow(thisObj){
    var win = thisObj instanceof Panel ? thisObj : new Window('palette',"Safe Event Window",undefined,{resizable:true})
    win.alignChildren = ['fill','fill']
    var mGrp = win.add('panel',undefined,'PANEL!')
    mGrp.minimumSize = [200,200]
    var btn1 = win.add('button',undefined,"I'm just a button, man.")
    btn1.alignment = ['center','center']
    btn1.onClick = switchText
    var txt1 = mGrp.add("StaticText",undefined,"\\^___________^/")
    txt1.alignment = ['center','center']
    txt1.hide()
  
  
    // FUNCTIONS
    function switchText(event){
    var state = txt1.visible
    if(state) txt1.hide()
    else txt1.show()
    }
  
  
    function mWin_refresh(){
    win.layout.layout(true)
    win.layout.resize()
    }
  
    // EVENT HANDLERS & FUNCTIONALITY
  
  
    function startMouseListeners(event){
    $.writeln("startingMouseListeners")
    mGrp.addEventListener("mouseover",switchText)
    mGrp.addEventListener("mouseout",switchText)
    }
    function stopMouseListeners(event){
    $.writeln("stoppingMouseListeners")
    mGrp.removeEventListener("mouseover",switchText)
    mGrp.removeEventListener("mouseout",switchText)
    }
  
  
    win.onActivate = startMouseListeners
    win.onDeactivate = stopMouseListeners
    win.onResizing = mWin_refresh
  
  
    //__INIT__
    if(win instanceof Window){
    win.show()
    win.center()
    }
    mWin_refresh()
  }
  
  
  //__INIT__
  safeEventWindow(this)
  
  
  }
  

  Checked the AE CC2014, windows 7: onActivate does not work, onActivate only triggered when activating a widget (the button), but not the Panel.

  Note: you should care when adding event listeners to a group/Committee: 'mouseover', and 'mouseout/mouseouthandler()' can trigger for both the Panel AND the static text (when it is visible)

  Is that what you want?

  Xavier

• What script to create a model with a user interface panel

  Hello guys,.

  So I am new to scripting and javascript and I'm trying to keep it simple. I'm a VJ and want to create a script where I get a 'BPM' and a 'beat' lengh and it generate me a comp with the right length and * a layer with a marker ofr each beat.

  I was able to create this script, but I try to make it look a little better with integration of the user interface for AE I wasn't able to make it work right. If anyone can help me or give me some advice. I think that I'm not good with the expression "addComp" in the buildUI function.

  I copy everythin because it is long but you'll be understaind the main idea. My question is how to that the entry in my Advanced UI instead of "the guest".

  Here is my first code that does the job:

  Elements Var Set

  var name = prompt ("membership name");

  var BPM = prompt ("your BPM");

  If (isNaN (BPM)) {}

  Alert ("you must give the model a value");

  }

  Var prompt = beats ("how many times");

  If (isNaN (Beats)) {}

  Alert ("you must give the model a value");

  }

  frameRate var = prompt ("your fps");

  If (isNaN (frameRate)) {}

  Alert ("you must give the model a value");

  }

  term var = (60 / BPM * bat); Automatically generated

  var beat = (60 / BPM);

  Part of creation

  app.project.items.addComp (name, 1920, 1080, 1, duration, frameRate); Create the model with custom Lengh

  App.Project.Item (01).layers.addSolid ([0,0,0], "BG", 1920, 1080, 1, length); Create solid BG

  var firstLayer = app.project.item (1) .layer (1);

  firstLayer.label = 16;

  App.Project.Item (01).layers.addSolid ([0,0,0], "FX", 1920, 1080, 1, length); Create sound FX

  App.Project.Item (01).layers.addNull (Duration); Create the Null object

  var firstLayer = app.project.item (1) .layer (1); Rename the Null object

  firstLayer.enabled = false;

  firstLayer.name = "Beats";

  firstLayer.label = 0;

  Place a marker on the 64 first beat

  var myMarker = new MarkerValue("0");

  firstLayer.property("Marker").setValueAtTime (beat * 0, myMarker);

  Every beat on opacity-keys

  myProperty = firstLayer.opacity;

  myProperty.setValueAtTime (beat * 0, 0);

  
  

  For reference, I'm going to place code Dan here and use line numbers, as I explained.

  Fig. A

  var name = prompt("Composition name");
  var BPM =prompt("Your BPM");
  if (isNaN(BPM)) {
      alert("You must give the comp a value");
    }
  
  var Beats = prompt("How Many Beat");
  if (isNaN(Beats)) {
      alert("You must give the comp a value");
      }
  
  var frameRate = prompt("Your fps");
  if (isNaN(frameRate)) {
      alert("You must give the comp a value");
      }
  
  var duration = ( 60  / BPM * Beats ); //Auto Generated
  var beat = (60  / BPM);
  //Creation Part
  var myComp = app.project.items.addComp(name, 1920, 1080, 1, duration, frameRate); // Create Comp with Custom Lengh
  var firstLayer = myComp.layers.addSolid([0,0,0], "BG", 1920, 1080, 1, duration); // Create BG Solid
  firstLayer.label = 16;
  myComp.layers.addSolid([0,0,0], "FX", 1920, 1080, 1, duration); // Create FX Solid
  firstLayer = myComp.layers.addNull(duration); // Create Null Object
  firstLayer.enabled = false;
  firstLayer.name = "Beats";
  firstLayer.label = 0;
  // Place a marker on the 64 first beat
  var myMarker = new MarkerValue("0");
  firstLayer.property("Marker").setValueAtTime(beat*0, myMarker);
  // Key every Beat on opacity
  var myProperty = firstLayer.opacity;
  myProperty.setValueAtTime(beat*0, 0);
  

  OK, so for your configuration, looks like you're striking four data sets. You have the model name (fig.) At line 1), BPM (lines 2-5 of Fig. (A), (lines 7-10 of Fig. rhythms (A) and the FPS (lines 12 to 15 of Fig. (A). then it comes to the UI, you can change what I had posted to...

  res = "group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
    myCompName: EditText{text:'Enter comp name'},\
    myBPM: EditText{text:'Enter BPM'},\
    myBeats: EditText{text:'Enter beats'},\
    myFPS: DropDownList{properties:{items:['23.976', '24', '29.97', '30', '59.97', '60']}},\
    createComp: Button{text:'Create comp'},\
  }"
  

  This will give you all entries in four data for the user interface. It is preferable to assign each control to a new variable for use in your script.

  // Control Variables
    var compName = myPanel.grp.myCompName;
    var myBPM = myPanel.grp.myBPM;
    var myBeats = myPanel.grp.myBeats;
    var fps = myPanel.grp.myFPS;
    var createComp = myPanel.grp.createComp;
  

  Once you have these variables you can then start the default implementation as appropriate. in this case, the drop-down list should be a starting point for it's selection, so that you can say to use the first default entry as follows.

  //Defaults
    fps.selection = 0;
  

  Now, you can configure your onClick for button createComp feature. This will contain to working part of the Dan code that treats everything (lines 17-33 of Fig. (A). I've added a few lines of options above this (lines B Fig. 1-7) in the below code just to match the variable names so you wouldn't need to change the code.

  Fig. B

  //onClick setups
    createComp.onClick = function(){
    //Gather user entered values
    var name = compName.text;
    var BPM = Number(myBPM.text);
    var Beats = Number(myBeats.text);
    var frameRate = fps.selection.text;
  
    var duration = ( 60  / BPM * Beats );
    var beat = (60  / BPM);
    //Creation Part
    var myComp = app.project.items.addComp(name, 1920, 1080, 1, duration, frameRate);
    var firstLayer = myComp.layers.addSolid([0,0,0], "BG", 1920, 1080, 1, duration);
    firstLayer.label = 16;
    myComp.layers.addSolid([0,0,0], "FX", 1920, 1080, 1, duration);
    firstLayer = myComp.layers.addNull(duration);
    firstLayer.enabled = false;
    firstLayer.name = "Beats";
    firstLayer.label = 0;
    // Place a marker on the 64 first beat
    var myMarker = new MarkerValue("0");
    firstLayer.property("Marker").setValueAtTime(beat*0, myMarker);
    // Key every Beat on opacity
    var myProperty = firstLayer.opacity;
    myProperty.setValueAtTime(beat*0, 0);
    }
  

  Then line 2 Fig. b starts the call onClick for button and assigns a function. Within the function, we run the process. Fig. B Line 4 seizes the compName edit text attribute of the text control, using the Number() function convert us this text to a number for use online B Fig. 9 and 10 and B Fig. 5 line gets the text attribute of the text control edit BPM. Goes same for line 6 of the Fig. B and the beats variable. For line B Fig. 7, a drop-down list requires calling his selection of the attribute, then it is text attribute to get the actual string. The drop was more logical for FPS due to the standard rates that exist. This list can be changed of course to your liking. Now, there is no safety net as I like to call for the modification of the text controls to make sure text is not entered when you need a number and vice versa. It would be something of can check after line 7, Fig. B before trying to run the code in process (Fig. B lines 9-25). I hope that it will be easy enough for you to understand.

  If the script is as follows.

  {
  function myScript(thisObj) {
    function myScript_buildUI(thisObj) {
    var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My Panel Name", [0, 0, 300, 300]);
  
    res="group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
    myCompName: EditText{text:'Enter comp name'},\
    myBPM: EditText{text:'Enter BPM'},\
    myBeats: EditText{text:'Enter beats'},\
    myFPS: DropDownList{properties:{items:['23.976', '24', '29.97', '30', '59.97', '60']}},\
    createComp: Button{text:'Create comp'},\
    }"
  
    //Add resource string to panel
    myPanel.grp = myPanel.add(res);
  
    // Control Variables
    var compName = myPanel.grp.myCompName;
    var myBPM = myPanel.grp.myBPM;
    var myBeats = myPanel.grp.myBeats;
    var fps = myPanel.grp.myFPS;
    var createComp = myPanel.grp.createComp;
  
    //Defaults
    fps.selection = 0;
  
    //onClick setups
    createComp.onClick = function(){
    //Gather user entered values
    var name = compName.text;
    var BPM = Number(myBPM.text);
    var Beats = Number(myBeats.text);
    var frameRate = fps.selection.text;
  
    var duration = ( 60  / BPM * Beats );
    var beat = (60  / BPM);
  
    //Creation Part
    var myComp = app.project.items.addComp(name, 1920, 1080, 1, duration, frameRate);
    var firstLayer = myComp.layers.addSolid([0,0,0], "BG", 1920, 1080, 1, duration);
    firstLayer.label = 16;
    myComp.layers.addSolid([0,0,0], "FX", 1920, 1080, 1, duration);
    firstLayer = myComp.layers.addNull(duration);
    firstLayer.enabled = false;
    firstLayer.name = "Beats";
    firstLayer.label = 0;
  
    // Place a marker on the 64 first beat
    var myMarker = new MarkerValue("0");
    firstLayer.property("Marker").setValueAtTime(beat*0, myMarker);
    // Key every Beat on opacity
    var myProperty = firstLayer.opacity;
    myProperty.setValueAtTime(beat*0, 0);
    }
  
    //Setup panel sizing and make panel resizable
    myPanel.layout.layout(true);
    myPanel.grp.minimumSize = myPanel.grp.size;
    myPanel.layout.resize();
    myPanel.onResizing = myPanel.onResize = function () {this.layout.resize();}
  
    return myPanel;
    }
  
    var myScriptPal = myScript_buildUI(thisObj);
  
    if ((myScriptPal != null) && (myScriptPal instanceof Window)) {
    myScriptPal.center();
    myScriptPal.show();
    }
    }
  
    myScript(this);
  }
  

• ScriptUI window.minimized = true; on Mac

  I have custom palettes for Illustrator who have the ability to get out of the way, similar to native pallets.  Under Windows, my reduced = true; work order and shrinks palette in a small bar, that I love.  However, same command on Mac does not have the case.

  #target illustrator
  #targetengine main
  function myPanel(){
      var arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
  
  
      function paletteWindow(){
          var w = new Window('palette', 'My Panel', undefined, {resizeable: true});
          var g1 = w.add('group');
          var t = g1.add('treeview', undefined, []);   t.size = [200, 450];
          for(var i=0; i<arr.length; i++){
              var item = arr[i];
              var n = t.add('node', item);
          }
          t.onDoubleClick = function(){
              if(t.selection != null && t.selection.text != ''){
                  alert(t.selection.text);
              }
          };
  
  
          var btn_min = w.add('button', undefined, 'Minimize');
          btn_min.onClick = function(){
              w.minimized = true;
              w.update();
          }
  
  
          w.onResizing = w.onResize = function () {this.layout.resize ();}
          w.onShow = function(){
              w.minimumSize.width = 220;
              w.minimumSize.height = 100;
              t.items[1].expanded = true;
          }
          this.show = function(){w.show();}
      }
      var thisPaletteWindow = new paletteWindow(); // have to call it like this, or it disappears.
      thisPaletteWindow.show();
  }
  
  
  myPanel();
  

  AHA this is something a little better.

  Also, I suppose there is no reason to pass an object if it can be kept outside the functions of palette. Don't know why, I even thought that it was the way to go?

  #target illustrator
  #targetengine main
  
  function myPanel(){
      var arr = [];
      for(var i=33; i<123; i++){
          arr.push(String.fromCharCode(i)+" ------------ text line");
      }
  
      function tinyWindow(storeObj){
          var w = new Window('palette', 'MiniPanel', undefined, {borderless: false, closebutton: false}); w.spacing = 0; w.margins = [0,0,0,0];
          var loc = (SETTINGS.syncLocations) ?  storeObj.bigWindowLocation : storeObj.tinyWindowLocation ;
          w.location = loc;
          var p = w.add('panel'); p.size = [100, 42];
          var btn = p.add('statictext', undefined, 'Maximize');
          this.show = function(){w.show();}
          btn.addEventListener('mousedown' , function(){
              storeObj.tinyWindowLocation = w.bounds;
              var thisPaletteWindow = new paletteWindow(storeObj);
              thisPaletteWindow.show();
              w.close();
          });
      }
      function paletteWindow(setupObj){
          var w = new Window('palette', 'My Panel');
          var loc = (SETTINGS.syncLocations) ?  setupObj.tinyWindowLocation : setupObj.bigWindowLocation;
          w.location = loc;
          var g1 = w.add('group');
          var t = g1.add('treeview', undefined, []);   t.size = [200, 450];
          for(var i=0; i		   

• Update button icon problem

  Hi, thanks for your visit.

  Working with scriptUI Panel and try to update the icon of my button, but something is going wrong with my code, I guess...

  Can someone write what is the problem here?

  
  var mainPanel;
  function stabpanel(thisObj) {
      
      mainPanel =(thisObj instanceof Panel) ? thisObj : new Window("palette", "Change icon", undefined,{resizeable: true});
    
      var iconFolder = "~/path_1/";
      mainPanel.manSave =  mainPanel.add("iconbutton", [0,0,46,46], File (iconFolder+"AEP.png"), {style: "toolbutton"});
      mainPanel.changeButton = mainPanel.add("button", undefined, "Change icon");
      
      mainPanel.layout.layout(true);
  mainPanel.layout.resize();
  mainPanel.onResizing = mainPanel.onResize = function (){this.layout.resize ();}
  
  
  mainPanel.changeButton.onClick = function(){
      
  var iconFolder = "~/path_2/"; 
  
  
  // code below doesn`t work 
      mainPanel.layout.layout(true);
      return mainPanel;    
      }
  
     return mainPanel;
     mainPanel.center();
  
  }
  stabpanel(this);
  

  You do not need to use automatic formatting to change the icon, just put the "icon" property

  Something like this:

  function stabpanel(thisObj) {
  
      var mainPanel;
      mainPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "Change icon", undefined,{resizeable: true});
  
      var iconFolders = ["~/path_1/", "~/path_2/"];
      var iconFolderState = 0;
      mainPanel.manSave =  mainPanel.add("iconbutton", [0,0,46,46], File(iconFolders[iconFolderState]+"AEP.png"), {style: "toolbutton"});
      mainPanel.changeButton = mainPanel.add("button", undefined, "Change icon");
  
      mainPanel.layout.layout(true);
      mainPanel.layout.resize();
      mainPanel.onResizing = mainPanel.onResize = function (){this.layout.resize ();};
  
      mainPanel.changeButton.onClick = function(){
          iconFolderState = (iconFolderState+1)%2;
          this.parent.manSave.icon = ScriptUI.newImage(File(iconFolders[iconFolderState]+"AEP.png"));
          return;
          };
      return mainPanel;
      mainPanel.center();
  
  };
  stabpanel(this);
  

  Xavier

• ScriptUI: How update the values from Listbox? (CC2014)

  Is there a way to update item listbox that filled with the elements of the array JS. If I push more items in the table, how do I re - make in ScriptUI? Is there any way to do this.

  I know there are average just to add items to the listbox as in PDF of Peter Kahrel. But it's not so dynamic:

  var w = new Window ("dialog");
  var myList = w.add ("listbox", undefined, ["one", "two", "three"]);
  var b = w.add ("button", undefined, "Add");
  b.onClick = function () {myList.add ("item", "zero", 0)}
  w.show ();
  

  What would you say if I wan't to update the listbox when I changed my paintings, as below:

  // Create example array
  var testArr = ['item1', 'item2']
  $.writeln(testArr.length);
  
  startGUI();
  function startGUI() {
      
      // Window
      var win = new Window( "palette", script_name, undefined, { resizeable:true } );
      win.orientation = "column";
      win.alignChildren = ["fill", "fill"];
      
      // Listbox
      var myListbox = win.add ("listbox", undefined, testArr,  
          {  
          numberOfColumns: 1,  
          showHeaders: true,  
          columnTitles: ['Name']
      });
  
      // Add Item To Array
      var addItem = win.add("button", undefined, "Add Item");
      addItem.onClick = function() {   
          testArr.push ('item3');
          $.writeln(testArr.length);
      }  
  
      // Quit BTN
      win.quitBtn = win.add("button", undefined, "Close");
      win.quitBtn.onClick = function() {   
          win.close();   
      }
  
      win.show();
  }
  

  There may be some update on ScriptUI funtion. I tried to look for the solution without success. Any help?

  I've updated your own script to show how I removed the listbox

  I added a group to host the listbox control, the purpose of the group is to be used as a placeholder (to add the new listbox to the right place) and easily get the listbox to delete

  // listboxEditFromJSArray.jsx - Sakari Niittymaa
  // https://forums.adobe.com/message/6785515 
  
  //#target illustrator 
  
  // Create example array
  var testArr = ['item1', 'item2', 'item3']; 
  
  startGUI();
  function startGUI() { 
  
      // Main Window
      var win = new Window( "palette", "Test Listbox", undefined, { resizeable:true } );
      win.orientation = "column";
      win.alignChildren = ["fill", "fill"]; 
  
      // Listbox Group
      var grpListbox = win.add('group');
      grpListbox.alignChildren = ['fill', 'fill'];
  
      var myListbox = addListBox (grpListbox, testArr); 
  
      // add ListBox
    function addListBox(container, testArr) {
          var listbox = container.add("listbox", undefined, testArr,
              {
              numberOfColumns: 1,
              showHeaders: true,
              columnTitles: ['Name']
          });
  
          return listbox;
    }
  
      // BTN: Add Items To Array
      var addItem = win.add("button", undefined, "Add Item");
      addItem.onClick = function() {
          testArr.push ('item' + (testArr.length + 1));
          grpListbox.remove(grpListbox.children[0]);
          myListbox = addListBox (grpListbox, testArr);
          win.layout.layout(true);
          //updateListboxArray(myListbox);
          //$.writeln (testArr.length + "  " + myListbox.items.length);
      } 
  
      // BTN: Remove Selected
      var removeSelectedItems = win.add("button", undefined, "Remove Selected");
      removeSelectedItems.onClick = function() {
          // Remove selected listbox item from array
          testArr.splice( myListbox.selection.index, 1 );
          updateListboxArray(myListbox);
      } 
  
      // BTN: Clear Listbox
      var removeAllItems = win.add("button", undefined, "Clear Listbox");
      removeAllItems.onClick = function() {
          // Clear the array
          testArr = [];
          updateListboxArray(myListbox);
      } 
  
      // Update listbox items
      function updateListboxArray(listbox) { 
  
          // Clear listbox first
          listbox.removeAll(); 
  
          // Create new listbox items from array
          var i = 0;
          while (listbox.items.length < testArr.length) {
              listbox.add ("item", testArr[i]);
              i++;
          }
      } 
  
      // Quit BTN
      win.quitBtn = win.add("button", undefined, "Close");
      win.quitBtn.onClick = function() {
          win.close();
      } 
  
      // Window Settings
      win.onResizing = function () { this.layout.resize(); };
      win.onShow = function () { win.layout.resize(); };
      win.center();
      win.show();
  }
  

• change the user interface presentation based on the size of the Panel

  I'm looking for a way to adjust the layout of my user interface based on the size of the group. For example, two buttons that are top of the other until the height of the window is small enough that they need to be next to each other instead.

  Another example would be a series of buttons that appear as a line if the Panel is wider than high, or in a column if it is higher than it is wide.

  -What someone does something like that, or know if it is possible? As I see it, all I need is a way to read the current size of the Committee and I can put a function in onResize/onResizing that allows to adjust the layout of the user interface.

  Figured it out!

  This change my row of buttons in a column of line based on the report of the window. Finally understood windowBounds.height and windowBounds.width.

  myPanel.onResizing = myPanel.onResize = function () {
    if (myPanel.windowBounds.height > myPanel.windowBounds.width){
         myPanel.grp.cmds.orientation = "column";
    } else {
         myPanel.grp.cmds.orientation = "row";
    }
    this.layout.resize();
  }
  

• Drop Down List index - my script does not recognize the leader line in my function

  Community AE script-

  I'm a designer not a programmer naked with me.  I just try something simple, no baby and I cannot for the life of make me this simple script to work.

  I saw the script adds FAST and thought I would try to imitate this script for me as a challenge.  I watched videos of David Torno on Pro video Coalition and a simple example Script UI.  I searched for my answer on these here forums and tried to combine a simple script to examples within these forums and may not have to recognize clues to my drop-DOWN LIST down.  Here's my simple script:

  {

  function myScript (thisObj) {}

  function myScript_buildUI (thisObj) {}

  var myPanel = (thisObj instanceof Panel)? thisObj: new window ('palette', 'Add', undefined, {resizable: true});

  res = "group {orientation: 'row', alignment: ["fill","fill"] alignChildren: ["fill","fill"],------}»

  groupOne: group {orientation: 'row', alignment: ["fill", "fill"] alignChildren: ['fill', 'top'],------}

  myStaticText: StaticText {text:'New:'}, \

  myDropDownList: DropDownList {properties: {items: ['solid', 'Light']}}, \

  },\

  groupTwo: group {orientation: 'row', alignment: ["fill", "fill"] alignChildren: ['fill', 'top'],------}

  MyButton: button {text: 'Add'}, \

  },\

  }";

  myPanel.grp = myPanel.add (res);

  Default values

  myPanel.grp.groupOne.myDropDownList.selection = 0;

  myPanel.grp.groupTwo.myButton.onClick = myButtonClick;

  Design of Control Panel

  myPanel.layout.layout (true);

  myPanel.grp.minimumSize = myPanel.grp.size;

  Make the resizable Panel

  myPanel.layout.resize ();

  myPanel.onResizing = myPanel.onResize = function() {this.layout.resize ()};

  Return myPanel;

  }

  function myButtonClick() {}

  var app.project.activeItem = myComp;

  If (myComp! = null & & myComp instanceof CompItem) {}

  If (myPanel.grp.groupOne.myDropDownList.selection.index == 0) {}

  myComp.layers.addSolid ([0,0,0], "MySolid", myComp.width, myComp.height, 1)

  } Else if (myPanel.grp.groupOne.myDropDownList.selection.index == 2) {}

  myComp.layers.addLight ("Light", [myComp.width/2, myComp.height/2]);

  }

  }

  }

  Make a floating window

  var myScriptPal = myScript_buildUI (thisObj);

  If ((myScriptPal! = null) & & (myScriptPal instanceof window)) {}

  myScriptPal.center ();

  myScriptPal.show ();

  }

  }

  myScript (this);

  }

  If I comment out the lines

  If (myPanel.grp.groupOne.myDropDownList.selection.index == 0) { and If (myPanel.grp.groupOne.myDropDownList.selection.index == 1) { }}

  the script will add the SOLID and LIGHT.  But it will never work with these active lines - Add button does nothing.

  I could just make use of onChange with the drop-down list, but I want to understand how onClick actions of connection in the drop-down list.

  I copied this piece of the forum script and modified to work with my script, but nothing seems to work:

  buttonOne.onClick = onButtonOneClick;

  function onButtonOneClick() {}

  If (myPalette.dropdownlistOne.selection.index == 0) {}

  to do this

  } else {}

  This instead

  }

  }

  Can someone take a look at my script at the top of the page and tell me why this won't work?  I pretty much pulled out the last piece of hair I have on this - simple problem?

  Thank you in advance.

  Your click of button function does not know what "myPanel. You could do something like this inside the function:

  var this.parent.parent.parent = myPanel;

  There are other ways to do it, maybe as a global variable that maintains the reference of the Panel.

  In addition, your second if looking for selection.index == 2 instead of 1.

  Dan

• JavaScript UI: files?

  Hello!

  Is it possible to create a user interface that is customized in After Effect with "issues" like that? :

  

  At the moment I don't see that one way - is to "detach the control panel" add another panel:

  

  But this isn't the way I want to use...

  Thank you in advance!

  There are signs by tabs:

  var w = new Window("palette", "tabbed panels", undefined, {resizeable: true});
  w.alignChildren = ['fill', 'fill'];
  w.onResize = w.onResizing = function(){this.layout.resize();};
  
  w.content = w.add("tabbedpanel");
  w.content.alignChildren = ['fill', 'fill'];
  
  for (var j=0; j<3; ) w.content.add("tab", undefined, "name " + (++j));
  w.content.selection = 2;
  
  w.show();
  

  same thing with a resource string:

  var w = new Window("palette", "tabbed panels", undefined, {resizeable: true});
  w.alignChildren = ['fill', 'fill'];
  w.onResize = w.onResizing = function(){this.layout.resize();};
  
  w.content = w.add("panel{type: 'tabbedpanel', alignChildren: ['fill', 'fill'],\
                                      pan1 : Panel{type: 'tab', text: 'name 1'},\
                                      pan2 : Panel{type: 'tab', text: 'name 2'},\
                                      pan3 : Panel{type: 'tab', text: 'name 3'},\
                                      }");
  w.content.selection = 2;
  
  w.show();
  

  Xavier.

• User input handling using the GUI resource string...

  I know that I can pass values in the resource string to energize the GUI. I was able to transmit values in and even create loops through several items in a listbox.

  Is it possible to add several EditText boxes to the resource string or I can only pass values to a box of EditText already contained in the resource string? For example: in my code below, I have a "myEditText: EditText {text: 'My text edit'},-" in my groupTwo. Apart from my resolution (resource string) I pass values in the res (see: / / by default). Is it possible for example to create several EditText elements in the Res based on the selection of the users on the drop-down list?

  myScript (this);

  function myScript (thisObj) {}

  var myScriptPalette = myScript_buildUI (thisObj);

  function myScript_buildUI (thisObj) {}

  var myPanel = (thisObj instanceof Panel)? thisObj: new window ("palette", "my window name', undefined, {resizable: true}");

  {//Build GUI

  res = "group {orientation: 'row',------}.

  groupOne: group {orientation: "column,"------}

  MyButton: button {text: 'Name of button'}, \

  myCheckbox: checkbox {text: 'Checkbox'}, \

  myRadioButton: RadioButton {text: 'My Radio button'}, \

  myDropDownList:DropDownList {properties: {items: ["Item1 DD',"DD Item2","DD Item3","DD Item4"]}}, \

  myProgressBar: Progressbar {text: "Progressbar", value: 50}, \

  },\

  groupTwo: group {orientation: "column,"------}

  myIconButton: IconButton {text: 'IconButton' image: ' /Users/design2/Desktop/PanelTutorial/images/AFG.jpg'},\}

  myImage: Image {text: 'Image', image: ' /Users/design2/Desktop/PanelTutorial/images/AFG.jpg'},\}

  myStaticText: StaticText {text: 'My static text'}, \

  myEditText: EditText {text: 'My text edit'}, \

  mySlider: Slider {text: 'My Slider', value: 25}, \

  myScrollbar: scroll bar {text: 'My scroll bar', value: 50}, \

  },\

  }";

  }

  myPanel.grp = myPanel.add (res);

  Default values

  myPanel.grp.groupOne.myCheckbox.value = true;

  myPanel.grp.groupOne.myDropDownList.selection = 0;

  myPanel.grp.groupOne.myProgressBar.value = 20;

  Return myPanel;

  }

  If ((myScriptPalette! = null) & & (myScriptPalette instanceof window)) {}

  myScriptPalette.center ();

  myScriptPalette.show ();

  }

  }

  Hi Shawn, welcome to the forum. I did a little test today after your last email. This is what works to add dynamically to the user interface. The overall user interface must first be resizable with the elements follows the same path, so...

  (1) just above the back line you need to add:

  myPanel.layout.layout (true);

  myPanel.grp.minimumSize = myPanel.grp.size;

  myPanel.layout.resize ();

  myPanel.onResizing = myPanel.onResize = function () {this.layout.resize () ;}

  Return myPanel;

  }

  (2) then for the sake of simplicity we will place the current edittext area in a group...

  groupThree: group {orientation: "column,"------}

  myEditText: EditText {text: 'My text edit'}, \

  },\

  (3) then you will need to determine your list dropdown onChange function. In this case I put it to the top to add an edittext area based on the selection of the index from the drop-down list. This point we create a box, two creates two and so on.

  myPanel.grp.groupOne.myDropDownList.onChange = function() {}

  child var = myPanel.grp.groupTwo.groupThree.children [0] .size;     Grab the first dimensions edittext

  var n = myPanel.grp.groupTwo.groupThree;     Group variable

  var idx = myPanel.grp.groupOne.myDropDownList.selection.index + 1;     Index number of drop-down list selection + 1 offset 0 function array returned value.

  for (var i = 0; i)

  n.Add ('edittext', [0, 0, child.width, child.height], 'Hi');

  }

  n.Layout.Resize ();     Resizes the Group

  myPanel.grp.layout.layout (true);     Updates the layout of the items in the Group

  myPanel.grp.layout.resize ();     Resize the main window of the user interface

  n.Show ();     Reveals results

  }

  (4) I also added a button function to remove editboxes so you can see how it works.

  myPanel.grp.groupOne.myButton.onClick = function() {}

  GRP var = myPanel.grp.groupTwo.groupThree;     Group variable

  var lastKid = grp.children.length - 1;     Last child edittext in the Group

  If (lastKid! = 0) {//Making sure that the last edittext is not the original one source.

  GRP. Remove (BRM. Children [lastKid]);     Remove it

  GRP. Layout.Resize ();

  myPanel.grp.layout.layout (true);

  myPanel.grp.layout.resize ();

  GRP. Show();

  }

  }