Distribute repeater as a radial

[rj_uk]

I have been trying to create a radial menu where the repeater is distibuted in a circle. Similar to the following image…

[ATTACH=CONFIG]11710[/ATTACH]

So following this formula

radiusMath.cos(2Pi/number of rows)*number of row

I am able to position the x coordinates. However as the y is defined by the layout of the repeater to automatically stack I have been unable to get the y coordinate to work with the following.

[[(LVAR1.height/2)-(LVAR2.height/2) +150 * Math.sin((2*3.14159265359/LVAR3)*item.Name)]]

Here is my RP.
radial tests.rp (58.4 KB)

[josephxbrick]

Hi!

In order to manipulate the natural vertical location of a repeater row (or the natural horizontal location if the repeater layout is horizontal), you must first turn off the repeater property “Fit to Content in HTML.”

[Edit]

Also, keep in mind that the natural vertical position of an item is:

(Item.index - 1) * LVAR_row.height

So subtracting that amount from the y location of a repeater row will locate all rows at y=0. This will give you a starting point for your absolute positioning.

Also, you’ll want to bring each item to front if you want them to be clickable.

PS: if you get it working, please post it!

[josephxbrick]

Hi again!

Assuming:

[ul]
[li]ellipse = local variable referring to the circle[/li][li]rep = local variable referring to the repeater[/li][li]panel = local variable referring to the non-fit-to-content dynamic panel containing the repeater[/li][li]The repeater property Fit to Content in HTML is false (unchecked)[/li][/ul]
This expression should give you the y location of each ellipse in the repeater:

[[ -(Item.index - 1) * ellipse.height + panel.height/2 - ellipse.height/2 + (panel.height/2 - ellipse.height/2) * Math.sin((2*3.14159/rep.itemCount)*Item.index)]]

Breaking that down:

[ul]
[li]-(Item.index - 1) * ellipse.height – gives the ellipse a starting point of y=0[/li][li]panel.height/2 - ellipse.height/2 – both the vertical origin (center) and the radius of the circle[/li]li*Item.index – rep.itemCount = number of rows; Item.index = current row[/li][/ul]

[josephxbrick]

Hi!

Try this.

Live sample

Note: the “-3.14159/2 - 2*3.14159/rep.itemCount” in the sin/cos functions is what moves the first item to the top of the circle.

file: circular-repeater.rp (61.7 KB)

[rj_uk]

Thank you very much. I had tried to set the y to absolute 0 in my experimentation but suspect I was getting the parenthesis wrong.

-(Item.index - 1) * ellipse.height

Thank you for the additional next step too; aligning the first item at 0°.

[Anthony_Axure]

[Anthony_Axure]