new approach for widescreen presentation

machart

Trainee

Posts: 135

Location: Ostfriesland

1

Wednesday, November 4th 2009, 11:41am

hi!
when presenting a widesceen panorama its important to get an overview over the whole scenery -
on the other hand fullscreen is nice...
there are ways via thumbnail picture, but i wanted to use the pano as preview...
so i found a way to do it in krpano...
here is a example...

by the way: is there a method to scale the preview by percent in the html, and find automatically the ratio of height and width?

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

2

Friday, November 6th 2009, 2:50am

Hi machart,

Great pano and design; simple and beautiful... *thumbup*

Quoted

by the way: is there a method to scale the preview by percent in the html, and find automatically the ratio of height and width?

Sure, there is a way to find automatically the ratio of height and width in the html using javascript ( I have not tried to find how *whistling*

, perhaps later )...

But I was thinking about your request using new features of krpano that I have read from a recent thread from Klaus: 1.0.8 beta 9 - fovtype setting

So your request was the occasion to learn how works the example of Klaus, trying to get a code to resolve your request *smile*

... And I made a code that partially match with your needs without using extra html code like table and div style, only with features of Krpano...

So, the html code is the "normal"... and the xml is as follow:

Source code

<krpano onstart="showtext(Try to resize the browser, infostyle);"> 

	<!-- use only a grid preview pano to save download space ;-) -->
	<preview type="grid(cube,50,50,400,0xCCCCCC,0x999999,0xFFFFFF);" details="16" />

	<view hlookat="0" fovmin="80" fovmin="50" fovmax="150" maxpixelzoom="off" />

	<textstyle name="infostyle"
	       	origin="center" edge="center" textalign="center" background="false" border="false"
	       	fontsize="40" textcolor="0xFFFFFF" bold="false" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);"
	       	showtime="5" fadetime="1.0"
	       	/>


	<!-- ONRESIZE event where the actions needed to set the area and the border are called  -->			   
	<events onresize="define_area_size(500,200,30); set_border()" />

	<!-- border  -->
	<plugin name="border_top"	url="border_x2.png" enabled="false" align="lefttop"	edge="lefttop"	/> 
	<plugin name="border_bottom" url="border_x2.png" enabled="false" align="leftbottom" edge="leftbottom" />
	<plugin name="border_left"   url="border_x2.png" enabled="false" align="lefttop"   edge="lefttop"   /> 
	<plugin name="border_right"  url="border_x2.png" enabled="false" align="righttop"  edge="righttop"  />

	<!-- action to set the border of the area -->	
	<action name="set_border">
		set(plugin[border_top].width,get(area.width));
		set(plugin[border_bottom].width,get(area.width));
		set(plugin[border_left].height,get(area.height)); 
		set(plugin[border_right].height,get(area.height)); 
	</action>

	<!-- actions to set the area   	-->		
	<!-- Example of use:           	-->
	<!-- define_area_size(500,200,30); -->
	<!-- there is 3 parameters:    	-->		
	<!-- %1 = image width  -- ex: 500  -->
	<!-- %2 = image height -- ex: 200  -->
	<!-- %3 = margin   	-- ex: 30   -->
	<action name="define_area_size">
		trace(%1_%2_%3);
		div(aspect,%1,%2);
		set(dest_area_x,%3);
		mul(temp_val,dest_area_x,2); sub(dest_area_width,stagewidth,get(temp_val));
		div(dest_area_height,dest_area_width,aspect);
		sub(temp_val,stageheight,dest_area_height); div(dest_area_y,get(temp_val),2);
		if(dest_area_y LT dest_area_x, set(dest_area_y,%3); 
			mul(temp_val,dest_area_y,2); sub(dest_area_height,stageheight,get(temp_val));
			mul(dest_area_width,dest_area_height,aspect); 
			sub(temp_val,stagewidth,dest_area_width); div(dest_area_x,get(temp_val),2); 
			set_area_size(); , set_area_size(); );
		trace("stagewidth   	= ",stagewidth);
		trace("stageheight  	= ",stageheight);
		trace("aspect       	= ",aspect);
		trace("dest_area_x  	= ",dest_area_x);
		trace("dest_area_width  = ",dest_area_width);
		trace("dest_area_height = ",dest_area_height);
		trace("dest_area_y  	= ",dest_area_y);
	</action>

	<!-- actions to set the area -->	
	<action name="set_area_size">
		copy(area.x, dest_area_x);
		copy(area.y, dest_area_y);
		copy(area.width, dest_area_width);
		copy(area.height, dest_area_height);
	</action>


</krpano>

Some notes:

In line 16: here you can set some parameters to the action define_area_size() to make the area looks as you need. Those parameter are image_width, image_height and margin in pixels (no % for the moment)
also, it seems there is no border attribute for the area node. So I made the border using 4 plugings to make the 4 sides of the border with a 2x2.png.

Here is a link to see the result: http://andorra360.com/test/ForumKrpano/machart/area.html
Try to resize the browser window .... in his width... and in his height... the panos area resizes accordingly respecting the aspect ratio.

Hope this code can be useful.

SAlut.

Go to the top of the page

machart

Trainee

Posts: 135

Location: Ostfriesland

3

Friday, November 6th 2009, 1:32pm

hello, michel!

thanks alot for your thoughts! you are genius!

i copied the code and a border.png and tried it: the resizing works great!
the only thing is: when using the fullscreen button, it stays in the same borders... thats an interesting thing too, but was not meant in this case... *unsure*

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

