Sie sind nicht angemeldet.

Html5 tooltip always visible

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.

L'inge

Anfänger

  • »L'inge« ist der Autor dieses Themas

Beiträge: 2

  • Nachricht senden

1

Donnerstag, 27. November 2014, 15:13

Html5 tooltip always visible

Is it possible ho make html5 tooltips always visible?
I'm building an html5 only tour (with panotour pro) where there are a lot of country flag hotspots. My average user won't able to recognize ALL the flags, so I need to show the flag (hotspot icon) and the country name (the tooltip?).
This is a multilanguage tour so I'm trying to find a way to avoid putting the name of the country in the icon (I should create an "Italy" icon for english, "Italia" for italian and "Italie" for french, and so on)

My idea is to create a text layer for each country. Always visible, and "moving" as the view changes, somehow following "its" hotspot. But I don't know hot to make it work...
Looking at the code generated by Panotour, related to tooltips, I found
out that the tooltip layer is positioned in relation to mouse position. I think I have to calculate x and y position starting from hotspot.ath / atv view.hlookat / vlookat. Does it make any sense???

This is a scratch for my solution... can you help me please?

Quellcode

 
1
2
3
4
5
6

<layer name="ItalyTooltip" [...] visible="true" html="ITALY" />
<events onviewchange="moveTooltip();" />
<action name="moveTooltip">
	set(layer[get(ItalyTooltip)].x, ???);
	set(layer[get(ItalyTooltip)].y, ???);
</action>

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

2

Donnerstag, 27. November 2014, 15:22

Yes it is possible. Easiest is to put tooltip as children from that hotspot and that way you don't need to calculate anything. You also need to have as many tooltip layers as many hostpots you want to display tooltip all the time (1:1 relation)

L'inge

Anfänger

  • »L'inge« ist der Autor dieses Themas

Beiträge: 2

  • Nachricht senden

3

Donnerstag, 27. November 2014, 15:33

Easiest and perfect *__* Thank you SO MUCH Umalo!

Yuval

Anfänger

Beiträge: 7

  • Nachricht senden

4

Dienstag, 7. Juli 2015, 13:35

Zitat

Yes it is possible. Easiest is to put tooltip as children from that hotspot and that way you don't need to calculate anything. You also need to have as many tooltip layers as many hostpots you want to display tooltip all the time (1:1 relation)
What do you mean by adding tooltip as child of the hotspot? Currently I have :

Quellcode

 
1

  <hotspot name="spotpoint5085" ath="30.310442" atv="-5.254237" visible="true"  style="IconDefaultPointSpotStyle5"  descriptionid="" handcursor="false"  tooltip="spotpoint5085_tooltip"           />



and the style:

Quellcode

 
1

  <style name="IconDefaultPointSpotStyle5" url="%FIRSTXML%/spots/info_rambam_st_user_defaultpoint4.png"  visible="true" onhover="onhoverIconDefaultPointSpotStyle5"  onover="onoverIconDefaultPointSpotStyle5"	 onout="onoutIconDefaultPointSpotStyle5"         />



The tooltip is shown only onHover (which make sense) but I can't figure how to set it visibile at the hotspot position all the time.

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

5

Dienstag, 7. Juli 2015, 14:27

Using this http://krpano.com/forum/wbb/index.php?pa…50929#post50929 tutorial from Klaus you can have something like this:

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

<scene name="scene_kidroom2" title="kidroom2" onstart="" thumburl="panos/kidroom2.tiles/thumb.jpg" lat="" lng="" heading="">
		<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto"/>
		<preview url="panos/kidroom2.tiles/preview.jpg"/>
		<image>
			<cube url="panos/kidroom2.tiles/pano_%s.jpg"/>
			<mobile>
				<cube url="panos/kidroom2.tiles/mobile_%s.jpg"/>
			</mobile>
		</image>		
		<hotspot name="spot1" style="your_hotspotstyle" ath="-30.441" atv="14.181" tooltip="tooltip 1"/>
		<hotspot name="spot2" style="your_hotspotstyle" ath="-48.224" atv="12.630" tooltip="tooltip 2"/>
	</scene>	
		
  <style name="your_hotspotstyle" url="%SWFPATH%/skin/vtourskin_hotspot.png" scale="0.5" edge="top" oy="0" distorted="false" onloaded="add_all_the_time_tooltip();" />

  <action name="add_all_the_time_tooltip">
    txtadd(tooltipname, 'tooltip_', get(name));
    addplugin(get(tooltipname)); txtadd(plugin[get(tooltipname)].parent, 'hotspot[',get(name),']');
    set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
    set(plugin[get(tooltipname)].align,top); set(plugin[get(tooltipname)].edge,bottom);
    set(plugin[get(tooltipname)].x,0); set(plugin[get(tooltipname)].y,0);
    set(plugin[get(tooltipname)].width,200); set(plugin[get(tooltipname)].autoheight,true);
    set(plugin[get(tooltipname)].background,false); set(plugin[get(tooltipname)].border,false);
    set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:16px;');
    set(plugin[get(tooltipname)].textshadow,1); set(plugin[get(tooltipname)].textshadowrange,6.0); set(plugin[get(tooltipname)].textshadowangle,90);
    copy(plugin[get(tooltipname)].html,hotspot[get(name)].tooltip);
    set(plugin[get(tooltipname)].enabled,false);
  </action>

