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

Monday, January 18th 2010, 4:20pm

mitdrehende flyout-hotspots (mit Beispiel)

Ich wechsle gerade vom FPP-Viewer zum KRPano-Viewer und möchte bestehende Projekte auf die KRP-Umgebung konvertieren.

Nun suche ich eine Möglichkeit um solche "Info-Panels" in ein Pano zu integrieren (Klick auf weisse Info-Buttons):
http://www.virtualpanorama.ch/pilatus_pr…tual_tour_a.htm

Könnte man das vielleicht mit dem "flyout-hotspots"-Beispiel umsetzen?

Bin für alle Tipps dankbar!

funny2pano

Trainee

Posts: 59

Location: Hamburg

Occupation: IT Berater

  • Send private message

2

Tuesday, January 19th 2010, 12:50pm

Hallo cyrill,

Du kannst mit der neuseten Version krpano Hotspots auch mit Grafiken erstellen. Ich habe mir für meine Touren einen kleinen Läufer mit rundem Kreis gebaut und füge dies Grafik überall dort ein, wo ich navigieren will. So eine Grafik kannst Du auch in Dein Cockpit einbauen und als Aktion ein Textpanel aufrufen. Ich hoffe, dass Du das meintest.

LG
funny2pano

3

Tuesday, January 19th 2010, 8:13pm

Dass man für Hotspots auch Grafiken benutzen kann weiss ich eigentlich schon.

Nun suche ich aber ein Code-Beispiel, wie ich die einzelnen "Info-Panels" ein- und ausblenden kann.
Dabei sollte jeweils nur 1 Panel sichtbar sein bzw. beim Klick auf einen anderen Hotspot soll sich das aktuelle Panel ausblenden.

4

Thursday, January 21st 2010, 10:38am

Hi,

wäre ein solches Beispiel:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<krpano>

    <preview type="grid(cube,16,16,512,0x000000,0x000000,0x999999);" details="16" />

    <hotspot name="infospot1"
             url="info-hotspot.png"
             ath="10"
             atv="-5"
             scale="0.5"
             onclick="showinfo(info1);"
             />
             
    <plugin name="info1"
            url="image.jpg"
            parent="hotspot[infospot1]"
            align="bottom" x="0" y="20"
            visible="false"
            alpha="0"
            onclick="hideinfo( get(name) );"
            />
            
            
    <hotspot name="infospot2"
             url="info-hotspot.png"
             ath="-30"
             atv="-5"
             scale="0.5"
             onclick="showinfo(info2);"
             />
             
    <plugin name="info2"
            url="image.jpg"
            parent="hotspot[infospot2]"
            align="bottom" x="0" y="20"
            visible="false"
            alpha="0"
            onclick="hideinfo( get(name) );"
            />          
            
    <action name="hideinfo">     
        tween(plugin[%1].alpha, 0, 0.5, default, set(plugin[%1].visible,false));       
    </action>
            
    <action name="showinfo">
        <!-- zuerst alle info felder ausblenden -->
        hideinfo(info1);
        hideinfo(info2);
        
        <!-- dann den gewünschten einblenden -->
        set(plugin[%1].visible,true);
        tween(plugin[%1].alpha, 1.0);
    </action>
            
</krpano>



die Hotspots werden normal über <hotspot> definiert,
und die Infografiken sind <plugin> Elemente welche über "parent" dem Hotspots
untergeordnet sind,

mit der "hideinfo" Aktion wird ein bestimmtes "Info-Panel" dann ausgeblendet,
und die "showinfo" Aktion versteckt zuerst alle "Info-Panels" und blendent dann
den gewünschten ein,

einfach einmal den kompletten XML Code von oben in ein XML kopieren,
die Grafikennamen/pfade austauschen und ausprobieren

Schöne Grüße,
Klaus

5

Thursday, January 21st 2010, 5:31pm

Hallo Klaus
Vielen Dank für Deine Hilfe! Dein Code funktioniert super *thumbsup*
Ich habe für die Infopanels noch einen Zoomeffekt mit "Scale" hinzugefügt (Hoffe ich habe den Code richtig ergänzt).

http://virtualpanorama.ch/krpano/pano_ho…o_hotspots.html

Nun bräuchte ich noch den "Hide/Show Info Buttons" - Button, um die ganze Geschichte ein- und auszublenden (wie in meinem Cockpit-Pano).
Ich habe es mal mit Deinem Beispielcode versucht, musste aber feststellen, dass ich noch nicht so "sattelfest" in der KRPano Umgebung bin.
Vielleicht könntest Du mir nochmals helfen?

Hier sind alle Files abgelegt:

