ADOBE AFTER EFFECTS: Forum Expressions Tutorials Creative Cloud

Dynamic orientation in dockable ui

COW Forums : Adobe After Effects Expressions

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
hadrien ledieu
Dynamic orientation in dockable ui
on Aug 25, 2018 at 11:17:16 am

Hi guys,

I am fine tuning the UI (dockable) of a script and I can't find a way to set the orientation of my buttons dynamically.
What I want to do is quite simple, when the width of my window is smaller than the height, I want my buttons to be in a column. Otherwise in a row.

I think I am quite close but it is not working.

Would be great if someone could help me with this!
Many thanks,

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{alignment:['left', 'top'],\
myButton1: Button{text:'1'},\
myButton2: Button{text:'2'},\
myButton3: Button{text:'3'},\
myButton4: Button{text:'4'},\

myPanel.grp = myPanel.add(res);



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

myPanel.onResizing = myPanel.onResize = function () {
myPanel.orientation = myPanel.size.width > myPanel.size.height ? 'row' : 'column';
myPanel.layout.resize ();
myPanel.onShow = function () {
myPanel.layout.resize ();

return myPanel;

var myScriptPal = myScript_buildUI(thisObj);

if ((myScriptPal != null) && (myScriptPal instanceof Window)) {;;


Return to posts index

Scott McGee
Re: Dynamic orientation in dockable ui
on Aug 29, 2018 at 1:10:42 pm

I found this, as I was curious when I saw your post.

I don't know if there is a tidier way to do this, but this works. I tried breaking w.g up but it didn't work. So you have something to start with at least that does work below.

var w = new Window("palette", "test", undefined, {resizeable: true});

w.g = w.add("group{alignment: ['fill', 'top'], alignChildren: ['fill', 'fill'], b1:Button{text:'b1'}, b2:Button{text:'b2'}}");
w.onResizing = function () {
var eps = this.size[0] if (eps !== this.eps){
this.g.orientation = eps ? 'column' : 'row';
this.eps = eps;

Return to posts index

hadrien ledieu
Re: Dynamic orientation in dockable ui
on Aug 29, 2018 at 2:35:58 pm

Thanks for this help but not quite the behavior I want...

Here is what I am looking for:

Return to posts index

Scott McGee
Re: Dynamic orientation in dockable ui
on Aug 29, 2018 at 3:00:00 pm


Is that definitely with a jsx UI panel? I know you can do that with a CEP html5 dockable panel. I've not seen it done with a script UI panel though.

Alternatively if it's an AE plugin, I wouldn't be able to tell you, but most are written in C/C++.

Although I'm still learning the language, I'm working with html5 panels, which I can install with a .zxp installer. I can guarantee it works with that, but I don't know with Script UI

Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 All Rights Reserved