[SOLVED] Is there a way to show the title name over a hotspot in the GArrows plug-in?

onair0410 · May 16, 2024 at 11:17 AM

Hello, I am currently using the GArrows plugin and I want to display the title name above the hotspots. However, I have not been able to figure out how to do this for a long time. Today, I happened to come across a VR implementation that does exactly what I want.

https://explorewithtera.com/ExpoWMC?startscene=scene__DSC4972_Banquet

Does anyone know how to do this?

I asked the developer of the GArrows plugin via email, but I couldn't find a solution. If anyone knows how to do this, I would appreciate it if you could let me know the method.

San7 · May 16, 2024 at 1:31 PM

Hi, do you have arrows.xml?
It creates arrows and you can use showtext.xml

San7 · May 16, 2024 at 2:06 PM

1. <include url="%SWFPATH%/plugins/showtext.xml" />

create your own style and name it "popup_text"

2. Add title to hotspot: <hotspot name="spot1" style="skin_hotspotstyle_navigate" ... title=" TEXT " />

3. in the file arrows.xml action name="addchevrons_pc" insert the code:

calc(layer[connections].connection[get(j)].onhover, (hs.title?'showtext('+ hs.title + ', popup_text);' : '') );

before the code inc(j);

onair0410 · May 16, 2024 at 2:25 PM

Quote from San7

1. <include url="%SWFPATH%/plugins/showtext.xml" />
create your own style and name it "popup_text"
2. Add title to hotspot: <hotspot name="spot1" style="skin_hotspotstyle_navigate" ... title=" TEXT " />
3. in the file arrows.xml action name="addchevrons_pc" insert the code:
calc(layer[connections].connection[get(j)].onhover, (hs.title?'showtext('+ hs.title + ', popup_text);' : '') );
before the code inc(j);

Display More

Where can I get showtext.xml? I have arrows.xml. Below is my code. What should I modify here?
Also, I checked the arrows.xml file I have, and it appears to be encrypted.

Code

<krpano version="1.21" renderer="webgl">
	<include url="skin/vtourskin.xml" />
	<skin_settings...  />

	<include url="plugins/garrows/garrows_settings.xml" />
	<include url="plugins/garrows/garrows.xml" />
	
		<scene name="scene_01-001" title="01-001" onstart="" thumburl="panos/01-001.tiles/thumb.jpg" lat="37.71914565" lng="126.76323910" alt="0.00" heading="0.0">
		<hotspot name="autogarrowshotspot_scene_01-001_4" linkedscene="scene_01-004" tooltip="scene_01-001 -> scene_01-004, 01-001 -> 01-004, -18.76, 48" style="skin_hotspotstyle" ath="-18.76" atv="-30" use3dtransition="true" />

		<hotspot name="autogarrowshotspot_scene_01-001_2" linkedscene="scene_01-002" tooltip="scene_01-001 -> scene_01-002, 01-001 -> 01-002, -70.63, 31" style="skin_hotspotstyle" ath="-70.63" atv="-30" use3dtransition="true" abutton="false"/>

		<hotspot name="autogarrowshotspot_scene_01-001_1" linkedscene="scene_01-059" tooltip="scene_01-001 -> scene_01-059, 01-001 -> 01-059, -158.25, 45" style="skin_hotspotstyle" ath="-158.25" atv="-30" use3dtransition="true" abutton="false"/>
		
			<control bouncinglimits="calc:image.cube ? true : false" />
			<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
			<preview url="panos/01-001.tiles/preview.jpg" />
			<image>
				<cube url="panos/01-001.tiles/pano_%s.jpg" />
			</image>
	</scene>

	<scene name="scene_01-002" title="01-002" onstart="" thumburl="panos/01-002.tiles/thumb.jpg" lat="37.71923703" lng="126.76291058" alt="0.00" heading="0.0">
	<hotspot name="autogarrowshotspot_scene_01-002_10" linkedscene="scene_01-001" tooltip="scene_01-002 -> scene_01-001, 01-002 -> 01-001, 109.37, 31" style="skin_hotspotstyle" ath="109.37" atv="-30" use3dtransition="true" />
	<hotspot name="autogarrowshotspot_scene_01-002_9" linkedscene="scene_01-003" tooltip="scene_01-002 -> scene_01-003, 01-002 -> 01-003, 22.41, 23" style="skin_hotspotstyle" ath="22.41" atv="-30" use3dtransition="true" />
	<hotspot name="autogarrowshotspot_scene_01-002_5" linkedscene="scene_01-058" tooltip="scene_01-002 -> scene_01-058, 01-002 -> 01-058, -153.84, 43" style="skin_hotspotstyle" ath="-153.84" atv="-30" use3dtransition="true" />
		
		<control bouncinglimits="calc:image.cube ? true : false" />
		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
		<preview url="panos/01-002.tiles/preview.jpg" />
		<image>
			<cube url="panos/01-002.tiles/pano_%s.jpg" />
		</image>
	</scene>
	
	
	<scene name="scene_01-003" title="01-003" onstart="" thumburl="panos/01-003.tiles/thumb.jpg" lat="37.71942507" lng="126.76300862" alt="0.00" heading="0.0">