http://virtualpanorama.ch/krpano/pano_hotspots/

Im xml findest Du meine hinzugefügten "Actions" unter "hideinfobutton" und "hideallinfobuttons"
Die Button-Grafiken für den "Hide/Show-Toggle" sind "hideinfobtn.png" und "showinfobtn.png"

Gruss
Cyrill

6

Friday, January 22nd 2010, 10:39am

Hi,
Nun bräuchte ich noch den "Hide/Show Info Buttons" - Button, um die ganze Geschichte ein- und auszublenden (wie in meinem Cockpit-Pano).
Ich habe es mal mit Deinem Beispielcode versucht, musste aber feststellen, dass ich noch nicht so "sattelfest" in der KRPano Umgebung bin.
Vielleicht könntest Du mir nochmals helfen?

hier liegt der Fehler:

Quoted

<action name="hideinfobutton">
tween(plugin[%1].alpha, 0, 0.5, default, set(plugin[%1].visible,false));
</action>

die 'Info'-Buttons sind <hotspot> Elemente, deshalb muss dort im Code auch "hotspot" statt "plugin" verwendet werden, also z.B. so:

Quoted

<action name="hideinfobutton">
tween(hotspot[%1].alpha, 0, 0.5, default, set(hotspot[%1].visible,false));
</action>

Schöne Grüße,
Klaus

7

Friday, January 22nd 2010, 1:31pm

Hallo Klaus,

Ich habe noch eine (hoffentlich) letzte Frage zu diesem Thread:
Für die "Hide/Show Infos" habe ich einen Umschalter-Button gemacht.

Alpha mit 0.3sec. ausblenden funktioniert, Alpha mit 0.3sec. einblenden nicht.
http://virtualpanorama.ch/krpano/pano_ho…o_hotspots.html

Vielleicht mus ich in der Action "showinfobutton" die Funktionen "visible" und "alpha" tauschen?:

Source code

1
2
3
4
5
6
7
    <action name="hideinfobutton">     
        tween(hotspot[%1].alpha, 0, 0.3, default, set(hotspot[%1].visible,false)); 
    </action>

    <action name="showinfobutton">     
        tween(hotspot[%1].alpha, 1, 0.3, default, set(hotspot[%1].visible,true)); 
    </action>


...und für was steht eigentlich "default"?

Nochmals Besten Dank und Gruss!
Cyrill

8

Friday, February 5th 2010, 7:12pm

Hi,
Alpha mit 0.3sec. ausblenden funktioniert, Alpha mit 0.3sec. einblenden nicht.
der Button muss zuerst wieder sichtbar (visible="true") geschaltet werden,
also:

Source code

1
2
3
4
<action name="showinfobutton">     
  set(hotspot[%1].visible,true);
  tween(hotspot[%1].alpha, 1, 0.3, default); 
</action>



...und für was steht eigentlich "default"?
"default" steht für "easeoutquad",

siehe auch hier:
http://krpano.com/docu/actions/#tween
http://krpano.com/docu/actions/#tweentypes

Schöne Grüße,
Klaus

vlapo

Beginner

Posts: 24

Location: berlin

  • Send private message

9

Saturday, April 10th 2010, 7:40am

die ganze Nacht wie blöd rumprobiert...
warum klappt es nicht?

Soll mir bei klick auf icon ein foto, zentriert aufmachen.

hab mir das aus der gallery copiert:

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
	<hotspot name="icon" url="cam.png" ath="-145" atv="-9" width="50" height="41" onover="action(scaleup,icon);" onout="action(scaledown,icon);" onclick="action(showimage,img1);" />
	
	<!-- scaleup/down actions for icon -->	
	<action name="scaleup">
		tween(hotspot[%1].width,70,distance(25,0.2),easeoutcubic);
		tween(hotspot[%1].height,57,distance(25,0.2),easeoutcubic);
	</action>
	
	<action name="scaledown">
		tween(hotspot[%1].width,50,distance(25,0.2),easeincubic);
		tween(hotspot[%1].height,41,distance(25,0.2),easeincubic);
	</action>

	<!-- image -->
	<hotspot name="img1" url="image.jpg" align="center" alpha="0" visible="false" onclick="action(hideimage);" />
	
	<!-- actions to show/hide images -->
	<action name="hideimage">
		tween(plugin[%1].alpha,0,distance(1,0.5),easeoutquad,set(plugin[%1].visible,false));
	</action>
	
	<action name="showimage">
		action(hideimage);
		set(plugin[%1].visible,true);
		tween(plugin[%1].alpha,1,distance(1,0.5),easeoutquad);
	</action>


