Sie sind nicht angemeldet.

How to reset the <area> to the default ?

michel

Profi

  • »michel« ist der Autor dieses Themas

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

  • Nachricht senden

1

Freitag, 6. November 2009, 19:46

How to reset the <area> to the default ?

Hi KLAUS,

Is there a native Krpano function to reset the <area> to the stage width and height (as it is by default before setting an <area>) *question*
In trying to answer a thread from machart (new approach for widescreen presentation), I was needing to reset the <area>. So I have tried something like reset(area) and others but without succes.

I have found a way that works, using the onresize event for call an action that sets the <area> to match the stage but I am not sure that is the best way to do.
Here is an example code I used to test:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

<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();"
			/>
	
	<style name="buttonstyle"
	   	url="%SWFPATH%/plugins/textfield.swf" children="false"
	   	width="150" height="22"
	   	css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }" 
	   	backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" 
	   	visible="false" 
	   	onover="tween(alpha,0.7,distance(0.3,0.2));" 
	   	onout="tween(alpha,1.0,distance(0.3,0.2));" 
	   	onloaded="set(alpha,0);set(textblur,15);set(blur,15); set(visible,true); tween(alpha,1,0.3); tween(textblur,0,0.3); tween(blur,0,0.3);"
	   	/>
	
	<plugin name="set_area" keep="true" style="buttonstyle"
	    	html="[p]set_area[/p]"
	    	align="bottom" x="-120" y="25"
	    	onclick="back_area_size();  events.onresize();"
	    	/>
	
	<plugin name="reset_area" keep="true" style="buttonstyle"
	    	html="[p]reset_area[/p]"
	    	align="bottom" x="120" y="25"
	    	onclick="set(events.onresize,'reset_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(); );
	</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(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>


Is there a better way to do ? A native function ?

SAlut.

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

2

Samstag, 7. November 2009, 11:34

Hi,

there no reset functions, but that can be done by setting the area values back to the default ones:

Quellcode

 
1

<area x="0%" y="0%" width="100%" height="100%" />

e.g. as action:

Quellcode

 
1
2
3
4
5
6

<action name="resetarea">
  set(area.x, 0%);
  set(area.y, 0%);
  set(area.width, 100%);
  set(area.height, 100%);
</action>


note - it's enougth to call this ones, not in every onresize,
the onresize event could be also set back to 'null' when not needed anymore,

best regards,
Klaus

michel

Profi

  • »michel« ist der Autor dieses Themas

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

  • Nachricht senden

3

Sonntag, 8. November 2009, 02:01

Thank you KLAUS,

I have simplified a little and modified the code to reset the area in your way:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<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="-15" vlookat="-10" fov="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="set_area_size();" 
			onenterfullscreen="reset_area_size();"
			onexitfullscreen="set_area_size();"
			/>
	
	<style name="buttonstyle" url="%SWFPATH%/plugins/textfield.swf" children="false"
	   	visible="false" width="150" height="22"
	   	css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }" 
	   	backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" 
	   	onover="tween(alpha,0.7,distance(0.3,0.2));" 
	   	onout="tween(alpha,1.0,distance(0.3,0.2));" 
	   	onloaded="set(alpha,0);set(textblur,15);set(blur,15); set(visible,true); tween(alpha,1,0.3); tween(textblur,0,0.3); tween(blur,0,0.3);"
	   	/>
	
	<plugin name="set_area" keep="true" style="buttonstyle"
	    	html="[p]set_area[/p]"
	    	align="bottom" x="-170" y="25"
	    	onclick="set_area_size();"
	    	/>
	
	<plugin name="reset_area" keep="true" style="buttonstyle"
	    	html="[p]reset_area[/p]"
	    	align="bottom" x="0" y="25"
	    	onclick="reset_area_size();"
	    	/>
	
	<plugin name="border" keep="true" style="buttonstyle"
	    	html="[p]set border[/p]"
	    	align="bottom" x="170" y="25"
			onclickBorderFalse="set(area_vars.border.value,false); reset_border(); set(plugin[border].onclick,get(onclickBorderTrue)); set(plugin[border].html,'[p]border = false[/p]');"
			onclickBorderTrue="set(area_vars.border.value,true); set_border(); set(plugin[border].onclick,get(onclickBorderFalse)); set(plugin[border].html,'[p]border = true[/p]');"
	    	onclick="set(area_vars.border.value,false); reset_border();	set(plugin[border].onclick,get(onclickBorderTrue)); set(plugin[border].html,'[p]border = false[/p]');"
	    	/>

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

	<!-- define variables to set the area -->	
	<area_vars>
		<image_width  value="500"  />
		<image_height value="200"  />
		<margin   	value="30"   />
		<border   	value="true" />
	</area_vars>

	<!-- actions to set the area   	-->
	<action name="set_area_size">
		set(events.onresize,'set_area_size();');
		div(aspect,get(area_vars.image_width.value),get(area_vars.image_height.value));
		set(dest_area_x,get(area_vars.margin.value));
		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,get(area_vars.margin.value)); 
			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); , );
		copy(area.x, dest_area_x);
		copy(area.y, dest_area_y);
		copy(area.width, dest_area_width);
		copy(area.height, dest_area_height);
		if( area_vars.border.value == true, set_border(););
	</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, 100%);
		set(area.height, 100%);
		reset_border();
	</action>

	<!-- action to set the area border -->	
	<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)); 
		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>

	<!-- action to reset the area border -->	
	<action name="reset_border">
		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>

