• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How do I make ScriptUI generated by https://scriptui.joonas.me dockable in After Effects?

Contributor ,
Dec 04, 2019 Dec 04, 2019

Copy link to clipboard

Copied

I love the ScriptUI Builder at https://scriptui.joonas.me but how do I make the code it generates dockable in After Effects? I've made this simple GUI as an example… (screenshot from the website) Screen Shot 2019-12-04 at 5.01.44 PM.pngexpand image

 

And the website generated the following code which i pasted into my 'Playground.jsx' which is inside of ScriptUI folder…

/*
Code for Import https://scriptui.joonas.me — (Triple click to select): 
{"activeId":0,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"enabled":true,"varName":null,"windowType":"Palette","creationProps":{"su1PanelCoordinates":false,"maximizeButton":false,"minimizeButton":false,"independent":false,"closeButton":false,"borderless":false,"resizeable":false},"text":"Dialog","preferredSize":[0,0],"margins":10,"orientation":"row","spacing":10,"alignChildren":["center","top"]}},"item-1":{"id":1,"type":"Panel","parentId":0,"style":{"enabled":true,"varName":null,"creationProps":{"borderStyle":"etched","su1PanelCoordinates":false},"text":"Panel","preferredSize":[0,0],"margins":10,"orientation":"row","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-3":{"id":3,"type":"Button","parentId":1,"style":{"enabled":true,"varName":null,"text":"Button","justify":"center","preferredSize":[0,0],"alignment":null,"helpTip":null}},"item-4":{"id":4,"type":"Panel","parentId":0,"style":{"enabled":true,"varName":null,"creationProps":{"borderStyle":"etched","su1PanelCoordinates":false},"text":"Panel","preferredSize":[0,0],"margins":10,"orientation":"row","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-6":{"id":6,"type":"Button","parentId":4,"style":{"enabled":true,"varName":null,"text":"Button","justify":"center","preferredSize":[0,0],"alignment":null,"helpTip":null}}},"order":[0,1,3,4,6],"settings":{"importJSON":true,"indentSize":false,"cepExport":false,"includeCSSJS":true,"showDialog":true,"functionWrapper":false,"itemReferenceList":"None"}}
*/ 

// PALETTE
// =======
var palette = new Window("palette", undefined, undefined, {closeButton: false}); 
    palette.text = "Dialog"; 
    palette.orientation = "row"; 
    palette.alignChildren = ["center","top"]; 
    palette.spacing = 10; 
    palette.margins = 10; 

// PANEL1
// ======
var panel1 = palette.add("panel", undefined, undefined, {name: "panel1"}); 
    panel1.text = "Panel"; 
    panel1.orientation = "row"; 
    panel1.alignChildren = ["left","top"]; 
    panel1.spacing = 10; 
    panel1.margins = 10; 

var button1 = panel1.add("button", undefined, undefined, {name: "button1"}); 
    button1.text = "Button"; 

// PANEL2
// ======
var panel2 = palette.add("panel", undefined, undefined, {name: "panel2"}); 
    panel2.text = "Panel"; 
    panel2.orientation = "row"; 
    panel2.alignChildren = ["left","top"]; 
    panel2.spacing = 10; 
    panel2.margins = 10; 

var button2 = panel2.add("button", undefined, undefined, {name: "button2"}); 
    button2.text = "Button"; 

palette.show();

 

When I open it in AE, it's not possible to be docked…

 

Screen Shot 2019-12-04 at 5.03.20 PM.pngexpand image

 

In the Export settings of scriptui.joonas.me (bottom right corner of export window) there's an option to turn off 'Show Dialog' and an option to turn on Function Wrapper. The code with the Function Wrapper turned on is pasted below, but currently this makes it not even appear at all…

