Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


ScriptUI bug: Scrolling panel not visible outside of original bounds

Participant ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

Hey guys,

I'm trying to program a ScriptUI scrolling panel. I've got everything working, and when I move the scrollbar, the content I want to move DOES move, but as you can see, everything in that panel that was out of view before is still cut off and invisible.

Help?

 

Untitled-1.png

TOPICS
Scripting

Views

133

Likes

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

correct answers 1 Correct answer

Enthusiast , Apr 17, 2021 Apr 17, 2021
Thanks for posting your code. It would have been even better if the code ran rather than having to spend time constructing stuff around it to get it to run. By the time I'd done that I couldn't be sure I was seeing exactly the same issue you were. This is tricky stuff. Can't find the link now but one thing I read in my searching on this is that perhaps the panel can never be bigger than the display dimensions, so that approach might always have a size limitation even if it could be figured out. ...

Likes

Translate

Translate
Adobe Community Professional ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

How many images are there? Looks more like you are actually hitting a general limit liek the size of arrays in JavaScript and the panle doesn't render because of that...

 

Mylenium

Likes

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
Participant ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

It's not that. If I set the maximumSize of the panel to be smaller, it will show even less. If I don't set maximumSize at all, it has no problem rendering the whole thing.

Likes

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
Participant ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

var res = "group{orientation: 'column', alignment:['fill', 'fill'],\
				content: Group{alignment:['fill', 'fill'],\
				checks: Panel{orientation: 'column', alignment:['fill', 'fill'], spacing: 2,";
		var b, imports = [];
		for (var i in seqs)
		{
			b = !Boolean(seqs[i].lighting);
			res += 'c' + imports.length + ":Group{alignment:['fill', 'top'], btn: Checkbox{text: '" + seqs[i].label + "', alignment:['left', 'fill'], enabled:" + b + ', value:' + b + "},\
			v: StaticText{text: 'v" + numberFormat(seqs[i].version) + "', alignment:['right', 'fill']}},";
			imports.push(seqs[i]);
		}
		
		res += "}, scroll: Scrollbar{alignment:['right', 'fill']}},\
						footer: Group{alignment:['fill', 'bottom']\
						toggle: Button{text: 'Deselect All',  alignment:['left', 'fill']},\
						okBtn: Button{text: 'Import',  alignment:['fill', 'fill']},\
						},\
						lighting: StaticText{text: '*Disabled entries need their lighting flattened into a single image sequence using the Apply Palette script first.', properties: {multiline: true, resizeable: true}, alignment:['fill', 'fill']},\
						},\
				}";
		$w.grp = $w.add(res);
		var grp = $w.grp.content.checks;
		var scroll = $w.grp.content.scroll;
		scroll.maximumSize[0] = 15;
		grp.maximumSize[1] = 800;
		//$w.show();
		var height = (20 + grp.spacing) * imports.length;
		$w.resizeable = grp.resizeable = $w.grp.content.resizeable = true;
		var allChecks = function($f)
		{
			for (var i = imports.length - 1; i >= 0; i--)
				$f(grp['c' + i].btn, imports[i], i);
		};
		var color = $w.graphics.newBrush($w.graphics.BrushType.SOLID_COLOR,[28/255,29/255,26/255], 1);
		allChecks(function($b, $m, $i)
		{
			if ($i % 2) $b.parent.graphics.backgroundColor = color;
		});
		
		scroll.onChanging = function()
		{
			grp.location.y = this.value/100 * (grp.maximumSize.height - height);
			$w.onResize();
		};
		$w.grp.footer.okBtn.onClick = function()
		{
			var comp = getComp();
			if (!comp) return;
			app.beginUndoGroup('Import TGAs');
			app.beginSuppressDialogs();
			allchecks(function($btn, $import)
			{
				if ($btn.value) TGASequence.import($import.folder, comp);
			});
			app.endSuppressDialogs(false);
			app.endUndoGroup();
			$w.close();
		};
		$w.grp.footer.toggle.onClick = function()
		{
			if (this.text == 'Deselect All')
			{
				this.text = 'Select All';
				allChecks(function($btn)
				{
					$btn.value = false;
				});
			}
			else
			{
				this.text = 'Deselect All';
				allChecks(function($btn)
				{
					$btn.value = true;
				});
			}
			this.active = true;
			this.active = false;
		};
		$w.onClose = function()
		{
		}
		$w.onResizing = $w.onResize = function()
		{
			this.layout.resize();
		};

