Dockable UI panel

Find out why the . goes before the /

Moderator: Paul Tuersley

Post Reply
bkan
Posts: 51
Joined: November 6th, 2013, 8:33 am

November 6th, 2013, 8:44 am

Hello!
I wrote my first script, and it works successfully!
BUT, I want it to be dockable and I follow a tut which teach me how to write it.... but it doesn't work..... When I call it from the window of after effects, my panel is empty.....
Also, I just want to assign a function to these 5 tabcontent : how can I make it?
I copy/paste the code below, if somebody can help me, I would really appreciated (excuse for my english, I'm a french guy!) :


{
function myScript(thisObj){
function myScript_buildUI(thisObj){
var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "AK_toolkit_V01", undefined, {resizeable:true});

res = "group{orientation:'row',\
myTabbedPanel: Panel{type:'tabbedpanel', text:'',\
myTab1: Panel{type:'tab', text:'tab1',\
myTabContent1: Button{text:'my tabbed button1'},\
myTabContent2: Button{text:'my tabbed button2'},\
myTabContent3: Button{text:'my tabbed button3'},\
myTabContent4: Button{text:'my tabbed button4'},\
myTabContent5: Button{text:'my tabbed button5'},\
},\
myTab2: Panel{type:'tab', text:'tab2',\
},\
myTab3: Panel{type:'tab', text:'tab3',\
},\
},\
}";

myPanel.grp = myPanel.add(res);

//Defaults
//myPanel.grp.myTabbedPanel.myTab1.myTabContent1.onClick = function()

return myPanel;
}
var myScriptPal = myScript_buildUI(thisObj);

if((myScriptPal != null)&&(myScriptPal instanceof Window)){
myScriptPal.center();
myScriptPal.show();
}

}

myScript(this);

}
Paul Tuersley
Posts: 704
Joined: June 5th, 2004, 7:59 am
Location: London, UK

November 7th, 2013, 3:42 pm

Try this. It also shows a couple of ways of assigning functions to button clicks.

Paul

Code: Select all

{
	function myScript(thisObj){
		function myScript_buildUI(thisObj){
			var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "AK_toolkit_V01", undefined, {resizeable:true});

			res = "group{orientation:'row',\
				myTabbedPanel: Panel{type:'tabbedpanel', text:'',\
					myTab1: Panel{type:'tab', text:'tab1',\
						myTabContent1: Button{text:'my tabbed button1'},\
						myTabContent2: Button{text:'my tabbed button2'},\
						myTabContent3: Button{text:'my tabbed button3'},\
						myTabContent4: Button{text:'my tabbed button4'},\
						myTabContent5: Button{text:'my tabbed button5'},\
					},\
					myTab2: Panel{type:'tab', text:'tab2',\
					},\
					myTab3: Panel{type:'tab', text:'tab3',\
					},\
				},\
			}";

			myPanel.grp = myPanel.add(res);

			//Defaults
			myPanel.grp.myTabbedPanel.myTab1.myTabContent1.onClick = function() {
				alert("button 1 clicked");
			}
		
			myPanel.grp.myTabbedPanel.myTab1.myTabContent2.onClick =  onTabClicked;
			
			myPanel.layout.layout(true);

			return myPanel;
		}
	
		function onTabClicked() {
			alert(this.text + " button clicked");
		}
	
		var myScriptPal = myScript_buildUI(thisObj);

		if (myScriptPal != null && myScriptPal instanceof Window){
			myScriptPal.center();
			myScriptPal.show();
		}

	}
	myScript(this);
}
bkan
Posts: 51
Joined: November 6th, 2013, 8:33 am

November 8th, 2013, 1:42 am

Woooow! It works!! Thank you very much Paul!
Paul Tuersley
Posts: 704
Joined: June 5th, 2004, 7:59 am
Location: London, UK

November 8th, 2013, 1:55 am

The important line was:
myPanel.layout.layout(true);

This invokes the automatic layout manager. I believe the reason it worked ok when run as a window (i.e. from File > Run Script or run from ESTK) is that this happens automatically when "show()" is used, but in the case of a panel it needs to be included.

Paul
Amaylayinsues
Posts: 4
Joined: September 1st, 2014, 11:58 am