bei dem code von oben macht's mir das foto auch nicht auf *sad*

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
  <hotspot name="infospot1"
         	url="cam.png"
         	ath="-145"
         	atv="-9"
         	scale="0.5"
         	onclick="showinfo(info1);"
         	/>
         	
	<plugin name="info1"
        	url="image.jpg"
        	parent="hotspot[infospot1]"
        	align="center" 
        	visible="false"
        	alpha="0"
        	onclick="hideinfo( get(name) );"
        	/>
        	
	<action name="hideinfo"> 	
    	tween(plugin[%1].alpha, 0, 0.5, default, set(plugin[%1].visible,false));   	
	</action>
        	
	<action name="showinfo">
     	zuerst alle info felder ausblenden 
    	hideinfo(info1);

    	
     	dann den gewünschten einblenden
    	set(plugin[%1].visible,true);
    	tween(plugin[%1].alpha, 1.0);
	</action>


Muss ich vielleicht die Größe vom Image.jpg beachten, oder angeben?
Bin ratlos

Der rest vom code ist wie im Bsp. aus der tour.xml
Beist sich da vielleicht was? *wacko*

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<krpano version="1.0.8" onstart="action(load1);">

<include url="plugins.xml" />


	<view fovmin="30" fovmax="150" fisheye="0"/>
	<display details="22" />

	<!-- change the default textstyle for showtext: -->
	<textstyle name="DEFAULT" 
	       	font="Arial" fontsize="14" 
	       	border="false" background="false"
	       	textcolor="0xFFFFFF"
	       	effect="glow(0x000000,0.7,4,2);dropshadow(4,45,0x000000,4,1);"
	       	/>

	<textstyle name="smalltext" 
	       	font="Arial" fontsize="10" 
	       	border="false" background="false"
	       	textcolor="0xFFFFFF"
	       	effect="glow(0x000000,0.7,4,2);dropshadow(2,45,0x000000,3,1);"
	       	/>	       	

	<plugin name="map"   url="map.png" zorder="1" align="righttop" edge="righttop" x="16"  y="16" alpha="0.85" handcursor="false" 
        	width="318" 
        	height="120"
        	onhover="showtext(Karte schließen,smalltext);" 
        	onclick="action(closemap);"
        	/>

	<plugin name="spot1" url="mappoint.png" zorder="2" align="righttop" edge="center"   x="293" y="87" onhover="showtext(bar);"     	onclick="action(load1);" />
	<plugin name="spot2" url="mappoint.png" zorder="2" align="righttop" edge="center"   x="165" y="71" onhover="showtext(kleiner);" 	onclick="action(load2);" />
	<plugin name="spot3" url="mappoint.png" zorder="2" align="righttop" edge="center"   x="135" y="73" onhover="showtext(main);" onclick="action(load3);" />
	<plugin name="spot4" url="mappoint.png" zorder="2" align="righttop" edge="center"   x="96" y="101" onhover="showtext(oben);"    	onclick="action(load4);" />
	
	<!-- first hotpot -->
	<plugin name="spotx" url="mappointactive.png"  	zorder="4" align="righttop" edge="center"   x="293" y="87" />
	
	<!-- radar plugin, set heading with "plugin[radar].heading" -->
	<plugin name="radar" url="plugins/radar.swf" zorder="3" align="righttop" edge="center"   x="293" y="87" width="80" height="80" />
	
	<plugin name="zoombuttons" url="	plugins/zoombuttons.swf" />
 
 
	
	<!-- actions -->
	
	<action name="startloading">
		set(hotspot.visible,false);
		push(view.fovmin);
		set(view.fovmin,1);
		
	</action>
	
	<action name="loadingdone">
		pop(view.fovmin);
		set(hotspot.visible,true);
	</action>
	
	<action name="lookinterrupt">
		action(loadingdone);
		breakall();	
	</action>
	
  	
	<action name="load1">
		set(plugin[spotx].x,293);
		set(plugin[spotx].y,87);
		set(plugin[radar].x,293);
		set(plugin[radar].y,87);
		loadpano(1.xml,null,KEEPALL,BLEND(2));
		set(plugin[radar].heading,10);
	</action>
	
	<action name="load2">
		set(plugin[spotx].x,165);
		set(plugin[spotx].y,71);
		set(plugin[radar].x,165);
		set(plugin[radar].y,71);
		loadpano(2.xml,null,KEEPALL,BLEND(2));
		set(plugin[radar].heading,2);
	</action>
	
	<action name="load3">
		set(plugin[spotx].x,135);
		set(plugin[spotx].y,73);
		set(plugin[radar].x,135);
		set(plugin[radar].y,73);
		loadpano(3.xml,null,KEEPALL,BLEND(2));
		set(plugin[radar].heading,180);
	</action>
	
	<action name="load4">
		set(plugin[spotx].x,96);
		set(plugin[spotx].y,101);
		set(plugin[radar].x,96);
		set(plugin[radar].y,101);
		set(radar.heading,270);
		loadpano(4.xml,null,KEEPALL,BLEND(2));
		set(plugin[radar].heading,98);
	</action>
	
	
  	<action name="showspots">
  		set(plugin[spot1].alpha,0);
		set(plugin[spot2].alpha,0);
		set(plugin[spot3].alpha,0);
		set(plugin[spot4].alpha,0);
		set(plugin[spotx].alpha,0);
		set(plugin[radar].alpha,0);
  		
		set(plugin[spot1].visible,true);
		set(plugin[spot2].visible,true);
		set(plugin[spot3].visible,true);
		set(plugin[spot4].visible,true);
		set(plugin[spotx].visible,true);
		set(plugin[radar].visible,true);
		
		tween(plugin[spot1].alpha,1);
		tween(plugin[spot2].alpha,1);
		tween(plugin[spot3].alpha,1);
		tween(plugin[spot4].alpha,1);
		tween(plugin[spotx].alpha,1);
		tween(plugin[radar].alpha,1);
	</action>
	
	<action name="hidespots">
		set(plugin[spot1].visible,false);
		set(plugin[spot2].visible,false);
		set(plugin[spot3].visible,false);
		set(plugin[spot4].visible,false);
		set(plugin[spotx].visible,false);
		set(plugin[radar].visible,false);
	</action>
	
	
	<action name="closemap">
    	action(hidespots);
    	set(plugin[map].onhover,showtext(Karte öffnen,smalltext););
    	set(plugin[map].onclick,action(openmap););
    	tween(plugin[map].width,32,distance(318,0.5),easeoutquad);
    	tween(plugin[map].height,32,distance(120,0.5),easeoutquad);
	</action>
	
	<action name="openmap">
		set(plugin[map].onhover,showtext(Karte schließen,smalltext););
    	set(plugin[map].onclick,action(closemap););
    	tween(plugin[map].width,318,distance(318,0.5),easeoutquad);
    	tween(plugin[map].height,120,distance(120,0.5),easeoutquad,action(showspots););
	</action>
	

