Scaling a plugin automatically

Shanti

Intermediate

Posts: 301

Location: Puerto Vallarta

Occupation: Web Developer

1

Friday, March 6th 2009, 2:02am

Ok, I am working (modifiying) on a plug-in but when i resize the browser window, everything scales EXCEPT this plugin... does anyone know why?

I tried adding:

stage.scaleMode = StageScaleMode.SHOW_ALL;

to the AS3 and also removing it.

this will make Krpano not work correctly (for some odd reason)

the plugin scales when used alone, but once inside krpano it does not work, if I re size the window the plugion stays the same.

btw, I also tried the scale in the xml, but it will scale it, just not autoscale it :P
any ideas?

EDIT: Actually no plugins autoscale, is this not possible?

Shanti Gilbert
http://www.mundopano.com
http://www.puertovallartavirtualtour.com
http://www.pvbeat.com
http://www.vallartarestaurants.com

This post has been edited 2 times, last edit by "Shanti" (Mar 6th 2009, 2:28am)

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

2

Friday, March 6th 2009, 1:06pm

Hi,

the Flash stage scaleMode shouldn't be changed! - this could give very bad results

to scale a plugin with the screensize use percent (%) values for the "width" or "height" attributes,
width="100%" is the full screenwidth and height="100%" the full screenheight,
for proportional scaling set one value to "PROP",

e.g.

	Source code
1	<plugin .... width="10%" height="PROP" />

if you want to notice this resizes in the plugin add a RESIZE EVENT in the as3 code,

best regards,
Klaus

Go to the top of the page

Shanti

Intermediate

Posts: 301

Location: Puerto Vallarta

Occupation: Web Developer

3

Friday, March 6th 2009, 7:05pm

Thanks Klaus, that worked!

except when I use height="PROP" the plugin dissapears :(

EDIT: Nevermind, its "prop" lowercase :)

Thanks!

Shanti Gilbert
http://www.mundopano.com
http://www.puertovallartavirtualtour.com
http://www.pvbeat.com
http://www.vallartarestaurants.com

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

4

Saturday, March 7th 2009, 11:09am

ohhh

right! only lowercase works at the moment

in the next version the case will be ignored

Go to the top of the page

masrawy4ever

Beginner

Posts: 1

5

Wednesday, May 11th 2011, 10:27am

I need help

this attributes
<plugin .... width="10%" height="PROP" />
i need as3 code plz

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

6

Wednesday, May 11th 2011, 3:10pm

Hi,

Quoted from "masrawy4ever"

this attributes
<plugin .... width="10%" height="PROP" />
i need as3 code plz

what do you mean or what do you want to do?

best regards,
Klaus

Go to the top of the page

pear

Beginner

Posts: 12

7

Saturday, November 2nd 2013, 2:03pm

Resize with max-size 100% of stage?

Hi,
I have an intro image that is about 500px tall. I want it to be scale="1.0" however with a maximum size of 100% of stage/window.
Because when viewing it in the facebook feed which makes the "window" pretty small, the intro image is bigger than the window.

Is this possible? In a CSS world it would probably be max-size:100%; but I guess this isn't compatible with krpano's xml.

Anyone?

Go to the top of the page

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

8

Saturday, November 2nd 2013, 3:43pm

height="100%" width="prop"

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Go to the top of the page

pear

Beginner

Posts: 12

9

Saturday, November 2nd 2013, 3:51pm

Quoted from "sachagriffin"

height="100%" width="prop"

But doesn't that make the image's height 100% of the window even when in fullscreen?
I want it to to be 500px tall (height) when it fits, but when the window is resized smaller than 500px I want it to start to resize to 100% height. Maybe I suck at explaining:P

Go to the top of the page

Alexey Tkachenko

Professional

Posts: 770

Location: Russian Federation

Occupation: Interpreting, Building virtual tours

10

Saturday, November 2nd 2013, 6:59pm

Hi!

What if apply an event:

	Source code
1 2	<events name="scale_plugin" onresize="if(plugin[your_image].imageheight GT stageheight, set(plugin[your_image].height, 95%); set(plugin[your_image].width, prop); );" />

Regards,

Alexey

Go to the top of the page

pear

Beginner

Posts: 12

11

Saturday, November 2nd 2013, 7:23pm

Quoted from "Alexey Tkachenko"

Hi!

What if apply an event:

	Source code