September 15th, 2014, 11:17 am

I'm new to whole scripting deal, but I've been able to learn bits and pieces from going through a bunch of scripts and posts on this site. I'm basically making a toolbar that i would love to be able to make dock able but every time I try and use the wonderful example above after I get the first two buttons in everything goes to shit. Below is the code I've used to make my non dock able tool bar work. I would love to be able to use the tabbed layout in the example above only instead of stacking the buttons in each tab have them go out in a row.

Code: Select all

    
    var myWindow = new Window("palette", "EXR Workflow");

    myWindow.myPanel = myWindow.add("group");
    myWindow.myPanel.orientation = "row";
    myWindow.myPanel.fpsButton = myWindow.myPanel.add("button");    
    myWindow.myPanel.fpsButton.text = "Make 24 FPS"; 
    myWindow.myPanel.exrButton = myWindow.myPanel.add("button");
    myWindow.myPanel.exrButton.text = "Breakout EXR"; 
    myWindow.myPanel.compButton = myWindow.myPanel.add("button");
    myWindow.myPanel.compButton.text = "Adjust Comp Size";
    myWindow.myPanel.nullButton = myWindow.myPanel.add("button");
    myWindow.myPanel.nullButton.text = "Add Scale Null";
    myWindow.myPanel.scaleButton = myWindow.myPanel.add("button");
    myWindow.myPanel.scaleButton.text = "Add Scale Expressions";
    myWindow.myPanel.rredButton = myWindow.myPanel.add("button");
    myWindow.myPanel.rredButton.text = "Shift R";
    myWindow.myPanel.ggreenButton = myWindow.myPanel.add("button");
    myWindow.myPanel.ggreenButton.text = "Shift G";
    myWindow.myPanel.bblueButton = myWindow.myPanel.add("button");
    myWindow.myPanel.bblueButton.text = "Shift B";
    myWindow.myPanel.fcButton = myWindow.myPanel.add("button");
    myWindow.myPanel.fcButton.text = "Frame Counter";
    myWindow.myPanel.addrqButton = myWindow.myPanel.add("button");
    myWindow.myPanel.addrqButton.text = "Add2RQ";
    myWindow.myPanel.sendButton = myWindow.myPanel.add("button");
    myWindow.myPanel.sendButton.text = "Send2Farm";
   

        myWindow.show();


myWindow.myPanel.fpsButton.onClick = function () {
    app.beginUndoGroup("Force 24 FPS");  
   function retrieveProjectItems(itemType){
    var typeOptions = new Array("Composition", "Folder", "Footage");
    for(var t = 0; t<3; t++){
        if(itemType == typeOptions[t]){
            var proj, itemTotal, curItem, itemArray;
            itemAry = new Array();
            proj = app.project;
            itemTotal = proj.numItems;
            for(var i = 1; i <= itemTotal; i++){
                curItem = proj.item(i);
                if(curItem.typeName == itemType){
                    itemAry[itemAry.length] = curItem;
                    }
                }
            return itemAry;
            }
        }
    }
retrieveProjectItems("Footage");

var results = retrieveProjectItems("Footage");

for(var r=0; r<results.length; r++){
    results[r].mainSource.conformFrameRate = 24;
app.endUndoGroup();   
}



//SELECT ALL FOOTAGE




}
  

//CREATES PRO EXR BREAKOUT
//Select .EXR Footage in the Project Window







myWindow.myPanel.exrButton.onClick = function () {
    app.beginUndoGroup("ProEXR Breakout");   
    
    var myLayer = app.project.selection;
    app.executeCommand(app.findMenuCommandId("Create ProEXR Layer Comps"))
    
    app.endUndoGroup();   
   }

