You are not logged in.

VTour change hotspot arrows to animated hotspots

jeffk

Beginner

  • "jeffk" started this thread

Posts: 2

  • Send private message

1

Sunday, January 10th 2016, 8:55pm

VTour change hotspot arrows to animated hotspots

I've spent around 12-14 hours trying to change the hotspot arrows in a tour made from the VTour Normal droplet.

i have had no success. and YES i have seen the xml-usage example for animated hot spots. am i editing the vtourskin.xml? or the tour.xml?

is there a step by step instruction anywhere? while i grasp the basics of krpano, I'm completely lost here. any help is appreciated

jeffk

Beginner

  • "jeffk" started this thread

Posts: 2

  • Send private message

2

Sunday, January 10th 2016, 11:42pm

is it even possible to switch them? id like to make it easy to add the animated hotspots from the tour_editor.html just like the arrow hotspots

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

3

Monday, January 11th 2016, 4:05pm

should be pretty simple. Change style of your hotspots to style of the animated hotspots. No need to change anything in vtourskin.xml. Just add new animated styles e.g. in your tour.xml and that's it.
See links to Klaus code

Your hotspots before/after:

Source code

 
1

<hotspot name="spot1" style="skin_hotspotstyle" ath="40.584" atv="14.293" linkedscene="scene_1" />

After:

Source code

 
1

<hotspot name="spot1" style="hotspot_ani_black" ath="40.584" atv="14.293" linkedscene="scene_1" />


add this lines outside any scene:

Source code

 
1
2
3
4
5

<style name="hotspot_ani_black" url="hotspot_ani_black_64x64x20.png" crop="0|0|64|64" framewidth="64" frameheight="64" frame="0" lastframe="19" onloaded="hotspot_animate();" onclick="if(linkedscene, loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); ); );"/>

<action name="hotspot_animate">
inc(frame,1,get(lastframe),0); mul(ypos,frame,frameheight); txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight)); delayedcall(0.03, if(loaded, hotspot_animate() ) );
</action>


Just typed the code without syntax checking, but should give you good guidelines....even there are some bugs in the code ;( Copy images for animation to right place and that should work. Let us know or even share online code to be able to help you more....

panorama07

Trainee

Posts: 63

  • Send private message

4

Wednesday, January 13th 2016, 2:52pm

animation png from ferst frame

Hello! How to make the animation stop on the final frame crop? And then it begins again with only the first frame. I tried to do the condition, but each time the animation begins - uncontrollably (no ferst frame)
Here is my code:


<action name="tigr_play" keep="true" >
inc(frame,1,get(lastframe),19);
mul(ypos,frame,frameheight);
txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));
delayedcall(0.05, tigr_play(););
if(frame === 19, stopdelayedcall(frame, 19); set(visible, false); set(frame, 0););
</action>
Here is my example . Animation takes place on the linkedscene

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

5

Wednesday, January 13th 2016, 5:12pm

Try with something like this (outside scene definition):

Source code

 
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

  <style name="tigrlapa" crop="0|0|500|500" framewidth="500" frameheight="500" frame="0" lastframe="19" distorted="true" visible="true" onclick="tigr_play2();"/>
  
  <action name="start_animation" keep="true">        
    set(frame,19);    
    tigr_play();  
  </action>
  
  <action name="tigr_play" keep="true">      
    dec(frame,1); 
    trace(get(frame));
    mul(ypos,frame,layer[tigr_hotspot_r].frameheight); 
    txtadd(layer[tigr_hotspot_l].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight)); 
    txtadd(layer[tigr_hotspot_r].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight)); 
    delayedcall(tigroimage, 0.05, tigr_play());     
    if(frame LT 0, stopdelayedcall(tigroimage);tigr_play2(););
  </action>

  <action name="tigr_play2" keep="true">    
    inc(frame,1); mul(ypos,frame,layer[tigr_hotspot_r].frameheight); 
    txtadd(layer[tigr_hotspot_l].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight)); 
    txtadd(layer[tigr_hotspot_r].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight));     
    delayedcall(tigroimage, 0.05, tigr_play2());     
    if(frame GE 20, stopdelayedcall(tigroimage););
  </action>

  <layer name="tigr_hotspot_r"  keep="true"  url="zzz.png"      style="tigrlapa" align="center" edge="left" zorder="8" keep="true" height="100%" width="50%"  />  
  <layer name="tigr_hotspot_l"  keep="true"  url="zzz_left.png" style="tigrlapa" align="center" edge="right" zorder="8" keep="true" height="100%" width="50%"   />

extend your arrow onclick to start also animation:

Source code

 
1

onclick="....loadscene(...); ...start_animation(); ); );"

