Wrong xml structure? - Page 2 - Examples

Kev-in-spain

Intermediate

Posts: 152

Location: Barcelona

Occupation: VR Photographer

21

Thursday, March 10th 2011, 5:17pm

Hi Klaus,

It's easier to show you than try to explain.
http://www.projectsolutions.es/demos/yomec/tour.html (takes a while to load as I'm still working on stuff)

As the tour opens, there are two animated hotspots visible.
The one on the left opens an image in the manner that I would like but does not scale to the stage width or height.
The one on the right opens an image which scales to stage width and height but opens in the way described in my previous post.

Thanks for your time.

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

22

Monday, March 14th 2011, 12:14pm

Hi,

here an example:

Source code

<plugin name="test" url="" align="center" />

<action name="showtest">
    <!-- hide the image at begin -->
    set(plugin[test].visible, false);

    <!-- set the onloaded event to show the image when loaded -->
    set(plugin[test].onloaded, openimage);

    <!-- set a new url and start loading the image -->
    set(plugin[test].url, image.png);
</action>

<action name="openimage">
    <!-- save the original size of the image -->
    copy(plugin[test].fullwidth, plugin[test].width);
    copy(plugin[test].fullheight, plugin[test].height);

    <!-- set the startup size -->
    set(plugin[test].width,100);
    set(plugin[test].height,50);

    <!-- show the image -->
    set(plugin[test].visible, true);

    <!-- first tween the width to the screen width -->
    tween(plugin[test].width, get(stagewidth), 1.0, default,
            <!-- then calc the upscaled proportional height -->
            div(temp, plugin[test].fullheight, plugin[test].fullwidth);
            mul(temp, stagewidth);

            <!-- then tween the height to that size -->
            tween(plugin[test].height, get(temp), 1.0, default,
                    <!-- finally change the plugin sizes to percent and prop to keep the size also during window resizing -->
                    set(plugin[test].width,100%);
                    set(plugin[test].height,prop);
                );
        );
</action>

best regards,
Klaus

Go to the top of the page

Kev-in-spain

Intermediate

Posts: 152

Location: Barcelona

Occupation: VR Photographer

23

Monday, March 14th 2011, 7:16pm

Quoted from "klaus.krpano"


tween(plugin[test].width, get(stagewidth), 1.0, default,

div(temp, plugin[test].fullheight, plugin[test].fullwidth);
mul(temp, stagewidth);

tween(plugin[test].height, get(temp), 1.0, default,

Hi Klaus,
I think I understand that I should insert or substitute some of this part of this section of the scourse code to adjust my plugin images to the proportion of the screen I would like them to fill, which is 60% of the width by proportion in height.
I have tried several things but, again, my limited knowledge of the workings of this code has forced me back here to ask for more help.
If it is of any consequence, the original size of the plugin image is 1075 x 725 pixels.

By the way, I have noticed when I have been scouring the forum for answers, a lot of members refer to source codes 1,2,3...... 6,7,8 etc.
Is there a data bank of source codes somewhere on the site that I can access?

Go to the top of the page

Jarredja

Professional

Posts: 1,058

Location: LA

24

Monday, March 14th 2011, 8:35pm

Kevin,

I believe your actions setup has been causing some issues for you. I took the following and adjusted it. You were using ))))); instead of closing each command in the action. Try the openImage code below and take a look at the rest too. I was able to get what I believe you wanted to work for me.

Jarred
P.s. the 1,2,3,4, numbers come from using the # button above, otherwise known as the code button.

good luck

Source code

  <action name="openImage">

		  tween(view.fov, 120,0.7); 
tween(plugin[engine_hoist].width,1075,0.5); wait(1);
tween(plugin[engine_hoist].height,717,0.5); 
tween(plugin[text2].scale, 0.56,0.2); 
tween(plugin[text2].scale, 0.52,0.05); 
tween(plugin[text2].scale, 0.55,0.1); 
loadscene('scene_2',null,KEEPALL,BLEND(1.2));
</action> 

<action name="closeWait">tween(plugin[wait].alpha,0,1); tween(plugin[wait].visible, 0);stopLoader();</action> 
  <action name="stopLoader">set("progress.showload","none"); 
  set("progress.showwait","none");</action> 
  <action name="hotspot_animate">inc(frame,1,get(frames),0); 
  mul(ypos,frame,frameheight); 
  txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight)); 
  delayedcall(0.02,hotspot_animate());</action> 
  <action name="showImage">set(plugin[photo].url, %1); 
  set(plugin[text].url, %2); 
  tween(view.fov, 120,0.7); 
  tween(plugin[photo].width,get(stagewidth),0.5); 
  set(plugin[photo].width,prop); 
  tween(plugin[photo].height,get(stageheight),0.5); 
  set(plugin[photo].height,70%); 
  tween(plugin[text].scale, 0.56,0.2); 
  tween(plugin[text].scale, 0.52,0.05); 
  tween(plugin[text].scale, 0.55,0.1); 
  loadscene('scene_2',null,KEEPALL,BLEND(1.2));</action> 
  <action name="close">tween(plugin[text].scale, 0,0.3); 
  tween(plugin[photo].height, 100,0.2,easyIn); 
  tween(plugin[photo].width, 0,0.3,easyIn, pano());</action> 
  <action name="close_text">tween(plugin[text].scale, 0,0.3);</action> 
  <action name="close2">tween(plugin[text2].scale, 0,0.3); 
  tween(plugin[engine_hoist].height, 100,0.2,easyIn); 
  tween(plugin[engine_hoist].width, 0,0.3,easyIn, pano());</action> 
  <action name="close_text2">tween(plugin[text2].scale, 0,0.3);</action> 
  <action name="pano">loadscene('scene_yomec',null,KEEPALL,BLEND(1.2), zoom());</action>

Go to the top of the page

Kev-in-spain

Intermediate

Posts: 152

Location: Barcelona

Occupation: VR Photographer

25

Tuesday, March 15th 2011, 3:25pm

Hi Jarred,
Thanks for your input.
However it does not resolve my issue.
The section of code that you have rearranged actually works fine in it's original form apart from not scaling to stage.
Here's the example: http://www.projectsolutions.es/demos/yomec/tour.html

As the tour opens, the hotspot on the left has the correct action but does not scale to stagewidth/height. On my screen (23" widescreen) the image opens to approximately 60% screen width. Depending on what size screen you are using it may cover the entire screen or even bleed out of the edges.

The hotspot on the right does scale to stagewidth/height but not before opening to 100% width/height first. (for some reason it doesn't always act correctly the first time you click it... you may have to close the image and click it again or refresh the page once the tour has loaded..... something else I have to look into *wacko*

)

I can write an action to scale the image on both x & y simultaneously by using % and prop but the issue arises when I try to separate them.

So, to summarize, what I would really like is the action of the left hotspot i.e. scale to it's width and then scale to it's proportionate height, but also to be in proportion to the stage (60% of stagewidth).

Klaus kindly posted up a source code but, as I indicated in my last post, my lack of knowledge of the xml prevents me from making the appropriate changes or additions.

As always, I appreciate any input and thanks for your time.

Go to the top of the page

Jarredja

Professional

Posts: 1,058

Location: LA

26

Tuesday, March 15th 2011, 4:11pm

Ok, I may have looked at the wrong example. I thought about that last night after I posted the code. Anyway, you are tweening to stage.width and height which is 100%. I thnk I know what you want now. You want to calculate the stage size and display the image at 60% height while keeping the proportions of the image balanced. As for they way your code is written, perhaps that is why you don't always get consistant results. Maybe it's just me??? I don't believe I have seen it written your way before.

This post has been edited 3 times, last edit by "Jarredja" (Mar 15th 2011, 6:37pm)

Go to the top of the page

Jarredja

Professional

Posts: 1,058

Location: LA

27

Wednesday, March 16th 2011, 4:36am

Kevin,

This is modified code from Klaus's image - gallery. Some snippits may be unnecessary but at this moment, I thought it would be better to present some U G L Y code and let you tweak it further rather than keep you waiting and wondering. I have added a few comments in to assist you in getting this working too. Let me know how it works and notice if you wish to change the % look for the 0.6 two places in the code.

Source code

		<!--- Replace your URL -->
<plugin name="test" url="%SWFPATH%/graphics/engine_hoist.png" visible="false" keep="true" align="center" />

<!--- Rename your action, plugin names and onclick functions-->
<action name="showimage2">
		
		
		set(plugin[test].zorder, 3);

		push(plugin[test].width);
		push(plugin[test].height);
		plugin[test].resetsize();
		copy(plugin[test].originalwidth, plugin[test].width);
		copy(plugin[test].originalheight, plugin[test].height);
		pop(plugin[test].height);
		pop(plugin[test].width);

		set(plugin[test].width,100);
    set(plugin[test].height,50);
		set(plugin[test].visible, true);
		set(imgwidth, get(plugin[test].originalwidth));
		set(imgheight, get(plugin[test].originalheight));

		set(maxw, get(stagewidth));
		mul(maxwidth, maxw, 0.6);
		set(maxh, get(stageheight));
		 mul(maxheight, maxh, 0.6);
		if(imgwidth GT maxwidth,
		   mul(imgheight, imgheight, maxwidth);
		   div(imgheight, imgheight, imgwidth);
		    copy(imgwidth, maxwidth);
		    set(plugin[test].imgheight, prop);
		  );

		if(imgheight GT maxheight,
		   mul(imgwidth, imgwidth, maxheight);
		   div(imgwidth, imgwidth, imgheight);
		   copy(imgheight, maxheight);
		   set(plugin[test].imgwidth, prop);
		  );

		  
		  
		  
		tween(plugin[test].width, get(imgwidth),2.0);
		wait(2);
		tween(plugin[test].height, get(imgheight),2.0);

		
		

		set(plugin[test].onclick, close2() );
	</action>

Good Luck,

And to anyone else, if you can make it work better, please do so AND POST an edited copy here. *squint*

Jarred

Go to the top of the page

Kev-in-spain

Intermediate

Posts: 152

Location: Barcelona

Occupation: VR Photographer

28

Wednesday, March 16th 2011, 5:01pm

Almost!!!!

Hi Jarred,
Firstly, thanks for taking the time to produce this source code.

However, there's still one slight issue.
I've used it in this tour of an art gallery to bring up plugin images of the art on the walls. http://www.projectsolutions.es/demos/gallery/tour.html
Most of them look fine as they are portrait (i.e. height is greater than the width) but one of them is landscape (180º to the opening point of the tour) which still opens as portrait.
I discovered that if the size of the browser window is altered, even just a couple of pixels, while the tour is open, everything then works as it should. Meaning, all the images open to their correct proportions.
I also noticed that on the first click of the hotspots, there seems to be a bit of a struggle to open the image. Once closed and re-opened it seems fine apart from the proportions. This does not happen when I open the tour locally so I'm assuming it is something to do with connection speed or bandwidth... what's your opinion?

The only thing I have changed is that I've set the image url to ' url"" ' to speed up initial loading time.
Obvioulsy I have added an action to set the url and start the 'openImage' action.

Quoted

<hotspot name="spot1" style="info_spot" ath="14.13" atv="6.45" onhover="showtext(Clique para más información, buttonstyle);"
onclick="lookto(14,0,65,smooth(150,30,40)); picurl(plugins/art/pic1.png)" />
<hotspot name="spot2" style="info_spot" ath="32.25" atv="6.50" onhover="showtext(Clique para más información, buttonstyle);"
onclick="lookto(32,0,65,smooth(150,30,40));picurl(plugins/art/pic2.png)" />
<hotspot name="spot3" style="info_spot" ath="136" atv="11" onhover="showtext(Clique para más información, buttonstyle);"
onclick="lookto(136,0,65,smooth(150,30,40));picurl(plugins/art/pic3.png)" />
<hotspot name="spot4" style="info_spot" ath="213" atv="11" onhover="showtext(Clique para más información, buttonstyle);"
onclick="lookto(213,0,65,smooth(150,30,40));picurl(plugins/art/pic4.png)" />
<hotspot name="spot5" style="info_spot_2" ath="-72" atv="7.6" onhover="showtext(Clique para más información, buttonstyle);"
onclick="lookto(-72,0,65,smooth(150,30,40));picurl(plugins/art/pic5.png)" />

<plugin name="image" url=""
visible="false" keep="true" align="center" zorder="3" />

<action name="picurl">
set(plugin[image].url,%1);
showImage();
</action>

<action name="showImage">
push(plugin[image].width);
push(plugin[image].height);
plugin[image].resetsize();
copy(plugin[image].originalwidth, plugin[image].width);
copy(plugin[image].originalheight, plugin[image].height);
pop(plugin[image].height);
pop(plugin[image].width);
set(plugin[image].width,100);
set(plugin[image].height,50);
set(plugin[image].visible, true);
set(imgwidth, get(plugin[image].originalwidth));
set(imgheight, get(plugin[image].originalheight));
set(maxw, get(stagewidth));
mul(maxwidth, maxw, 0.8);
set(maxh, get(stageheight));
mul(maxheight, maxh, 0.8);
if(imgwidth GT maxwidth,
mul(imgheight, imgheight, maxwidth);
div(imgheight, imgheight, imgwidth);
copy(imgwidth, maxwidth);
set(plugin[image].imgheight, prop);
);
if(imgheight GT maxheight,
mul(imgwidth, imgwidth, maxheight);
div(imgwidth, imgwidth, imgheight);
copy(imgheight, maxheight);
set(plugin[image].imgwidth, prop);
);
tween(plugin[image].width, get(imgwidth),0.3,,
tween(plugin[image].height, get(imgheight),0.6));
set(plugin[image].onclick, close() );
</action>

Thanks again.

Kev

This post has been edited 1 times, last edit by "Kev-in-spain" (Mar 16th 2011, 5:14pm)

Go to the top of the page

Jarredja

Professional

Posts: 1,058

Location: LA

29

Wednesday, March 16th 2011, 8:28pm

Check your PM box.

Go to the top of the page

Jarredja

Professional

Posts: 1,058

Location: LA

30

Thursday, March 17th 2011, 8:06pm

Here is my latest work. I am sure someone can still streamline it a bit and make it better so please jump in. But here goes.

I added a variable to the hotspot calling the image, named urltxt Here I store the url value for each plugin that will be created.

Source code

<hotspot name="spot1" url="%SWFPATH%/img/1.png" ath="-20" atv="-15" visible="true" urltxt="%SWFPATH%/plugins/art/pic1.png" onclick="looktohotspot(spot1,65,smooth(100,50,20)); showimage2(t1);" /> 
<hotspot name="spot2" url="%SWFPATH%/img/2.png" ath="-20" atv="15" visible="true"  urltxt="%SWFPATH%/plugins/art/pic2.png" onclick="looktohotspot(spot2,65,smooth(100,50,20)); showimage2(t2);" /> 

........

Then I add a plugin AND MUST USE A WAIT(1); HERE and I don't know why but it must be there or it will not copy the original image value for sizing. Maybe someone can explain it or give me a workaround here.
At the end, the plugin is removed.
Reasoning here is those plugins do not load until they are called and they do not hang around to intefere with anything else.

Source code

<action name="showimage2">
		addplugin(%1);
		set(plugin[%1].url, get(hotspot[spo%1].urltxt ));
		set(plugin[%1].keep, true);
		set(plugin[%1].visible, false);
		set(plugin[%1].align, center);	
		set(plugin[%1].zorder, 3);
		wait(1);
		copy(plugin[%1].originalwidth, plugin[%1].width);
		copy(plugin[%1].originalheight, plugin[%1].height);
		
		set(plugin[%1].width,100);
    set(plugin[%1].height,50);
		set(plugin[%1].visible, true);
		set(imgwidth, get(plugin[%1].originalwidth));
		set(imgheight, get(plugin[%1].originalheight));

		set(maxw, get(stagewidth));
		mul(maxwidth, maxw, 0.9);
		set(maxh, get(stageheight));
		 mul(maxheight, maxh, 0.9);
		if(imgwidth GT maxwidth,
		   mul(imgheight, imgheight, maxwidth);
		   div(imgheight, imgheight, imgwidth);
		    copy(imgwidth, maxwidth);
		    set(plugin[%1].imgheight, prop);
		  );

		if(imgheight GT maxheight,
		   mul(imgwidth, imgwidth, maxheight);
		   div(imgwidth, imgwidth, imgheight);
		   copy(imgheight, maxheight);
		   set(plugin[%1].imgwidth, prop);
		  );

		  
		  
		  
		tween(plugin[%1].width, get(imgwidth),1.50);
		wait(2);
		tween(plugin[%1].height, get(imgheight),1.50);

		
		

		set(plugin[%1].onclick, close2(%1) );
	</action>
	<action name="close2">
	tween(plugin[%1].height, 10, 1.5, ,wait);
	tween(plugin[%1].width, 10, 1.5, ,wait);
	zoomto(90,smooth()); set(plugin[%1].visible, false); 
	removeplugin(%1);</action>

Edit:links removed

Jarred

This post has been edited 3 times, last edit by "Jarredja" (Oct 31st 2011, 3:23am)

Go to the top of the page

Jarredja

Professional

Posts: 1,058

Location: LA

31

Thursday, March 17th 2011, 8:16pm

Well, it was working perfectly on flash. I just viewed it on iPhone and "not so good". I will return to the drawing board.
Edit: I guess I need to add some kind of onloadcomplete, it works correctly if you let the pano load and then click on a hotspot. i originally clicked on the iphone before it was finished loading and that caused issues.

Feedback please!

Jarred

Go to the top of the page

Kev-in-spain

Intermediate

Posts: 152

Location: Barcelona

Occupation: VR Photographer

32

Friday, March 18th 2011, 1:02pm

Feedback

Hi Jarred,
As I said in my message, everything works fine, at least, good enough for me to send off the example I was working on. Still a slight issue though.... just to drive you nuts!
I'll write the rest of this post as a summary for anyone else interested.

For the benefit of anyone else following this post, Jarred has come up with an action source code to resolve my issue of opening a plugin image, firstly to 20% of it's height (0% width), then to 100% of it's width in proportion to the stage before scaling to it's height in proportion to itself.
Here's a copy of the code as I am using it:

Quoted

<action name="showImage">

set(plugin[%1].zorder, 3);
push(plugin[%1].width);
push(plugin[%1].height);
plugin[%1].resetsize();
copy(plugin[%1].originalwidth, plugin[%1].width);
copy(plugin[%1].originalheight, plugin[%1].height);
pop(plugin[%1].height);
pop(plugin[%1].width);
set(plugin[%1].width,100);
set(plugin[%1].height,50);
set(plugin[%1].visible, true);
set(imgwidth, get(plugin[%1].originalwidth));
set(imgheight, get(plugin[%1].originalheight));
set(maxw, get(stagewidth));
mul(maxwidth, maxw, 0.8);
set(maxh, get(stageheight));
mul(maxheight, maxh, 0.8);
if(imgwidth GT maxwidth,
mul(imgheight, imgheight, maxwidth);
div(imgheight, imgheight, imgwidth);
copy(imgwidth, maxwidth);
set(plugin[%1].imgheight, prop);
);
if(imgheight GT maxheight,
mul(imgwidth, imgwidth, maxheight);
div(imgwidth, imgwidth, imgheight);
copy(imgheight, maxheight);
set(plugin[%1].imgwidth, prop);
);
tween(plugin[%1].width, get(imgwidth),0.3,,
tween(plugin[%1].height, get(imgheight),0.6));
set(plugin[%1].onclick, close(%1) );
</action>

The code works perfectly but the only remaining issue was that the images all load as the tour loads.
(adding 'set(plugin[plugin name or %1].url, plugin url or %1);' to the action, for some reason, messes with the already complex action of opening the plugin in stages, in proportion to itself and scaled to stage.)

To rectify this I added:

<events onloadcomplete="begin"/>

<action name="begin">
set(plugin[image1].url,plugins/art/pic1.png);
set(plugin[image2].url,plugins/art/pic2.png);
set(plugin[image3].url,plugins/art/pic3.png);
set(plugin[image4].url,plugins/art/pic4.png);
set(plugin[image5].url,plugins/art/pic5.png);
</action>

Fine, but this still means that if a user clicks a hotspot within the first 5 to 10 seconds after the tour has loaded, nothing happens. After this time, everything is ok.
I say everything is ok, and this is true for the tour in question as it is just an example and only contains 5 plugin images. In reality the tour my contain many more (it's an art gallery) and this would cause major loading time issues.

Today I have made another alteration. I've scrapped the earlier mentioned 'event onload' and it's corresponding action and made a simple 'set url' action for each image, outside of the main 'showImage' action:

<action name="image1">
set(plugin[image1].url,plugins/art/pic1.png);
</action>
<action name="image2">
set(plugin[image2].url,plugins/art/pic2.png);
</action>
etc, etc.

Then added to the hotspot onclick command (red txt):
<hotspot name="spot1" style="info_spot" ath="14.13" atv="6.45" onhover="showtext(Clique para más información, buttonstyle);"
onclick="lookto(14,0,65,smooth(150,30,40));image1(); showImage(image1);rotOff()" />
<hotspot name="spot2" style="info_spot" ath="32.25" atv="6.50" onhover="showtext(Clique para más información, buttonstyle);"
onclick="lookto(32,0,65,smooth(150,30,40));image2();showImage(image2);rotOff()" />
etc, etc.

Now what happens is, when the hotspot is clicked, the action is runs but stops just before the image opens. Click the hotspot a second time and the image opens (double click does not work). Close the image and click the hotspot again and the action runs to completion, even if I add into the close action 'set(plugin[image1].url,);'

Here's copies of relevant sections of code:

Quoted

Original plugin:
<plugin name="image1" url=""
visible="false" keep="true" align="center" />

Plugin at point of 'stuckness' taken from the editor:
<plugin name="image1"
url="plugins/art/pic1.png"
keep="true" preload="false"
visible="true" enabled="true" handcursor="true" capture="true" children="true" usecontentsize="false"
zorder="3"
alpha="1.00" blendmode="normal" effect="" smoothing="true"
align="center" edge=""
x="" y="" ox="" oy=""
width="NaN" height="NaN"
crop="" ondowncrop="" onovercrop=""
scale="1" scale9grid="" scalechildren="false"
rotate="0"
parent=""
mask=""
onloaded=""
onover=""
onhover=""
onout=""
ondown=""
onup=""
onclick="close(image1)"
devices="all"
originalheight="NaN"
originalwidth="NaN" - what does 'NaN' mean?
/>

Plugin copy at 'stuck' point:
(I assume produced from:
copy(plugin[%1].originalwidth, plugin[%1].width);
copy(plugin[%1].originalheight, plugin[%1].height);
in the action code....? as it is not in the original xml and appears after a hotspot has been clicked)
<plugin name=""
url=""
keep="false" preload="false"
visible="true" enabled="true" handcursor="true" capture="true" children="true" usecontentsize="false"
zorder="3"
alpha="1.00" blendmode="normal" effect="" smoothing="true"
align="" edge=""
x="" y="" ox="" oy=""
width="NaN" height="NaN"
crop="" ondowncrop="" onovercrop=""
scale="1" scale9grid="" scalechildren="false"
rotate="0"
parent=""
mask=""
onloaded=""
onover=""
onhover=""
onout=""
ondown=""
onup=""
onclick="close(null)"
devices="all"
originalheight="NaN"
originalwidth="NaN"
/>

Plugin with action complete (image open):
<plugin name="image1"
url="plugins/art/pic1.png"
keep="true" preload="false"
visible="true" enabled="true" handcursor="true" capture="true" children="true" usecontentsize="false"
zorder="3"
alpha="1.00" blendmode="normal" effect="" smoothing="true"
align="center" edge=""
x="" y="" ox="" oy=""
width="543.485784919654" height="732.8000000000001"
crop="" ondowncrop="" onovercrop=""
scale="1" scale9grid="" scalechildren="false"
rotate="0"
parent=""
mask=""
onloaded=""
onover=""
onhover=""
onout=""
ondown=""
onup=""
onclick="close(image1)"
devices="all"
imgwidth="prop"
originalheight="809"
originalwidth="600"
/>

Plugin copy with action complete (image open):
<plugin name=""
url=""
keep="false" preload="false"
visible="true" enabled="true" handcursor="true" capture="true" children="true" usecontentsize="false"
zorder="3"
alpha="1.00" blendmode="normal" effect="" smoothing="true"
align="" edge=""
x="" y="" ox="" oy=""
width="NaN" height="732.8000000000001"
crop="" ondowncrop="" onovercrop=""
scale="1" scale9grid="" scalechildren="false"
rotate="0"
parent=""
mask=""
onloaded=""
onover=""
onhover=""
onout=""
ondown=""
onup=""
onclick="close(null)"
devices="all"
originalheight="NaN"
originalwidth="NaN"
/>

I know this is a long and quite complex post but, I think (and, obviously, so does Jarred judging by the amount of input he has had) that it will be worth it to get this sorted out.
The opening action of the images, in my opinion, is a nice alternative to a simple alpha tween or a simultaneous scale of x & y values.
Here's a link to the example: http://www.projectsolutions.es/demos/gallery/index.html

It works on iphone 4 albeit a bit jerky while loading.
I'd be interested to know how it performs on an ipad.

Thanks

Kev

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

33

Monday, March 21st 2011, 3:52am

Hi,

The code below is based on the above code from Klaus , and the xml-image-gallery example code as Jarred has pointed out...
To see it working you need to copy the image-gallery example folder and substitute the imagegallery.xml with this new one...
Also, you MUST use the krpano.swf version from 2011-02-23 - krpano 1.0.8.14 viewer pre-release

Source code

<krpano version="1.0.8" onstart="">

	<preview type="grid(cube,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" details="16" />
	
	<plugin name="image" url="" visible="false" align="center" zorder="3" keep="true" onclick="closeimage" /> 
	
	<plugin name="loading" url="%SWFPATH%/plugins/textfield.swf"
			width="100" height="24" align="center" visible="false"
			html="[p]loading[/p]"
			css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:16; margin-left:5; margin-right:5; text-align:center; }" 
			backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF"
			/>

	<action name="showimage">
		<!-- hide/reset the image at begin -->
		set(plugin[image].visible, false);
		set(plugin[image].url,);
		
		<!-- pop up a loading alert in the wait of the onloaded events -->
		set(plugin[loading].visible, true);

		<!-- set the onloaded event to show the image when loaded -->
		set(plugin[image].onloaded, openimage);

		<!-- set a new url and start loading the image -->
		set(plugin[image].url, %1);
	</action>

	<action name="openimage">
		set(plugin[loading].visible, false); 
		plugin[image].resetsize();
		copy(plugin[image].originalwidth, plugin[image].width);
		copy(plugin[image].originalheight, plugin[image].height);
		set(plugin[image].width,20);
		set(plugin[image].height,20);
		set(plugin[image].visible, true);
		set(imgwidth, get(plugin[image].originalwidth));
		set(imgheight, get(plugin[image].originalheight));
		set(maxw, get(stagewidth));
		mul(maxwidth, maxw, 0.8);
		set(maxh, get(stageheight));
		mul(maxheight, maxh, 0.8);
		if(imgwidth GT maxwidth,
			mul(imgheight, imgheight, maxwidth);
			div(imgheight, imgheight, imgwidth);
			copy(imgwidth, maxwidth);
			);
		if(imgheight GT maxheight,
			mul(imgwidth, imgwidth, maxheight);
			div(imgwidth, imgwidth, imgheight);
			copy(imgheight, maxheight);
			);
		tween(plugin[image].width, get(imgwidth),0.3,,WAIT);
		tween(plugin[image].height, get(imgheight),0.6,,WAIT);
		doimagepercent();
	</action>

	<action name="doimagepercent">
		<!-- SELECT HOW YOU PREFER TO SET %/prop  -->
		<!-- set width = % and height = prop ---
			div(temp,plugin[image].width,stagewidth);
			mul(temp,temp,100);
			txtadd(plugin[image].width,get(temp),%);
			set(plugin[image].height, 'prop'); -->
		<!-- OR set height = % and width = prop -->			
			div(temp,plugin[image].height,stageheight);
			mul(temp,temp,100);
			txtadd(plugin[image].height,get(temp),%);
			set(plugin[image].width, 'prop');
	</action> 

	<action name="closeimage">
		<!-- Note: plugin[].pixelwidth/pixelheight only exist since
			2011-02-23 - krpano 1.0.8.14 viewer pre-release  -->
		set(plugin[image].width,get(plugin[image].pixelwidth));
		set(plugin[image].height,get(plugin[image].pixelheight));
		tween(plugin[image].height, 20, 0.6, ,WAIT);
		tween(plugin[image].width, 20, 0.3, ,WAIT);
		set(plugin[image].visible, false);
		set(plugin[image].url,);
	</action> 
	
	<style name="buttonstyle"
	   	url="%SWFPATH%/plugins/textfield.swf" children="false"
	   	width="22" height="22"
	   	css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }" 
	   	backgroundcolor="0xAAFFAA" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" 
	   	visible="false" 
	   	onover="tween(alpha,0.7,distance(0.3,0.2));" 
	   	onout="tween(alpha,1.0,distance(0.3,0.2));" 
	   	onloaded="set(alpha,0);set(textblur,15);set(blur,15); set(visible,true); tween(alpha,1,0.3); tween(textblur,0,0.3); tween(blur,0,0.3);"
	   	/>
	
	<hotspot name="info1" style="buttonstyle"
	    	html="[p]1[/p]"
			ath="-45"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(images/IMG_1683.jpg)"
	    	/>
	
	<hotspot name="info2" style="buttonstyle"
	    	html="[p]2[/p]"
			ath="-15"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(images/IMG_1685.jpg)"
	    	/>
	
	<hotspot name="info3" style="buttonstyle"
	    	html="[p]3[/p]"
			ath="15"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(../crop/crop-example-buttons.png)"
	    	/>
	
	<hotspot name="info4" style="buttonstyle"
	    	html="[p]4[/p]"
			ath="45"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(../events/pano.jpg)"
	    	/>
	
	<hotspot name="info5" style="buttonstyle"
	    	html="[p]5[/p]"
			ath="75" atv="-5"
	    	onclick="if(plugin[image].visible,closeimage());
				looktohotspot(get(name),get(view.fov));
				showimage(../compass/compass.png)"
	    	/>
	
	<hotspot name="info6" style="buttonstyle"
	    	html="[p]6[/p]"
			ath="0" atv="20"
	    	onclick="if(plugin[image].visible,closeimage());
				looktohotspot(get(name),get(view.fov));
				showimage(../masks/heartglasses.jpg)"
	    	/>

