Skin-menu needed

bhupender · April 4, 2018 at 10:55 AM

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

klaus.krpano · April 5, 2018 at 12:06 PM

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:

Code

<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>

Display More

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?xm…circle-menu.xml

Best regards,
Klaus

bhupender · April 13, 2018 at 12:26 PM

Thanks A lot... that was really helpful

John.Ng · May 30, 2018 at 12:16 AM

Nice!
Thank a lot.

lexayc · April 13, 2022 at 8:00 PM

Quote from klaus.krpano

Hi! How to make a menu of several pictures so that when you click on this picture, the cursor would take the form of this picture and each picture would have its own Hotspot? Thank you.

orca.cl · April 25, 2022 at 3:50 PM

Quote from klaus.krpano

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:

Code

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); );
    );

Display More

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?xm…circle-menu.xml

Best regards,
Klaus

Display More

Many Thanks Klaus,

Reading your examples are a blessing.
I was looking for something like this a lot of time.
Since iframes don't respond so well to responsive, should we use the "devices" atribute to code for mobile or it should work with everything?

Participate now!