Display visited hotspot count on screen and once all hotspots clicked show a tour completed message.

ganeshkahane · March 1, 2023 at 7:38 AM

Hi
I am not coder, I am graphics designer's. Want to display hotspot with tag 'hide' visited count on screen and once all hotspots clicked show a tour completed message.
I found this code and copied in my v-tour, However it not working for me...It is not incrementing the number on layer Please see the code.

Layer - this i am using it to show the count on screen.
<layer name="hscount" type="text" font="Arial" css=" text-align:center; font-weight: bold; color:#0114DD; font-size:25px;'" width="80" height="30" bgcolor="0xffffff" align="topleft" bgalpha="0.8" keep="true" zorder="9999" x="15" y="15" onloaded="hs_tag_count"/>

This is your code (Made little changes)
<action name="hs_tag_count_print">
set(hs_tag_count, 0);
for(set(i, 0), i LT hotspot.count, inc(i),
if(hotspot[get(i)].tag == "hide",
inc(hs_tag_count);
);
);
calc(plugin[hscount].html, '14/' +hs_tag_count );
</action>

These are the hotspot for with 'hide' tag
<hotspot html="Image" name="Cabin" style="Info" ath="2.145" atv="13.446" onclick="popup('html', get(data[dog_house].content), 800, 330, true);" tag="hide" ondown="hs_tag_count_print();"/>

<hotspot name="spot2" style="Info" ath="-70.710" atv="0.729" onclick="popup('html', get(data[BOPControlPanel].content), 800, 500, true);" tag="hide" ondown="hs_tag_count_print();"/>

Problem is-
It is not moving more that 1 it always showing 1.

Please help me to fix this....

indexofrefraction · March 1, 2023 at 10:15 AM

untested ...

Code

<layer name="hscount" type="text" font="arial" 
	css="text-align:center;font-weight:bold;color:#0114DD;font-size:25px;"
	width="80" height="30" bgcolor="0xffffff" align="topleft" bgalpha="0.8" 
	keep="true" zorder="9999" x="15" y="15" onloaded="hs_tag_click(get(name));" />


<action name="hs_tag_click" scope="local" args="name">
	if(global.hs_tag_count === null, set(global.hs_tag_count, 0)); // only once!
	if(hotspot[get(name)].tag === 'hide', inc(global.hs_tag_count));
	calc(plugin[hscount].html, '14/' + global.hs_tag_count);
</action>


<hotspot html="Image" name="Cabin" style="Info" ath="2.145" atv="13.446" 
	onclick="popup('html', get(data[dog_house].content), 800, 330, true);" 
	tag="hide" onclick="hs_tag_click(get(name));" />


<hotspot name="spot2" style="Info" ath="-70.710" atv="0.729" 
	onclick="popup('html', get(data[BOPControlPanel].content), 800, 500, true);" 
	tag="hide" onclick="hs_tag_click(get(name));" />

Display More

ganeshkahane · March 2, 2023 at 4:41 PM

Hi

You are incredible! code works.

however count is still incrementing when I clicked same Hotspot again and again.

Also can we can show an image when user clicks all the hotspots? pls find attached image

indexofrefraction · March 2, 2023 at 10:21 PM

ofc all of that is possible with krpano!
study the examples and the documentation...
learning takes time

ganeshkahane · March 4, 2023 at 1:42 PM

I agree, What you said is correct however I'm photographer and Graphics Designer never learned Coding (It is hard to understand all this actions, scripts etc.). Anyway thanks for the support. I will keep looking for the answers

VRW_Phil · March 5, 2023 at 5:42 PM

Hi ganeshkahane I have added and changed a few lines of code to the incrediable code snippet indexofrefraction offered:

The best thing to do is once a hotspot has been clicked is then to disable that hotspot so it cannot add to the counter.

Plus I have added a few lines (If statement) to display a new layer once all 3 hotspots have been clicked.

Here is the tested code, Hope it helps:

Code