</krpano>

Is there a better way to set a border to the area? I have posted a thread about this here:
Border attribute for <area> node

Thank you. *smile*

SAlut,

michel

Profi

  • »michel« ist der Autor dieses Themas

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

  • Nachricht senden

4

Sonntag, 8. November 2009, 20:33

Hi,

Here a more simplified code after the explanaition from KLAUS here: Border attribute for <area> node
The modified code:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

<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="-15" vlookat="-10" fov="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="set_area_size();" 
			onenterfullscreen="reset_area_size();"
			onexitfullscreen="set_area_size();"
			/>
	
	<style name="buttonstyle" url="%SWFPATH%/plugins/textfield.swf" children="false"
	   	visible="false" width="150" height="22"
	   	css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }" 
	   	backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" 
	   	onover="tween(alpha,0.7,distance(0.3,0.2));" 
	   	onout="tween(alpha,1.0,distance(0.3,0.2));" 
	   	onloaded="set(alpha,0);set(textblur,15);set(blur,15); set(visible,true); tween(alpha,1,0.3); tween(textblur,0,0.3); tween(blur,0,0.3);"
	   	/>
	
	<plugin name="set_area" keep="true" style="buttonstyle"
	    	html="[p]set_area[/p]"
	    	align="bottom" x="-170" y="25"
	    	onclick="set_area_size();"
	    	/>
	
	<plugin name="reset_area" keep="true" style="buttonstyle"
	    	html="[p]reset_area[/p]"
	    	align="bottom" x="0" y="25"
	    	onclick="reset_area_size();"
	    	/>
	
	<plugin name="border" keep="true" style="buttonstyle"
	    	html="[p]set border[/p]"
	    	align="bottom" x="170" y="25"
			onclickBorderFalse="set(area_vars.border.value,false); reset_border(); set(plugin[border].onclick,get(onclickBorderTrue)); set(plugin[border].html,'[p]border = false[/p]');"
			onclickBorderTrue="set(area_vars.border.value,true); set_border(); set(plugin[border].onclick,get(onclickBorderFalse)); set(plugin[border].html,'[p]border = true[/p]');"
	    	onclick="set(area_vars.border.value,false); reset_border();	set(plugin[border].onclick,get(onclickBorderTrue)); set(plugin[border].html,'[p]border = false[/p]');"
	    	/>

	<!--  area border  -->
	<plugin name="border_top"	url="border_x2.png" enabled="false" align="top"	width="100%"  accuracy="1" /> 
	<plugin name="border_bottom" url="border_x2.png" enabled="false" align="bottom" width="100%"  accuracy="1" />
	<plugin name="border_left"   url="border_x2.png" enabled="false" align="left"   height="100%" accuracy="1" /> 
	<plugin name="border_right"  url="border_x2.png" enabled="false" align="right"  height="100%" accuracy="1" />
	
	<!-- define variables to set the area -->	
	<area_vars>
		<image_width  value="500"  />
		<image_height value="200"  />
		<margin   	value="30"   />
		<border   	value="true" />
	</area_vars>

	<!-- actions to set the area   	-->
	<action name="set_area_size">
		set(events.onresize,'set_area_size();');
		div(aspect,get(area_vars.image_width.value),get(area_vars.image_height.value));
		set(dest_area_x,get(area_vars.margin.value));
		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,get(area_vars.margin.value)); 
			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); , );
		copy(area.x, dest_area_x);
		copy(area.y, dest_area_y);
		copy(area.width, dest_area_width);
		copy(area.height, dest_area_height);
		if( area_vars.border.value == true, set_border(););
	</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, 100%);
		set(area.height, 100%);
		if( area_vars.border.value == false, reset_border(););
	</action>

	<!-- action to set the area border -->	
	<action name="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>

	<!-- action to reset the area border -->	
	<action name="reset_border">
		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>

