How to get GFX outside the area of the pano

nefar1ous · August 22, 2012 at 8:18 PM

Hi,

I read that you can set graphics outside the AREA of the pano, but I can't get it to work. Below are examples of what I am after, what I got, and the code.
My intention is to have a windowed scene, with graphics and menu buttons around the scene window.

Here is an image example of what I am after:

For the next image, I tried setting all of the graphics to parent="stage", then setting the area to 60% x 60% for what I hoped would be the window for the panorama.... i got this:

Here's the code for that:

Code

<krpano version="1.0.8.15" title="Virtual Tour" onstart="mainmenu();">


	<include url="skin/vtourskin.xml" />
	               	              
<area mode="align"
      align="center"
      x="0"
      y="0"
      width="60%"
      height="60%"
      />


<action name="mainmenu">
menu_plugin(background, images/background.jpg, stage, topleft, topleft, null, 0, 0, null, 100%, 100%, -2, true, 1.0, false, true);
menu_plugin(decor, images/decor.png, stage, bottomleft, bottomleft, null, 0, 0, null, 100%, prop, -1, true, 1.0, false, false);
menu_plugin(logo, images/logo_iqph.png, background, topleft, topleft, null, 5%, 2%, null, 15%, prop, 1, true, 1.0, false, false);
menu_plugin(corner_tl, images/corner_tl.png, background, topleft, topleft, null, 0, 0, null, 8%, prop, 1000, true, 1.0, false, true);
menu_plugin(corner_tr, images/corner_tr.png, background, topright, topright, null, 0, 0, null, 8%, prop, 1000, true, 1.0, false, true);


<!-- startup(); -->


</action>


<!-- Create the menu and background graphics by passing these variables ... name, url, parent, align, edge, rotate, x, y, scale, width, height, zorder, visible, alpha, enabled, scalechildren -->
<action name="menu_plugin">
	addplugin(%1);
	set(plugin[%1].url, %2);
	set(plugin[%1].parent, %3);
	set(plugin[%1].align, %4);
	set(plugin[%1].edge, %5);
	set(plugin[%1].rotate, %6);
	set(plugin[%1].x, %7);
	set(plugin[%1].y, %8);
	set(plugin[%1].scale, %9);
	set(plugin[%1].width, %10);
	set(plugin[%1].height, %11);
	set(plugin[%1].zorder, %12);
	set(plugin[%1].visible, %13);
	set(plugin[%1].alpha, %14);
	set(plugin[%1].enabled, %15);
	set(plugin[%1].parent, %16);
	set(plugin[%1].scalechildren, %17);	
	
</action>


<!--
	<action name="startup">
		if(startscene === null, copy(startscene,scene[0].name));
		loadscene(get(startscene), null, MERGE);
	</action>
-->
	
	<scene name="scene_Kacho Japanese Restaurant" title="Kacho Japanese Restaurant" onstart="" thumburl="panos/Kacho_Japanese_Restaurant.tiles/thumb.jpg" lat="" lng="" heading="">


		<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />


		<preview url="panos/Kacho_Japanese_Restaurant.tiles/preview.jpg" />


		<image>
			<cube url="panos/Kacho_Japanese_Restaurant.tiles/pano_%s.jpg" />
			<mobile>
				<cube url="panos/Kacho_Japanese_Restaurant.tiles/mobile_%s.jpg" />
			</mobile>
		</image>




	</scene>




</krpano>

Display More

Thanks,

Tony

nefar1ous · August 23, 2012 at 10:44 PM

Well, so far it seems that the plugins must be defined privately within a scene to be placed outside the pano area. Trying to define them globally wasn't working... if that's possible it would be nice to learn how. I also noted that I couldn't get the logo plugin to function (be visible) if I used percentages for either the XY coords or the width / height properties. Is there a workaround for that?

In the following code, I didn't use the global option for creating plugins, then added the logo plugin within the scene tags, and it now works. But I was hoping to define the menu globally, rather than require a scene to be active.

Code

<krpano version="1.0.8.15" title="Virtual Tour" onstart="reset_area(); ">


	<include url="skin/vtourskin.xml" />


	               
<action name="reset_area">
	set(area.mode, align);
	set(area.align, bottomright);
	set(area.x, 35%);
	set(area.y, 30%);
	set(area.width, 50%);
	set(area.height, 55%);
	
startup();	
</action>


<!-- Create Global Menu system on the stage -->
<action name="mainmenu">


