Hi machart,
Great pano and design; simple and beautiful... 
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 
, 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 
... 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:
<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:
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.
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... 
Hi machart,
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 ... We are lucky to have this guy on the planet 
do not you think so ?
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:
<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.
i tried it, and after integrating my fs actions it works!!! very nice!
i have put it online...
thanks!
Hi machart,
Great .
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:
define_area_size(960,320,30);
or
define_area_size(3,1,30);
Doing this way, you respect the image aspect ratio and your preview will display the full image .
SAlut.
ahh, ok, now i got it!
now it works very nice, i have changed a lot of panos this way... 
thanks again...
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!