Sie sind nicht angemeldet.

tooltip html5

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

1

Mittwoch, 14. Mai 2014, 16:03

tooltip html5

Hello,

Since my update to the latest krpano version I'm updating my projects.

As from now on I want to set all projects html5="prefer", I'm looking for a way to keep using my tooltips.
Looks like my actual settings don't work with html5...

An example

hotspot

Quellcode

 
1
2
3
4
5
6
7
8
9
10

<style name="skin_hotspotstyle" 
		url="%SWFPATH%/hotspots/hs_01.png"
		alpha="0.5"
		onover="tween(alpha, 1)"
		onout="tween(alpha, 0.5)"
		keep="false"
		onclick="looktohotspot(get(name)); change_location(get(linkedscene))"
                devices="all"
		onhover="show_tooltip(get(panoramas.pano[get(linkedscene)].tooltip))"
	/>


show_tooltip

Quellcode

 
1
2
3

<action name="show_tooltip">
		showtext("%1", tooltip_style);
	</action>


tooltip_style

Quellcode

 
1

<textstyle name="tooltip_style" font="Arial" fontsize="12.0" bold="false" italic="false" background="true" backgroundcolor="0xbd2a33" border="true" bordercolor="0xbd2a33" textcolor="0xFFFFFF" alpha="0.7" blendmode="normal" effect="" origin="cursor" edge="leftbottom" textalign="none" xoffset="0" yoffset="-3" showtime="0.1" fadetime="0.0" fadeintime="0.0" noclip="true"/>


I thought there was simple trick to make it work for html5 as well.. but can't find it..

Can someone help ?

Thanks a ton !
S.
VAN BELLE IMAGE B3D

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

2

Freitag, 16. Mai 2014, 11:42

*unsure*
VAN BELLE IMAGE B3D

spelican

Anfänger

Beiträge: 33

  • Nachricht senden

3

Freitag, 16. Mai 2014, 14:20

Hi, showtext, textstyle works with flash only.
You need tween textfield plugin, or image for html5...

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

4

Samstag, 17. Mai 2014, 16:46

Hi,

please look at the (included) tooltips example,

here:
http://krpano.com/examples/117/examples/…s/tooltips.html

or into the vtourkskin.xml from the latest versions for tooltips samples that work the same in Flash and HTML5 (without using showtext).

Best regards,
Klaus

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

5

Dienstag, 27. Mai 2014, 13:50

Hello,

I finally had the time to look further into the html5 tooltip.
For simple plugins it works fine and fast.

But when I want to automate stuff it's a bit more complicated.. *blink*

example.

When I add hotspots with the editor vtoureditor plugin I want the tooltip to work automatically.
Can I tell the 'tooltip' where to find the text ?

A code example to be more clear.

This used to be my codes

in this piece the tooltip can be find

Quellcode

 
1
2
3
4

<panoramas current="scene_livingroom">
		<pano name="scene_livingroom" tooltip="living room - le salon" title="living room" floor="f0" />
		<pano name="scene_kitchen" tooltip="the kitchen - la cuisine" title="kitchen" floor="f0" />
	</panoramas>


this the hotspot in my scene (tour.xml)

Quellcode

 
1

<hotspot name="spot1" style="skin_hotspotstyle" ath="72.159" atv="12.089" linkedscene="scene_kitchen/>


this is my hotspotsyle

Quellcode

 
1
2
3
4
5
6
7
8
9
10

<style name="skin_hotspotstyle" 
		url="%SWFPATH%/hotspots/hs_01.png"
		alpha="0.5"
		onover="tween(alpha, 1)"
		onout="tween(alpha, 0.5)"
		keep="false"
		onclick="looktohotspot(get(name)); change_location(get(linkedscene))"
                devices="all"
		onhover="show_tooltip(get(panoramas.pano[get(linkedscene)].tooltip))"
	/>


Now, if I change onhover="show_tooltip(get(panoramas.pano[get(linkedscene)].tooltip))" into tooltip="", what should I put ?

Thanks for any help !

Servaas
VAN BELLE IMAGE B3D

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

6

Mittwoch, 28. Mai 2014, 15:52

hello,

Can somebody tell me if this is actually possible ?

Thanks *thumbsup*

Servaas
VAN BELLE IMAGE B3D

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

7

Mittwoch, 28. Mai 2014, 15:53