</krpano>

Quoted

originalwidth="NaN" - what does 'NaN' mean?

NaN (Not a Number) http://en.wikipedia.org/wiki/NaN

Hope this help...

SAlut.

michel has attached the following file:

imagegallery.xml (5.14 kB - 74 times downloaded - latest: Today, 6:35am)

Go to the top of the page

Kev-in-spain

Intermediate

Posts: 152

Location: Barcelona

Occupation: VR Photographer

34

Monday, March 21st 2011, 1:46pm

Resolved!!

Thanks Michel,

The only thing I didn't like was that, even though there was a tween command in the close action, the image dissapeared on click.
I made a couple of minor changes (below) and everything is now exactly how I want it. *thumbsup*

Thanks to everyone who has taken an interest in this post and for everybody's input.
Hopefully some others will find this arrangement of source code useful also.

Kev

Quoted

Changes made to the following:

if(imgheight GT maxheight,
mul(imgwidth, imgwidth, maxheight);
div(imgwidth, imgwidth, imgheight);
copy(imgheight, maxheight);
);
tween(plugin[image].width, get(imgwidth),0.3,,
tween(plugin[image].height, get(imgheight),0.6,,));
doimagepercent();
</action>

&

<action name="closeimage">
tween(plugin[image].height, 100,0.6,,
tween(plugin[image].width, 0,0.3,,
tween(view.fov, 90,0.7,,
set(plugin[image].url,);
rotOn()))); (rotOn is my action to enable autorotation,as it is set to disable on hotspot click, and swap the rotation On/Off button)
</action>

