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

Beginner

Wednesday, March 1st 2023, 7:38am

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

Go to the top of the page

$indexofrefraction is offline$ indexofrefraction

Professional

Posts: 1,362

2

Wednesday, March 1st 2023, 10:15am

untested ...

Source 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));" />

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Go to the top of the page

ganeshkahane

Beginner

Posts: 5

3

Thursday, March 2nd 2023, 4:41pm

You are incredible! code works. However.....

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

ganeshkahane has attached the following file:

Congratulations.png (59.2 kB - 55 times downloaded - latest: Today, 6:21am)

This post has been edited 1 times, last edit by "ganeshkahane" (Mar 2nd 2023, 4:59pm)

Go to the top of the page

$indexofrefraction is offline$ indexofrefraction

Professional

Posts: 1,362

4

Thursday, March 2nd 2023, 10:21pm

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

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Go to the top of the page

ganeshkahane

Beginner

Posts: 5

5

Saturday, March 4th 2023, 1:42pm

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

Go to the top of the page

VRW_Phil

Trainee

Posts: 73

Location: London

Occupation: Krpano Custom Coding. Responsive Websites.

6

Sunday, March 5th 2023, 5:42pm

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:

Source 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));"/>

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

7

Sunday, March 5th 2023, 8:14pm

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.

https://novosibpano.ru/Plugins/

Go to the top of the page

andrew22222

Intermediate

Posts: 397

Location: Australia

8

Sunday, March 5th 2023, 11:28pm

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

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.

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

9

Monday, March 6th 2023, 6:20am

Quoted 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! *attention*

https://novosibpano.ru/Plugins/

Go to the top of the page

ganeshkahane

Beginner

Posts: 5

10

Tuesday, March 7th 2023, 12:37pm

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

@VRW_Phil thanks for trying, really appreciate *smile*

Go to the top of the page

ganeshkahane

Beginner

Posts: 5

11

Wednesday, March 8th 2023, 9:14am

Is it possible to use 'sessionStorage' to store false value

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)

Source 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 *unsure*

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

12

Wednesday, March 8th 2023, 9:32am

Hi try this code

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

https://novosibpano.ru/Plugins/

Go to the top of the page

$indexofrefraction is offline$ indexofrefraction

Professional

Posts: 1,362

13

Wednesday, March 8th 2023, 10:21am

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

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

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

zFilter plugin -- zFlare plugin -- zSnapshot plugin

This post has been edited 13 times, last edit by "indexofrefraction" (Mar 8th 2023, 8:25pm)

Go to the top of the page

andrew22222

Intermediate

Posts: 397

Location: Australia

14

Wednesday, March 8th 2023, 11:58pm

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.

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

15

Thursday, March 9th 2023, 4:46am

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

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

https://novosibpano.ru/Plugins/

Go to the top of the page

andrew22222

Intermediate

Posts: 397

Location: Australia

16

Thursday, March 9th 2023, 6:43am

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

Source 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

Source 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

Source code

1
2

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

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

17

Thursday, March 9th 2023, 7:11am

Quoted from "andrew22222"

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

Can you explain why you have loading in a layer hscount *question*

https://novosibpano.ru/Plugins/

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

18

Thursday, March 9th 2023, 7:19am

Quoted from "San7"

Quoted from "andrew22222"

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

Can you explain why you have loading in a layer hscount

I meant in this layer like this

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

https://novosibpano.ru/Plugins/

This post has been edited 2 times, last edit by "San7" (Mar 9th 2023, 7:30am)

Go to the top of the page

San7

Professional

Posts: 626

Occupation: coding in krpano

19

Thursday, March 9th 2023, 7:53am

this is the complete code

Source 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))"/>

https://novosibpano.ru/Plugins/

Go to the top of the page

andrew22222

Intermediate

Posts: 397

Location: Australia

20

Thursday, March 9th 2023, 8:14am

Hey San7,

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

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

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

turned into this

	Source code
1	<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 *thumbsup*

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

Go to the top of the page