You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

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.