<layer name="hscount" type="text" font="arial"
      css="text-align:center;font-weight:bold;color:#0114DD;font-size:25px;"
      width="80" height="30" bgcolor="0xffffff" align="topleft" bgalpha="0.8"
      keep="true" zorder="9999" x="15" y="15" onloaded="hs_tag_click(get(name));" />


  <layer name="hscountComp" type="text" font="arial"
	css="text-align:center;font-weight:bold;color:#0114DD;font-size:25px;"
	height="30" bgcolor="0xffffff" align="topright" bgalpha="0.8"
	keep="true" zorder="9999" x="15" y="15" html="Completed" visible="false"/>


  <action name="hs_tag_click" scope="local" args="name">
	if(global.hs_tag_count === null, set(global.hs_tag_count, 0)); // only once!
	if(hotspot[get(name)].tag === 'hide', inc(global.hs_tag_count));
	calc(plugin[hscount].html, '3/' + global.hs_tag_count);


	<!-- trace(get(name)); -->
	<!-- DISABLE HOTSPOTS -->
	set(hotspot[get(name)].enabled, false);


	<!-- trace(global.hs_tag_count); -->
	<!-- DISPLAY NEW LAYER ONCE ALL HOTSPOTS HAVE BEEN CLICKED -->
	if(global.hs_tag_count == 3,
	set(layer[hscountComp].visible, true);
	);


  </action>


  <style name="skin_hotspot" bgcolor="0x336699" bgalpha="0.6" css="font-family:Helvetica;color:#ffffff;font-size:14px;" bgborder="1 0xffffff 1" bgroundedge="10" width="100" ></style>


  <hotspot name="htsp01" type="text" distorted="true" ath="0" atv="0" style="skin_hotspot" oy="-50"
	html="SPOT No. 1" padding="2 8" vcenter="true" depth="500" mipmapping="true" enabled="true"
	tag="hide" oversampling="2" onclick="hs_tag_click(get(name));"/>


  <hotspot name="htsp02" type="text" distorted="true" ath="0" atv="0" style="skin_hotspot" oy="0"
	html="SPOT No. 2" padding="2 8" vcenter="true" depth="500" mipmapping="true" enabled="true"
	tag="hide" oversampling="2" onclick="hs_tag_click(get(name));"/>


  <hotspot name="htsp03" type="text" distorted="true" ath="0" atv="0" style="skin_hotspot" oy="50"
	html="SPOT No. 3" padding="2 8" vcenter="true" depth="500" mipmapping="true" enabled="true"
	tag="hide" oversampling="2" onclick="hs_tag_click(get(name));"/>

Display More

San7 · March 5, 2023 at 8:14 PM

Hello, what's the point of disabling these access points? When pressed again, the counter will no longer work, but the assignment of the hotspot will be disabled, for example, when pressed, a picture may open and the user wants to open it again, or hover animation, etc.
In general, there can be many options, depending on what result you want to get.

andrew22222 · March 5, 2023 at 11:28 PM

Thanks for the example VRW_Phil. Appreciate you posting it and us non coders can learn from it

San7, I would see this as a good example to have an un complicated 'find the pieces' game within a tour. 10 scene tour with a hotspot in each that you can click on. View all 10 scenes, click on the 10 hotspots and get the congratulations message, popup image or play some audio. Deactivating the hotspot action just lets you keep the actual hotspot image where it is.

San7 · March 6, 2023 at 6:20 AM

Quote from andrew22222

San7, I would see this as a good example to have an un complicated 'find the pieces' game within a tour. 10 scene tour with a hotspot in each that you can click on. View all 10 scenes, click on the 10 hotspots and get the congratulations message, popup image or play some audio. Deactivating the hotspot action just lets you keep the actual hotspot image where it is.

Hello Andrew22222, you can come up with a lot of tasks, you gave a specific example, I mean the general approach to the task.
And I want to say that this code will not work when navigating through scenes if hotspots are registered inside scenes with the value keep=false ! Every time you go through scenes, hotspots are reloaded and changes are reset, this must be taken into account!

ganeshkahane · March 7, 2023 at 12:37 PM