<hotspot name="autogarrowshotspot_scene_01-003_15" linkedscene="scene_01-004" tooltip="scene_01-003 -> scene_01-004, 01-003 -> 01-004, 19.69, 15" style="skin_hotspotstyle" ath="19.69" atv="-30" use3dtransition="true" />
<hotspot name="autogarrowshotspot_scene_01-003_13" linkedscene="scene_01-024" tooltip="scene_01-003 -> scene_01-024, 01-003 -> 01-024, -51.66, 41" style="skin_hotspotstyle" ath="-51.66" atv="-30" use3dtransition="true" />
<hotspot name="autogarrowshotspot_scene_01-003_11" linkedscene="scene_01-002" tooltip="scene_01-003 -> scene_01-002, 01-003 -> 01-002, -157.59, 23" style="skin_hotspotstyle" ath="-157.59" atv="-30" use3dtransition="true" />
		
		<control bouncinglimits="calc:image.cube ? true : false" />
		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
		<preview url="panos/01-003.tiles/preview.jpg" />
		<image>
			<cube url="panos/01-003.tiles/pano_%s.jpg" />
		</image>
	</scene>

</krpano>

Display More

San7 · May 16, 2024 at 3:03 PM

when creating a tour, the showtext.xml plugin is located in the panos folder

and is in the folder krpano-1.21.2/templates/xml/plugins/showtext.xml

... look in the file garrows.xml

onair0410 · May 16, 2024 at 3:17 PM

Quote from San7

when creating a tour, the showtext.xml plugin is located in the panos folder
and is in the folder krpano-1.21.2/templates/xml/plugins/showtext.xml

... look in the file garrows.xml

It turns out it was a default file in krpano :) However, both the arrows.xml file and the garrows.xml file I have are encrypted. So, I can't find the part with action name="addchevrons_pc".

San7 · May 16, 2024 at 3:40 PM

I think you need to contact the creator of this plugin. I can't share its code if you have it encrypted

GeoK · May 16, 2024 at 5:05 PM

With the latest version, edit garrows_settings.xml to be something like below (note onover/onout/onover.mouse/onout.mouse), have your skin_tooptip style to be whatever you require:

XML

<style name="chevron"
	fillcolor="get:garrows_settings.chevrons_color"
	fillalpha="get:garrows_settings.chevrons_alpha"
	bordercolor="get:garrows_settings.chevrons_bordercolor"
	borderalpha="get:garrows_settings.chevrons_borderalpha"
	borderwidth="get:garrows_settings.chevrons_borderwidth"
	borderhittest="true"
	onover="
		removefloatingarrow();
		tween(fillcolor,get(garrows_settings.chevrons_coloronhover),0.5);
		tween(bordercolor,get(garrows_settings.chevrons_bordercoloronhover),0.5);
	    "
	onout="
		if(garrows_settings.show_floatingarrow, showfloatingarrow(););
		tween(fillcolor,get(garrows_settings.chevrons_color),0.5);
		tween(bordercolor,get(garrows_settings.chevrons_bordercolor),0.5);
		tween(layer[skin_tooltip].alpha, 0.0, 0.1, default, set(layer[skin_tooltip].visible,false), copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); );
	"
	onover.mouse="copy(layer[skin_tooltip].html, tooltip);
	                     set(layer[skin_tooltip].visible, calc(webvr.isenabled ? false : true));
	                     tween(layer[skin_tooltip].alpha, 1.0, 0.1);
	                     asyncloop(hovering, copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); );"
	onout.mouse="tween(layer[skin_tooltip].alpha, 0.0, 0.1, default, set(layer[skin_tooltip].visible,false), copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); );"	capture="get:garrows_settings.chevrons_capture"
	zorder="get:garrows_settings.chevrons_zorder"
	keep="false">
	capture="get:garrows_settings.chevrons_capture"
	zorder="get:garrows_settings.chevrons_zorder"
	keep="false">
</style>

Display More

onair0410 · May 16, 2024 at 7:19 PM

