Sie sind nicht angemeldet.

Skin-menu needed

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

bhupender

Anfänger

  • »bhupender« ist der Autor dieses Themas

Beiträge: 2

  • Nachricht senden

1

Mittwoch, 4. April 2018, 10:55

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

Beiträge: 13 499

  • Nachricht senden

2

Donnerstag, 5. April 2018, 12:06

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:

Quellcode

 
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

Anfänger

  • »bhupender« ist der Autor dieses Themas

Beiträge: 2

  • Nachricht senden

3

Freitag, 13. April 2018, 12:26

Thanks A lot... that was really helpful

John.Ng

Anfänger

Beiträge: 9

  • Nachricht senden

4

Mittwoch, 30. Mai 2018, 00:16

Nice!
Thank a lot.

lexayc

Anfänger

Beiträge: 1

  • Nachricht senden

5

Mittwoch, 13. April 2022, 20:00

Menu

Zitat von »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

Anfänger

Beiträge: 7

Wohnort: Chile

Beruf: Graphic Design

  • Nachricht senden

6

Montag, 25. April 2022, 15:50

Zitat von »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:

Quellcode

 
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

Zurzeit ist neben Ihnen 1 Benutzer in diesem Thema unterwegs:

1 Besucher

Ähnliche Themen