Tween plugin to percentage of stage height

Beginner

Monday, September 20th 2010, 10:27pm

Tween plugin to percentage of stage height

I have a map image, that I want to scale up (tween) when clicked. But I want to scale to a percentage of the stage height.

So, something like this:

Source code

<!-- Map -->
    <plugin name="map"
        url="../img/map-large-notext-rotated.png" 
        visible="true" 
        align="bottomleft" 
        y="114" 
        x="10" 
        width="100" 
        height="100" 
        keep="true" 
        handcursor="false" 
        scalechildren="true" 
        zorder="6" 
        onclick="[I DON'T KNOW]"
        />

Is there any way to accomplish this?

I've tried:

	Source code
1	onclick="tween(plugin[map].height, sub(get(stageheight), 10));"

But that just makes the map disappear when I click it.

My example is here.

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

Tuesday, September 21st 2010, 2:21pm

Hi,

e.g.

	Source code
1	onclick="mul(destheight,stageheight,0.10); tween(plugin[map].height, get(destheight));"

calculate the new size first and store it in any variable and the tween to that calculated value,

best regards,
Klaus

Go to the top of the page

pan-o-rama

Beginner

Posts: 12

Tuesday, September 21st 2010, 11:34pm

Perfekt, danke Klaus!

Go to the top of the page

zadda

Intermediate

Posts: 219

Wednesday, September 22nd 2010, 7:39pm

similar : how to resize height 100% -112 pxl

Hi,

i've got similar probem, i want tween my pano area from 100% to 100% -112 (a bottom drawer appear and the pano area go up),

how i do that ?

i've tried :

Source code

	<action name="drawer_open">
	
	sub(destheight,stageheight, 112); <!-- variable destheight calculated and stored here for later use -->
	
	set(area.x, 0, 0.3);
  	set(area.y, 0, 0.3);
  	tween(area.width, 100%, 0.3);
	tween(area.height, get(destheight), 0.3);
	</action>

but the effect is not a shortening from bottom to up, area resize entirely from the top *huh*

what's wrong here ??

because when i setup : tween(area.height, 80%, 0.3);
it works as expecteed, pano aea resize from bottom,so i think i must convert my variable to % ??
how ?

Thanks

This post has been edited 2 times, last edit by "zadda" (Sep 22nd 2010, 8:42pm)

Go to the top of the page

zadda

Intermediate

Posts: 219

Wednesday, September 22nd 2010, 10:15pm

tried

	Source code
1	tween(area.height, mod(stageheight, destheight), 0.3);

still not works *cursing*

Anybody ???

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

Wednesday, September 22nd 2010, 10:40pm

Hi zadda,

perhaps something like this:

Source code

	<action name="drawer_open">
	
	sub(destheight,stageheight, 112); <!-- variable destheight calculated and stored here for later use -->
	div(divisor,stageheight,100);
	div(destheight,divisor);
	roundval(destheight, 1);
	txtadd(destheight,get(destheight),'%');
	
	set(area.x, 0);
  	set(area.y, 0);
  	tween(area.width, 100%, 0.3);
	tween(area.height, get(destheight), 0.3);
	</action>

Note: as area.height could be a number or a percent % as value , there is the area.pixelheight

Hope this help....

SAlut.

Go to the top of the page

zadda

Intermediate

Posts: 219

Wednesday, September 22nd 2010, 11:27pm

Thanks a lot,
your code works perfectly *g*

you rocks !

the only caveat is when i enter fullscreen, let's say my pano is in a div 800x600, i open the bottom drawer, then the pano resize to the calculated %, but if i enter fullscreen, the height % is a bit different and there an hole beetween the pano bottom and the top drawer...so on fullscreen event i have to setup another action to re-calculate the % height for pano resize :

Source code

	<events onenterfullscreen="action(drawer_openfs);"
        	onexitfullscreen="action(drawer_closefs);"
        />

<action name="drawer_openfs">
	sub(destheight,stageheight, 112); <!-- variable destheight calculated and stored here for later use -->
	div(divisor,stageheight,100);
	div(destheight,divisor);
	roundval(destheight, 1);
	txtadd(destheight,get(destheight),'%');

	set(area.x, 0, 0.3);
  	set(area.y, 0, 0.3);
  	set(area.width, 100%, 0.3);
	set(area.height, get(destheight)); 
	</action>
	
	<action name="drawer_closefs">
	set(area.x, 0, 0.2);
  	set(area.y, 0, 0.2);
  	set(area.width, 100%);
	set(area.height, 100%); 
	</action>

but i must add conditional to know if drawwer is on open or close state : ( if stageheight is 100% or already resized....), don't know yet the conditional statement in krpano.....

Thanks again,i think i 'll need some moe help in futur *g*

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

Thursday, September 23rd 2010, 12:21am

Hi zadda,

Quoted

don't know yet the conditional statement in krpano.....

Quoted from "releasenotes.txt"

krpano.com - krpano Flash Panorama Viewer (1.0.8.11) - RELEASE NOTES
=============================================================================

1.0.8.11

........

- if/ifnot(condition, trueaction, falseaction) action
- condition:
- varA
- only one variable as parameter
- this variable will be compared against "true"
- varA OPERATOR varB
- compare two variables
- the below for all possible operators
- trueaction - actions that will be called on true
- falseaction - actions that will be called on false
- usage examples:
if(fullscreen, action(fullscreen_setup), action(windowmode_setup) );
if(view.vlookat GE 45, set(view.vlookat, 45) );
if(plugin[xyz].visible == true, set(plugin[xyz].visible,false) );

- supported if operators:
- "==" - equal
- "!=" - not equal
- "<" - lower than
- "<" - greater than
- "<=" - lower or equal than
- ">=" - greater or equal than
- "===" - strict equal (compare only existent variables)
- "!==" - strict not equal (compare only existent variables)
- because of the XML limitation of the usage of the '<' and '>' characters
also these operators are supported:
- "GT" - greater than,
- "LT" - lower than
- "LE" - lower or equal
- "GE" - greater or equal

I think you have to use the onresize event also:

Source code

	<!-- if(drawer, drawer_open()); ---- means: if the variable drawer is true then call the drawer_open() action -->
	<events onresize="if(drawer, drawer_open());"
		onenterfullscreen="if(drawer, drawer_open());"
		onexitfullscreen="if(drawer, drawer_open());" 
		/>


	<action name="drawer_open">
		set(drawer,true);
		sub(destheight,stageheight, 112); <!-- variable destheight calculated and stored here for later use -->
		div(divisor,stageheight,100);
		div(destheight,divisor);
		roundval(destheight, 1);
		txtadd(destheight,get(destheight),'%');

		set(area.x, 0, 0.3);
		set(area.y, 0, 0.3);
		set(area.width, 100%, 0.3);
		set(area.height, get(destheight)); 
	</action>
	
	<action name="drawer_close">
		set(drawer,false);
		set(area.x, 0, 0.2);
		set(area.y, 0, 0.2);
		set(area.width, 100%);
		set(area.height, 100%); 
	</action>

Hope this help....

SAlut.