Originally was:

if(imgheight GT maxheight,
mul(imgwidth, imgwidth, maxheight);
div(imgwidth, imgwidth, imgheight);
copy(imgheight, maxheight);
);
tween(plugin[image].width, get(imgwidth),0.3,,WAIT);
tween(plugin[image].height, get(imgheight),0.6,,WAIT);
doimagepercent();
</action>

&

<action name="closeimage">

set(plugin[image].width,get(plugin[image].pixelwidth));
set(plugin[image].height,get(plugin[image].pixelheight));
tween(plugin[image].height, 20, 0.6, ,WAIT);
tween(plugin[image].width, 20, 0.3, ,WAIT);
set(plugin[image].visible, false);
set(plugin[image].url,);
</action>

This post has been edited 1 times, last edit by "Kev-in-spain" (Mar 21st 2011, 2:34pm)

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

35

Monday, March 21st 2011, 4:56pm

Hi,

Quoted from "Kev-in-spain"

The only thing I didn't like was that, even though there was a tween command in the close action, the image dissapeared on click.

That's normal if you do not use the correct Krpano.swf version as I had noted in my post:

Quoted from "Michel"

Also, you MUST use the krpano.swf version from 2011-02-23 - krpano 1.0.8.14 viewer pre-release
.....
....
<action name="closeimage">