Likes

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
Enthusiast ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

Thanks for posting your code. It would have been even better if the code ran rather than having to spend time constructing stuff around it to get it to run. By the time I'd done that I couldn't be sure I was seeing exactly the same issue you were.

 

This is tricky stuff. Can't find the link now but one thing I read in my searching on this is that perhaps the panel can never be bigger than the display dimensions, so that approach might always have a size limitation even if it could be figured out.

 

Anyway, I found this solution where rather than moving the panel with the scrollbar you move the child elements inside it:

https://community.adobe.com/t5/after-effects/scrollable-panel-gets-truncated/m-p/8056993

 

And after much fiddling around I came up with this. As a shortcut I just recorded the initial location of each child element then offset it. I'm sure that cound be done better.

 

var seqs = new Array();
var temp;

for (var x= 0; x < 30; x++){
	temp = new Object();
	temp.label = "Entry "+x;
	temp.version = "3";
	seqs.push(temp);
}
	
var $w = new Window("palette", "test", undefined, {resizeable:true});

var res = "group{orientation: 'column', alignment:['fill', 'fill'],\
				content: Group{orientation:'row', alignment:['fill', 'fill'],\
				checks: Panel{orientation: 'column', alignment:['fill', 'fill'], spacing: 2,";
		var b, imports = [];
		for (var i = 0 ; i < seqs.length; i++)
		{
			b = !Boolean(seqs[i].lighting);
			res += 'c' + imports.length + ":Group{alignment:['fill', 'top'], btn: Checkbox{text: '" + seqs[i].label + "', alignment:['left', 'fill'], enabled:" + b + ', value:' + b + "},\
			v: StaticText{text: 'v" + seqs[i].version + "', alignment:['right', 'fill']}},";
			imports.push(seqs[i]);
		}
		
		res += "}, scroll: Scrollbar{alignment:['right', 'fill']}},\
						footer: Group{alignment:['fill', 'bottom']\
						toggle: Button{text: 'Deselect All',  alignment:['left', 'fill']},\
						okBtn: Button{text: 'Import',  alignment:['fill', 'fill']},\
						},\
						lighting: StaticText{text: '*Disabled entries need their lighting flattened into a single image sequence using the Apply Palette script first.', properties: {multiline: true, resizeable: true}, alignment:['fill', 'fill']},\
						},\
				}";
		$w.grp = $w.add(res);
		var grp = $w.grp.content.checks;
		var scroll = $w.grp.content.scroll;
		scroll.maximumSize[0] = 15;

		var height = (20 + grp.spacing) * imports.length;
		$w.resizeable = grp.resizeable = $w.grp.content.resizeable = true;

		var color = $w.graphics.newBrush($w.graphics.BrushType.SOLID_COLOR,[28/255,29/255,26/255], 1);

		$w.preferredSize.height = 200;

		$w.show();
		
		$w.bounds.height = 400;
		$w.layout.resize();

		var locationArray = new Array();
		for (x = 0; x < seqs.length; x++) {
			locationArray.push($w.grp.content.checks.children[x].location.y);
		}

		
		scroll.onChanging = function()
		{
			for (var x = 0; x < $w.grp.content.checks.children.length; x++) {
				$w.grp.content.checks.children[x].location.y = locationArray[x] + this.value/100 * (($w.grp.content.bounds.height - (height + 10)));	
			}
	
		};

		
		$w.onResizing = $w.onResize = function()
		{
			this.layout.resize();
			for (var x = 0; x < $w.grp.content.checks.children.length; x++) {
				$w.grp.content.checks.children[x].location.y = locationArray[x] + $w.grp.content.scroll.value/100 * (($w.grp.content.bounds.height - (height + 10)));	
			}	
		};

 

 

 

Likes

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
Participant ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

LATEST

That works, thanks!

Likes

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