You are not logged in.

1

Wednesday, April 4th 2018, 10:55am

Skin-menu needed

Hi
I am looking for skin or menu like
http://www.ideamake.cn/projects/fangchan/slcs/vr/index/

Bottom left menu
any help?

thanks
Bhupender

2

Thursday, April 5th 2018, 12:06pm

Hi,

should be not that difficult - just a few layers and an action to move them from one location to another one...

Here an example - I have quickly tried rebuilding such menu:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<layer name="cm" type="text" html="Test" css="text-align:center;" width="40" height="40" align="leftbottom" edge="center" x="40" y="40" vcenter="true" bgroundedge="20" zorder="10" rotate="-45" state="0" onclick="togglecirclemenu();" />

<layer name="m1" type="text" html="M1" css="text-align:center;" width="40" height="40" align="leftbottom" edge="center" x="40" y="40" vcenter="true" bgroundedge="20" zorder="9" alpha="0" onclick="togglecirclemenu(close);" />
<layer name="m2" type="text" html="M2" css="text-align:center;" width="40" height="40" align="leftbottom" edge="center" x="40" y="40" vcenter="true" bgroundedge="20" zorder="9" alpha="0" onclick="togglecirclemenu(close);" />
<layer name="m3" type="text" html="M3" css="text-align:center;" width="40" height="40" align="leftbottom" edge="center" x="40" y="40" vcenter="true" bgroundedge="20" zorder="9" alpha="0" onclick="togglecirclemenu(close);" />
<layer name="m4" type="text" html="M4" css="text-align:center;" width="40" height="40" align="leftbottom" edge="center" x="40" y="40" vcenter="true" bgroundedge="20" zorder="9" alpha="0" onclick="togglecirclemenu(close);" />
<layer name="m5" type="text" html="M5" css="text-align:center;" width="40" height="40" align="leftbottom" edge="center" x="40" y="40" vcenter="true" bgroundedge="20" zorder="9" alpha="0" onclick="togglecirclemenu(close);" />

<layer name="bg" type="container" align="lefttop" width="100%" height="100%" bgcapture="true" handcursor="false" bgcolor="0x00000" bgalpha="0.5" zorder="8" autoalpha="true" alpha="0.0" onclick="togglecirclemenu(close);" />

<action name="togglecirclemenu" scope="local" args="setstate">
    if(layer[cm].state == 0 OR setstate == 'open',
        set(layer[cm].state,1);
        callwith(layer[cm], tween(rotate, +45));
        callwith(layer[m1], tween(x|y|alpha,  40|172|1, 0.5,default, tween(rotate,360,0.2,default,set(rotate,0)) ) );
        callwith(layer[m2], tween(x|y|alpha,  92|165|1, 0.5,default, tween(rotate,360,0.2,default,set(rotate,0)) ) );
        callwith(layer[m3], tween(x|y|alpha, 140|140|1, 0.5,default, tween(rotate,360,0.2,default,set(rotate,0)) ) );
        callwith(layer[m4], tween(x|y|alpha,  165|92|1, 0.5,default, tween(rotate,360,0.2,default,set(rotate,0)) ) );
        callwith(layer[m5], tween(x|y|alpha,  172|40|1, 0.5,default, tween(rotate,360,0.2,default,set(rotate,0)) ) );
        callwith(layer[bg], set(enabled,true); tween(alpha,1); );
    , layer[cm].state == 1 OR setstate == 'close',
        set(layer[cm].state,0);
        callwith(layer[cm], tween(rotate, -45));
        callwith(layer[m1], tween(x|y|alpha|rotate, 40|40|0|0));
        callwith(layer[m2], tween(x|y|alpha|rotate, 40|40|0|0));
        callwith(layer[m3], tween(x|y|alpha|rotate, 40|40|0|0));
        callwith(layer[m4], tween(x|y|alpha|rotate, 40|40|0|0));
        callwith(layer[m5], tween(x|y|alpha|rotate, 40|40|0|0));
        callwith(layer[bg], set(enabled,false); tween(alpha,0); );
    );
</action>


For simplifying reasons I have only used textfields there.
For fine-tuning use images, adjust the positions and sizes and maybe also the tween types and times...
And the code itself could be optimized by using styles to reduce redundancy.

Here the above example code for testing:
https://krpano.com/krpano.html?xml=examp…circle-menu.xml

Best regards,
Klaus

3

Friday, April 13th 2018, 12:26pm

Thanks A lot... that was really helpful

4

Wednesday, May 30th 2018, 12:16am

Nice!
Thank a lot.