set(plugin[image].width,get(plugin[image].pixelwidth));
set(plugin[image].height,get(plugin[image].pixelheight));
tween(plugin[image].height, 20, 0.6, ,WAIT);
tween(plugin[image].width, 20, 0.3, ,WAIT);
set(plugin[image].visible, false);
set(plugin[image].url,);
</action>
....

If you do not use the correct Krpano.swf version, the closeimage() action does not work correctly because of the pixelwidth/pixelheight variables that returns null...

Quoted from "Kev-in-spain"

I made a couple of minor changes (below) and everything is now exactly how I want it.

If it works exactly how you want it, then you can erase the call to the doimagepercent() action and the action itself as they have no effect in the way you use them on your code... As you can notice, despite the call to the function, the plugin[image] does not resize onresize event !!!

SAlut.

Go to the top of the page

Jarredja

Professional

Posts: 1,058

Location: LA

36

Wednesday, March 23rd 2011, 5:19am

Michel, just FYI.

This line in your code causes the entire setup to fail on iPhone. It allowed one click, did a look to action and stopped. After that event took place, clicking the same hotspot again or a different hotspot did nothing.

set(plugin[image].url,);

I have removed it and have not seen any adverse reaction.

I must admit, I had scanned over Klaus's example too quickly and didn't take the time to understand it. I I had my mind set on using the if statements from the image gallery to set a percentage of stage and set out to reinvent the wheel. Even so, I have learned quite a bit from this fishing expedition.

