Sie sind nicht angemeldet.

Responsive scrollarea

jeromebg

Profi

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

  • Nachricht senden

1

Mittwoch, 2. September 2015, 19:09

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 :

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

<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

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

2

Mittwoch, 2. September 2015, 19:21

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*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

jeromebg

Profi

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

  • Nachricht senden

3

Mittwoch, 2. September 2015, 19:26

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

Quellcode

 
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

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

4

Mittwoch, 2. September 2015, 19:36

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*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Tuur« (2. September 2015, 19:57)

jeromebg

Profi

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

  • Nachricht senden

5

Mittwoch, 2. September 2015, 21:38

Ok, it works better with :

Quellcode

 
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 :

Quellcode

 
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

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

6

Donnerstag, 3. September 2015, 11:54

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

jeromebg

Profi

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

  • Nachricht senden

7

Donnerstag, 3. September 2015, 18:14

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

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
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

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

8

Freitag, 4. September 2015, 02:20

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


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

<!-- 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*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Tuur« (4. September 2015, 11:28)

jeromebg

Profi

  • »jeromebg« ist der Autor dieses Themas

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

  • Nachricht senden

9

Freitag, 4. September 2015, 14:13

Tuur is a MASTER !!!

klaea

Anfänger

Beiträge: 17

  • Nachricht senden

10

Montag, 3. Juni 2019, 13:56

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.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »klaea« (5. Juni 2019, 08:13)

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

11

Montag, 3. Juni 2019, 14:39

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*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

San7

Profi

Beiträge: 626

Beruf: coding in krpano

  • Nachricht senden

12

Dienstag, 4. Juni 2019, 18:48

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/
https://novosibpano.ru/Plugins/


Ähnliche Themen