You are not logged in.

Skin-menu needed

bhupender

Beginner

  • "bhupender" started this thread

Posts: 2

  • Send private message

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

klaus.krpano

Administrator

Posts: 13,430

  • Send private message

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

bhupender

Beginner

  • "bhupender" started this thread

Posts: 2

  • Send private message

3

Friday, April 13th 2018, 12:26pm

Thanks A lot... that was really helpful

John.Ng

Beginner

Posts: 9

  • Send private message

4

Wednesday, May 30th 2018, 12:16am

Nice!
Thank a lot.

lexayc

Beginner

Posts: 1

  • Send private message

5

Wednesday, April 13th 2022, 8:00pm

Menu

Quoted 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

Beginner

Posts: 7

Location: Chile

Occupation: Graphic Design

  • Send private message

6

Monday, April 25th 2022, 3:50pm

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

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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


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


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?
Graphic Designer, Photographer and Self Taught Web Developer.
I know I'm an unicorn. thumbsup

Similar threads