Jarred

Go to the top of the page

Kev-in-spain

Intermediate

Posts: 152

Location: Barcelona

Occupation: VR Photographer

37

Wednesday, March 23rd 2011, 9:38am

Quoted from "michel"

If you do not use the correct Krpano.swf version, the closeimage() action does not work correctly because of the pixelwidth/pixelheight variables that returns null...

Hi Michel,
I did download the latest swf's and js files and replaced them in the pano but it made the pano run as Demo Version.
I guess the pano has to be produced with the has to with the latest files in place at the start. Everything is working as I want it for my demo so I'll leave it and try it on the next one.

Thanks again.

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

38

Wednesday, March 23rd 2011, 5:15pm

Hi,

Quoted from "Jarredja"

Michel, just FYI.

So thank you for that ;-)

. I appreciate your feedback as it makes things go forward, isn't it *smile*

?

Quoted from "Jarredja"

set(plugin[image].url,);

I have removed it and have not seen any adverse reaction.

Well, there is some *whistling*

...
Try to click one of the hotspots, the image pops up, closes the image, try to click again on the same hotspot... , the image does not pops up and the loading plugin stays... To be honest I do not know why this happen *huh*

...
That's was the reason I had added the set(plugin[image].url,); and it seemed to solve the problem...
But as you pointed out, this causes a major problem when using krpanoiphone.js *whistling*

...
I had tried to trace the url value:
trace('set(plugin[image].url,) = ',plugin[image].url);
and the result is:
set(plugin[image].url,) = plugin[image].url
I suppose that is the problem, but that is just a supposition...

So, Instead of using an empty value for the url, I have tried using a "dummy image"... And it seems to work correctly now...
Here the modified code:

Source code