</krpano>

The most important part to customise the way you need is line code 56 to 61.... Here are the values to set properly the area, the margin and the border...

Thank you again KLAUS *thumbsup* .I would like to say one more and one more time the GREAT job you are doing. *attention*

SAlut.

Astroman

Anfänger

Beiträge: 8

  • Nachricht senden

5

Freitag, 14. Mai 2010, 17:54

Hello, I wld like to know if there is a possibility that the area scales via tween to 100% when resetting the predefinded area.

Quellcode

 
1
2
3
4
5
6
7
8

<action name="reset_and tween_area_size">
set(events.onresize,); 
set(area.x, 0%);
set(area.y, 0%);
tween(area.width, 100%);
tween(area.height, 100%);
if( area_vars.border.value == false, reset_border(););
</action>


In this way the area tweens from upper left corner over the whole screen, I wld like to have an animation that scales the area that it fits the screen from the before setted area. So I want to use it as an animation that while the tour is loading a static images shows up and after loading is done and mouse click, the area grows to full stage and you can navigate through the tour.

Thanks in advance.
A.

michel

Profi

  • »michel« ist der Autor dieses Themas

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

  • Nachricht senden

6

Freitag, 14. Mai 2010, 18:58

Hi Astroman,

Try with this code:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13

	<!-- tweening actions to reset the area  -->	
	<action name="reset_and tween_area_size">
		set(events.onresize,); 
		tween(area.x, 0);
		tween(area.y, 0);
		tween(area.width, get(stagewidth));
		tween(area.height, get(stageheight),,,WAIT);
		set(area.x, 0%);
		set(area.y, 0%);
		set(area.width, 100%);
		set(area.height, 100%);
		if( area_vars.border.value == false, reset_border(););
	</action>


SAlut.

Astroman

Anfänger

Beiträge: 8

  • Nachricht senden

7

Freitag, 14. Mai 2010, 22:05

Hello Michel, that works absolut perfect!
Many thanks. Can I ask about this:
tween(area.height, get(stageheight),,,WAIT);

When doing it without ",,,WAIT);" the "tour" shakes a little and starts tweening - working with "wait" makes all smooth.
So for what is the ",,,WAIT);"?

A.

michel

Profi

  • »michel« ist der Autor dieses Themas

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

  • Nachricht senden

8

Freitag, 14. Mai 2010, 23:47

Hi Astroman,

Zitat von »krpano 1.0.8 beta 8 - Doc«

WAIT flag for the tween() action
  • waiting until this tween has been finished before the next action command will be executed
  • usage:

    Quellcode

    		 
    1

    tween(variable,destinationvalue,time,tweentype,WAIT);

Zitat von »Klaus«

The tween() action starts only a 'process' to change a value during the time, but after starting it, the next action will be processed, this allows the tween() several values at once,...
So, without the WAIT flag, the following actions are executed (the set(area.x, 0%),ect...)... this is why the "tour" shakes a little and starts tweening ;-) ...

Hope this help...

SAlut.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »michel« (15. Mai 2010, 14:02)

michel

Profi

  • »michel« ist der Autor dieses Themas

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

  • Nachricht senden

9

Samstag, 15. Mai 2010, 18:47

Hi Astroman,

Answering to your private message (*), here a modified code to set the area size using tween :

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

	<!--   tweening actions to set the area   	-->
	<action name="set_area_size_tween">
		set(events.onresize,'set_area_size();');
		div(aspect,get(area_vars.image_width.value),get(area_vars.image_height.value));
		set(dest_area_x,get(area_vars.margin.value));
		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,get(area_vars.margin.value)); 
			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.x, 0);
		set(area.y, 0);
		set(area.width, get(stagewidth));
		set(area.height, get(stageheight));
		tween(area.x, get(dest_area_x));
		tween(area.y, get(dest_area_y));
		tween(area.width, get(dest_area_width));
		tween(area.height, get(dest_area_height),,,WAIT);
		if( area_vars.border.value == true, set_border(););
	</action>


