• Adobe After Effects Expressions

  Dynamic orientation in dockable ui

  Posted by Hadrien Ledieu on August 25, 2018 at 11:17 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,
  H.

  {
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.myButton1.size=[30,30];
  myPanel.grp.myButton2.size=[30,30];
  myPanel.grp.myButton3.size=[30,30];
  myPanel.grp.myButton4.size=[30,30];

  myPanel.layout.layout(true);

  myPanel.grp.minimumSize = myPanel.grp.size;
  myPanel.layout.resize();

  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)) {
  myScriptPal.center();
  myScriptPal.show();
  }
  }

  myScript(this);
}

  Scott Mcgee replied 7 years, 12 months ago 2 Members · 3 Replies
• 3 Replies

• 

  Scott Mcgee

  August 29, 2018 at 1:10 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.g.b2.onClick=function(){w.close();};
  w.onResizing = function () {
  var eps = this.size[0]
• 

  Hadrien Ledieu

  August 29, 2018 at 2:35 pm

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

  Here is what I am looking for:
  
• 

  Scott Mcgee

  August 29, 2018 at 3:00 pm

  Ah,

  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

Reply to this Discussion! Login or Sign Up