var palette = (function () {

  /*
  Code for Import https://scriptui.joonas.me — (Triple click to select): 
  {"activeId":0,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"enabled":true,"varName":null,"windowType":"Palette","creationProps":{"su1PanelCoordinates":false,"maximizeButton":false,"minimizeButton":false,"independent":false,"closeButton":false,"borderless":false,"resizeable":false},"text":"Dialog","preferredSize":[0,0],"margins":10,"orientation":"row","spacing":10,"alignChildren":["center","top"]}},"item-1":{"id":1,"type":"Panel","parentId":0,"style":{"enabled":true,"varName":null,"creationProps":{"borderStyle":"etched","su1PanelCoordinates":false},"text":"Panel","preferredSize":[0,0],"margins":10,"orientation":"row","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-3":{"id":3,"type":"Button","parentId":1,"style":{"enabled":true,"varName":null,"text":"Button","justify":"center","preferredSize":[0,0],"alignment":null,"helpTip":null}},"item-4":{"id":4,"type":"Panel","parentId":0,"style":{"enabled":true,"varName":null,"creationProps":{"borderStyle":"etched","su1PanelCoordinates":false},"text":"Panel","preferredSize":[0,0],"margins":10,"orientation":"row","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-6":{"id":6,"type":"Button","parentId":4,"style":{"enabled":true,"varName":null,"text":"Button","justify":"center","preferredSize":[0,0],"alignment":null,"helpTip":null}}},"order":[0,1,3,4,6],"settings":{"importJSON":true,"indentSize":false,"cepExport":false,"includeCSSJS":true,"showDialog":false,"functionWrapper":true,"itemReferenceList":"None"}}
  */ 

  // PALETTE
  // =======
  var palette = new Window("palette", undefined, undefined, {closeButton: false}); 
      palette.text = "Dialog"; 
      palette.orientation = "row"; 
      palette.alignChildren = ["center","top"]; 
      palette.spacing = 10; 
      palette.margins = 10; 

  // PANEL1
  // ======
  var panel1 = palette.add("panel", undefined, undefined, {name: "panel1"}); 
      panel1.text = "Panel"; 
      panel1.orientation = "row"; 
      panel1.alignChildren = ["left","top"]; 
      panel1.spacing = 10; 
      panel1.margins = 10; 

  var button1 = panel1.add("button", undefined, undefined, {name: "button1"}); 
      button1.text = "Button"; 

  // PANEL2
  // ======
  var panel2 = palette.add("panel", undefined, undefined, {name: "panel2"}); 
      panel2.text = "Panel"; 
      panel2.orientation = "row"; 
      panel2.alignChildren = ["left","top"]; 
      panel2.spacing = 10; 
      panel2.margins = 10; 

  var button2 = panel2.add("button", undefined, undefined, {name: "button2"}); 
      button2.text = "Button"; 

  return palette;

}());

 Any help would be appreciated!

TOPICS
Scripting , User interface or workspaces

Views

1.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 04, 2019 Dec 04, 2019

Copy link to clipboard

Copied

Dockable scripts require code that is quite different in format and structure than floating scripts. There is no easy way to convert it, and this decision should always be made before developing your script. Because now you must learn how to make dockable scripts and rewrite the majority of the code. Also don't forge the way you call dockable elements is much different!

Here are two videos that can help:

https://www.youtube.com/watch?v=_T7fY_B5NLc

https://www.provideocoalition.com/after-effects-extendscript-training-ep-12/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 04, 2019 Dec 04, 2019

Copy link to clipboard

Copied

Thanks, I'll check it out

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 12, 2020 Feb 12, 2020

Copy link to clipboard

Copied

LATEST

You don't have to completely rewrite the code, just add some boilerplate to make it dockable. Here's your code wrapped:

{
    function MyScript(thisObj) {
        function MyScript_buildUI(thisObj) {
            var palette = (thisObj instanceof Panel) ? thisObj : new Window("palette", undefined, undefined, { closeButton: true });

            if (palette != null) {
                palette.text = "Dialog";
                palette.orientation = "row";
                palette.alignChildren = ["center", "top"];
                palette.spacing = 10;
                palette.margins = 10;

                // PANEL1
                // ======
                var panel1 = palette.add("panel", undefined, undefined, { name: "panel1" });
                panel1.text = "Panel";
                panel1.orientation = "row";
                panel1.alignChildren = ["left", "top"];
                panel1.spacing = 10;
                panel1.margins = 10;

                var button1 = panel1.add("button", undefined, undefined, { name: "button1" });
                button1.text = "Button";

                // PANEL2
                // ======
                var panel2 = palette.add("panel", undefined, undefined, { name: "panel2" });
                panel2.text = "Panel";
                panel2.orientation = "row";
                panel2.alignChildren = ["left", "top"];
                panel2.spacing = 10;
                panel2.margins = 10;

                var button2 = panel2.add("button", undefined, undefined, { name: "button2" });
                button2.text = "Button";

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

            return palette;
        }

        if (parseFloat(app.version) < 8.0)
            alert('Version not supported');
        else {
            // Build and show the console's floating palette
            var pal = MyScript_buildUI(thisObj);
            if (pal != null) {
                if (pal instanceof Window) {
                    // Show the palette
                    pal.center();
                    pal.show();
                } else {
                    pal.layout.layout(true);
                }
            }
        }
    }

    MyScript(this);
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines