ScriptUI Blank Panel Error

[zachneel]

So I have this script I'm writing:

var w=new Window ('palette');

var panelGroup=w.add("Panel",undefined,"Name");

panelGroup.alignChildren="left";

var scaleCheck=panelGroup.add("checkbox",undefined,"Scale");

var rotateCheck=panelGroup.add("checkbox",undefined,"Rotation");

var opacityCheck=panelGroup.add("checkbox",undefined,"Opacity");

var colorCheck=panelGroup.add("checkbox",undefined,"Color");

var customCheck=panelGroup.add("checkbox",undefined,"Custom");

var applyButton=w.add("button",undefined,"Apply");

w.layout.layout(false);

w.center();

w.show();

I'm new to scripting, but basically I'm trying to create a simple UI with checkboxes with different properties applied. Whenever I run it through ESTK it looks perfect. But when I run through the ScriptUI Panels folder from the "window" tab in AE it does this:

Essentially creating a huge dockable blank panel, and my smaller panel that is still undockable. Any help is appreciated!

[Tomas Sinkunas · Accepted solution]

This snippet takes care of if:

(function (thisObj) {
    buildUI(thisObj);
    function buildUI(thisObj) {
        var win = (thisObj instanceof Panel) ? thisObj : new Window("palette", "script", undefined, {
            resizeable: true
        });
        var panelGroup = win.add("Panel", undefined, "Name");
        panelGroup.alignChildren = "left";
        var scaleCheck = panelGroup.add("checkbox", undefined, "Scale");
        var rotateCheck = panelGroup.add("checkbox", undefined, "Rotation");
        var opacityCheck = panelGroup.add("checkbox", undefined, "Opacity");
        var colorCheck = panelGroup.add("checkbox", undefined, "Color");
        var customCheck = panelGroup.add("checkbox", undefined, "Custom");
        var applyButton = win.add("button", undefined, "Apply");
        win.onResizing = win.onResize = function () {
            this.layout.resize();
        };
        if (win instanceof Window) {
            win.center();
            win.show();
        } else {
            win.layout.layout(true);
            win.layout.resize();
        }
    }
})(this);

[zachneel]

Thanks!! Any chance you could explain to me what exactly is going on here? And why I was getting that error?

and also: if I wanted to use the checkbox values elsewhere how would so pull that

[Tomas Sinkunas]

David Torno has fantastic series on Extendscript. Couldn't recommend it enough https://www.provideocoalition.com/after-effects-extendscript-training-complete-series/

[UQg]

When you write:

var w=new Window ('palette');
var panelGroup=w.add("Panel",undefined,"Name");
// etc
w.show();

you are creating a palette and showing it. If something else happened, it'd be really wierd.

Javascript (hence ExtendScript too) has a particular variable called 'this', which represents the object 'currrenly at hand' (google for better def).

In a generic script, at the entry point of the script, <this> is the global object: it is not a ScriptUI container, therefore if if you need a UI for that script, you need to create one (palette for instance).

In the very special case where the script file is located in the ScriptUI Panels folder of the application, <this> is instead a (dockable) Panel. To be able to use it later in the script, you need to keep track of the object as soon as the script starts. In particular,  if you enclose your script inside a function, you need to pass <this> as an argument.

Xavier

Here are few things about <this> that you might find useful to know, and that might spare you some time:

• its value is implicitely defined (you cannot write <this = something>),
• its value remains the same inside a given function scope,
• but can vary from a function scope to another,
• there are actually ways to set its value inside a function scope.

Say you have the following settings:

function shout(loud){
    loud ? alert(this.name) : $.writeln(this.name);
    };
var harry = {name : "Harry", shout : shout};    // object with a name and shout method
$.global.name = "Global";                       // add a name to the global object

To figure out how the value of <this> is decided, you can execute:

shout();               // writes "Global" : by default, <this> is the global object
harry.shout()          // writes "Harry" : inside obj[method](){}, <this> is obj

This is particularly useful to know for ScriptUI elements callbacks.

For instance, inside myCheckbox.onClick, <this> will be the checkbox that triggered the event, <this.value> the checkbox value, <this.text> its text, etc.

To change that default behaviour, you can use myFunction.call() or myFunction.apply()

var bob = {name: "Bob"};    // an object with a name, but no shout method
shout.call(bob);            // writes "Bob" instead of "Global"
harry.shout.call(bob);      // writes "Bob" instead of "Harry"
shout.call(bob, true);      // alerts "Bob"
shout.apply(bob, [true]);   // same

[oliverwatson]

Hey, Tomas.