widget columns
widget columns
Maybe you remember a video of my home screen one year ago. There I showed this script in action, however it had a workaround for a problem lightning had in the past, you couldn’t specify a custom bounding box.
Since one or two version before the current one, this is now possible. I planned to release this some months ago, but in the end I encounter another problem, and I couldn’t post it.
Now it’s time to do so.
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.
]]>
D5 Creation
< ![CDATA[
//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
//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
return m;
}
function maxVal(a){
var m=0;
for(var t=0;ta[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);
}
]]>
< ![CDATA[
Top cool
]]>
< ![CDATA[
Possible to use a folder ?
I’ve set in Resumed and I don’t have zoom and unzoom
]]>
< ![CDATA[
You can use a folder, yes. But I don’t recommend it because it will stretch. A panel in the folder is a good idea.
You mean the buttons? You need to add them! 😛
]]>
< ![CDATA[
TrianguloY oh lol
With zoom and unzoom names ?
]]>
< ![CDATA[
Not necessary, only the data of the script as I describe in the post
]]>
< ![CDATA[
TrianguloY are you using 0 in your example or 1 ?
]]>
< ![CDATA[
Data set here : just zoom
And unzoom
But seems to be not working
]]>
< ![CDATA[
TrianguloY my widgets just disappear on a Folder
]]>
< ![CDATA[
Working on Panel
Pierre Hébert Is it possible to add bindings for Panel on a next version ?
]]>
< ![CDATA[
TrianguloY seems only working when Detach from grid
When attached ,the widgets disappear
]]>
< ![CDATA[
Hmm, true, I forgot to say that. Edited
]]>