====== About the script ====== * Purpose : Shows widgets in a custom number of columns where each one is automatically placed under the smallest column. * Author : [[https://plus.google.com/u/1/105066926163073195690|TrianguloY]] * Link: https://plus.google.com/u/1/105066926163073195690/posts/i2NLaKhYDi3 (with video with instructions) ====== How to use the script ====== The instructions to set it up are relatively simple: in a container (I recommend a panel) with the widgets detached, run the script from items/events specifying those script data: zoom - to decrease the number of columns unzoom - to increase the number of columns 1 (or any other positive integer) - to set exactly that number of columns 0 (or any other negative number) - to recalculate without changing the current number of columns Don't specify a data and it will update only the bounding box I recommend to run the script from the resumed event of the container without data. This will ensure the bounding box is always the good one. Notes: Only widgets will be moved, if you need to change this edit the script. The script has a little borders configuration that you can modify to your needs (in the video I have borders set) You can also specify the velocity and frequency of the animation. ====== Script code ====== <sxh javascript> //custom vars var topmargin=0; var rightmargin=100; var bottommargin=300; var leftmargin=50; var velocity=0.5; var frecuency=0; //universal vars var event=LL.getEvent(); var cont=event.getContainer(); //data computation var colum= parseInt(cont.getTag("columns")||"2"); var data=LL.getEvent().getData(); if(data==null){ var saved=cont.getTag("columns_prev"); if(saved!=null){ cont.setBoundingBox(new RectL(0,0,cont.getWidth(),parseInt(saved))); return; } }else if(data=="unzoom")colum+=1; else if(data=="zoom")colum=colum>1?colum-1:1; else colum=parseInt(data)>0?parseInt(data):column; cont.setTag("columns",colum); //script vars var used=[]; for(var t=0;t<=colum;++t)used[t]=topmargin; var items=cont.getItems(); var width=(cont.getWidth()-rightmargin-leftmargin)/(colum==0?1:colum); var prebottom=cont.getBoundingBox().getBottom()-cont.getHeight(); prebottom=prebottom<=0?0:cont.getPositionY()/prebottom; if(prebottom>1)prebottom=1; //for each item for(var t=0;t<items.getLength();++t){ //only widgets, can be changed var item=items.getAt(t); if(item.getType()!="Widget") continue; //scale computation var size=[item.getWidth(),item.getHeight()]; var scale=(colum==0)?1:(width/size[0]); var c=minVal(used); //set new position/scale move(item,[0,leftmargin+c*width,used[c],scale,scale]); used[c]+=size[1]*scale; } //set screen position var newbottom=used[maxVal(used)]+bottommargin; var pos=prebottom*(newbottom-cont.getHeight()); cont.setPosition(0,pos>=0?pos:0,1,true); //at last! cont.setBoundingBox(new RectL(0,0,cont.getWidth(),newbottom)); //save for the update run cont.setTag("columns_prev",newbottom); /// functions /// //returns the index of the minimum/maximum value of the array a function minVal(a){ var m=0; for(var t=0;t<colum;++t)if(a[t]<a[m])m=t; return m; } function maxVal(a){ var m=0; for(var t=0;t<colum;++t)if(a[t]>a[m])m=t; return m; } //custom lerp. It moves the item a bit and repeat, stops when finish, when LL is not active or when another instance of the script runs function move(item,dat){ //another script is running if( colum!=cont.getTag("columns")){return;} //actual data var now = [ 0, item.getPositionX(), item.getPositionY(), item.getScaleX(), item.getScaleY() ]; //calculate the next step var cut=[0,0.5,0.5,0.01,0.01]; var step = []; var flag = ""; for(var j=dat.length-1;j>0;--j){ step[j]=dat[j]-now[j]; if(Math.abs(step[j])>cut[j]){ flag+=j; if (cut[j]==1){ step[j]=now[j]+(step[j]>0?Math.max(step[j]*velocity,cut[j]):Math.min(step[j]*velocity,-cut[j])); }else step[j]=now[j]+step[j]*velocity; }else step[j]=dat[j]; } //if nothing changed or LL paused if( flag=="" || LL.isPaused()){ item.setScale(dat[3],dat[4]); item.setPosition(dat[1],dat[2]); return; } //sets the next step and repeat item.setScale(step[3],step[4]); //var s=center(dat); item.setPosition(step[1],step[2]); velocity=(1+999*velocity)/1000; setTimeout(function(){ move(item,dat);},frecuency==0?0:1000/frecuency); } </sxh>
