Sie sind nicht angemeldet.

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

  • 1
  • 2

ganeshkahane

Anfänger

  • »ganeshkahane« ist der Autor dieses Themas

Beiträge: 5

  • Nachricht senden

1

Mittwoch, 1. März 2023, 07:38

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

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

Profi

Beiträge: 1 362

  • Nachricht senden

2

Mittwoch, 1. März 2023, 10:15

untested ...

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<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

ganeshkahane

Anfänger

  • »ganeshkahane« ist der Autor dieses Themas

Beiträge: 5

  • Nachricht senden

3

Donnerstag, 2. März 2023, 16:41

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« hat folgende Datei angehängt:

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »ganeshkahane« (2. März 2023, 16:59)

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

4

Donnerstag, 2. März 2023, 22:21

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

ganeshkahane

Anfänger

  • »ganeshkahane« ist der Autor dieses Themas

Beiträge: 5

  • Nachricht senden

5

Samstag, 4. März 2023, 13:42

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*

VRW_Phil

Schüler

Beiträge: 73

Wohnort: London

Beruf: Krpano Custom Coding. Responsive Websites.

  • Nachricht senden

6

Sonntag, 5. März 2023, 17:42

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:

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

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

San7

Profi

Beiträge: 626

Beruf: coding in krpano

  • Nachricht senden

7

Sonntag, 5. März 2023, 20:14

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/


andrew22222

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

  • Nachricht senden

8

Sonntag, 5. März 2023, 23:28

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.

San7

Profi

Beiträge: 626

Beruf: coding in krpano

  • Nachricht senden

9

Montag, 6. März 2023, 06:20

Zitat von »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/


ganeshkahane

Anfänger

  • »ganeshkahane« ist der Autor dieses Themas

Beiträge: 5

  • Nachricht senden

10

Dienstag, 7. März 2023, 12:37

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*

ganeshkahane

Anfänger

  • »ganeshkahane« ist der Autor dieses Themas

Beiträge: 5

  • Nachricht senden

11

Mittwoch, 8. März 2023, 09:14

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)

Quellcode

 
1
2
3
4
5
6
7
8
9

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

San7

Profi

Beiträge: 626

Beruf: coding in krpano

  • Nachricht senden

12

Mittwoch, 8. März 2023, 09:32

Hi try this code

Quellcode

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

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


indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

13

Mittwoch, 8. März 2023, 10:21

Quellcode

 
1
2
3
4
5
6
7
8

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

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

Dieser Beitrag wurde bereits 13 mal editiert, zuletzt von »indexofrefraction« (8. März 2023, 20:25)

andrew22222

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

  • Nachricht senden

14

Mittwoch, 8. März 2023, 23:58

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

Profi

Beiträge: 626

Beruf: coding in krpano

  • Nachricht senden

15

Donnerstag, 9. März 2023, 04:46

Zitat von »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 !

Quellcode

 
1
2
3
4
5
6
7
8
9

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


andrew22222

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

  • Nachricht senden

16

Donnerstag, 9. März 2023, 06:43

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

Quellcode

 
1
2
3
4
5
6

<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

Quellcode

 
1

<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

Quellcode

 
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.

San7

Profi

Beiträge: 626

Beruf: coding in krpano

  • Nachricht senden

17

Donnerstag, 9. März 2023, 07:11

Zitat von »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/


San7

Profi

Beiträge: 626

Beruf: coding in krpano

  • Nachricht senden

18

Donnerstag, 9. März 2023, 07:19

Zitat von »San7«

Zitat von »andrew22222«

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

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

I meant in this layer like this

Quellcode

 
1
2

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


Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »San7« (9. März 2023, 07:30)

San7

Profi

Beiträge: 626

Beruf: coding in krpano

  • Nachricht senden

19

Donnerstag, 9. März 2023, 07:53

this is the complete code

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

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


andrew22222

Fortgeschrittener

Beiträge: 397

Wohnort: Australia

  • Nachricht senden

20

Donnerstag, 9. März 2023, 08:14

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

Quellcode

 
1

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


turned into this

Quellcode

 
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

  • 1
  • 2

Ähnliche Themen