Hi,

yes, that should be possible. Look at the tooltip example xml code and try adapting it for your own needs.

Best regards,
Klaus

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

8

Mittwoch, 28. Mai 2014, 15:54

Ok Klaus, thanks.

I'll try again :-)

Servaas
VAN BELLE IMAGE B3D

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

9

Mittwoch, 28. Mai 2014, 16:14

I'm afraid I don't really know where to start as I ain't a code expert... *sad*

should I create a new tooltip style and play with this code ?

Quellcode

 
1
2
3
4
5
6
7

<style name="tooltip"
	       onover="copy(layer[tooltip].html, tooltip);
	               set(layer[tooltip].visible, true);
	               tween(layer[tooltip].alpha, 1.0, 0.5);
	               asyncloop(hovering, copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
	       onout="tween(layer[tooltip].alpha, 0.0, 0.25, default, set(layer[tooltip].visible,false), copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
	       />

or

Can I make it work with my existing code by just changing 'onhover' into 'tooltip' .. ?

Quellcode

 
1
2
3
4
5
6
7
8
9
10

<style name="skin_hotspotstyle" 
		url="%SWFPATH%/hotspots/hs_01.png"
		alpha="0.5"
		onover="tween(alpha, 1)"
		onout="tween(alpha, 0.5)"
		keep="false"
		onclick="looktohotspot(get(name)); change_location(get(linkedscene))"
                devices="all"
		tooltip="???????????"
	/>


I also noticed that my alpha doesn't tween anymore as well *cry*
VAN BELLE IMAGE B3D

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

10

Mittwoch, 28. Mai 2014, 16:29

Try manually merging them:

- move/add the onover/onout code from the tooltips style to your hotspot style
- instead of the 'copy(layer[tooltip].html, tooltip);' code, use other custom code to get right the text for the tooltip
- then there is no need for a custom tooltip attribute

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

11

Mittwoch, 28. Mai 2014, 16:33

Danke ! *thumbsup*

I'll play with that.

Thanks for your help. This coding is still like chinese to me..

(In the meanwhile my alpha issue has been fixed *smile* )

Thanks.
Servaas
VAN BELLE IMAGE B3D

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

12

Mittwoch, 28. Mai 2014, 17:18

oh boy.. *cry* I'm afraid I get stuck again...
Don't have a clue how I can get the right text..

I played with a 'get' a 'set', a 'copy', showtext... but I don't get to the point where I can tell the hotspot_style to use the 'tooltip' text of the scene to which my hotspots aiming...

Quellcode

 
1

<hotspot name="spot1" style="skin_hotspotstyle" ath="174.637" atv="17.291" linkedscene="scene_keuken"/>


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

<krpano>
	
	<panoramas current="scene_salon">
		<pano name="scene_salon" tooltip="de woonkamer - le salon" title="salon 01" floor="f0" />
		<pano name="scene_keuken" tooltip="de keuken - la cuisine" title="keuken" floor="f0" />
		<pano name="scene_kamer_01" tooltip="kamer 01 - chambre 01" title="kamer 01" floor="f0" />
		<pano name="scene_kamer_02" tooltip="kamer 02 - chambre 02" title="kamer 02" floor="f0" />
		
	</panoramas>
	

	<style name="skin_hotspotstyle" 
		url="%SWFPATH%/hotspots/hs_01.png"
		alpha="0.5"
		onover="set(layer[tooltip].visible, true);
	                    tween(layer[tooltip].alpha, 1.0, 0.5);
		            tween(alpha, 1.0);
	                    asyncloop(hovering, copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
	       onout="tween(layer[tooltip].alpha, 0.0, 0.25, default, set(layer[tooltip].visible,false), copy(layer[tooltip].x,mouse.stagex); 
		          copy(layer[tooltip].y,mouse.stagey); ); 
		          tween(alpha, 0.7);"
		keep="false"
		onclick="looktohotspot(get(name)); change_location(get(linkedscene))"
                devices="all"
	/>


*unsure*
VAN BELLE IMAGE B3D

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

13

Mittwoch, 28. Mai 2014, 18:20

Here:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12

<style name="skin_hotspotstyle" 
       url="%SWFPATH%/hotspots/hs_01.png"
       alpha="0.5"
       onover="tween(alpha, 1.0);
               copy(layer[tooltip].html, panoramas.pano[get(linkedscene)].tooltip);
               set(layer[tooltip].visible, true);
               tween(layer[tooltip].alpha, 1.0, 0.5);
               asyncloop(hovering, copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
       onout="tween(alpha, 0.5);
              tween(layer[tooltip].alpha, 0.0, 0.25, default, set(layer[tooltip].visible,false), copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );""
       onclick="looktohotspot(get(name)); change_location(get(linkedscene))"
       />

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

14

Mittwoch, 28. Mai 2014, 19:02

oh boy *thumbup*

Thanks a lot Klaus !!

So if understand well you just changed :
copy(layer[tooltip].html, tooltip);
into
copy(layer[tooltip].html, panoramas.pano[get(linkedscene)].tooltip);

Correct ? *rolleyes*

Cheers,
Servaas
VAN BELLE IMAGE B3D

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

16

Freitag, 11. Juli 2014, 16:49

aloha,

So far so good.
The tooltip works fine in html5 and flash..

Problem is that the the tooltip on 'thumbnails' and 'floormap' don't work in html5 as I don't know which setting I should change.. *rolleyes*

This are the codes :

THUMBNAILS I guess it's on line 40

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

<action name="load_thumbnails">
		copy(thumb_menu_yoffset, menu.yoffset);
		add(thumb_menu_xoffset, menu.xoffset, menu.floor.width);
		add(thumb_menu_xoffset, 10);
		add(thumb_menu_yoffset, -30);
		
		for(set(scene_count, 0), scene_count LT panoramas.pano.count, inc(scene_count),
			<!-- if the panorama is binded to this floor, show the thumbnail -->
			if(panoramas.pano[get(scene_count)].floor == floors.current,
				<!-- create the thumbnail -->
				copy(thumb, scene[get(panoramas.pano[get(scene_count)].name)].thumburl);
				
				txtadd(thumbname,'thumb_', get(panoramas.pano[get(scene_count)].name));				
				addplugin(get(thumbname));
				
				copy(plugin[get(thumbname)].ref, panoramas.pano[get(scene_count)].name);
				copy(plugin[get(thumbname)].tooltip, panoramas.pano[get(scene_count)].tooltip);
				if(panoramas.pano[get(scene_count)].name == panoramas.current,
					set(plugin[get(thumbname)].active, true);
					copy(plugin[get(thumbname)].alpha, menu.thumbnail.active.alpha);
					,
					copy(plugin[get(thumbname)].alpha, menu.thumbnail.normal.alpha);
					set(plugin[get(thumbname)].active, false);
				);
				set(plugin[get(thumbname)].url, get(thumb));
				set(plugin[get(thumbname)].added, true);
				set(plugin[get(thumbname)].keep, true);
				set(plugin[get(thumbname)].align, topleft);
				copy(plugin[get(thumbname)].width,  menu.thumbnail.width);
				copy(plugin[get(thumbname)].height, menu.thumbnail.height);
				
				<!-- put the buttons under eachother -->
				copy(plugin[get(thumbname)].y, thumb_menu_yoffset);
				add(thumb_menu_yoffset, get(plugin[get(thumbname)].height));
				add(thumb_menu_yoffset, menu.thumbnail.padding);
				add(thumb_menu_yoffset, menu.thumbnail.textheight);
				copy(plugin[get(thumbname)].x, thumb_menu_xoffset);
			
				[i]<!-- mouse events -->
				set(plugin[get(thumbname)].onhover,show_tooltip(get(tooltip)));
				set(plugin[get(thumbname)].onover, 
					ifnot(active,
						copy(alpha, menu.thumbnail.over.alpha);	
						set(css,data:OverCSS);	
					);				
				);
				set(plugin[get(thumbname)].onout,
					ifnot(active,
						copy(alpha, menu.thumbnail.normal.alpha);	
						set(css,data:OverCSS);		
					);					
				);
				set(plugin[get(thumbname)].onclick,
					ifnot(active,
						change_location(get(ref));
					);
				);
				set(plugin[get(thumbname)].zorder, 100);
				
				
				set(plugin[get(thumbname)].effect,glow(0xFFFFFF,1.0,2,10000));
				set(plugin[get(thumbname)].jsborder,'1px solid #FFFFFF');[/i]
				
				<!-- create the text above the thumbnail -->
				txtadd(thumbtextname,'thumbtext_', get(panoramas.pano[get(scene_count)].name));
				addplugin(get(thumbtextname));
				set(plugin[get(thumbtextname)].url, %SWFPATH%/plugins/textfield.swf);
				copy(plugin[get(thumbtextname)].width, menu.thumbnail.width);
				copy(plugin[get(thumbtextname)].height, menu.thumbnail.textheight);
				set(plugin[get(thumbtextname)].align, leftbottom);				
				set(plugin[get(thumbtextname)].keep, true);
				set(plugin[get(thumbtextname)].parent, get(thumbname));
				
				set(plugin[get(thumbtextname)].handcursor, true);
				set(plugin[get(thumbtextname)].enabled, true);	
				set(plugin[get(thumbtextname)].edge, lefttop);
				set(plugin[get(thumbtextname)].capture, false);
				set(plugin[get(thumbtextname)].children, false);
				
				set(plugin[get(thumbtextname)].border, 0);
				set(plugin[get(thumbtextname)].bordercolor, 0xFFFFFF);
				set(plugin[get(thumbtextname)].effect, glow(0xFFFFFF,0,2,10000));
				set(plugin[get(thumbtextname)].jsborder, '');
				copy(plugin[get(thumbtextname)].backgroundcolor, menu.backgroundcolor);
				<!--set(plugin[get(thumbtextname)].x, get(plugin[get(thumbname)].x));
				set(plugin[get(thumbtextname)].y, get(plugin[get(thumbname)].y));-->
				set(plugin[get(thumbtextname)].zorder, 190);	
				
				set(_thumbtitle, '');
				txtadd(_thumbtitle, <p>, get(panoramas.pano[get(scene_count)].title), </p>);
				set(plugin[get(thumbtextname)].html, get(_thumbtitle));				
				set(plugin[get(thumbtextname)].css, data:ThumbnailCSS);				
				,
				<!-- else remove it -->
				txtadd(thumbname,'thumb_', get(panoramas.pano[get(scene_count)].name));
				if(plugin[get(thumbname)] !== null, 
					removeplugin(get(thumbname));
				);
				txtadd(thumbtextname,'thumbtext_', get(panoramas.pano[get(scene_count)].name));
				if(plugin[get(thumbtextname)] !== null, 
					removeplugin(get(thumbtextname));
				);
			);
		);
	</action>


And this is the code for the spots on the floor plan I guess it's on line 20 ..

Quellcode

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

<action name="load_spots">
		for(set(spotcount, 0), spotcount LT floors.floor[get(floors.current)].spot.count, inc(spotcount),			
			txtadd(rspot, spot_, get(floors.floor[get(floors.current)].spot[get(spotcount)].name));
			addplugin(get(rspot));
			
			copy(plugin[get(rspot)].url, floors.spoturl);
			copy(plugin[get(rspot)].x, floors.floor[get(floors.current)].spot[get(spotcount)].x);
			copy(plugin[get(rspot)].y, floors.floor[get(floors.current)].spot[get(spotcount)].y);
			copy(plugin[get(rspot)].ref, floors.floor[get(floors.current)].spot[get(spotcount)].name);
			
			set(plugin[get(rspot)].type, maphotspot);
			set(plugin[get(rspot)].align, topleft);
			set(plugin[get(rspot)].edge, center);
			set(plugin[get(rspot)].parent, plugin[map]);
			set(plugin[get(rspot)].keep, true);			
			
			set(plugin[get(rspot)].enabled, true);
			set(plugin[get(rspot)].handcursor, true);
			set(plugin[get(rspot)].onclick, change_location(get(ref)));		
			[i]set(plugin[get(rspot)].onhover, show_tooltip(get(panoramas.pano[get(ref)].tooltip)));	[/i]
				
		);
	</action>
VAN BELLE IMAGE B3D

joschii

Anfänger

Beiträge: 25

Wohnort: Austria

Beruf: VR

  • Nachricht senden

17

Montag, 3. August 2020, 18:05

Hotspot Name Tag Label Text Plugin

hi. i made a plugin that puts the hotspot's-name under every hotspot as a textfield automatically.
like the tooltip is visible always an clickable if you want to.
textfield can be edited of course.
simple integration.
works also in VR and smartphone, or touch devices.
DEMO_TOUR_EXAMPLE
would that help you? or do you need something else?

Ähnliche Themen