yes, this is exactly happening. it get's reset when I am coming back to the scene

@VRW_Phil thanks for trying, really appreciate

ganeshkahane · March 8, 2023 at 9:14 AM

I searched online i came across this - this https://www.w3schools.com/html/html5_web…e.asp#gsc.tab=0

it has 'sessionStorage' where we can store data on web for the session.

Is it possible to store Hotspot value 'false' in this space?

smoothing like this (Trying)

Code

<action name="hs_tag_click" scope="local" args="name">
if(global.hs_tag_count === null, set(global.hs_tag_count, 0)); // only once!
if(hotspot[get(name)].tag === 'hide', inc(global.hs_tag_count));
calc(plugin[hscount].html, '14/' + global.hs_tag_count);
if(global.hs_tag_count === 14, set(layer[congratulations].visible, true));
<!--set(hotspot[get(name)].enabled, false)-->
sessionStorage.setItem(hotspot[get(name)].enabled,false);
var enabled = sessionStorage.getItem(hotspot[get(name)].enabled);
</action>

I'm not sure how to use this! please let me know if you know how to use this or even it is possible?
Thanks for your help, I hope you understand what I am saying

San7 · March 8, 2023 at 9:32 AM

Hi try this code

Code

<hotspot name="htsp01" type="text" distorted="true" ath="0" atv="0" style="skin_hotspot" oy="-50"
   html="SPOT No. 1" padding="2 8" vcenter="true" depth="500" mipmapping="true" enabled="true"
   oversampling="2" onloaded="if(tag_htsp01, set(enabled, false))" onclick="hs_tag_click(get(name));"/>
	
<action name="hs_tag_click" scope="local" args="name"  >
   if(!global.tag_%1, 
        set(global.tag_%1, true);
	set(hotspot[get(name)].enabled, false); 	
	if(global.hs_tag_count === null, set(global.hs_tag_count, 0)); // only once!
	inc(global.hs_tag_count));
	calc(plugin[hscount].html, '3/' + global.hs_tag_count); 
	<!-- trace(global.hs_tag_count); -->
	<!-- DISPLAY NEW LAYER ONCE ALL HOTSPOTS HAVE BEEN CLICKED -->
	if(global.hs_tag_count == 3, set(layer[hscountComp].visible, true);
   ); 
</action>

Display More

indexofrefraction · March 8, 2023 at 10:21 AM

Code

<action name="hs_tag_click" scope="local" args="name">
	if(global.hs_tag_count === null, set(global.hs_tag_count, 0)); // reset only once!
	if(hotspot[get(name)].tag === 'hide' AND hotspot[get(name)].counted === null, 
		set(hotspot[get(name)].counted, true); // tag as counted
		inc(global.hs_tag_count);
		calc(plugin[hscount].html, '14/' + global.hs_tag_count);
	); 
</action>

if you want to count each hotspot only once (without support to work across scenes)

Code

<action name="hs_tag_click" scope="local" args="name">
	if(hs_list === null, set(global.hs_list, '')); // reset only once!
	if(hotspot[get(name)].tag === 'hide',
		calc(local.id, xml.scene + '/' + name); // create an id for the clicked hs
		indexoftxt(local.index, get(hs_list), get(id)); // search in global
		if(index LT 0, // not found, then add the id
			if(hs_list, txtadd(hs_list, ',')); // add separator if count > 0
			txtadd(hs_list, get(id)); // add id
		);
		trace('id=',id);
		trace('list=',hs_list);
		set(local.count, 0); // reset count
		if(hs_list, // prevent empty global to be counted
			txtsplit(get(hs_list), ',', local.arr); // split to get actual count
			copy(count, arr.count); // set count 
		);
		trace('count=',count);
		copy(plugin[hscount].html, count); // set count 
		if(count === 10,
			trace('wheee! you found all hotspots!');
		);
	);
</action>

Display More

and here a version that should work across scenes (untested)

andrew22222 · March 8, 2023 at 11:58 PM

Hi.

