Customizable Wheel of items
Customizable Wheel of items
First Bogdan Tautu wrote the script to put shortcuts in a circle, then he improved it to make a rotating one (availables in the wiki)…I decided to go a bit far modifying it. This is a customizable wheel of items. It can be improved more, but I think this is enough.
This script will use all the items in the container, that’s why I recommend to use a panel.
Challenge to scripters: can you imagine how I made to rotate the items relative to the wheel (so they always look to the center) without looking at the script?
Settings:
– X position: -1 left ; 0 center ; 1 right
– Y position: -1 bottom ; 0 center ; 1 top
– Rotation: the rotation the items will have relative to itself (recommended 0 or 180)
– Sensitivity: the velocity of rotating (the more, the faster)
Instructions:
– copy paste the script.
set it in the ‘position changed’ of the panel (or desktop).
– IMPORTANT: pin the items, and detach them from the grid.
– In the panel settings, check the ‘no scroll limit’ under scroll options.
– Wheeeeeeeel
Of course you can ask in the comments any problem you could have.
—————————————–
/*Config: */
var h = -1; //horizontal alignment (-1 , 0 , 1 )
var v = 0; //vertical alignment ( -1 , 0 , 1 )
var r = 0; //rotation offset ( 0 = default) in angles, not very implemented (0 or 180 recommended)
var f = 2; //sensitivity
var event = LL.getEvent();
var desktop = event.getContainer();
var a = desktop.getItems();
var na = a.getLength();
var radius = Math.min( desktop.getHeight()/ (v==0?4:2) , desktop.getWidth()/ (h==0?4:2) );
var alt = 0.5;
var size = [ radius*(2-alt)*Math.PI/na , radius*2 ];
var desf = (desktop.getPositionX()*(v>0?-1:1)+desktop.getPositionY() *(h>0?-1:1) )*Math.PI/desktop.getWidth();
desf*=f;
for ( var i=0; i var angle = Math.PI*2*i/na-desf; var x = Math.cos( angle -Math.PI/2 ) * radius; var y = Math.sin( angle -Math.PI/2 ) * radius; var rot = angle*180/Math.PI+r; x+= (h<0? 0 : desktop.getWidth()/ (h==0? 2 : 1) ) ; y+= (v>0? 0 : desktop.getHeight()/ (v==0? 2 : 1) ); x-= size[0]/2; y-= size[1]/2; var t = a.getAt(i); t.setRotation(0); t.setSize(size[0] ,size[1]); t.setPosition(x, y); t.setRotation(rot); }
D5 Creation
< ![CDATA[
Noooo, you posted the script already 🙁 i was thinking about the solution with trigonometric…
]]>
< ![CDATA[
I can hide it…or just don’t look it.
(Hint: it can be done with trigonometric, but the best answer is extremely easy)
]]>
< ![CDATA[
Well, i think the easier solution is to start with one icon at any angle and for the next icon add 360/(numberOfIcons). If it is over 360 subtract 360.
I’m now looking at your script.
]]>
< ![CDATA[
I like it!
Must improve! Must get home to do it tho’
]]>
< ![CDATA[
It’s coded a bit different, but it’s the same thought.
]]>
< ![CDATA[
Wow!
]]>
< ![CDATA[
If you align the wheel in the center of the screen and try to spin 360° it behaves not like a wheel…
Scrolling is only on top and right side in the right direction…
]]>
< ![CDATA[
There is a main problem: when you place an item, you place the top-left corner. If the item is rotated…you need hard understanding of trigonometry to know the center of the item. However, the solution is very easy.
Lukas Morawietz: Unfortunately I can’t do anything with that. When you scroll you can get the position of the screen in the panel, but not the position of the finger. (If I’m wrong, please tell me!) However, I made that, when you place the wheel on top and or right, the direction is inversed 😉
]]>
< ![CDATA[
For those who want to try:
Challenge: Made a script that rotate an item. Just that. It needs to be rotated from the center of the item.
If you try this you will understand the difficulty this have. 😉
]]>
< ![CDATA[
TrianguloY translare, rotate, translate back. Easy.
]]>
< ![CDATA[
Bogdan Tautu not really sure about it. Did you tried it? (but you are near the solution. Don’t post it here, use hangouts. So others can think)
]]>
< ![CDATA[
Man, you guys kill me!
]]>
< ![CDATA[
TrianguloY LL.getEvent().getTouchScreenX() LL.getEvent().getTouchScreenY() should return touch position. (i didn’t try)
But you have to detect not only the touch position, but also the scrolling direction…
E.g. scrolling from top left to top right should spin right, scrolling from top left to bottom left should spin left.
]]>
< ![CDATA[
Edit: I made a mistake with the challenge, rotating an item is as easy as use .setRotation
I mean to rotate an item while you want it to be at an exact position, so you need to add ,setPositon(x,y) (for example 0,0) in the challenge script. Now, try to rotate it.
]]>
< ![CDATA[
Lukas Morawietz if you find out how I can compute finger touch position do post the script
]]>
< ![CDATA[
Lukas Morawietz wait! They return the values? … Yes they do. I tried this in firsts alphas, and I thought they don’t.
Thanks! But as Bogdan Tautu said is not easy to compute it. I’ll try, but can’t promise anything.
]]>
< ![CDATA[
Challenge reformulated:
Write a script that rotate the item in place AND that set their position also (you can simply put it in the 0,0 or anything you want.
So, the script will need to have at minimum:
item.setPosition(x,y)
item.setRotation(rotation)
(Or at the opposite if necessary)
]]>
< ![CDATA[
TrianguloY
var e=LL.getEvent();
var c=e.getContainer();
var d=LL.getCurrentDesktop();
var x=(e.getTouchScreenX()-c.translateIntoScreenCoordX(0)-c.getPositionX());
var y=(e.getTouchScreenY()-c.translateIntoScreenCoordY(0)-c.getPositionY());
Android.makeNewToast(x+”,”+y+””,true).show();
This script shows the position tapped in a panel, maybe something can be done with it to improve wheeling
The values go from 0 to the width/height of the panel.
]]>
< ![CDATA[
Lukas Morawietz It doesn’t seem to work in my setup.
]]>
< ![CDATA[
Lukas Morawietz I don’t know what event().getTouchScreenX() return, but it is not the position of the finger.
Pierre Hébert: we need your help to understand this. Is the position of the panel?
]]>
< ![CDATA[
Bogdan Tautu I just want to add: it does work for me at in a tap event.
I think it’s again the problem with swiping vs tapping
]]>
< ![CDATA[
BTW: format mistake in base post.
]]>
< ![CDATA[
Hello I try to install the script but I can not get the rotation. When you say copy and paste the script and put it in [change of position] or do I place I do not understand
]]>
< ![CDATA[
mickael delarue you need to go to the container settings, events and actions, position change, run script –> select this script.
Also don’t forget the other steps (pin items and detached for the grid, no scroll limit)
]]>
< ![CDATA[
Thank You very much and Good job
]]>
< ![CDATA[
took a bit of a break from LLX, but this was the first thing i dug through g+ for, your wheel is pro ty 🙂
]]>
< ![CDATA[
Is there any way for this wheel or Bogdan Tautu’s wheel to detect the orientation of the wheel or which wheel is at 0°, 90°, etc? I’m envisioning a desktop with a spinning wheel which opens different folders based on the orientation of the wheel. Is this remotely possible?
]]>
< ![CDATA[
One can get the rotation angle from the position of the desktop, than just open whatever you want.
]]>
< ![CDATA[
How do you want to open that folder? From another item? When the folder stops rotating?
]]>
< ![CDATA[
TrianguloY Ideally, when it stops rotating
]]>
< ![CDATA[
And closing it when you start rotating the wheel again?
]]>
< ![CDATA[
That would work. The other though it would need is to snap to the different positions so it couldn’t stop between items
]]>
< ![CDATA[
Brian King that….is more difficult than it seems, because you don’t know when the finger stops sliding, so it will interfere.
I don’t have enough time now, and I don’t know when I’ll be able to try this, but for Lukas Morawietz and Bogdan Tautu (and others) this is what you can try if you want.
Instead of using the container scrolling as the input, place an invisible item above the wheel and use the Touch event.
When the user starts scrolling close all folders and use the input to rotate the wheel.
When the user release the finger use timeouts to move the wheel to an absolute position (an item at a selected angle) and then launch it.
I know it’s not an easy and good solution, but I can’t think on another one. If you do please tell me.
]]>
< ![CDATA[
TrianguloY I get it. I was just wondering if it were even possible. I know very little about scripting so I always appreciate what you guys do. Thanks for giving it some consideration.
]]>
< ![CDATA[
TrianguloY i have been busy lately but will try to help out tomorrow …
]]>
< ![CDATA[
Ok! So this is what I’ve done so far:
1) Panel containing 5 apps.
2) Each app icon is pinned & detached from grid.
3) Copied the script and pasted it in “panel settings > events & actions > position change > run a script > paste”
4) No scroll limit ticked in panel settings.
I still can’t get the panels to rotate in a circle… 😞
]]>
< ![CDATA[
Does the panel have the scroll direction not set to none?
Can you run other scripts?
]]>
< ![CDATA[
I’ve managed to get the script to work. But only half of the wheel shows up on the bottom edge of the panel. Is there any way to get the complete circle to show in the middle of the panel? Also, how do you change the speed of rotation?
]]>
< ![CDATA[
As you can probably tell, this is the first time I’ve used a script. So please be patient… ☺
]]>
< ![CDATA[
Also (and this is unrelated to this script) I’m working on a homescreen with multiple tabs each with its own sub-menu. Is there a script that will push the other tabs down when it’s clicked so as to reveal the sub-menu? I don’t want the sub-menu to overlap the unused tabs. I want them to be pushed to one side.
]]>
< ![CDATA[
To show the wheel in the center change the first line where it says v=-1 to v=0 (also h if it is not in 0).
To change the speed change the f=2 to something else. Try 1, 0.5, …
And to the other script, I think gerd reuter made a similar one in the past.
]]>
< ![CDATA[
TrianguloY Worked perfectly… 🙂 And thanks for the tip. I’ll ask gerd reuter.
]]>
< ![CDATA[
I’ve been tryng to figure out how to increase the radius of the wheel. Any suggestions?
]]>
< ![CDATA[
Gabriel Soriano if I remember correctly the radius is set according to the size of the panel. So if you resize the panel the radius should change.
]]>
< ![CDATA[
Thanks, I was hoping I could have a minimalist panel with larger icons. Thanks again. I have no idea when it comes to writing scripts. Guess it’s time to learn.
]]>