add fliped image for left side: Can't attach image as >1mb but take any graphic program and flip your png verticaly and store under zzz_left.png

panorama07

Trainee

Posts: 63

  • Send private message

6

Thursday, January 14th 2016, 12:05pm

Umalo, thanks a lot. That was exactly what I needed! But there is a problem with html5: my example : animation is triggered and immediately returned. (curtain opens and immediately closes) . on the flash player - okay

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

7

Thursday, January 14th 2016, 12:21pm

I made it to close immediately when open. If you want to control open and close than you separate actions and call them separately.
See call for tigr_play2 in tigr_play action -> remove it. Than curtain will just open. As i left onclick action to close them you can also leave it as it is but than user would need to click every time new scene is loaded which is I think not user friendly.

panorama07

Trainee

Posts: 63

  • Send private message

8

Thursday, January 14th 2016, 12:37pm

Quoted from "Umalo"

I made it to close immediately when open. If you want to control open and close than you separate actions and call them separately.
See call for tigr_play2 in tigr_play action -> remove it. Than curtain will just open. As i left onclick action to close them you can also leave it as it is but than user would need to click every time new scene is loaded which is I think not user friendly.
Sorry. my poor English prevents me to understand. The problem is that flash everything is working properly, but html5 - incorrect. Please see my example on html5. (the curtains once opened, but immediately closed)

panorama07

Trainee

Posts: 63

  • Send private message

9

Thursday, January 14th 2016, 3:13pm

Everything worked out. Thank you! Here is my code:

Source code

 
1

<action name="tigr_play" keep="true">      set(layer[tigr_hotspot_r].visible, true); set(layer[tigr_hotspot_l].visible, true);      dec(frame,1);     trace(get(frame));    mul(ypos,frame,layer[tigr_hotspot_r].frameheight);     txtadd(layer[tigr_hotspot_l].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight));     txtadd(layer[tigr_hotspot_r].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight));     delayedcall(tigroimage, 0.02, tigr_play(););         if(frame LT 0, stopdelayedcall(tigroimage);tigr_play2();  );  </action>  <action name="tigr_play2" keep="true">      set(layer[tigr_hotspot_r].visible, true);     set(layer[tigr_hotspot_l].visible, true);	    inc(frame,1); mul(ypos,frame,layer[tigr_hotspot_r].frameheight);     txtadd(layer[tigr_hotspot_l].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight));     txtadd(layer[tigr_hotspot_r].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight));         delayedcall(tigroimage, 0.02, tigr_play2(););         if(frame GE 20, stopdelayedcall(tigroimage); set(layer[tigr_hotspot_r].visible, false); set(layer[tigr_hotspot_l].visible, false););  </action>

Tuur

Sage

Posts: 3,839

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

10

Thursday, January 14th 2016, 4:46pm

Nice effect!
Like it!
Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

panorama07

Trainee

Posts: 63

  • Send private message

11

Sunday, March 27th 2016, 1:57pm

animated png actions

Hello. I have a problem. there hotspot:

Source code

 
1

<hotspot name="skul_hotspot_r"    url.desktop="sp.png" url.tablet="sp.png"  url.mobile="sp.png"       style="skullapa" ath="-9.234609" atv="-11.380844"  rx="-7.0" ry="9.75" rz="0.150374" zorder="39"  scale="0.935758"   keep="true"  enabled="false"/>
and style:

Source code

 
1

   <style name="skullapa"   crop.desktop="0|0|500|500"  crop.mobile="0|0|150|150"  crop.tablet="0|0|150|150"   framewidth.desktop="500"  frameheight.desktop="500"   framewidth.tablet="150"  frameheight.tablet="150"  framewidth.mobile="150"  frameheight.mobile="150"   frame="0" lastframe="24" distorted="true" visible="true"    onclick="myaction();"  />

There are two action, animation:

Source code

 
1
2

<action name="skul_play" keep="true">      set(hotspot[skul_hotspot_r].visible, true);      dec(frame,1);     trace(get(frame));    mul(ypos,frame,hotspot[skul_hotspot_r].frameheight);      txtadd(hotspot[skul_hotspot_r].crop,'0|',get(ypos),'|',get(hotspot[skul_hotspot_r].framewidth),'|',get(hotspot[skul_hotspot_r].frameheight));     delayedcall(skuloimage, 0.01, skul_play(););         if(frame LT 1, stopdelayedcall(skuloimage); set(hotspot[skul_hotspot_r].visible, true); );  </action>
  <action name="skul_play2" keep="true">      set(hotspot[skul_hotspot_r].visible, true); 	    inc(frame,1); mul(ypos,frame,hotspot[skul_hotspot_r].frameheight);     trace(get(frame));    txtadd(hotspot[skul_hotspot_r].crop,'0|',get(ypos),'|',get(hotspot[skul_hotspot_r].framewidth),'|',get(hotspot[skul_hotspot_r].frameheight));         delayedcall(skuloimage, 0.05, skul_play2(););         if(frame GE 25, stopdelayedcall(skuloimage); set(hotspot[skul_hotspot_r].visible, true););  </action>