I was studying your session storage code earlier ganeshkahane but couldn't get it to work either.

San7, your new code seems to work across multiple scenes but for some reason the counter is already at 1 when the first scene loads (before any hotspots are clicked)

indexofrefraction, your code doesn't appear to work but will study it more as good way to learn.

San7 · March 9, 2023 at 4:46 AM

Quote from andrew22222

San7, your new code seems to work across multiple scenes but for some reason the counter is already at 1 when the first scene loads (before any hotspots are clicked)

Hi, andrew22222, uncomment "trace" and see what it says. It should display only when clicked, and in the code you can see that it is set to 0.
Perhaps in the plugin[hscount].html layer you already have the value 3/1 instead of 3/0 !

Code

<action name="hs_tag_click" scope="local" args="name"  >
        ...	
	if(global.hs_tag_count === null, set(global.hs_tag_count, 0));  
        inc(global.hs_tag_count));
	calc(plugin[hscount].html, '3/' + global.hs_tag_count); 
	...
        trace(global.hs_tag_count);
	...
</action>

andrew22222 · March 9, 2023 at 6:43 AM

Yes I'm not quire sure what it is. As you mentioned I uncommented Trace and added showlog();

The first scene loads automatically and the on the top left the text window shows 3/1. Down in the log it shows INFO: 1
Then if I click on the hotspot in that first scene, the top left text window shows 3/2 and the log shows INFO: 1 and then INFO: 2 underneath. No other text shown.

Here's the code used before the scenes

Code

<layer name="hscount" type="text" font="arial"      css="text-align:center;font-weight:bold;color:#0114DD;font-size:25px;"      width="80" height="30" bgcolor="0xffffff" align="topleft" bgalpha="0.8"      keep="true" zorder="9999" x="15" y="15" onloaded="hs_tag_click(get(name));" />
  <layer name="hscountComp" type="text" font="arial"	css="text-align:center;font-weight:bold;color:#0114DD;font-size:25px;"	height="30" bgcolor="0xffffff" align="topright" bgalpha="0.8"	keep="true" zorder="9999" x="15" y="15" html="Completed" visible="false"/>	
<style name="skin_hotspot" bgcolor="0x336699" bgalpha="0.6" css="font-family:Helvetica;color:#ffffff;font-size:14px;" bgborder="1 0xffffff 1" bgroundedge="10" width="100" ></style>