Yuval

Anfänger

Beiträge: 7

  • Nachricht senden

6

Mittwoch, 8. Juli 2015, 10:45

Thanks for the fast response Umalo.
I'm getting this error when implementing your code:

Zitat

WARNING: Locally not trusted - External Interface NOT available!
and then alot of another warnings and few errors all with error number 2060.
The issue seems to be related to to security options.
Any idea?

EDIT:
Issue solved by setting security setting of the flash player - follow this link.
Your code works perfectly, thanks alot!

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Yuval« (8. Juli 2015, 12:38)

Yuval

Anfänger

Beiträge: 7

  • Nachricht senden

7

Donnerstag, 16. Juli 2015, 14:54

Is it possible to show the text beneath the image instead of top of it?

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

8

Donnerstag, 16. Juli 2015, 16:29

add this line in code from above:

Quellcode

 
1

copy(plugin[get(tooltipname)].oy,60);

Yuval

Anfänger

Beiträge: 7

  • Nachricht senden

9

Donnerstag, 16. Juli 2015, 17:20

I've added it and it lookes like this:

Quellcode

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

<action name="add_all_the_time_tooltip">
 txtadd(tooltipname, 'tooltip_', get(name));
 addplugin(get(tooltipname)); txtadd(plugin[get(tooltipname)].parent, 'hotspot[',get(name),']');
 set(plugin[get(tooltipname)].url,'%SWFPATH%/graphics/textfield.swf');
 set(plugin[get(tooltipname)].align,top); set(plugin[get(tooltipname)].edge,bottom);
 set(plugin[get(tooltipname)].x,0); set(plugin[get(tooltipname)].y,0);
 set(plugin[get(tooltipname)].width,200); set(plugin[get(tooltipname)].autoheight,true);
 set(plugin[get(tooltipname)].background,false); set(plugin[get(tooltipname)].border,false);
 set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:16px;');
 set(plugin[get(tooltipname)].textshadow,1); set(plugin[get(tooltipname)].textshadowrange,6.0); set(plugin[get(tooltipname)].textshadowangle,90);
 copy(plugin[get(tooltipname)].html,hotspot[get(name)].tooltip);
 set(plugin[get(tooltipname)].enabled,false);
 copy(plugin[get(tooltipname)].oy,60);
 </action>


But it doesn't work...

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

10

Donnerstag, 16. Juli 2015, 18:52

Yes you are right, now I tried in the code and it should be:

Quellcode

 
1

set(plugin[get(tooltipname)].oy,60);

Maybe easier to use:

Quellcode

 
1

set(plugin[get(tooltipname)].align,bottom); set(plugin[get(tooltipname)].edge,top);

to make toolips below hotspot without tweaking oy attribute.

Yuval

Anfänger

Beiträge: 7

  • Nachricht senden

11

Donnerstag, 16. Juli 2015, 18:59

Works great, thanks!

Yuval

Anfänger

Beiträge: 7

  • Nachricht senden

12

Dienstag, 21. Juli 2015, 13:57

Sorry for digging with the tooltip, but I would like to maximize it's abilities.
I have 2 issues to fix, the first is how to define the tooltip text as RTL instead of default LTR?
When the text is RTL i have "," at the start instead of the end.

Another one is that I have a rectangle as the tooltip background. Is it possible to change that rectangle color and opacity?

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

13

Dienstag, 21. Juli 2015, 17:24

1. Is your text in Arabic or other rtl letters? Stored in UTL8 they should be automaticaly aligned rtl (as I remember in one old project)
2. Tooltip is layer as child of hotspots. If your hotspot is image or poligonal hotspot type you should be able to define its color and opacity. Read here: http://krpano.com/docu/xml/#hotspot.fillcolor

Yuval

Anfänger

Beiträge: 7

  • Nachricht senden

14

Mittwoch, 22. Juli 2015, 11:16

The RTL issue is fixed, but I'm still unable to set backgroup specific to the tooltip text.
I've tried

Quellcode

 
1

set(plugin[get(tooltipname)].fillcolor,0xD0D0D0);
inside the action of my style but it doesnt change anything...

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

15

Mittwoch, 22. Juli 2015, 23:05

Tooltip is layer using textfield plugin. If you want to change color of it than you have to use: http://krpano.com/plugins/textfield/#background

joschii

Anfänger

Beiträge: 25

Wohnort: Austria

Beruf: VR

  • Nachricht senden

16

Montag, 3. August 2020, 17:21

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