Helloooow wise scripting peoplez.
I've been gnawing my fingernails over this problem the past couple of days, and still haven't found a solution. Here goes:
I've tried to make a window(or actually panel, because in the end it should be run from AE>Window>scriptname.jsx ), with a scrollbar, that can scroll through content in a group next to it. I can get the group to scroll and all that, but the problem, right now is, that after x items in the group, the last ones get clipped off. Like this (there's supposed to be 500 buttons):
The only way I've been able to get the "inner" group to get bigger is by not using any of the align properties and set the .size manually. I know the content is there because the last item shows up, when I'm moving the last items location[1] upwards until it reaches the top of the group. I tried making the layout refresh (layout.layout(true);layout.resize()) at every call of the onChanging() function of the slider, but w/o success. Reading lots of lovely forum posts and discussion by @Marc Autret and other long time scriptUI/extendscript users has this far been without luck.
TL;DR: I'm trying to make a group with lots of content that I can scroll through with a scrollbar.
here's the code snippet, hopefully well enough commented :
{
//scroller test
// uncomment the temp path (replace with some image file path) and the lines inside the populateGrid() function to reproduce my problem better
// I'm ussing an image 512x288 pixels
//var tempPath = "/Volumes/Verbinski/02_SCRIPTING/After_Effects/stockholm/ROOT/EXPLOSIONS/Fireball_side_01/Thumbs/Fireball_Side_01_024.jpg";
// create window
var mWin = new Window('palette');
mWin.size = [500,500];
mWin.orientation = 'row';
// If you like it, then you better put a scroller on it.
var scroller = mWin.add('ScrollBar');
scroller.size = [20,mWin.size[1]-40]
scroller.minvalue = -5;
scroller.value = scroller.minvalue;
scroller.maxvalue = 10000; // tried changing this to all sorts of interesting numbers.
//This should move the group, created further down.
scroller.onChanging = function(){
grid.location = [grid.location[0],-scroller.value];
}
// "Boundary" for grid (see below)
var gridArea = mWin.add('panel',undefined,'gridArea');
gridArea.size = [mWin.size[0]-40,mWin.size[1]-40];
// The grid... a digital fronteer... and also container of stuff
var grid = gridArea.add('panel',undefined,'grid');
grid.size = [gridArea.size[0]-20,9000000000] // no matter how high I put this, it doesn't change a thing
// Just an array for all the images to go
var clips = [];
// Total height gets calculated in the populateGrid function.
var totalHeight = 0;
function populateGrid(rows){
var img;
for(i=0;i<rows;i++){
// img = grid.add('image',undefined,tempPath);
// clips.push(img);
grid.add('button',undefined,i);
}
for(i in clips){
clips.location = [0,(clips.image.size[1]*i)]
}
// totalHeight = (img.image.size[1]+grid.spacing)*rows;
// grid.size = [grid.size[0],totalHeight]
// scroller.maxvalue = totalHeight/2;
}
// put x number of buttons/images into the grid
populateGrid(500);
// shwo to window
mWin.show();
mWin.center();
}
Reaally hope someone in here sees this and can help me out.
Cheers, Fynn.
//my system settings:
iMac 5K retina, 4 GHz Intel Core i7
32GB RAM, 512GB solid state HDD
OSX Yosemite: 10.10.4
AE: CS6 || CC 2014: 13.1.1.3
1 Correct answer
Aaalrighty, guys. I seem to have cracked it.. Sort of..
David, your version worked pretty well, I just modified it a little to have the right math.
The scroller is working as expected now and the scroller.maxvalue is calculated by ((number of items)*height of first item).
Everything works really well until I start using the auto layout manager. The 'fill' option at least makes it really hard to figure out the final height of the inner objects. So they should be set consequently.
anyways, here is my
...
17
Replies
I'm not noticing any clamp on UI size that might be choking the height. It appears there may be a draw size limit to containers. I changed your panel to a group and squeezed an extra half button after 33, but nothing more. I'll keep looking into this. Your script build style is different then what I am use to, so I am translating in my head what's doing what. 
I just finished replicating your code in a more familiar way to my mind, and I am getting the same exact results, but only in column orientation. When I flip it to row, I can get up to 41 buttons showing before hitting the size limit.
This unfortunately seems to be a container size limitation of some kind. Perhaps Todd or another developer could expand on this.
Max width I could get:
Max height:
Here is my version of your code...
{
function fireball(thisObj){
function fireball_buildUI(thisObj){
var pal = (thisObj instanceof Panel) ? thisObj : new Window("palette", "Fireball", undefined, {resizeable:true});
if (pal != null){
var res ="group{orientation:'row', alignment:['fill','fill'], alignChildren:['fill','fill'],\
scroller: Scrollbar{alignment:['left','fill']},\
gridArea: Panel{orientation:'column', text:'gridArea',\
grid: Panel{orientation:'column', text:'grid', alignment:['left','fill']},\
},\
}";
pal.grp = pal.add(res);
//Variables
var scroller = pal.grp.scroller;
var gridArea = pal.grp.gridArea;
var grid = pal.grp.gridArea.grid;
var clips = [];
var totalHeight = 0;
//Defaults
scroller.size = [20, -1];
scroller.value = scroller.minvalue;
scroller.maxvalue = 10000;
populateGrid(500);
//OnChanging
scroller.onChanging = function(){
grid.location = [grid.location[0],-scroller.value];
}
//Functions
function populateGrid(rows){
for(i=0;i<rows;i++){
grid.add('button',undefined,i);
}
}
pal.layout.layout(true);
pal.grp.minimumSize = pal.grp.size;
pal.layout.resize();
pal.onResizing = pal.onResize = function() {this.layout.resize();}
}
return pal;
}
var fbPAL = fireball_buildUI(thisObj);
if (fbPAL != null){
if (fbPAL instanceof Window){
fbPAL.center();
fbPAL.show();
}
}
}
fireball(this);
}
David, i tried your code with an image of size 520x288 (like in the thread).
The palette displays well upon launch, but all groups except the first one disappear after i start scrolling.
Correct, that is where the Math game starts. I am trying to figure that part out. I was able to get something more working/less broken later in the day. Still not right though, but I think it's getting closer to what Fynnay wants.
This test setup starts to get it solved sorta. For me when I launch it, only the first item moves, but only because I've placed the "10" value on lines #35 and #39. That value needs to be something similar to the linear expression linear(sliderVal, sliderMin, sliderMax, groupMaxY, groupMinY). I'm just not figuring out the math correctly though. Always been a week spot for me.
{
function fireball(thisObj){
var tempPath = "YOUR IMAGE PATH HERE";
function fireball_buildUI(thisObj){
var pal = (thisObj instanceof Panel) ? thisObj : new Window("palette", "Fireball", [0, 0, 500, 500], {resizeable:true});
if (pal != null){
var res ="group{orientation:'row', alignment:['fill','fill'], alignChildren:['fill','fill'],\
scroller: Scrollbar{alignment:['left','fill']},\
gridArea: Group{orientation:'column', text:'gridArea',\
},\
scrollVal: StaticText{text:'Scroll value', properties:{multiline:true}},\
}";
pal.grp = pal.add(res);
//Variables
var scroller = pal.grp.scroller;
var gridArea = pal.grp.gridArea;
var scrollDiary = 0;
//Defaults
scroller.size = [20, -1];
scroller.value = scroller.minvalue;
//~ scroller.maxvalue = 10000;
populateGrid(5);
//OnChanging
scroller.onChanging = function(){
var kids = gridArea.children;
var kidsLen = kids.length;
var oldYloc;
for(var k=0; k<kidsLen; k++){
oldYloc = kids
.location[1]; if(scroller.value>scrollDiary){
pal.grp.scrollVal.text = "Negative "+scroller.value + "\nScrollDiary" + scrollDiary; //TEMP Readout of values
kids
.location = [kids .location[0], oldYloc-10]; //10 needs to be a linear style calc scrollDiary = scroller.value;
}else if(scroller.value<scrollDiary){
pal.grp.scrollVal.text = "Positive "+scroller.value + "\nScrollDiary" + scrollDiary; //TEMP Readout of values
kids
.location = [kids .location[0], oldYloc+10]; //10 needs to be a linear style calc scrollDiary = scroller.value;
}
}
}
//Functions
function populateGrid(rows){
var newGrp, yourList;
for(i=0;i<rows;i++){
newGrp = gridArea.add('group',undefined,i);
newGrp.orientation = "row";
newGrp.add('image', undefined, tempPath);
newGrp.add('button', undefined, i);
yourList = newGrp.add('listbox', undefined);
for(var l=0; l<4; l++){
yourList.add('item', l);
}
}
}
pal.layout.layout(true);
pal.grp.minimumSize = pal.grp.size;
pal.layout.resize();
pal.onResizing = pal.onResize = function() {this.layout.resize();}
}
return pal;
}
var fbPAL = fireball_buildUI(thisObj);
if (fbPAL != null){
if (fbPAL instanceof Window){
fbPAL.center();
fbPAL.show();
}
}
}
fireball(this);
}
AdChoices