(*) hope it can be usefull to other also ;-) .

SAlut.

Astroman

Anfänger

Beiträge: 8

  • Nachricht senden

10

Samstag, 15. Mai 2010, 19:48

Ah. Very clever to run the area_size function/action again ;)
Thank you. My first impressions was to recieve the values from the "area_size" function and pass them to the "
set_area_size_tween" action.

michel

Profi

  • »michel« ist der Autor dieses Themas

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

  • Nachricht senden

11

Samstag, 15. Mai 2010, 20:13

Hi Astroman,

Yes *thumbup* , following your approach, the code could be something like this:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!-- actions to set the area -->
<action name="area_size">	
		div(aspect,get(area_vars.image_width.value),get(area_vars.image_height.value));
		set(dest_area_x,get(area_vars.margin.value));
		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,get(area_vars.margin.value)); 
			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); , );
</action>

<action name="set_area_size">
		area_size();
		set(events.onresize,'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);
		if( area_vars.border.value == true, set_border(););
	</action>

<action name="tween_area_size">
		area_size();
		set(events.onresize,'set_area_size();');
		set(area.x, 0);
		set(area.y, 0);
		set(area.width, get(stagewidth));
		set(area.height, get(stageheight));
		tween(area.x, get(dest_area_x));
		tween(area.y, get(dest_area_y));
		tween(area.width, get(dest_area_width));
		tween(area.height, get(dest_area_height),,,WAIT);
		if( area_vars.border.value == true, set_border(););
</action>


SAlut.

Astroman

Anfänger

Beiträge: 8

  • Nachricht senden

12

Samstag, 15. Mai 2010, 21:49

He Michel, that works like a charme!

orbitlab

Schüler

Beiträge: 53

Wohnort: Greece

  • Nachricht senden

13

Dienstag, 6. Juli 2010, 15:49

Zitat von »michel«

Hi Astroman,

Answering to your private message (*), here a modified code to set the area size using tween :

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

	<!--   tweening actions to set the area   	-->
	<action name="set_area_size_tween">
		set(events.onresize,'set_area_size();');
		div(aspect,get(area_vars.image_width.value),get(area_vars.image_height.value));
		set(dest_area_x,get(area_vars.margin.value));
		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,get(area_vars.margin.value)); 
			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.x, 0);
		set(area.y, 0);
		set(area.width, get(stagewidth));
		set(area.height, get(stageheight));
		tween(area.x, get(dest_area_x));
		tween(area.y, get(dest_area_y));
		tween(area.width, get(dest_area_width));
		tween(area.height, get(dest_area_height),,,WAIT);
		if( area_vars.border.value == true, set_border(););
	</action>


(*) hope it can be usefull to other also ;-) .

SAlut.
I have tried this code but the area keeps resizing all the time, like in an infinite loop. Why is this happening?
Orbitlab - Digital Content Laboratory
Orbitlab on Twitter

orbitlab

Schüler

Beiträge: 53

Wohnort: Greece

  • Nachricht senden

14

Dienstag, 6. Juli 2010, 16:38

Here is a live test

http://www.orbitlab.gr/beta/test/

this is my code

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

