I have a 3x5 grid layout for buttons that allow me to press a button to create various comps at different sizes, frame rates, or aspect ratios frame rates.
When I trying to make dock the UI, the grid layout falls apart. I am trying to pinpoint why it is breaking apart.
What would be a good approach to solving my issue at hand?
Here is what I have so far below..
Code: Select all
function createDockableUI(thisObj) {
var dialog =
thisObj instanceof Panel
? thisObj
: new Window("window", undefined, undefined, { resizeable: true });
dialog.onResizing = dialog.onResize = function () {
this.layout.resize();
};
return dialog;
}
function showWindow(myWindow) {
if (myWindow instanceof Window) {
myWindow.center();
myWindow.show();
}
if (myWindow instanceof Panel) {
myWindow.layout.layout(true);
myWindow.layout.resize();
}
}
//Paste code here
// WIN
// ===
var win = createDockableUI(this);
win.text = "SEA - AE Comp Creator";
win.orientation = "column";
win.alignChildren = ["center", "top"];
win.spacing = 10;
win.margins = 16;
var button_margin = 20,
button_width = 160,
button_height = 35,
top_margin = 80,
panel_margin = 10;
var l_button_left = button_margin,
l_button_right = l_button_left + button_width,
m_button_left = l_button_right + button_margin,
m_button_right = m_button_left + button_width,
r_button_left = m_button_right + button_margin,
r_button_right = r_button_left + button_width,
t_button_top = top_margin,
t_button_bottom = t_button_top + button_height,
m_button_top = t_button_bottom + button_margin,
m_button_bottom = m_button_top + button_height,
b_button_top = m_button_bottom + button_margin,
b_button_bottom = b_button_top + button_height,
b2_button_top = b_button_bottom + button_margin,
b2_button_bottom = b2_button_top + button_height,
b3_button_top = b2_button_bottom + button_margin,
b3_button_bottom = b3_button_top + button_height;
var win_width = panel_margin * 2 + button_width * 3 + button_margin * 4,
win_height =
panel_margin * 2 + button_height * 6 + button_margin * 4 + top_margin,
panel_right = win_width - panel_margin,
panel_bottom = win_height - panel_margin;
//var win = new Window('palette', 'SEACR8IONZ - AE Comp Creator'),
var panel = win.add("panel", [
panel_margin,
panel_margin,
panel_right,
panel_bottom,
]);
// Labels
var label0 = panel.add(
"statictext",
[m_button_left, panel_margin, m_button_right, button_height],
"Click to create the desired comp."
),
label1 = panel.add(
"statictext",
[
l_button_left + button_width / 2 - 12,
t_button_top - 22,
l_button_right,
t_button_top - 12,
],
"16:9"
),
label2 = panel.add(
"statictext",
[
m_button_left + button_width / 2 - 12,
t_button_top - 22,
m_button_right,
t_button_top - 12,
],
"9:16"
),
label3 = panel.add(
"statictext",
[
r_button_left + button_width / 2 - 10,
t_button_top - 22,
r_button_right,
t_button_top - 12,
],
"1:1"
);
// Left Column
var button0 = panel.add(
"button",
[l_button_left, t_button_top, l_button_right, t_button_bottom],
"23.976 fps"
),
button1 = panel.add(
"button",
[l_button_left, m_button_top, l_button_right, m_button_bottom],
"24 fps"
),
button2 = panel.add(
"button",
[l_button_left, b_button_top, l_button_right, b_button_bottom],
"30 fps"
),
button9 = panel.add(
"button",
[l_button_left, b2_button_top, l_button_right, b2_button_bottom],
"59.94 fps"
),
button10 = panel.add(
"button",
[l_button_left, b3_button_top, l_button_right, b3_button_bottom],
"60 fps"
);
// Middle Column
var button3 = panel.add(
"button",
[m_button_left, t_button_top, m_button_right, t_button_bottom],
"23.976 fps"
),
button4 = panel.add(
"button",
[m_button_left, m_button_top, m_button_right, m_button_bottom],
"24 fps"
),
button5 = panel.add(
"button",
[m_button_left, b_button_top, m_button_right, b_button_bottom],
"30 fps"
),
button11 = panel.add(
"button",
[m_button_left, b2_button_top, m_button_right, b2_button_bottom],
"59.94 fps"
),
button12 = panel.add(
"button",
[m_button_left, b3_button_top, m_button_right, b3_button_bottom],
"60 fps"
);
// Right Column
var button6 = panel.add(
"button",
[r_button_left, t_button_top, r_button_right, t_button_bottom],
"23.976 fps"
),
button7 = panel.add(
"button",
[r_button_left, m_button_top, r_button_right, m_button_bottom],
"24 fps"
),
button8 = panel.add(
"button",
[r_button_left, b_button_top, r_button_right, b_button_bottom],
"30 fps"
),
button13 = panel.add(
"button",
[r_button_left, b2_button_top, r_button_right, b2_button_bottom],
"59.94 fps"
),
button14 = panel.add(
"button",
[r_button_left, b3_button_top, r_button_right, b3_button_bottom],
"60 fps"
);
win.bounds = [0, 0, win_width, win_height];
// Button Actions
button0.onClick = function () {
app.project.items.addComp(
"horizontal - 16:9 - 23.976",
1920,
1080,
1,
30,
23.976
);
};
button1.onClick = function () {
app.project.items.addComp("horizontal - 16:9 - 24", 1920, 1080, 1, 30, 24);
};
button2.onClick = function () {
app.project.items.addComp("horizontal - 16:9 - 30", 1920, 1080, 1, 30, 30);
};
button3.onClick = function () {
app.project.items.addComp(
"vertical - 9:16 - 23.976",
1080,
1920,
1,
30,
23.976
);
};
button4.onClick = function () {
app.project.items.addComp("vertical - 9:16 - 24", 1080, 1920, 1, 30, 24);
};
button5.onClick = function () {
app.project.items.addComp("vertical - 9:16 - 30", 1080, 1920, 1, 30, 30);
};
button6.onClick = function () {
app.project.items.addComp("square - 1:1 - 23.976", 1080, 1080, 1, 30, 23.976);
};
button7.onClick = function () {
app.project.items.addComp("square - 1:1 - 24", 1080, 1080, 1, 30, 24);
};
button8.onClick = function () {
app.project.items.addComp("square - 1:1 - 30", 1080, 1080, 1, 30, 30);
};
button9.onClick = function () {
app.project.items.addComp(
"horizontal - 16:9 - 59.94",
1920,
1080,
1,
30,
59.94
);
};
button10.onClick = function () {
app.project.items.addComp("horizontal - 16:9 - 60", 1920, 1080, 1, 30, 60);
};
button11.onClick = function () {
app.project.items.addComp(
"vertical - 9:16 - 59.94",
1080,
1920,
1,
30,
59.94
);
};
button12.onClick = function () {
app.project.items.addComp("vertical - 9:16 - 60", 1080, 1920, 1, 30, 60);
};
button13.onClick = function () {
app.project.items.addComp("square - 1:1 - 59.94", 1080, 1080, 1, 30, 59.94);
};
button14.onClick = function () {
app.project.items.addComp("square - 1:1 - 60", 1080, 1080, 1, 30, 60);
};
//===============
showWindow(win);