</krpano>



DANKE für Unterstüzung *attention* *attention*

10

Sunday, April 11th 2010, 12:23am

Hallo vlapo

Schaue mal hier: http://virtualpanorama.ch/krpano/pano_ho…o_hotspots.html

Die XML-Datei "testpano_hotspots.xml" findest Du hier: http://virtualpanorama.ch/krpano/pano_ho…no_hotspots.xml

hilft Dir vielleicht weiter...

vladi

Beginner

Posts: 24

Location: berlin

  • Send private message

11

Sunday, April 11th 2010, 1:25am

vielen Dank für das Beispiel -
hab's grad probiert und irgendwie will er nicht...
werd mal ausnahmsweise schlafen gehen und Morgen nochmal probieren -
lade dann auch das ganze Zeug mal hoch, vielleicht findet sich dann der Übeltäter ;)

Gute Nacht, Vladi.

vladi

Beginner

Posts: 24

Location: berlin

  • Send private message

12

Monday, April 12th 2010, 4:41pm

Also ich habe nun die hotspot.xml einfach eingebunden und es klappt auch nicht :(

http://vlapo.de/projects/d/tour.html
http://vlapo.de/projects/d/xml/tour.xml
http://vlapo.de/projects/d/xml/1.xml

image.jpg soll bei klick, zentriert gezeigt werden.

warum geht das bloß nicht?

die hide/show funktion für das icon funktioniert, aber wie gesagt, kein bild *confused* *cursing* *cursing* *cursing*

Vielen Dank für die Hilfe!!!

This post has been edited 1 times, last edit by "vladi" (Apr 13th 2010, 1:19am)


Karl

Beginner

Posts: 12

Location: Halle (Saale)

  • Send private message

13

Tuesday, August 3rd 2010, 12:18am

Parent nur mit Image-Hotspot?

Hallo,

lassen sich mitbewegende Plugins (z.B. Textfeld, Image) per Parent nur mit einem Image-Hotspot verbinden? Wenn ich im Beispiel von Klaus (21.Januar) einen der beiden Image-Hotspots durch einen Polygonal-Hotspot ersetze so ist garnichts zu sehen. Liegt es daran, daß ein Polygonal-Hotspot keine definierbaren Ecken etc. hat?

Gibt es doch irgendwie eine Lösung?

Viele Grüße
Karl

Similar threads