Oh, thank you so much. Thanks to you, I've solved it.
Below is the modified code. If anyone needs it, please modify it to fit your own style.
However, I'm not very skilled at coding, so the code might be messy. Also, I still have an unresolved issue: I want the tooltip to be positioned about 10px above the y-axis, but I'm struggling with that.
I'm not sure how to handle automatic line breaks when the tooltip gets longer.

Code

<action name="adjust_tooltip_text_color">
    set(layer[skin_tooltip].css, "font-size:16px; color:#FFFFFF; padding:5px 10px;"); 
</action>

<action name="showtooltip">
    if(layer[skin_tooltip].html != "",
        set(layer[skin_tooltip].visible, true);
        tween(layer[skin_tooltip].alpha, 1.0, 0.1);
        tween(layer[skin_tooltip].bgcolor, 0x000000, 0); 
        tween(layer[skin_tooltip].bgalpha, 0.5, 0); 
        tween(layer[skin_tooltip].roundedge, 5, 0);
		callwith(layer[skin_tooltip], adjust_tooltip_padding); 
        callwith(layer[skin_tooltip], adjust_tooltip_text_color); 
    ,
        set(layer[skin_tooltip].visible, false);
    );
</action>

<action name="hidetooltip">
    tween(layer[skin_tooltip].alpha, 0.0, 0.1, default, set(layer[skin_tooltip].visible, false));
</action>

<action name="adjust_tooltip_width">
    set(layer[skin_tooltip].width, calc(strwidth(layer[skin_tooltip].html) + 20)); 
</action>

<!-- chevrons style. can be customized if required -->
<style name="chevron"
	fillcolor="get:garrows_settings.chevrons_color"
	fillalpha="get:garrows_settings.chevrons_alpha"
	bordercolor="get:garrows_settings.chevrons_bordercolor"
	borderalpha="get:garrows_settings.chevrons_borderalpha"
	borderwidth="get:garrows_settings.chevrons_borderwidth"
	borderhittest="true"
	onover="
		removefloatingarrow();
		tween(fillcolor,get(garrows_settings.chevrons_coloronhover),0.5);
		tween(bordercolor,get(garrows_settings.chevrons_bordercoloronhover),0.5);
		"
	onout="
		if(garrows_settings.show_floatingarrow, showfloatingarrow(););
		tween(fillcolor,get(garrows_settings.chevrons_color),0.5);
		tween(bordercolor,get(garrows_settings.chevrons_bordercolor),0.5);
		tween(layer[skin_tooltip].alpha, 0.0, 0.1, default, set(layer[skin_tooltip].visible,false), copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); );
		"
	onover.mouse="copy(layer[skin_tooltip].html, tooltip);
						set(layer[skin_tooltip].visible, calc(webvr.isenabled ? false : true));
						tween(layer[skin_tooltip].alpha, 1.0, 0.1);
						tween(layer[skin_tooltip].bgcolor, 0x000000, 0); 
						tween(layer[skin_tooltip].bgalpha, 0.5, 0); 
						tween(layer[skin_tooltip].roundedge, 5, 0);
						callwith(layer[skin_tooltip], adjust_tooltip_width); 
        				callwith(layer[skin_tooltip], adjust_tooltip_height);  
						asyncloop(hovering, copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); );
						showtooltip(); 
				 "
	onout.mouse="tween(layer[skin_tooltip].alpha, 0.0, 0.1, default, set(layer[skin_tooltip].visible,false), copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); );"	
	capture="get:garrows_settings.chevrons_capture"
	zorder="get:garrows_settings.chevrons_zorder"
	keep="false">
	capture="get:garrows_settings.chevrons_capture"
	zorder="get:garrows_settings.chevrons_zorder"
	keep="false"
	>
</style>

Display More

When there is no tooltip,

San7 · May 16, 2024 at 7:37 PM

try replacing copy(layer[skin_tooltip].y,mouse.stagey); on
calc(layer[skin_tooltip].y, mouse.stagey - 10);

onair0410 · May 17, 2024 at 5:13 AM

Quote from San7

try replacing copy(layer[skin_tooltip].y,mouse.stagey); on
calc(layer[skin_tooltip].y, mouse.stagey - 10);

It was calc, not copy. Following your advice, it works perfectly. Today, I finally solved the problem I had been working on for a long time. Thank you.

[SOLVED] Is there a way to show the title name over a hotspot in the GArrows plug-in?

onair0410 May 17, 2024 at 11:15 AM

Participate now!

Tags

Users Viewing This Thread

onair0410 May 17, 2024 at 11:15 AM

Participate now!

Tags

Users Viewing This Thread

onair0410 May 17, 2024 at 11:15 AM