menu_plugin(background, images/background.jpg, STAGE, topleft, topleft, null, 0, 0, null, 100%, 100%, -2, true, 1.0, false, true);
menu_plugin(decor, images/decor.png, STAGE, bottomleft, bottomleft, null, 0, 0, null, 100%, prop, -1, true, 1.0, false, false);
menu_plugin(logo, images/logo_iqph.png, background, topleft, topleft, null, 5%, 2%, null, 15%, prop, 1, true, 1.0, false, false);
menu_plugin(corner_tl, images/corner_tl.png, background, topleft, topleft, null, 0, 0, null, 8%, prop, 1000, true, 1.0, false, true);
menu_plugin(corner_tr, images/corner_tr.png, background, topright, topright, null, 0, 0, null, 8%, prop, 1000, true, 1.0, false, true);
wait(3);


</action>


<!-- Create a Plugin Dynamically and pass these variables ... name, url, parent, align, edge, rotate, x, y, scale, width, height, zorder, visible, alpha, enabled, scalechildren -->
<action name="menu_plugin">
	addplugin(%1);
	set(plugin[%1].url, %2);
	set(plugin[%1].parent, %3);
	set(plugin[%1].align, %4);
	set(plugin[%1].edge, %5);
	set(plugin[%1].rotate, %6);
	set(plugin[%1].x, %7);
	set(plugin[%1].y, %8);
	set(plugin[%1].scale, %9);
	set(plugin[%1].width, %10);
	set(plugin[%1].height, %11);
	set(plugin[%1].zorder, %12);
	set(plugin[%1].visible, %13);
	set(plugin[%1].alpha, %14);
	set(plugin[%1].enabled, %15);
	set(plugin[%1].parent, %16);
	set(plugin[%1].scalechildren, %17);	
</action>


	<action name="startup">
		if(startscene === null, copy(startscene,scene[0].name));
		loadscene(get(startscene), null, MERGE);
	</action>


	
	<scene name="scene_Kacho Japanese Restaurant" title="Kacho Japanese Restaurant" onstart="" thumburl="panos/Kacho_Japanese_Restaurant.tiles/thumb.jpg" lat="" lng="" heading="">


		<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />


		<preview url="panos/Kacho_Japanese_Restaurant.tiles/preview.jpg" />


		<image>
			<cube url="panos/Kacho_Japanese_Restaurant.tiles/pano_%s.jpg" />
			<mobile>
				<cube url="panos/Kacho_Japanese_Restaurant.tiles/mobile_%s.jpg" />
			</mobile>
		</image>


<plugin name="iqph_logo" url="images/logo_iqph.png" parent="STAGE" align="topleft" edge="topleft" x="10" y="10" keep="true" visible="true" alpha="1.0" enabled="false" scale=".2" width="" height="" />


	</scene>




</krpano>

Display More

Zephyr · August 23, 2012 at 11:57 PM

I think to get the effect you want you have to put the big image as a plugin with parent="BGLAYER" http://www.krpano.com/docu/xml/#layer.parent. The rest can be STAGE. Otherwise, I can't really see what's going wrong. Haven't used the area tag much.

nefar1ous · August 24, 2012 at 8:09 AM

So far I can confirm that plugins for BGLAYER and STAGE don't seem to display unless they are created within a scene. Using them Globally has no visible effect. I can work around this, but would prefer they could be used BEFORE a scene became necessary.

Now my biggest problem is trying to figure out how to get percentages for the plugins to work. As of this moment, only scale, and xy integers work... I can't use x="5%", y="2%", or width="100%" height="prop" anymore. In order for my background and external (STAGED) plugins to scale, I need to determine how to scale and position them in some way to make sure they resize for all browsers. I did have scaling working before I attempted to attach plugins to the STAGE.

Any suggestions?

THanks!

Tony

Nupsi · August 28, 2012 at 9:27 AM

Hi nefar1ous,

I´m facing the same problems right now and trying to find some workarounds. I think until Klaus fixed this problem it may work using the onresize-event. Something like this should do the trick:
onresize="set(w,get(stage.width));div(perc1,get(w),100);mul(perc1,get(perc1),40);copy(plugin[menu_plugin].width,w);"

This would calc 40% of the stagewidth and copy the value into the plugins width. Maybe you need to work with "pixelsize" here in order to get the proper values.
I would be nice, if you could inform me how things going

Best regards
Nupsi

klaus.krpano · August 29, 2012 at 10:06 AM

Hi,

Quote from nefar1ous

Well, so far it seems that the plugins must be defined privately within a scene to be placed outside the pano area. Trying to define them globally wasn't working...

Quote from nefar1ous

So far I can confirm that plugins for BGLAYER and STAGE don't seem to display unless they are created within a scene. Using them Globally has no visible effect.

there should be no problem with defining elements outside <scene>, but you need to use keep="true" for the <plugin> element to avoid that they get removed when the scene itself will be loaded...

best regards,
Klaus

How to get GFX outside the area of the pano

Participate now!

Users Viewing This Thread