<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="-15" vlookat="-10" fov="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="set_area_size();" 
			onenterfullscreen="reset_area_size();"
			onexitfullscreen="set_area_size();"
			/>
	
	<style name="buttonstyle" url="%SWFPATH%/plugins/textfield.swf" children="false"
	   	visible="false" width="150" height="22"
	   	css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }" 
	   	backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" 
	   	onover="tween(alpha,0.7,distance(0.3,0.2));" 
	   	onout="tween(alpha,1.0,distance(0.3,0.2));" 
	   	onloaded="set(alpha,0);set(textblur,15);set(blur,15); set(visible,true); tween(alpha,1,0.3); tween(textblur,0,0.3); tween(blur,0,0.3);"
	   	/>
	
	<plugin name="set_area" keep="true" style="buttonstyle"
			html="[p]set_area[/p]"
			align="bottom" x="-170" y="25"
			onclick="set_area_size();"
			/>
	
	<plugin name="reset_area" keep="true" style="buttonstyle"
			html="[p]reset_area[/p]"
			align="bottom" x="0" y="25"
			onclick="reset_area_size();"
			/>
	
	<plugin name="border" keep="true" style="buttonstyle"
			html="[p]set border[/p]"
			align="bottom" x="170" y="25"
			onclickBorderFalse="set(area_vars.border.value,false); reset_border(); set(plugin[border].onclick,get(onclickBorderTrue)); set(plugin[border].html,'[p]border = false[/p]');"
			onclickBorderTrue="set(area_vars.border.value,true); set_border(); set(plugin[border].onclick,get(onclickBorderFalse)); set(plugin[border].html,'[p]border = true[/p]');"
			onclick="set(area_vars.border.value,false); reset_border();	set(plugin[border].onclick,get(onclickBorderTrue)); set(plugin[border].html,'[p]border = false[/p]');"
			/>

	<!--  area border  -->
	<plugin name="border_top"	url="border_x2.png" enabled="false" align="top"	width="100%"  accuracy="1" /> 
	<plugin name="border_bottom" url="border_x2.png" enabled="false" align="bottom" width="100%"  accuracy="1" />
	<plugin name="border_left"   url="border_x2.png" enabled="false" align="left"   height="100%" accuracy="1" /> 
	<plugin name="border_right"  url="border_x2.png" enabled="false" align="right"  height="100%" accuracy="1" />
	
	<!-- define variables to set the area -->	
	<area_vars>
		<image_width  value="500"  />
		<image_height value="200"  />
		<margin   	value="30"   />
		<border   	value="true" />
	</area_vars>

	<!-- actions to set the area   	-->
	<action name="set_area_size">
		set(events.onresize,'set_area_size();');
		div(aspect,get(area_vars.image_width.value),get(area_vars.image_height.value));
		set(dest_area_x,get(area_vars.margin.value));
		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,get(area_vars.margin.value)); 
			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.x, 0);
		set(area.y, 0);
		set(area.width, get(stagewidth));
		set(area.height, get(stageheight));
		tween(area.x, get(dest_area_x));
		tween(area.y, get(dest_area_y));
		tween(area.width, get(dest_area_width));
		tween(area.height, get(dest_area_height),,,WAIT);
		if( area_vars.border.value == true, set_border(););
	</action>
	<action name="reset_area_size">
		set(events.onresize,); 
		tween(area.x, 0);
		tween(area.y, 0);
		tween(area.width, get(stagewidth));
		tween(area.height, get(stageheight),,,WAIT);
		set(area.x, 0%);
		set(area.y, 0%);
		set(area.width, 100%);
		set(area.height, 100%);
		if( area_vars.border.value == false, reset_border(););
	</action>

	<!-- action to set the area border -->	
	<action name="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>

	<!-- action to reset the area border -->	
	<action name="reset_border">
		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>

</krpano>
Orbitlab - Digital Content Laboratory
Orbitlab on Twitter

nefar1ous

Fortgeschrittener

Beiträge: 190

  • Nachricht senden

15

Mittwoch, 7. September 2011, 08:11

problem with <center> in html

Hi Michel,
Can you please come up with a solution to this problem based on your code:

When I put the tour, using code above, in a div tag (per normal) everything is ok and appears centered as it is using the entire screen resolution.
But when I put the tour in a div tag and then try to center that div using <center> </center> or other methods of centering, the stage suddenly shrinks in size to a couple of inches.


I found the problem because I wanted to put the tour within a reduced size (windowed) div (60% x 80% of screen size) and then the tour was positioned in the top left corner. So I went to center it and bam!... it changed to this tiny little box, albeit it was centered.
The reason I wanted to reduce the DIV is because I did not want the stage to be full screen while the image was a reduced size. I thought it might be better to have plugins outside the image, but inside the reduced size stage. That way, I could set plugin parent to stage and all would align and scale well in a small window and as a full screen window.

Anyway, I reset the div to full (100%) size w and h. Then kept the <center> and still have same problem... stage becomes this tiny little box in the center of the screen.

What I want windowed:

What I want Fullscreen (not sure if this is exact to what would be reproduced full screen):


If you have found a new method or know a better way to accomplish this I'd be happy to hear about it.
I'm thinking maybe the best way is to just create a plugin border around the tour then using that as a parent for controls.

Thanks, Tony

Ähnliche Themen