1 2	<events name="scale_plugin" onresize="if(plugin[your_image].imageheight GT stageheight, set(plugin[your_image].height, 95%); set(plugin[your_image].width, prop); );" />

Works like a charm, Thanks Alexey!
This easy function could be a feature request for a new max-height="100%" property.

Go to the top of the page

alexinorbit

Beginner

Posts: 17

12

Thursday, November 7th 2013, 7:57pm

any ideas on how to GET the computed value of "prop" ?
I use

	Source code
1 2 3	<layer name="T_MONUMENT" url="" align="topleft" edge="topleft" x="0%" width="50%" height="prop" /> set(buttonH, get(layer[T_MONUMENT].height)); trace(buttonH);

and get just "prop" when tracing the vaule of buttonH...

(I want the actual computed prop value to use it in other actions)

Go to the top of the page

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

13

Thursday, November 7th 2013, 9:54pm

My idea is to calculate this value. You can use original image dimensions and current known width or height to calculate:
In general proportions is kept, so: originalW : original H = ScaledW : ScaledH

If scaledW is prop and can't be read than: ScaledW = originalW * ScaledH / originalH

Tested code:

Source code

set(scaledH,  get(plugin[your_plugin].height));   <!-- trace('scaledH:',get(scaledH));-->
set(originalH,get(plugin[your_plugin].imageheight)); <!-- trace('originalH:',originalH);-->   
set(originalW,get(plugin[your_plugin].imagewidth));  <!-- trace('originalW:',originalW); -->   
   
mul(calculatedH,originalW,scaledH); div(calculatedH,originalH);
trace('calculatedH:',get(calculatedH));

Go to the top of the page

alexinorbit

Beginner

Posts: 17

14

Friday, November 8th 2013, 12:03am

this works just fine !

i only had to transform my % values to pixel using stagewidth before using your approach. ( i like to design using percent values to keep the interface responsive...)

Now i can place responsive buttons in both directions when designing my interface

*smile*

thanx Umalo

Go to the top of the page

danimorgo

Beginner

Posts: 42

Location: argentina

Occupation: diseñador

15

Friday, March 21st 2014, 10:07am

not working

someone could post an example,
I try to resize the image, and keep the proportions to scale the window.
regards

Go to the top of the page

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

16

Saturday, March 29th 2014, 10:19pm

This will be enough for landscape oriented images to add to your event list:
<events name="scale_plugin" onresize="if(plugin[your_image].imageheight GT stageheight, set(plugin[your_image].height, 95%); set(plugin[your_image].width, prop); );"/>

Go to the top of the page

pear

Beginner

Posts: 12

17

Monday, December 1st 2014, 1:00am

Hi,
I have the same problem where my intro image is bigger than the scene area when viewing the pano on the facebook feed.

This is my code for my intro image:

Source code

<!--  INTRO IMAGE  -->
<plugin name="introimage" HasBeenPlayed="false" keep="true" url="skin/Click-N-Drag_icon.png" align="center" onclick="hideintroimage();" onloaded="autohideintroimage();" scale="1"/>
<action name="hideintroimage">
if(plugin[introimage].enabled,	set(plugin[introimage].enabled,false);tween(plugin[introimage].alpha, 0.0, 0.5, default, removeplugin(introimage)););
</action>
<action name="autohideintroimage">
if(plugin[introimage].HasBeenPlayed == false, set(plugin[introimage].alpha,0); tween(plugin[introimage].alpha,1.0,WAIT); delayedcall(5, hideintroimage()); set(plugin[introimage].HasBeenPlayed,true);	);
</action>
<!--  END INTRO IMAGE  -->

And I tried to insert the following and some modifications to it, both before and after the above code, but without any success:

	Source code
1	<events name="scale_plugin" onresize="if(plugin[introimage].imageheight GT stageheight, set(plugin[introimage].height, 95%); set(plugin[introimage].width, prop); );" />

The attached image is what it looks like in the facebook feed, and the red circle is to illustrate how big the image is to see that it's bigger than the stage.

Anyone got any idea how to solve it?
Thanks guys! :)

pear has attached the following image:

Go to the top of the page

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

18

Monday, December 1st 2014, 10:31am

Try something like

Source code

<events name="scale_plugin" onresize="if(plugin[introimage].imageheight GT stageheight, set(plugin[introimage].height, 95%); set(plugin[introimage].width, prop); , set(plugin[introimage].width, 95%); set(plugin[introimage].height, prop); );" />