Zoom scrolling
Zoom scrolling
(Updated from the old alpha version)
This script will place the items in an infinite looping row, so the camera movement is as smooth as possible. The items won’t overlap, you can click them.
Instructions:
– copy paste this script and set it at the position change event of a container (it will use all the items inside, so better a panel)
– the items will need to be not pinned and detached from the grid.
– Set the scrolling to free scroll.
It automatically adapts if a new item is added or removed. However you will need to scroll one loop to update.
Settings: change them as you want
– maxsize: the maximum size the items will have
– see: the number of items you will be able to see at once
———————————————-
/*Config */
var see = 5;// Distance between items
var maxsize = 3; //Max scale of the item
var desk = LL.getEvent().getContainer();
var v = desk.getHeight()/2;
var h = desk.getWidth()/2;
var pos = desk.getPositionX();
var items = desk.getItems();
var n = items.getLength();
var distance = 2*h/see;
for(var i=0;i var p = Math.floor(pos/distance-n/2 +1); var arg = (p+i)%n; while(arg<0)arg+=n; var item = items.getAt(arg); var size = pos-(p+i)*distance ; if(size<0)size=-size; size=maxsize-( size /h*maxsize ); if(size<0.1){ size =0.1; item.setPosition( h+(p+i)*distance ,v); item.setSize(distance/maxsize,desk.getHeight()/maxsize); } item.setScale(size,size); /*items.getAt(arg).setLabel(items.getAt(arg).getWidth() ); */ }
D5 Creation
< ![CDATA[
I think the out-commented line isn’t needed 😀 seems to be debug-code, and it is formatted fat because of the stars
]]>
< ![CDATA[
You are totally right 😉 but I prefer to leave it there….oh no! I tried to avoid the Google format…arg.
Thanks
]]>
< ![CDATA[
Really Google…Really? ;_;
]]>
< ![CDATA[
TrianguloY change it to a //comment
]]>
< ![CDATA[
Google format isn’t best. I prefer html-tags or BB-code…
Now that I’ve seen the video: it looks amazing! I just need a place where I can use it in my screen…
]]>
< ![CDATA[
Ren Shore thanks, but I prefer to keep the */ (it was a script I made in the alpha….well, I want to keep it even thought it is updated)
[It is shown good now, right? …Right? ]
]]>
< ![CDATA[
TrianguloY yes it is.
]]>
< ![CDATA[
how did you get it to show right?
]]>
< ![CDATA[
With spaces/line breaks you can interrupt the format (sometimes)
]]>
< ![CDATA[
The trick is to put the ‘*’ once at the right, once at the left
/*blablablabla */
or
/* blablablablabla*/
]]>
< ![CDATA[
TrianguloY have you ever seen the effect of adding Z-order to it?
]]>
< ![CDATA[
The items will change the order of appearance…if I’m not wrong
]]>
< ![CDATA[
Yep, that is what I thought. It seems to brake the complete effect however.
]]>
< ![CDATA[
Jappie Toutenhoofd not exactly. Yes, they seem wrong, but it is because the items are placed only when they are small, to avoid overcomputing.
Just do a loop and they will reorder itself.
]]>
< ![CDATA[
Fabrice Fournier yes it is. Check ‘no scroll limit’ in scroll settings. Otherwise you won’t be able to scroll more.
]]>
< ![CDATA[
Thks yes now it works 😀 very nice!
]]>
< ![CDATA[
How can I copy the script TrianguloY . I can’t seem to copy it from here. Is there a link.
]]>
< ![CDATA[
I thought it was…but no.
Anyway you can just copy this (click, copy)
/*Config */
var see = 5;// Distance between items
var maxsize = 3; //Max scale of the item
var desk = LL.getEvent().getContainer();
var v = desk.getHeight()/2;
var h = desk.getWidth()/2;
var pos = desk.getPositionX();
var items = desk.getItems();
var n = items.getLength();
var distance = 2*h/see;
for(var i=0;i
var p = Math.floor(pos/distance-n/2 +1);
var arg = (p+i)%n;
while(arg<0)arg+=n;
var item = items.getAt(arg);
var size = pos-(p+i)*distance ;
if(size<0)size=-size;
size=maxsize-( size /h*maxsize );
if(size<0.1){
size =0.1;
item.setPosition( h+(p+i)*distance ,v);
item.setSize(distance/maxsize,desk.getHeight()/maxsize);
}
item.setScale(size,size);
/*items.getAt(arg).setLabel(items.getAt(arg).getWidth() ); */
}
]]>
< ![CDATA[
TrianguloY hi there I’ve been looking at your scripts and I seem to like this one a lot
🙂
Does it still work with the current version of llx?
]]>
< ![CDATA[
You can try 🙂
This night I’ll test myself
And thanks
]]>
< ![CDATA[
OK 🙂
Will do and thanks
]]>
< ![CDATA[
Khaleel McGeachy try this instead. There are some strange things regarding the position:
/*Config */
var see = 5;// items you will see
var maxsize = 2; //Max scale of the item
var desk = LL.getEvent().getContainer();
var v = desk.getHeight()/2;
var h = desk.getWidth()/2;
var pos = desk.getPositionX();
if(h==0)return;
var items = desk.getItems();
var n = items.getLength()
var distance = 2*h/see;
for(var i=0;i
var p = Math.floor(pos/distance-n/2 +1);
var arg = (p+i)%n;
while(arg<0)arg+=n;
var item;
try{
item = items.getAt(arg);
}catch(e){alert(“Error: arg=”+arg+” p=”+p+” pos=”+pos+” distance=”+distance+” h=”+h);return;}
var size = pos-(p+i)*distance ;
if(size<0)size=-size;
size=maxsize-( size /h*maxsize );
if(size<0.1){
size =0.1;
}
item.setSize(distance/maxsize,2*v);
item.setScale(size,size);
item.setPosition( h+(p+i) *distance -distance/maxsize/2*size ,v-v*size);
/*items.getAt(arg).setLabel(items.getAt(arg).getWidth() ); */
}
]]>
< ![CDATA[
TrianguloY OK I’ll try this one as soon as possible
😀
]]>
< ![CDATA[
TrianguloY OK it sets the layout of the zoom scroll but it doesn’t scroll the icons
]]>
< ![CDATA[
Khaleel McGeachy did you follow the instructions? (In the original post)
]]>
< ![CDATA[
TrianguloY yup I did 🙂
]]>
< ![CDATA[
Could you explain with more details what is the problem?
]]>
< ![CDATA[
I tried to use your script to make a vertical scroll bar. unfortunately it did not work, the items are always horizontally arranged 🙁 can you tell me what to change in the script so that i can build me a vertical scroll bar at the right border?
]]>
< ![CDATA[
I didn’t tested, it may make an error. But try this:
———————————————-
/*Config */
var see = 5;// Distance between items
var maxsize = 3; //Max scale of the item
var desk = LL.getEvent().getContainer();
var v = desk.getHeight()/2;
var h = desk.getWidth()/2;
var pos = desk.getPositionY();
var items = desk.getItems();
var n = items.getLength();
var distance = 2*v/see;
for(var i=0;i
var p = Math.floor(pos/distance-n/2 +1);
var arg = (p+i)%n;
while(arg<0)arg+=n;
var item = items.getAt(arg);
var size = pos-(p+i)*distance ;
if(size<0)size=-size;
size=maxsize-( size /v*maxsize );
if(size<0.1){
size =0.1;
item.setPosition( h ,v+(p+i)*distance );
item.setSize(desk.getWidth()/maxsize,distance/maxsize);
}
item.setScale(size,size);
/*items.getAt(arg).setLabel(items.getAt(arg).getHeight() ); */
}
]]>
< ![CDATA[
Thank you. It works in “some” way.
– i cant change panel size (might be fixable by changing the size values of the items in the script)
– the items are much too big (i can see 3 items at once)
– item sizes change while scrolling but the pattern is just not right (but it looks quite funny)
]]>
< ![CDATA[
This works (tested)
Remember thatyou can change the first two numbers, the ‘see’ means the number of items you can see at most (it was 3, that’s why you saw only 3) I changed it to 5, but change it as you want.
The maxsize is only in case all items are very big or very small.
About the panel size: make sure you are in edit mode of the desktop and you will be able to change the panel’s size as a normal item.
If you have more questions just ask 🙂
———
/*Config */
var see = 5;// Items you can see
var maxsize = 1; //Max scale of the item
var desk = LL.getEvent().getContainer();
var v = desk.getHeight()/2;
var h = desk.getWidth()/2;
var pos = desk.getPositionY();
var items = desk.getItems();
var n = items.getLength();
var distance = 2*v/see;
for(var i=0;i
var p = Math.floor(pos/distance-n/2 +1);
var arg = (p+i)%n;
while(arg<0)arg+=n;
var item = items.getAt(arg);
var size = pos-(p+i)*distance ;
if(size<0)size=-size;
size=maxsize-( size /v*maxsize );
if(size<0.1){
size =0.1;
}
item.setScale(0.1,0.1);
item.setPosition( h,v +(p+i)*distance );
item.setSize(desk.getWidth()/maxsize,distance/maxsize);
item.setScale(size,size);
/*items.getAt(arg).setLabel(items.getAt(arg).getHeight() ); */
}
]]>
< ![CDATA[
Yes! Thank you, it works. Sorry it was actually my fault. i didn’t use a panel but a folder as sidebar 🙂
]]>