4

Friday, November 6th 2009, 3:45pm

Hi machart,

Quoted

thanks alot for your thoughts! you are genius!

Thank you

but I am only an Krpano enthusiast user like you ;-)

... The only genius here is KLAUS *thumbup*

... We are lucky to have this guy on the planet *g*

do not you think so ?

Quoted

the only thing is: when using the fullscreen button, it stays in the same borders...

I have modified the code to take in account your needs... like this:

Source code

<krpano onstart="showtext(Try to resize the browser, infostyle);"> 

	<!-- use only a grid preview pano to save download space ;-) -->
	<preview type="grid(cube,50,50,400,0xCCCCCC,0x999999,0xFFFFFF);" details="16" />

	<view hlookat="0" fovmin="80" fovmin="50" fovmax="150" maxpixelzoom="off" />

	<textstyle name="infostyle"
	       	origin="center" edge="center" textalign="center" background="false" border="false"
	       	fontsize="40" textcolor="0xFFFFFF" bold="false" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);"
	       	showtime="5" fadetime="1.0"
	       	/>


	<!-- Events where the actions needed to set the area and the border are called  -->			   
	<events onresize="define_area_size(500,200,30); set_border()" 
			onenterfullscreen="reset_area_size();"
			onexitfullscreen="back_area_size(); events.onresize();"
			/>


	<!-- border  -->
	<plugin name="border_top"    url="border_x2.png" enabled="false" align="lefttop"    edge="lefttop"	/> 
	<plugin name="border_bottom" url="border_x2.png" enabled="false" align="leftbottom" edge="leftbottom" />
	<plugin name="border_left"   url="border_x2.png" enabled="false" align="lefttop"    edge="lefttop"   /> 
	<plugin name="border_right"  url="border_x2.png" enabled="false" align="righttop"   edge="righttop"  />

	<!-- action to set the border of the area -->	
	<action name="set_border">
		set(plugin[border_top].width,get(area.width));
		set(plugin[border_bottom].width,get(area.width));
		set(plugin[border_left].height,get(area.height)); 
		set(plugin[border_right].height,get(area.height)); 
	</action>

	<!-- actions to set the area   	-->		
	<!-- Example of use:           	-->
	<!-- define_area_size(500,200,30); -->
	<!-- there is 3 parameters:    	-->		
	<!-- %1 = image width  -- ex: 500  -->
	<!-- %2 = image height -- ex: 200  -->
	<!-- %3 = margin   	-- ex: 30   -->
	<action name="define_area_size">
		trace(%1_%2_%3);
		div(aspect,%1,%2);
		set(dest_area_x,%3);
		mul(temp_val,dest_area_x,2); sub(dest_area_width,stagewidth,get(temp_val));
		div(dest_area_height,dest_area_width,aspect);
		sub(temp_val,stageheight,dest_area_height); div(dest_area_y,get(temp_val),2);
		if(dest_area_y LT dest_area_x, set(dest_area_y,%3); 
			mul(temp_val,dest_area_y,2); sub(dest_area_height,stageheight,get(temp_val));
			mul(dest_area_width,dest_area_height,aspect); 
			sub(temp_val,stagewidth,dest_area_width); div(dest_area_x,get(temp_val),2); 
			set_area_size(); , set_area_size(); );
		trace("stagewidth   	= ",stagewidth);
		trace("stageheight  	= ",stageheight);
		trace("aspect       	= ",aspect);
		trace("dest_area_x  	= ",dest_area_x);
		trace("dest_area_width  = ",dest_area_width);
		trace("dest_area_height = ",dest_area_height);
		trace("dest_area_y  	= ",dest_area_y);
	</action>

	<!-- actions to set the area -->	
	<action name="set_area_size">
		copy(area.x, dest_area_x);
		copy(area.y, dest_area_y);
		copy(area.width, dest_area_width);
		copy(area.height, dest_area_height);
	</action>

	<!-- actions to reset the area -->	
	<action name="reset_area_size">
		set(events.onresize,);
		set(area.x, 0);
		set(area.y, 0);
		set(area.width, get(stagewidth));
		set(area.height, get(stageheight));
		set(plugin[border_top].visible,false);
		set(plugin[border_bottom].visible,false);
		set(plugin[border_left].visible,false); 
		set(plugin[border_right].visible,false); 
	</action>
	
	<action name="back_area_size">
		set(events.onresize,'define_area_size(500,200,30); set_border()');
		set(plugin[border_top].visible,true);
		set(plugin[border_bottom].visible,true);
		set(plugin[border_left].visible,true); 
		set(plugin[border_right].visible,true); 
	</action>


</krpano>

I have some doubt about the way I have used to reset the area.... It works but perhaps there is an simple way to do... I am going to post a new thread about this...
Give it a try ;-)

....

SAlut.

Go to the top of the page

machart

Trainee

Posts: 135

Location: Ostfriesland

5

Friday, November 6th 2009, 5:31pm

i tried it, and after integrating my fs actions it works!!! very nice! *thumbup*

i have put it online...

thanks!

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

6

Friday, November 6th 2009, 10:02pm

Hi machart,

Great *thumbup*

.
Only one notice ;-)

... You have set the image width and height as 500 and 150... If I am not on mistake, on your first attempt you have set the <div> width and height to 960 and 320... so the image aspect ratio is 3:1.
I suggest you to try to set the image width and height as follow: