How to limit resizing

rbudnikas · April 5, 2016 at 4:47 AM

So I have been trying to get a good solution regarding resizing of an image based on the size of the browser. Andrey (Mindlessboss) has been great trying to help and I've found several different solutions but seem to have a common issue. Based on the code below, when the browser loads it is .7 of the screenheight and screenwidth. When the browser gets smaller it still maintains the .7. Simple right!

Problem I'm having is the .7 ratio is fine if you are on a typical laptop with a screen size of 1366 x 768, but when you're on a 27inch imac 2650 x 1440 the image is too big and even when you are on an iphone it shrinks too much.

So the question is how would or could I adapt the code to prevent the image from expanding beyond 1366 and prevent it from shrinking too much on an iphone?

I've tried different bits of code, but using if statements with stagewidth GT 800 etc.. creates other problems.

Thanks in advance for your help!

Robert

Code

<info_box_settings infobox2screen_ratio="0.7" /> <!-- 0.7 = seventy percent of screenheight or screenwidth -->
	
	<events name="infobox_events" keep="true" 
	onresize="infobox_image_adapt();" 
	onnewpano="close_info_box();"/>
	
	<style name="pichotspot" 
	distorted="false" capture="false" zorder="1" 
	onclick="show_info_box();" url="skin/info2.png" 
	onloaded="if(ismobile,set(scale,1));" zoom="false" scale="0.4" 
	onhover="showtext(Click for more information,thumbtext3)"/>		
	
	<plugin name="infobox_image" 
	url="" align="center" keep="true" 
	alpha="1" scale="0" handcursor="false" 
	scalechildren="true" visible="true" 
	onloaded="set(infobox_image_loaded,true);
	set(infobox_image_w,get(plugin[infobox_image].imagewidth));	
	set(infobox_image_h,get(plugin[infobox_image].imageheight));
	infobox_image_adapt();" x="0" y="0" zorder="5" onhover="" onclick="" />
	
	<plugin name="info_box_x"
	url="images/close_btn.png"	parent="infobox_image" 
	align="topright" keep="true" alpha="1" scale="1.5" 
	handcursor="true" visible="true" x="15" y="10" zorder="6" onhover="" 
	onclick="action(close_info_box);"/>
	
	<action name="close_info_box">
	tween(plugin[infobox_image].scale,0);
	</action>
	
	<action name="show_info_box">
	set(plugin[infobox_image].scale,0);
	txtadd(infobox_image_file_name,'images/',get(name),'.png');
	set(plugin[infobox_image].url,get(infobox_image_file_name));
	delayedcall(0.5,tween(plugin[infobox_image].scale,0.7););
	</action>


	<action name="infobox_image_adapt">
	div(infobox_image_expected_aspect,get(infobox_image_w),get(infobox_image_h));
	div(screen_expected_aspect,stagewidth,stageheight);
	fix_infobox_aspectresize(infobox_image_expected_aspect,screen_expected_aspect);
	</action>


	<action name="fix_infobox_aspectresize">
	if(%2 LE %1,mul(new_infobox_image_width,stagewidth,info_box_settings.infobox2screen_ratio);
	set(plugin[infobox_image].width,get(new_infobox_image_width));
	set(plugin[infobox_image].height,prop);
	,
	mul(new_infobox_image_height,stageheight,info_box_settings.infobox2screen_ratio);
	set(plugin[infobox_image].height,get(new_infobox_image_height));
	set(plugin[infobox_image].width,prop);); 
	</action>

Display More

Umalo · April 5, 2016 at 11:07 PM

Have you tried playing with:
https://krpano.com/docu/xml/#plugin.minwidth (minwidth, maxwidth, minheight, maxheight)

There is also option to make your infobox2screen_ratio with IF. E.g. infobox2screen_ratio ="calc:(stagewidth GE 1400 ? 0.5 : 0.7)"

rbudnikas · April 5, 2016 at 11:26 PM

Quote from Umalo

Have you tried playing with:
https://krpano.com/docu/xml/#plugin.minwidth (minwidth, maxwidth, minheight, maxheight)

Yes I have and when I resize the browser it doesn't proportion and seems to get squished.

I guess I am not understanding the parameters to set.

Thanks, I will try your suggestion.

Robert

rbudnikas · April 6, 2016 at 6:46 PM

Sorry Umalo,

I'm not a programmer and what knowledge I do have is limited. What do I replace, what do I remove to add your example. Do I add it to the fix_infobox_aspectsize?? Do I remove some code. When I add it everything stays at .7 regardless.

Sorry very frustrated with more myself that I don't understand. I don't understand the correlation between plugin sizes and stage sizes especially when there are no height width settings and it is being retrieved in a statement based on the actual size of the image. Throw in mul and my brain hurts

I've attached the xml here if you wouldn't mind looking at it again.

Thanks,

Robert

Umalo · April 7, 2016 at 9:15 PM

Delete <info_box_settings... >
Replace old action with this:

Code

<action name="fix_infobox_aspectresize">
	if(%2 LE %1,mul(new_infobox_image_width,stagewidth,calc(stagewidth GE 1366 ? 0.5 : 0.9));
	set(plugin[infobox_image].width,get(new_infobox_image_width));
	set(plugin[infobox_image].height,prop);
	,
	mul(new_infobox_image_height,stageheight,calc(stageheight GE 768 ? 0.5 : 0.9));
	set(plugin[infobox_image].height,get(new_infobox_image_height));
	set(plugin[infobox_image].width,prop);); 
	</action>

In words: If screen width is greater than 1366 your image will be scaled to 0.5 (50% of it's size), otherwise it will be 0.9. Same with screeheight. You can adapt scale how you like. This is solution that will work in case of screen orientation change too. If we tweak only settings based solution than this is set on start and not udapted if screen size is changed like in case orientation change is happening.

How to limit resizing

Participate now!

Users Viewing This Thread