//CREATES PRO EXR BREAKOUT
//Select .EXR Footage in the Project Window
   
   
   
   
myWindow.myPanel.compButton.onClick = function () {
    app.beginUndoGroup("Adjust Comp Size");  
function retrieveProjectItems(itemType){


   
   var typeOptions = new Array("Composition", "Folder", "Footage");
    for(var t = 0; t<3; t++){
        if(itemType == typeOptions[t]){
            var proj, itemTotal, curItem, itemArray;
            itemAry = new Array();
            proj = app.project;
            itemTotal = proj.numItems;
            for(var i = 1; i <= itemTotal; i++){
                curItem = proj.item(i);
                if(curItem.typeName == itemType){
                    itemAry[itemAry.length] = curItem;
                    }
                }
            return itemAry;
            }
        }
    }
retrieveProjectItems("Composition");

var results = retrieveProjectItems("Composition");

for(var r=0; r<results.length; r++){
results[r];
     
var compwidth = 3780;
var compheight = 2880;   


      results[r].name = results[r].name; 
      results[r].name = results[r].name.substring(0,99); 
      var oldHeight = results[r].height ; 
      var oldWidth = results[r].width; 
      results[r].height = parseInt(compheight); 
      results[r].width =parseInt(compwidth); 
      var newHeight = results[r].height ; 
      var newWidth = results[r].width; 
      var resizeHeightFactor = (newHeight / oldHeight)*100; 
      var resizeWidthFactor = (newWidth / oldWidth)*100; 

      for (var j = 1; j <= results[r].numLayers; j++) 
      { 
         var curLayer = results[r].layer(j); 
         var wid = compwidth/2;
         var hei = compheight/2;
         
         curLayer.position.setValue([wid,hei]); 
         } 
      } 
       
//SELECT ALL COMPS AND RESIZE THEM
  
    app.endUndoGroup();      
      }
//IS SUPPOSED TO RESIZE ALL THE COMPS THAT ARE SELECTED.






myWindow.myPanel.nullButton.onClick = function () {
    
    app.beginUndoGroup("Add Scale Null");
    
    var myComp = app.project.item(2);
    var myLayer = myComp.selectedLayers[0];
    var myNull = myComp.layers.addNull(myComp.duration);
myNull.name = "SCALER";

app.project.item(2).layer(1).property("Transform").property("Scale").setValue([200, 200]); 

app.endUndoGroup();      
    }
//SELECT ALL SOURCE COMPS IN PROJET WINDOW
myWindow.myPanel.scaleButton.onClick = function () {
    
    app.beginUndoGroup("Add Scale Expression");
 
var selectedItems = app.project.selection;

//var express = "comp("compName").layer('SCALER').transform.scale");

for (var i=0; i < selectedItems.length; i++) {
    
    var compName = app.project.item(2).name; 
     
    var ch = "comp(";
    
    var eat = ").layer('SCALER').transform.scale";
   
  
selectedItems[i].layer(1).property("Transform").property("Scale").expression = "comp(\"" + compName + "\").layer('SCALER').transform.scale";

}

app.endUndoGroup();
}
//red button

myWindow.myPanel.rredButton.onClick = function () {{
 
app.beginUndoGroup("Shift Channels Red");   
  
var presetPath = "/Users/advedit02/Documents/Adobe/After\ Effects\ CC/User\ Presets/rred.ffx";
var myComp = app.project.activeItem;
var myPreset = File(presetPath);

myComp.applyPreset(myPreset);
}

app.endUndoGroup();

    } 
//green button

myWindow.myPanel.ggreenButton.onClick = function () {
 
app.beginUndoGroup("Shift Channels Green");   
  
var presetPath = "/Users/advedit02/Documents/Adobe/After\ Effects\ CC/User\ Presets/ggreen.ffx";
var myComp = app.project.activeItem;
var myPreset = File(presetPath);

myComp.applyPreset(myPreset);


app.endUndoGroup();

    } 
//blue button

myWindow.myPanel.bblueButton.onClick = function () {
 
app.beginUndoGroup("Shift Channels Blue");   
  
var presetPath = "/Users/advedit02/Documents/Adobe/After\ Effects\ CC/User\ Presets/bblue.ffx";
var myComp = app.project.activeItem;
var myPreset = File(presetPath);

myComp.applyPreset(myPreset);


app.endUndoGroup();

    } 
//FRAM COUNTER

myWindow.myPanel.fcButton.onClick = function () {
 
app.beginUndoGroup("Frame Counter");   
  
var presetPath = "/Users/advedit02/Documents/Adobe/After\ Effects\ CC/User\ Presets/framecounterds.ffx";
var myComp = app.project.activeItem;
var myPreset = File(presetPath);

var myText = myComp.layers.addText("Frame Counter") ;

myText.property("Source Text").expression = "timeToFrames()"; //add expression

myText.property("Position").setValue([3524,2788]);  //set position to lower right corner



myComp.applyPreset(myPreset);


app.endUndoGroup();

    } 
//ADDS NULL TO MAIN COMP AND SETS VALUE AT 200%.  Should also then add expressions to all comps footage linking the two

myWindow.myPanel.addrqButton.onClick = function () {
    
    app.beginUndoGroup("Add to Render Queue");

   
     
var templatename = "Tiff"; //choose a template name you have on your machine

var sel_vids = app.project.selection;

if(sel_vids){
	app.beginUndoGroup("Render all")
	var rQ = app.project.renderQueue;
	for(var i = 0; i<sel_vids.length; i++){
		rQ.items.add(sel_vids[i]);
         //rQ.items(renderit.items.length).outputModules[1].applyTemplate(templatename)
	}
// Change Render Locations.jsx
	//
	// This script prompts the user for a new output folder to use for queued items in the Render Queue.
	
	function ChangeRenderLocations()
	{
		var scriptName = "Change Render Locations";
		var newLocation = Folder.selectDialog("Select a render output folder...");
		
		if (newLocation != null) {
			app.beginUndoGroup(scriptName);
			
			// Process all render queue items whose status is set to Queued.
			for (i = 1; i <= app.project.renderQueue.numItems; ++i) {
				var curItem = app.project.renderQueue.item(i);
				
				if (curItem.status == RQItemStatus.QUEUED) {
					// Change all output modules for the current render queue item.
					for (j = 1; j <= curItem.numOutputModules; ++j) {
						var curOM = curItem.outputModule(j);
						
						var oldLocation = curOM.file;
						curOM.file = new File(newLocation.toString() + "/" + oldLocation.name);
						
						//alert("New output path:\n"+curOM.file.fsName, scriptName);
					}
				}
			}
			
			app.endUndoGroup();
		}
	}
	
	
	ChangeRenderLocations();
}








	app.endUndoGroup();
}

myWindow.myPanel.sendButton.onClick = function () {
    app.beginUndoGroup("Send2Farm");   
    
    var myLayer = app.project.selection;
    app.executeCommand(app.findMenuCommandId("DeadlineAfterEffectsClient.jsx"))
    
    app.endUndoGroup();   
   }



Here's what happens when I try to learn from Paul's code above.

Code: Select all