<krpano version="1.0.8" onstart="">

	<preview type="grid(cube,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" details="16" />
	
	<plugin name="image" url="white.jpg" visible="false" align="center" zorder="3" keep="true" onclick="closeimage" /> 
	
	<plugin name="loading" url="%SWFPATH%/plugins/textfield.swf"
			width="100" height="24" align="center" visible="false"
			html="[p]loading[/p]"
			css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:16; margin-left:5; margin-right:5; text-align:center; }" 
			backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF"
			/>

	<action name="showimage">
		<!-- hide/reset the image at begin -->
		set(plugin[image].visible, false);
		
		<!-- pop up a loading alert in the wait of the onloaded events -->
		set(plugin[loading].visible, true);

		<!-- set the onloaded event to show the image when loaded -->
		set(plugin[image].onloaded, openimage);

		<!-- set a new url and start loading the image -->
		set(plugin[image].url, %1);
	</action>

	<action name="openimage">
		set(plugin[loading].visible, false); 
		plugin[image].resetsize();
		copy(plugin[image].originalwidth, plugin[image].width);
		copy(plugin[image].originalheight, plugin[image].height);
		set(plugin[image].width,20);
		set(plugin[image].height,20);
		set(plugin[image].visible, true);
		set(imgwidth, get(plugin[image].originalwidth));
		set(imgheight, get(plugin[image].originalheight));
		set(maxw, get(stagewidth));
		mul(maxwidth, maxw, 0.8);
		set(maxh, get(stageheight));
		mul(maxheight, maxh, 0.8);
		if(imgwidth GT maxwidth,
			mul(imgheight, imgheight, maxwidth);
			div(imgheight, imgheight, imgwidth);
			copy(imgwidth, maxwidth);
			);
		if(imgheight GT maxheight,
			mul(imgwidth, imgwidth, maxheight);
			div(imgwidth, imgwidth, imgheight);
			copy(imgheight, maxheight);
			);
		tween(plugin[image].width, get(imgwidth),0.3,,WAIT);
		tween(plugin[image].height, get(imgheight),0.6,,WAIT);
		doimagepercent();
	</action>

	<action name="doimagepercent">
		<!-- SELECT HOW YOU PREFER TO SET %/prop  -->
		<!-- set width = % and height = prop - - -
			div(temp,plugin[image].width,stagewidth);
			mul(temp,temp,100);
			txtadd(plugin[image].width,get(temp),%);
			set(plugin[image].height, 'prop'); -->
		<!-- OR set height = % and width = prop -->			
			div(temp,plugin[image].height,stageheight);
			mul(temp,temp,100);
			txtadd(plugin[image].height,get(temp),%);
			set(plugin[image].width, 'prop');
	</action> 

	<action name="closeimage">
		<!-- Note: plugin[].pixelwidth/pixelheight only exist since
			2011-02-23 - krpano 1.0.8.14 viewer pre-release  -->
		set(plugin[image].width,get(plugin[image].pixelwidth));
		set(plugin[image].height,get(plugin[image].pixelheight));
		tween(plugin[image].height, 20, 0.6, ,WAIT);
		tween(plugin[image].width, 20, 0.3, ,WAIT);
		set(plugin[image].visible, false);
		set(plugin[image].onloaded, );
		set(plugin[image].url,white.jpg);
	</action> 
	
	<style name="buttonstyle"
	   	url="%SWFPATH%/plugins/textfield.swf" children="false"
	   	width="22" height="22"
	   	css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }" 
	   	backgroundcolor="0xAAFFAA" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" 
	   	visible="false" 
	   	onover="tween(alpha,0.7,distance(0.3,0.2));" 
	   	onout="tween(alpha,1.0,distance(0.3,0.2));" 
	   	onloaded="set(alpha,0);set(textblur,15);set(blur,15); set(visible,true); tween(alpha,1,0.3); tween(textblur,0,0.3); tween(blur,0,0.3);"
	   	/>
	
	<hotspot name="info1" style="buttonstyle"
	    	html="[p]1[/p]"
			ath="-45"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(images/IMG_1683.jpg)"
	    	/>
	
	<hotspot name="info2" style="buttonstyle"
	    	html="[p]2[/p]"
			ath="-15"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(images/IMG_1685.jpg)"
	    	/>
	
	<hotspot name="info3" style="buttonstyle"
	    	html="[p]3[/p]"
			ath="15"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(../crop/crop-example-buttons.png)"
	    	/>
	
	<hotspot name="info4" style="buttonstyle"
	    	html="[p]4[/p]"
			ath="45"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(../events/pano.jpg)"
	    	/>
	
	<hotspot name="info5" style="buttonstyle"
	    	html="[p]5[/p]"
			ath="75" atv="-5"
	    	onclick="if(plugin[image].visible,closeimage());
				looktohotspot(get(name),get(view.fov));
				showimage(../compass/compass.png)"
	    	/>
	
	<hotspot name="info6" style="buttonstyle"
	    	html="[p]6[/p]"
			ath="0" atv="20"
	    	onclick="if(plugin[image].visible,closeimage());
				looktohotspot(get(name),get(view.fov));
				showimage(../masks/heartglasses.jpg)"
	    	/>

</krpano>

Now, I have to try using addplugin() and removeplugin() instead of changing the url... (but no time at this moment *g*

)

Tell me if it is OK now *thumbup*

...

Quoted

and set out to reinvent the wheel. Even so, I have learned quite a bit from this fishing expedition.

Reinvent the wheel could be bad for production purpose, But it is a good exercice to understand how things work, do you not think so? I like those fishing expedition also *thumbsup*

...

Quoted from "Kev-in-spain"

Thanks again.

You are wellcome... Your color changing car is great... also your "cogwheel ( *huh*

)" hotspot *thumbup*

...

SAlut.

michel has attached the following file:

imagegallery_1.xml (5.17 kB - 75 times downloaded - latest: Today, 6:35am)

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

39

Wednesday, March 23rd 2011, 7:13pm

Hi,

Here the same code using addplugin() and removeplugin() instead of changing the url...

Source code

