You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 788

Location: Angers - France

Occupation: Photographer

  • Send private message

1

Wednesday, September 2nd 2015, 7:09pm

Responsive scrollarea

Hi, I'm trying to build a responsive thumbnails menu in a scrollarea plugin.
I have 2 "colons" of thumbnails and want the both thumbnails to fill the screen width.
I divide the stagewidth by the 2 thumbnails width and scale the scrollarea container with the result and scalechildren="true", and then divide 100 by the result to setup the width and height of the container to fill the screen...
Unfortunatly it's not working as wanted...
On portrait mode I can't scroll to the end of the thumbnails list, and in landscape I can scroll too much...
I'm sure I'm not taking the problme the right way but don't see how I could achieve this in another way only with krpano..

Here is the code :

Source code

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
<events name="fitmyscroll" onresize="setmyscale()"

<layer name="mobilethumbs" keep="true" type="container" align="top" width="100%" height="100%" visible="false" bgcolor="0x000000" bgalpha="0.5"  devices="mobile" y="60" scalechildren="true" onloaded="setmyscale()">
<layer name="scrollareamobile" url="%SWFPATH%/plugins/scrollarea.js" align="top" width="100%" height="3150" direction="v">
<layer name="intro" style="thumbs_left" y="150"/>
<layer name="AIR_LAKEVIEW" url="%SWFPATH%/skin/thumbs/AIR_LAKEVIEW.jpg" style="thumbs_left" tooltip="MAIN VIEW" y="150" onclick="hit(); loadpano(air_lakeview.xml, null, MERGE, BLEND(1))"/>
<layer name="AIR_SPORTS" url="%SWFPATH%/skin/thumbs/AIR_SPORTS.jpg" style="thumbs_right" tooltip="SPORTS AERIAL" y="150" onclick="hit(); loadpano(air_sports.xml, null, MERGE, BLEND(1))"/>
<layer name="WATERFRONT" url="%SWFPATH%/skin/thumbs/WATERFRONT.jpg" style="thumbs_left" tooltip="WATERFRONT" y="400" onclick="hit(); loadpano(waterfront.xml, null, MERGE, BLEND(1))"/>
<layer name="AIR_WATERFRONT" url="%SWFPATH%/skin/thumbs/AIR_WATERFRONT.jpg" style="thumbs_right" tooltip="WATERFRONT AERIAL" y="400" onclick="hit(); loadpano(air_waterfront.xml, null, MERGE, BLEND(1))"/>
<layer name="ADVENTURE" url="%SWFPATH%/skin/thumbs/ADVENTURE.jpg" style="thumbs_left" tooltip="ROPES COURSE" y="650" onclick="hit(); loadpano(adventure.xml, null, MERGE, BLEND(1))"/>
<layer name="ART" url="%SWFPATH%/skin/thumbs/ART.jpg" style="thumbs_right" tooltip="ARTS AND CRAFTS" y="650" onclick="hit(); loadpano(art.xml, null, MERGE, BLEND(1))"/>
<layer name="BASKETBALL" url="%SWFPATH%/skin/thumbs/BASKETBALL.jpg" style="thumbs_left" tooltip="SPORTS GYM" y="900" onclick="hit(); loadpano(basketball.xml, null, MERGE, BLEND(1))"/>
<layer name="BOAT" url="%SWFPATH%/skin/thumbs/BOAT.jpg" style="thumbs_right" tooltip="WATERSKIING" y="900" onclick="hit(); loadpano(boat.xml, null, MERGE, BLEND(1))"/>
<layer name="BOYS_EXTERIOR" url="%SWFPATH%/skin/thumbs/BOYS_EXTERIOR.jpg" style="thumbs_left" tooltip="BOYS CAMPUS" y="1150" onclick="hit(); loadpano(boys_exterior.xml, null, MERGE, BLEND(1))"/>
<layer name="CIRCUS" url="%SWFPATH%/skin/thumbs/CIRCUS.jpg" style="thumbs_right" tooltip="CIRCUS" y="1150" onclick="hit(); loadpano(circus.xml, null, MERGE, BLEND(1))"/>
<layer name="CLIMBING" url="%SWFPATH%/skin/thumbs/CLIMBING.jpg" style="thumbs_left" tooltip="CLIMBING WALL" y="1400" onclick="hit(); loadpano(climbing.xml, null, MERGE, BLEND(1))"/>
<layer name="DANCE" url="%SWFPATH%/skin/thumbs/DANCE.jpg" style="thumbs_right" tooltip="DANCE" y="1400" onclick="hit(); loadpano(dance.xml, null, MERGE, BLEND(1))"/>
<layer name="DINING_HALL" url="%SWFPATH%/skin/thumbs/DINING_HALL.jpg" style="thumbs_left" tooltip="DINING HALL" y="1650" onclick="hit(); loadpano(dining_hall.xml, null, MERGE, BLEND(1))"/>
<layer name="DRAMA" url="%SWFPATH%/skin/thumbs/DRAMA.jpg" style="thumbs_right" tooltip="THEATER" y="1650" onclick="hit(); loadpano(drama.xml, null, MERGE, BLEND(1))"/>
<layer name="GIRLS_BUNK" url="%SWFPATH%/skin/thumbs/GIRLS_BUNK.jpg" style="thumbs_left" tooltip="BUNK INTERIOR" y="1900" onclick="hit(); loadpano(girls_bunk.xml, null, MERGE, BLEND(1))"/>
<layer name="GIRLS_EXTERIOR" url="%SWFPATH%/skin/thumbs/GIRLS_EXTERIOR.jpg" style="thumbs_right" tooltip="GIRLS CAMPUS" y="1900" onclick="hit(); loadpano(girls_exterior.xml, null, MERGE, BLEND(1))"/>
<layer name="GYMNASTICS" url="%SWFPATH%/skin/thumbs/GYMNASTICS.jpg" style="thumbs_left" tooltip="GYMNASTICS" y="2150" onclick="hit(); loadpano(gymnastics.xml, null, MERGE, BLEND(1))"/>
<layer name="HOCKEY" url="%SWFPATH%/skin/thumbs/HOCKEY.jpg" style="thumbs_right" tooltip="HOCKEY" y="2150" onclick="hit(); loadpano(hockey.xml, null, MERGE, BLEND(1))"/>
<layer name="HORSEBARN_INTERIOR" url="%SWFPATH%/skin/thumbs/HORSEBARN_INTERIOR.jpg" style="thumbs_left" tooltip="HORSE BARN INTERIOR" y="2400" onclick="hit(); loadpano(horsebarn_interior.xml, null, MERGE, BLEND(1))"/>
<layer name="MAGIC" url="%SWFPATH%/skin/thumbs/MAGIC.jpg" style="thumbs_right" tooltip="MAGIC" y="2400" onclick="hit(); loadpano(magic.xml, null, MERGE, BLEND(1))"/>
<layer name="ROCKBAND" url="%SWFPATH%/skin/thumbs/ROCKBAND.jpg" style="thumbs_left" tooltip="ROCK SHOP" y="2650" onclick="hit(); loadpano(rockband.xml, null, MERGE, BLEND(1))"/>
<layer name="SKATEPARK" url="%SWFPATH%/skin/thumbs/SKATEPARK.jpg" style="thumbs_right" tooltip="SKATE PARK" y="2650" onclick="hit(); loadpano(skatepark.xml, null, MERGE, BLEND(1))"/>
<layer name="SWIMMING_POOL" url="%SWFPATH%/skin/thumbs/SWIMMING_POOL.jpg" style="thumbs_left" tooltip="SWIMMING POOL" y="2900" onclick="hit(); loadpano(swimming_pool.xml, null, MERGE, BLEND(1))"/>
<layer name="TENNIS" url="%SWFPATH%/skin/thumbs/TENNIS.jpg" style="thumbs_right" tooltip="TENNIS" y="2900" onclick="hit(); loadpano(tennis.xml, null, MERGE, BLEND(1))"/>
<layer name="select_mobilepano" url="%SWFPATH%/skin/icons/select_pano.png" zorder="20" devices="mobile" width="360" height="240"/>
		</layer>
	</layer>