{
   function myScript(thisObj){
      function myScript_buildUI(thisObj){
         var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "Skechers Toolkit 1.0", undefined, {resizeable:true});

         res = "group{orientation:'row',\
            myTabbedPanel: Panel{type:'tabbedpanel', text:'',\
               myTab1: Panel{type:'tab', text:'EXR',\
                  myTabContent1: Button{text:'Make 24 FPS'},\
                  myTabContent2: Button{text:'Breakout EXR'},\
                  myTabContent3: Button{text:'Change Comp Size'},\
                  myTabContent4: Button{text:'Add Scaler Null'},\
                  myTabContent5: Button{text:'Add Scale Expressions'},\
               },\
               myTab2: Panel{type:'tab', text:'Presets',\
                  myTabContentA: Button{text:'Shift R'},\
                  myTabContentB: Button{text:'Shift G'},\
                  myTabContentC: Button{text:'Shift B'},\
                  myTabContentD: Button{text:'Frame Counter'},\
               },\
               myTab3: Panel{type:'tab', text:'Render',\
                  myTabContent1C: Button{text:'Tiff'},\
                  myTabContent2C: Button{text:'Tiff Alpha'},\
                  myTabContent3C: Button{text:'ProResHQ'},\
                  myTabContent4C: Button{text:'Send2Farm'},\
               },\
            },\
         }";

         myPanel.grp = myPanel.add(res);

         //BUTTON 1
         myPanel.grp.myTabbedPanel.myTab1.myTabContent1.onClick = function() {
             app.beginUndoGroup("Force 24 FPS");  
                    
                    function retrieveProjectItems(itemType){
    var typeOptions = new Array("Composition", "Folder", "Footage");
    for(var t = 0; t<3; t++){
        if(itemType == typeOptions[t]){
            var proj, itemTotal, curItem, itemArray;
            itemAry = new Array();
            proj = app.project;
            itemTotal = proj.numItems;
            for(var i = 1; i <= itemTotal; i++){
                curItem = proj.item(i);
                if(curItem.typeName == itemType){
                    itemAry[itemAry.length] = curItem;
                    }
                }
            return itemAry;
            }
        }
    }

retrieveProjectItems("Footage");

var results = retrieveProjectItems("Footage");

for(var r=0; r<results.length; r++){
    results[r].mainSource.conformFrameRate = 24;


          app.endUndoGroup();   
         }
///////////BUTTON 2
      
         myPanel.grp.myTabbedPanel.myTab1.myTabContent3.onClick =  onTabClicked;
         
         myPanel.layout.layout(true);

         return myPanel;
      }
   
      function onTabClicked() {
         var myLayer = app.project.selection;
    app.executeCommand(app.findMenuCommandId("Create ProEXR Layer Comps"))
    
    app.endUndoGroup();   
      }
   //BUTTON 3
  myPanel.grp.myTabbedPanel.myTab1.myTabContent3.onClick =  onTabClicked;
         
         myPanel.layout.layout(true);

         return myPanel;
      }
   
      function onTabClicked() {
         function retrieveProjectItems(itemType){


   
   var typeOptions = new Array("Composition", "Folder", "Footage");
    for(var t = 0; t<3; t++){
        if(itemType == typeOptions[t]){
            var proj, itemTotal, curItem, itemArray;
            itemAry = new Array();
            proj = app.project;
            itemTotal = proj.numItems;
            for(var i = 1; i <= itemTotal; i++){
                curItem = proj.item(i);
                if(curItem.typeName == itemType){
                    itemAry[itemAry.length] = curItem;
                    }
                }
            return itemAry;
            }
        }
    }
retrieveProjectItems("Composition");

var results = retrieveProjectItems("Composition");

for(var r=0; r<results.length; r++){
results[r];
     
var compwidth = 3780;
var compheight = 2880;   


      results[r].name = results[r].name; 
      results[r].name = results[r].name.substring(0,99); 
      var oldHeight = results[r].height ; 
      var oldWidth = results[r].width; 
      results[r].height = parseInt(compheight); 
      results[r].width =parseInt(compwidth); 
      var newHeight = results[r].height ; 
      var newWidth = results[r].width; 
      var resizeHeightFactor = (newHeight / oldHeight)*100; 
      var resizeWidthFactor = (newWidth / oldWidth)*100; 

      for (var j = 1; j <= results[r].numLayers; j++) 
      { 
         var curLayer = results[r].layer(j); 
         var wid = compwidth/2;
         var hei = compheight/2;
         
         curLayer.position.setValue([wid,hei]); 
         } 
      
       
//SELECT ALL COMPS AND RESIZE THEM
  
    app.endUndoGroup();      
      }
  
   //BUTTON 4
   myPanel.grp.myTabbedPanel.myTab1.myTabContent3.onClick =  onTabClicked;
         
         myPanel.layout.layout(true);

         return myPanel;
      }
   
      function onTabClicked() {
          
app.beginUndoGroup("Frame Counter");   
  
var presetPath = "/Users/advedit02/Documents/Adobe/After\ Effects\ CC/User\ Presets/framecounterds.ffx";
var myComp = app.project.activeItem;
var myPreset = File(presetPath);

var myText = myComp.layers.addText("Frame Counter") ;

myText.property("Source Text").expression = "timeToFrames()"; //add expression

myText.property("Position").setValue([3524,2788]);  //set position to lower right corner



myComp.applyPreset(myPreset);


app.endUndoGroup();
}

    
  
  
  ///////////////////////////////////////////////////////////////////////////////
   
      var myScriptPal = myScript_buildUI(thisObj);

      if (myScriptPal != null && myScriptPal instanceof Window){
         myScriptPal.center();
         myScriptPal.show();
      }

   }
   myScript(this);
}

The comp size function I have for button 3 doesn't work and then functions start breaking all over the place. Any help would be greatly appreciated.

Thanks
Post Reply