<action name="hs_tag_click" scope="local" args="name"  >   if(!global.tag_%1,         set(global.tag_%1, true);	set(hotspot[get(name)].enabled, false); 		if(global.hs_tag_count === null, set(global.hs_tag_count, 0)); // only once!	inc(global.hs_tag_count));	calc(plugin[hscount].html, '3/' + global.hs_tag_count); 	 showlog(); trace(global.hs_tag_count);<!--  -->	<!-- DISPLAY NEW LAYER ONCE ALL HOTSPOTS HAVE BEEN CLICKED -->	if(global.hs_tag_count == 3, set(layer[hscountComp].visible, true);   ); </action>

and here's the code for the hotspot in that scene

Code

<hotspot name="htsp01" type="text" distorted="true" ath="0" atv="0" style="skin_hotspot" oy="-50"   html="SPOT No. 1" padding="2 8" vcenter="true" depth="500" mipmapping="true" enabled="true"    oversampling="2" onloaded="if(tag_htsp01, set(enabled, false))" onclick="hs_tag_click(get(name));"/>

and then the hotspot in the second scene

Code

<hotspot name="htsp02" type="text" distorted="true" ath="0" atv="0" style="skin_hotspot" oy="-50"   html="SPOT No. 2" padding="2 8" vcenter="true" depth="500" mipmapping="true" enabled="true"   oversampling="2" onloaded="if(tag_htsp02, set(enabled, false))" onclick="hs_tag_click(get(name));"/>

When I click on the second scene hotspot the log shows INFO: 1, INFO: 2, INFO: 3 and the layer showing Completed is displayed on the top right so no need to even go to the third scene.

San7 · March 9, 2023 at 7:11 AM

Quote from andrew22222

<layer name="hscount" ... onloaded="hs_tag_click(get(name));" />

Can you explain why you have loading in a layer hscount

San7 · March 9, 2023 at 7:19 AM

Quote from San7

Can you explain why you have loading in a layer hscount

I meant in this layer like this

Code

<layer name="hscount" ... html="3/0" onloaded="" 
<style name="skin_hotspot"  ... onclick.addevent="hs_tag_click(get(name));" />

San7 · March 9, 2023 at 7:53 AM

Code

<layer name="hscount" type="text" keep="true" align="topleft" x="15" y="15" width="80" height="30" enabled="false" zorder="9999"  
    font="arial" css="text-align:center;font-weight:bold;color:#0114DD;font-size:25px;"  bgcolor="0xffffff"  bgalpha="0.8"     
    html="3/0" />


<layer name="hscountComp" type="text" font="arial" css="text-align:center;font-weight:bold;color:#0114DD;font-size:25px;" height="30" visible="false" 
    enabled="false" bgcolor="0xffffff" align="topright" bgalpha="0.8" keep="true" zorder="9999" x="15" y="15" html="Completed" />	
  
<style name="skin_hotspot" keep="false" type="text" ath="0" atv="0" width="100" depth="500" distorted="true" bgcolor="0x336699" bgalpha="0.6" 
    css="font-family:Helvetica;color:#ffffff;font-size:14px;" padding="2 8" vcenter="true" oversampling="2"
    bgborder="1 0xffffff 1" bgroundedge="10"  mipmapping="true"  
    onclick.addevent="hs_tag_click(get(name));"></style>




<action name="hs_tag_click" scope="local" args="name"  >   
  if(!global.tag_%1,         
	set(global.tag_%1, true);	
	set(hotspot[get(name)].enabled, false); 		
	if(global.hs_tag_count === null, set(global.hs_tag_count, 0));  	
	inc(global.hs_tag_count));	
	calc(plugin[hscount].html, '3/' + global.hs_tag_count);  
	if(global.hs_tag_count == 3, set(layer[hscountComp].visible, true);   
  );  
</action>


<hotspot name="htsp01" style="skin_hotspot" oy="-50" html="SPOT No. 1" onloaded="if(tag_htsp01, set(enabled, false))"/>
<hotspot name="htsp02" style="skin_hotspot" oy="0"   html="SPOT No. 2" onloaded="if(tag_htsp02, set(enabled, false))" />
<hotspot name="htsp03" style="skin_hotspot" oy="50"  html="SPOT No. 3" onloaded="if(tag_htsp03, set(enabled, false))"/>

Display More

andrew22222 · March 9, 2023 at 8:14 AM

Hey San7,

I was replying to your previous post then you just added the full code. Thanks for persevering with this

The loading in a layer hscount was the same code supplied by VRW_Phil further up this page. The only thing that was different was the action code you posted plus the hotpsot code.

I just tried your newly posted code in a 3 scene tour and the count is now 3/0 when the scene loads so that's great. When I click on the hotpot it goes to 3/1 but then when I load scene 2 the 3/1 is still carried over but unfortunately the scene 2 hotspot is not active. same goes for the scene 3 hotspot.

Hey at least the count is staying after the first scene so that's progress.

Andrew

**************************

After I submitted this post the page refreshed and the previously posted

Code

<hotspot name="htsp02" style="skin_hotspot" oy="0"    html="SPOT No. 2" />

turned into this

Code

<hotspot name="htsp01" style="skin_hotspot" oy="-50" html="SPOT No. 1" onloaded="if(tag_htsp01, set(enabled, false))"/>

which works great. You must have amended it while I was typing?

Thanks very much with your help and I'll get on with making a larger 'look and find' tour using this code.

Do you have a donation app on your website or use PayPal? Will send beer money

ganeshkahane is going to be super happy when he gets on here

Display visited hotspot count on screen and once all hotspots clicked show a tour completed message.

Participate now!

Users Viewing This Thread