there is action on the Onclick:

Source code

 
1

<action name="myaction" keep="true"	> if (skul_hotspot_r!= 1, set(skul_hotspot_r,1); skul_play2(); , set(skul_hotspot_r,0); skul_play(); ); </action>


if I write the action in the hotspot "skul_hotspot_r" , everything works fine - the animation reaches the last frame and the next time you click again returns to the first. But if I prescribe "myaction" in another hotspot:

Source code

 
1

 <hotspot name="str"     url="str.png"  enabled="true"      style="str"   ath="-9.174924"  atv="20.802309"   zorder="1"  keep="true"  />  <style name="str"  onclick="myaction();" visible="true" />
, then there is something strange....
How to write a code: The first click - the animation goes to the last frame and stops.Second click - the animation back to the first frame and stops

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

12

Sunday, March 27th 2016, 2:16pm

Can you shere link to see your version online? Or send me small package on my mail to see the code

panorama07

Trainee

Posts: 63

  • Send private message

13

Monday, March 28th 2016, 8:01pm

thanks

many thanks Umalo

Source code

 
1
2
3

 <style name="skullapa" 	  crop.desktop="0|0|500|500"  crop.mobile="0|0|150|150"  crop.tablet="0|0|150|150" 	  framewidth.desktop="500"  frameheight.desktop="500" 	  framewidth.tablet="150"  frameheight.tablet="150"	  framewidth.mobile="150"  frameheight.mobile="150" 	  frame="0" firstframe="1" lastframe="24" distorted="true" visible="true"  	  onclick="myaction(skul_hotspot_r);"  />    <action name="myaction" keep="true"	>		if(layer[%1].animation_up EQ true, 		skul_play(%1); 			set(layer[%1].animation_up,false);		, 			skul_play2(%1); 			set(layer[%1].animation_up,true);	); 	</action>      <action name="skul_play" keep="true">      set(hotspot[skul_hotspot_r].visible, true);      sub(hotspot[%1].frame,1);     trace(get(hotspot[%1].frame));    mul(ypos,hotspot[%1].frame,hotspot[skul_hotspot_r].frameheight);      txtadd(hotspot[skul_hotspot_r].crop,'0|',get(ypos),'|',get(hotspot[skul_hotspot_r].framewidth),'|',get(hotspot[skul_hotspot_r].frameheight));     delayedcall(skuloimage, 0.01, skul_play(%1););         if(hotspot[%1].frame LT hotspot[%1].firstframe, stopdelayedcall(skuloimage); set(hotspot[skul_hotspot_r].visible, true); );  </action>
  <action name="skul_play2" keep="true">      trace(get(hotspot[%1].frame));    set(hotspot[skul_hotspot_r].visible, true); 	    inc(hotspot[%1].frame,1); mul(ypos,hotspot[%1].frame,hotspot[skul_hotspot_r].frameheight);         txtadd(hotspot[skul_hotspot_r].crop,'0|',get(ypos),'|',get(hotspot[skul_hotspot_r].framewidth),'|',get(hotspot[skul_hotspot_r].frameheight));         delayedcall(skuloimage, 0.05, skul_play2(%1););         if(hotspot[%1].frame GT hotspot[%1].lastframe, wait(0.01);stopdelayedcall(skuloimage); set(hotspot[skul_hotspot_r].visible, true););  </action>
 <hotspot name="skul_hotspot_r"    url.desktop="sp.png" url.tablet="sp.png"  url.mobile="sp.png"       style="skullapa" ath="-9.234609" atv="-11.380844"  rx="-7.0" ry="9.75" rz="0.150374" zorder="39"  scale="0.935758"   keep="true"  enabled="false" 	animation_up="true" 	/>   <hotspot name="str"     url="stra.png"   enabled="true"      style="str"  alpha="0.4" scale="0.7"  ath="-28.009311"  atv="-20.016952"  rz="125.363029" zorder="1"  keep="true"  distorted="true" crop="0|0|200|200"	       framewidth="200" frameheight="200" frame="0" lastframe="9"	       onloaded="hotspot_animate();"   />    	<action name="hotspot_animate">		inc(frame,1,get(lastframe),0);		mul(ypos,frame,frameheight);		txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));		delayedcall(0.07, if(loaded, hotspot_animate() ) );	</action>  <style name="str"  onclick="myaction(skul_hotspot_r);" visible="true" />

Similar threads