<krpano version="1.0.8" onstart="">

	<preview type="grid(cube,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" details="16" />
	
	<plugin name="loading" url="%SWFPATH%/plugins/textfield.swf"
			width="100" height="24" align="center" visible="false"
			html="[p]loading[/p]"
			css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:16; margin-left:5; margin-right:5; text-align:center; }" 
			backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF"
			/>

	<action name="showimage">
		<!-- hide/reset the image at begin -->
		if(plugin[image].loaded, removeplugin(image));
		addplugin(image);
		set(plugin[image].visible,false);
		set(plugin[image].align,center);
		set(plugin[image].zorder,3);
		set(plugin[image].onclick, closeimage() );
		trace('set(plugin[image].url,) = ',plugin[image].url);
		
		<!-- pop up a loading alert in the wait of the onloaded events -->
		set(plugin[loading].visible, true);

		<!-- set the onloaded event to show the image when loaded -->
		set(plugin[image].onloaded, openimage);

		<!-- set a new url and start loading the image -->
		set(plugin[image].url, %1);
	</action>

	<action name="openimage">
		set(plugin[loading].visible, false); 
		plugin[image].resetsize();
		copy(plugin[image].originalwidth, plugin[image].width);
		copy(plugin[image].originalheight, plugin[image].height);
		set(plugin[image].width,20);
		set(plugin[image].height,20);
		set(plugin[image].visible, true);
		set(imgwidth, get(plugin[image].originalwidth));
		set(imgheight, get(plugin[image].originalheight));
		set(maxw, get(stagewidth));
		mul(maxwidth, maxw, 0.8);
		set(maxh, get(stageheight));
		mul(maxheight, maxh, 0.8);
		if(imgwidth GT maxwidth,
			mul(imgheight, imgheight, maxwidth);
			div(imgheight, imgheight, imgwidth);
			copy(imgwidth, maxwidth);
			);
		if(imgheight GT maxheight,
			mul(imgwidth, imgwidth, maxheight);
			div(imgwidth, imgwidth, imgheight);
			copy(imgheight, maxheight);
			);
		tween(plugin[image].width, get(imgwidth),0.3,,WAIT);
		tween(plugin[image].height, get(imgheight),0.6,,WAIT);
		doimagepercent();
	</action>

	<action name="doimagepercent">
		<!-- SELECT HOW YOU PREFER TO SET %/prop  -->
		<!-- set width = % and height = prop - - -
			div(temp,plugin[image].width,stagewidth);
			mul(temp,temp,100);
			txtadd(plugin[image].width,get(temp),%);
			set(plugin[image].height, 'prop'); -->
		<!-- OR set height = % and width = prop -->			
			div(temp,plugin[image].height,stageheight);
			mul(temp,temp,100);
			txtadd(plugin[image].height,get(temp),%);
			set(plugin[image].width, 'prop');
	</action> 

	<action name="closeimage">
		<!-- Note: plugin[].pixelwidth/pixelheight only exist since
			2011-02-23 - krpano 1.0.8.14 viewer pre-release  -->
		set(plugin[image].width,get(plugin[image].pixelwidth));
		set(plugin[image].height,get(plugin[image].pixelheight));
		tween(plugin[image].height, 20, 0.6, ,WAIT);
		tween(plugin[image].width, 20, 0.3, ,WAIT);
		set(plugin[image].visible, false);
		removeplugin(image);
	</action> 
	
	<style name="buttonstyle"
	   	url="%SWFPATH%/plugins/textfield.swf" children="false"
	   	width="22" height="22"
	   	css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }" 
	   	backgroundcolor="0xAAFFAA" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" 
	   	visible="false" 
	   	onover="tween(alpha,0.7,distance(0.3,0.2));" 
	   	onout="tween(alpha,1.0,distance(0.3,0.2));" 
	   	onloaded="set(alpha,0);set(textblur,15);set(blur,15); set(visible,true); tween(alpha,1,0.3); tween(textblur,0,0.3); tween(blur,0,0.3);"
	   	/>
	
	<hotspot name="info1" style="buttonstyle"
	    	html="[p]1[/p]"
			ath="-45"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(images/IMG_1683.jpg)"
	    	/>
	
	<hotspot name="info2" style="buttonstyle"
	    	html="[p]2[/p]"
			ath="-15"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(images/IMG_1685.jpg)"
	    	/>
	
	<hotspot name="info3" style="buttonstyle"
	    	html="[p]3[/p]"
			ath="15"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(../crop/crop-example-buttons.png)"
	    	/>
	
	<hotspot name="info4" style="buttonstyle"
	    	html="[p]4[/p]"
			ath="45"
	    	onclick="if(plugin[image].visible,closeimage());
				lookto(get(ath),get(atv));
				showimage(../events/pano.jpg)"
	    	/>
	
	<hotspot name="info5" style="buttonstyle"
	    	html="[p]5[/p]"
			ath="75" atv="-5"
	    	onclick="if(plugin[image].visible,closeimage());
				looktohotspot(get(name),get(view.fov));
				showimage(../compass/compass.png)"
	    	/>
	
	<hotspot name="info6" style="buttonstyle"
	    	html="[p]6[/p]"
			ath="0" atv="20"
	    	onclick="looktohotspot(get(name),get(view.fov));
				showimage(../masks/heartglasses.jpg)"
	    	/>

</krpano>

SAlut.

michel has attached the following file:

imagegallery_2.xml (5.31 kB - 68 times downloaded - latest: Today, 6:35am)

Go to the top of the page

Kev-in-spain

Intermediate

Posts: 152

Location: Barcelona

Occupation: VR Photographer

40

Thursday, March 24th 2011, 1:50am

Video changing

Quoted from "michel"

You are wellcome... Your color changing car is great... also your "cogwheel ( )" hotspot ...

Thanks for the compliments.

Here's another small issue, which I'm sure there is a very simple answer to but I can't work it out:

I'm showing a video (flv) in a tour and want to be able to change the video on the click of a thumbnail image.
These are the actions I'm using:

<action name="changevideo1">
set(hotspot[video1].videourl,vids/van_halen.flv);
hotspot[video1].playvideo(vids/van_halen.flv);
</action>
<action name="changevideo2">
set(hotspot[video1].videourl,vids/rage.flv);
hotspot[video1].playvideo(vids/rage.flv);
</action>
<action name="changevideo3"> etc, etc....

The issue is, on clicking the chosen thumbnail, the video that is currently playing stops and the next one starts, but only the sound... no image.
I checked in the editor and the video url is correct for the chosen video. Then (without making any alterations) click 'load this xml' and the video is suddenly visible.

If it's of any significance here's the video code:
<hotspot name="video1"
url="plugins/videoplayer.swf"
videourl="vids/rage.flv"
ath="100.00446731324874" atv="-11.206881978535328"
distorted="true"
alpha="0.3"
width="492" height="360"
handcursor="false"
scale="0.21997464162342867" scale9grid="" scalechildren="false" rotate="0"
rx="-13.25" ry="-35.5" rz="-0.7415011467273647"
volume="0.7"
loop="true"
pausedonstart="false"
directionalsound="true"
range="180.0"
rangefalloff="1.0"
outofrangevolume="0.2"
/>
and the thumbnail:
<plugin name="Rockt1" url=""
align="center,top" edge="top" keep="true"
x="-300"
y="150"
width="12%"
height="0%"
onclick="action(changevideo1)" />
(The thumbs are revealed by a selection button)

Go to the top of the page

Source code

Source code

Source code

Almost!!!!

Quoted

Source code

Source code

Feedback

Quoted

Quoted

Source code

Quoted

Resolved!!

Quoted

Source code

Quoted

Source code

Video changing

Similar threads