<action name="setmyscale">
div(mobilethumbscale,stagewidth,750);
set(layer[mobilethumbs].scale,get(mobilethumbscale));
div(msw,100,get(mobilethumbscale));
div(msh,100,get(mobilethumbscale));
txtadd(myscrollwidth,get(msw),'%');
txtadd(myscrollheight,get(msh),'%');
set(layer[mobilethumbs].width,get(myscrollwidth));
set(layer[mobilethumbs].height,get(myscrollheight));
</action>	

	<style name="thumbs_left"  align="top" edge="right" x="-5" devices="mobile" width="360" height="240"/>
	<style name="thumbs_right"  align="top" edge="left" x="5" devices="mobile" width="360" height="240"/>


and you can see the result here ( try with a mobile as it's only a mobile menu ;) : http://www.covecreekproductions.com/tour…?pano=drama.xml
and clic on the bottomleft button

Tuur

Sage

Posts: 3,164

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

2

Wednesday, September 2nd 2015, 7:21pm

Salut Jerome,

I would use stagewidth/height in my calculations.

make action: Orientation();
events onresize: Orientation();

in action Orientation you put the math etc..
if(stagewidth LT stageheight, blabla else bla);

I used to call Orientation(); in the onstart as well

Hope it helps,
Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 788

Location: Angers - France

Occupation: Photographer

  • Send private message

3

Wednesday, September 2nd 2015, 7:26pm

Heu Tuur, thanx for looking,
I already use stagewidth :

Source code

1
2
3
4
5
6
7
8
9
10
<action name="setmyscale">
div(mobilethumbscale,stagewidth,750);
set(layer[mobilethumbs].scale,get(mobilethumbscale));
div(msw,100,get(mobilethumbscale));
div(msh,100,get(mobilethumbscale));
txtadd(myscrollwidth,get(msw),'%');
txtadd(myscrollheight,get(msh),'%');
set(layer[mobilethumbs].width,get(myscrollwidth));
set(layer[mobilethumbs].height,get(myscrollheight));
</action>


but maybe I didn't get something, stagewidth changes if you are in portrait or landscape or it's always the bigger side ?

Tuur

Sage

Posts: 3,164

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

4

Wednesday, September 2nd 2015, 7:36pm

Hi,

i think,
change the layer scrollareamobile 's height on orientation change.

edit: the stage width is the horizontal width.
So you need an other size for the scrollarea depending on the being portrait or landscape.
So try something like: if portrait set scroll area height 1234, else set 4567..
But you need also the change when the device is turned so for that you use the event

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

This post has been edited 1 times, last edit by "Tuur" (Sep 2nd 2015, 7:57pm)


jeromebg

Professional

  • "jeromebg" started this thread

Posts: 788

Location: Angers - France

Occupation: Photographer

  • Send private message

5

Wednesday, September 2nd 2015, 9:38pm

Ok, it works better with :

Source code

1
2
3
4
5
6
7
8
9
10
11
12
<action name="setmyscale">
div(mobilethumbscale,stagewidth,750);
set(layer[mobilethumbs].scale,get(mobilethumbscale));
div(msw,100,get(mobilethumbscale));
div(msh,100,get(mobilethumbscale));
div(sh,3150,get(mobilethumbscale));
txtadd(myscrollwidth,get(msw),'%');
txtadd(myscrollheight,get(msh),'%');
set(layer[mobilethumbs].width,get(myscrollwidth));
set(layer[mobilethumbs].height,get(myscrollheight));
set(layer[scrollareamobile].height,get(sh));
</action>


even if it's a bit strange, so space at the end of the thumbnails list in portrait, a nearly not enought in landscape... ???

Another problem I have is with the textfield to write the name of the pano on each thumbnails, looks like it's too many actions at the same time so when I first open the list only the last thumbnails has a textfield on it, and if I change orientation I recall my "setmyscale()" action and all the textfields are displayed, but not in a very accurate position...
Here is an example of textfield :

Source code

1
2
<layer name="AIR_LAKEVIEW_txt" parent="layer[AIR_LAKEVIEW]" style="thumbs_txt" html="MAIN VIEW" />
<style name="thumbs_txt"  align="bottom" devices="all" url="%SWFPATH%/plugins/textfield.swf" width="100%" autoheight="auto" backgroundcolor="0x185cca" backgroundalpha="0.8" padding="5" css="text-align:center;color:#ffffff;" zorder="35"/>


I guess it's because le text layer is parent befor the thumbnail scale changes ?
Don't know how to solve this...

Tuur

Sage

Posts: 3,164

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

6

Thursday, September 3rd 2015, 11:54am

http://www.virtualtuur.com
Skype:studiotuur

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 788

Location: Angers - France

Occupation: Photographer

  • Send private message

7

Thursday, September 3rd 2015, 6:14pm

Thanx to tuur the responsive scrollarea works better, but there is still a very strange bug that wr're not able to solve by now...
when the scrollarea is loaded an action is called to setup the width/height of the thumbnails and their y position, sometimes it works well but after clicking on a thumbnail it bugs, sometimes it bugs the first time it's loaded.
The bug is that the right colon starts one thumbnail after the left colon ???
The textfields wich are parent from the thumbnails don't have time to load all after first setup too ?

here is the code

Source code

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<events name="params_ok_mobile" devices="mobile"
		onclick="hit()"
		onresize="if(1150 GT stagewidth, div(menuscale,stagewidth,1150);set(layer[menu].scale, get(menuscale)),set(layer[menu].scale, 1) );
		if(thumbnails_loaded == true, setmyscale();set(thumbnails_loaded,false),)"
	    />

<layer name="mobilethumbs" keep="true" type="container" align="top" width="750" height="" visible="false" bgcolor="0x000000" bgalpha="0.7"  devices="mobile" y="60" scalechildren="true">
<layer name="scrollareamobile" keep="true" url="%SWFPATH%/plugins/scrollarea.js" align="top" width="100%" height="" direction="v" onloaded="setmyscale();set(thumbnails_loaded,true)">
<layer name="thumb_background" keep="true" type="container" y="0" width="100%" height="100%" bgcolor="0xff0000" bgalpha="0">

<layer name="AIR_LAKEVIEW" url="%SWFPATH%/skin/thumbs/AIR_LAKEVIEW.jpg" style="thumbs_left" onclick="hit(); loadpano(air_lakeview.xml, null, MERGE, BLEND(1))"/>
<layer name="AIR_SPORTS" url="%SWFPATH%/skin/thumbs/AIR_SPORTS.jpg" style="thumbs_right" onclick="hit(); loadpano(air_sports.xml, null, MERGE, BLEND(1))"/>
<layer name="WATERFRONT" url="%SWFPATH%/skin/thumbs/WATERFRONT.jpg" style="thumbs_left" onclick="hit(); loadpano(waterfront.xml, null, MERGE, BLEND(1))"/>
<layer name="AIR_WATERFRONT" url="%SWFPATH%/skin/thumbs/AIR_WATERFRONT.jpg" style="thumbs_right" onclick="hit(); loadpano(air_waterfront.xml, null, MERGE, BLEND(1))"/>
<layer name="ADVENTURE" url="%SWFPATH%/skin/thumbs/ADVENTURE.jpg" style="thumbs_left" onclick="hit(); loadpano(adventure.xml, null, MERGE, BLEND(1))"/>
<layer name="ART" url="%SWFPATH%/skin/thumbs/ART.jpg" style="thumbs_right" onclick="hit(); loadpano(art.xml, null, MERGE, BLEND(1))"/>
<layer name="BASKETBALL" url="%SWFPATH%/skin/thumbs/BASKETBALL.jpg" style="thumbs_left" onclick="hit(); loadpano(basketball.xml, null, MERGE, BLEND(1))"/>
<layer name="BOAT" url="%SWFPATH%/skin/thumbs/BOAT.jpg" style="thumbs_right" onclick="hit(); loadpano(boat.xml, null, MERGE, BLEND(1))"/>
<layer name="BOYS_EXTERIOR" url="%SWFPATH%/skin/thumbs/BOYS_EXTERIOR.jpg" style="thumbs_left" onclick="hit(); loadpano(boys_exterior.xml, null, MERGE, BLEND(1))"/>
<layer name="CIRCUS" url="%SWFPATH%/skin/thumbs/CIRCUS.jpg" style="thumbs_right" onclick="hit(); loadpano(circus.xml, null, MERGE, BLEND(1))"/>
<layer name="CLIMBING" url="%SWFPATH%/skin/thumbs/CLIMBING.jpg" style="thumbs_left" onclick="hit(); loadpano(climbing.xml, null, MERGE, BLEND(1))"/>
<layer name="DANCE" url="%SWFPATH%/skin/thumbs/DANCE.jpg" style="thumbs_right" onclick="hit(); loadpano(dance.xml, null, MERGE, BLEND(1))"/>
<layer name="DINING_HALL" url="%SWFPATH%/skin/thumbs/DINING_HALL.jpg" style="thumbs_left" onclick="hit(); loadpano(dining_hall.xml, null, MERGE, BLEND(1))"/>
<layer name="DRAMA" url="%SWFPATH%/skin/thumbs/DRAMA.jpg" style="thumbs_right" onclick="hit(); loadpano(drama.xml, null, MERGE, BLEND(1))"/>
<layer name="GIRLS_BUNK" url="%SWFPATH%/skin/thumbs/GIRLS_BUNK.jpg" style="thumbs_left" onclick="hit(); loadpano(girls_bunk.xml, null, MERGE, BLEND(1))"/>
<layer name="GIRLS_EXTERIOR" url="%SWFPATH%/skin/thumbs/GIRLS_EXTERIOR.jpg" style="thumbs_right" onclick="hit(); loadpano(girls_exterior.xml, null, MERGE, BLEND(1))"/>
<layer name="GYMNASTICS" url="%SWFPATH%/skin/thumbs/GYMNASTICS.jpg" style="thumbs_left" onclick="hit(); loadpano(gymnastics.xml, null, MERGE, BLEND(1))"/>
<layer name="HOCKEY" url="%SWFPATH%/skin/thumbs/HOCKEY.jpg" style="thumbs_right" onclick="hit(); loadpano(hockey.xml, null, MERGE, BLEND(1))"/>
<layer name="HORSEBARN_INTERIOR" url="%SWFPATH%/skin/thumbs/HORSEBARN_INTERIOR.jpg" style="thumbs_left" onclick="hit(); loadpano(horsebarn_interior.xml, null, MERGE, BLEND(1))"/>
<layer name="MAGIC" url="%SWFPATH%/skin/thumbs/MAGIC.jpg" style="thumbs_right" onclick="hit(); loadpano(magic.xml, null, MERGE, BLEND(1))"/>
<layer name="ROCKBAND" url="%SWFPATH%/skin/thumbs/ROCKBAND.jpg" style="thumbs_left" onclick="hit(); loadpano(rockband.xml, null, MERGE, BLEND(1))"/>
<layer name="SKATEPARK" url="%SWFPATH%/skin/thumbs/SKATEPARK.jpg" style="thumbs_right" onclick="hit(); loadpano(skatepark.xml, null, MERGE, BLEND(1))"/>
<layer name="SWIMMING_POOL" url="%SWFPATH%/skin/thumbs/SWIMMING_POOL.jpg" style="thumbs_left" onclick="hit(); loadpano(swimming_pool.xml, null, MERGE, BLEND(1))"/>
<layer name="TENNIS" url="%SWFPATH%/skin/thumbs/TENNIS.jpg" style="thumbs_right" onclick="hit(); loadpano(tennis.xml, null, MERGE, BLEND(1))"/>

		</layer>
	</layer>
</layer>

<layer name="AIR_LAKEVIEW_txt" parent="layer[AIR_LAKEVIEW]" style="thumbs_txt" html="MAIN VIEW" />
<layer name="AIR_SPORTS_txt" parent="layer[AIR_SPORTS]" style="thumbs_txt" html="SPORTS AERIAL" />
<layer name="WATERFRONT_txt" parent="layer[WATERFRONT]" style="thumbs_txt" html="WATERFRONT" />
<layer name="AIR_WATERFRONT_txt" parent="layer[AIR_WATERFRONT]" style="thumbs_txt" html="WATERFRONT AERIAL" />
<layer name="ADVENTURE_txt" parent="layer[ADVENTURE]" style="thumbs_txt" html="ROPES COURSE" />
<layer name="ART_txt" parent="layer[ART]" style="thumbs_txt" html="ARTS AND CRAFTS" />
<layer name="BASKETBALL_txt" parent="layer[BASKETBALL]" style="thumbs_txt" html="SPORTS GYM" />
<layer name="BOAT_txt" parent="layer[BOAT]" style="thumbs_txt" html="WATERSKIING" />
<layer name="BOYS_EXTERIOR_txt" parent="layer[BOYS_EXTERIOR]" style="thumbs_txt" html="BOYS CAMPUS" />
<layer name="CIRCUS_txt" parent="layer[CIRCUS]" style="thumbs_txt" html="CIRCUS" />
<layer name="CLIMBING_txt" parent="layer[CLIMBING]" style="thumbs_txt" html="CLIMBING WALL" />
<layer name="DANCE_txt" parent="layer[DANCE]" style="thumbs_txt" html="DANCE" />
<layer name="DINING_HALL_txt" parent="layer[DINING_HALL]" style="thumbs_txt" html="DINING HALL" />
<layer name="DRAMA_txt" parent="layer[DRAMA]" style="thumbs_txt" html="THEATER" />
<layer name="GIRLS_BUNK_txt" parent="layer[GIRLS_BUNK]" style="thumbs_txt" html="BUNK INTERIOR" />
<layer name="GIRLS_EXTERIOR_txt" parent="layer[GIRLS_EXTERIOR]" style="thumbs_txt" html="GIRLS CAMPUS" />
<layer name="GYMNASTICS_txt" parent="layer[GYMNASTICS]" style="thumbs_txt" html="GYMNASTICS" />
<layer name="HOCKEY_txt" parent="layer[HOCKEY]" style="thumbs_txt" html="HOCKEY" />
<layer name="HORSEBARN_INTERIOR_txt" parent="layer[HORSEBARN_INTERIOR]" style="thumbs_txt" html="HORSE BARN INTERIOR" />
<layer name="MAGIC_txt" parent="layer[MAGIC]" style="thumbs_txt" html="MAGIC" />
<layer name="ROCKBAND_txt" parent="layer[ROCKBAND]" style="thumbs_txt" html="ROCK SHOP" />
<layer name="SKATEPARK_txt" parent="layer[SKATEPARK]" style="thumbs_txt" html="SKATE PARK" />
<layer name="SWIMMING_POOL_txt" parent="layer[SWIMMING_POOL]" style="thumbs_txt" html="SWIMMING POOL" />
<layer name="TENNIS_txt" parent="layer[TENNIS]" style="thumbs_txt" html="TENNIS" />

<scroll_settings thumbcount="24" thumbsspace="10"/>

<action name="setmyscale">
	sub(thumbstageheight, stageheight,120); <!-- thumscroller height = stage height minus the top and bottombar -->
	set(layer[mobilethumbs].height,get(thumbstageheight));
	set(layer[mobilethumbs].width,get(stagewidth));
	
	<!-- div(mobilethumbscale,stagewidth,750); -->
	
	<!-- width of the thumbs -->
	sub(mtw,get(stagewidth), 30); 
	div(mtw,2);
	
	<!-- height of the thumbs -->
	div(mth,get(mtw),3);
	mul(mth,2);
	

	set(h,1);
	for(set(i, 0), i LT layer.count, inc(i),
		if(layer[get(i)].tag == mobilethumb,
	  		help(get(i));
		);
	);  
	
</action>	

<action name="help">
	set(layer[%1].width, get(mtw));  
	set(layer[%1].height, get(mth));
	roundval(layer[%1].width); 
	roundval(layer[%1].height); 
	add(newty, get(layer[%1].height),get(scroll_settings.thumbsspace));
	div(tmpfy, get(layer[%1].height),2);
			
	mod(d,i	,2);
	if(d == 0, 
		<!-- even -->
		mul(newthumby ,get(newty),get(h));
		div(newthumby,2); 
	,
		<!-- odd -->
		sub(h,1);
		mul(newthumby ,get(newty),get(h));
		div(newthumby,2); 
		add(h,1);
	);
	
	inc(h);
	<!-- set thumb y -->
	sub(newthumby, get(tmpfy));
	div(halfspace, get(scroll_settings.thumbsspace),2);
	add(newthumby,get(halfspace));
	roundval(newthumby);
	set(layer[%1].y, get(newthumby));
			 
	<!-- set total height scrollarea -->		 
 	mul(scrolhei, get(layer[%1].height), get(scroll_settings.thumbcount));
	mul(allspace, get(scroll_settings.thumbcount), get(scroll_settings.thumbsspace));
	add(allspace, get(scroll_settings.thumbsspace));
	add(scrolheix, get(scrolhei), get(allspace));
	div(scrolheix, 2);
	add(scrolheix,get(halfspace));
	
	
	set(layer[scrollareamobile].height, get(scrolheix));

</action>


	<style name="thumbs_left"  align="top" edge="topright" x="-5" tag="mobilethumb" devices="mobile" keep="true" />
	<style name="thumbs_right"  align="top" edge="topleft" x="5" tag="mobilethumb" devices="mobile" keep="true" />
        <style name="thumbs_txt"  align="bottom" devices="all" url="%SWFPATH%/plugins/textfield.swf" width="90%" y="10" roundedge="5" autoheight="auto" backgroundcolor="0x185cca" backgroundalpha="0.8" padding="5" css="text-align:center;color:#ffffff;" zorder="35" keep="true" />


Is someone have an brilliant idea (Klaus ?) that would be very helpfull !!!

You can try it live here : http://www.360images.fr/island/index.html?pano=boat.xml

THX A LOT !!!

Tuur

Sage

Posts: 3,164

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

8

Friday, September 4th 2015, 2:20am

Better version here
http://www.virtualtuur.com/krpano/thumbrows/
you can also set
- the number of columns you want
- the space between the thumbs
- background color and background alpha

xml --> http://www.virtualtuur.com/krpano/thumbr…rowscroller.xml


Source code

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
<!-- scrolling thumb row stuff -->

<events name="fitmyscroll" keep="true" onresize="setmyscale()" />


<scroll_settings 
	backgroundcolor="0x000000"
	backgroundalpha="1"
	columns="3"
	thumbcount="24" 
	thumbsspace="7"
/>

<action name="setmyscale">
	sub(thumbstageheight, stageheight,120); 
	set(layer[mobilethumbs].height,get(thumbstageheight)); 
	set(layer[mobilethumbs].width,get(stagewidth));
	
	add(spacesize, 	get(scroll_settings.columns), 1);
	mul(spacesize, get(scroll_settings.thumbsspace));
	
	<!--  width of the thumbs  -->
	sub(mtw,get(stagewidth), get(spacesize)); 
	div(mtw,get(scroll_settings.columns));	
	
	<!--  height of the thumbs  -->
	div(mth,get(mtw),3);  
	mul(mth,2); 
	
	set(h,1); 
	set(c,1); 
	for(set(i, 0), i LT layer.count, inc(i), 
		if(layer[get(i)].tag == mobilethumb, 
			help(get(i)); 
		); 
	);
</action>

<action name="help"> 
	set(layer[%1].width, get(mtw)); 	
	set(layer[%1].height, get(mth)); 	
	roundval(layer[%1].width);  		
	roundval(layer[%1].height); 

	if(h LE scroll_settings.columns, 
		mul(xpost ,get(h), get(scroll_settings.thumbsspace));
		sub(p,get(h),1);
		mul(p, get(layer[%1].width));
		add(xpost,get(p));
		set(layer[%1].x, get(xpost));

		mul(ypost, get(c),get(scroll_settings.thumbsspace));
		sub(b,get(c),1);
		mul(b, get(layer[%1].height));
		add(ypost,get(b));
		set(layer[%1].y, get(ypost));
		if(h LT scroll_settings.columns, 
			inc(h);
		,
			inc(c);
			set(h,1);
		);	
	);
	
	mul(scrolhei, get(layer[%1].height), get(scroll_settings.thumbcount)); 
	mul(allspace, get(scroll_settings.thumbcount), get(scroll_settings.thumbsspace)); 
	add(allspace, get(scroll_settings.thumbsspace)); 
	add(scrolheix, get(scrolhei), get(allspace)); 
	div(scrolheix, get(scroll_settings.columns));
	div(halfspace, get(scroll_settings.thumbsspace),2);
	add(scrolheix,get(halfspace)); 
	set(layer[scrollareamobile].height, get(scrolheix));
</action>


** Still have to work a bit on it to make some extra features and settings etc.. but the idea is clear i think.
In the base it was build to serve Jerome's needs.. so i need to skip those things and make it 'global'

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

This post has been edited 3 times, last edit by "Tuur" (Sep 4th 2015, 11:28am)


jeromebg

Professional

  • "jeromebg" started this thread

Posts: 788

Location: Angers - France

Occupation: Photographer

  • Send private message

9

Friday, September 4th 2015, 2:13pm

Tuur is a MASTER !!!

10

Monday, June 3rd 2019, 1:56pm

Thanks for sharing!


I've been trying to load scene thumbs dynamically into the thumb_background layer with no success. Well, they do show up in the layer but they just align on top of each other.

I'm trying to implement the addthumbs action from Kuchlerhaus demo.

for(set(i,0), i LT scene.count, inc(i),
calc(thumbname,'thumb_' + i);
addlayer(get(thumbname));
copy(layer[get(thumbname)].url, scene[get(i)].thumburl);
set(layer[get(thumbname)].parent, 'thumb_background');
set(layer[get(thumbname)].linkedscene, get(scene[get(i)].name) );
set(layer[get(thumbname)].onclick, hidethumbs(); loadscene(get(linkedscene), null, MERGE, BLEND(0.5)); );
);

Has anyone tried smth similar with success?


NVM, thanks. Went with another solution.

This post has been edited 1 times, last edit by "klaea" (Jun 5th 2019, 8:13am)


Tuur

Sage

Posts: 3,164

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

11

Monday, June 3rd 2019, 2:39pm

Hi,

obviously a thumb specific x or y value is missing in your code.
If you have a link we could help better.

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

12

Tuesday, June 4th 2019, 6:48pm

Hello!
I tried to conduct an experiment in the form of an adaptive grid.
Used means krpano.
I have compiled a formula. The elements themselves do not change, are distributed only depending on the width of the screen.
There is a scroll. At the bottom there is a slider that you can resize the element.
Try changing the width of the browser window and adjust the elements themselves.
I apologize for the translation.


http://novosibpano.ru/VT/adap/

Similar threads