scrollarea scalechildren

jeromebg · December 12, 2024 at 11:37 AM

Hi,
trying to build a menu with 3 horizontal scrollarea using flowchildren and I would like the cildren element to be scaled inside the scrollarea.
here is the barebone : https://www.360images.fr/barebone_scrollarea_scalechildren/

The children elements are not scaled.
Here is the code :

Code

<layer name="gridmenu" type="container" width="100%" height="100%" bgcolor="0x000000" bgalpha="0.9" keep="true" y="0">
	<layer name="gridcontainer" type="container" width="100%" height="100%" align="center" flowchildren="v" childflowspacing="50" childmargin="20" >

	<layer style="grid_scrollarea_container">
		<layer name="grid_niveau0" style="grid_scrollarea">
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/air.jpg"/>
				<layer style="grid_thumb_title" html="La Baule et son Palais des congrès"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/entree_jour.jpg"/>
				<layer style="grid_thumb_title" html="Extérieurs"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/accueil.jpg"/>
				<layer style="grid_thumb_title" html="Accueil"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/embruns.jpg"/>
				<layer style="grid_thumb_title" html="Embruns"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/paquebot.jpg"/>
				<layer style="grid_thumb_title" html="Paquebot"/>
			</layer>
		</layer>
	</layer>

	<layer style="grid_scrollarea_container">
		<layer name="grid_niveau1" style="grid_scrollarea">
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/niveau1_1.jpg"/>
				<layer style="grid_thumb_title" html="Expo 3000"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/niveau1_2.jpg"/>
				<layer style="grid_thumb_title" html="Bréca"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/niveau1_3.jpg"/>
				<layer style="grid_thumb_title" html="Brière"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/audito.jpg"/>
				<layer style="grid_thumb_title" html="Auditorium"/>
			</layer>
		</layer>
	</layer>

<layer style="grid_scrollarea_container">
		<layer name="grid_niveau2" style="grid_scrollarea">
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/niveau2_1.jpg"/>
				<layer style="grid_thumb_title" html="Hall niveau 2"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/niveau2_2.jpg"/>
				<layer style="grid_thumb_title" html="Pierre Sastre"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/terrasse.jpg"/>
				<layer style="grid_thumb_title" html="Terrasse"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/reunion.jpg"/>
				<layer style="grid_thumb_title" html="Salle des sous-commission"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/president.jpg"/>
				<layer style="grid_thumb_title" html="Bureau VIP"/>
			</layer>
			<layer style="grid_thumb_container">
				<layer style="grid_thumb" url="thumbs/reunion_double.jpg"/>
				<layer style="grid_thumb_title" html="Cardinaux"/>
			</layer>
		</layer>
	</layer>

	</layer>
</layer>

<style name="grid_scrollarea_container" type="container" width="100%" height="33%" scalechildren="true"/>
<style name="grid_scrollarea" type="scrollarea" direction="h" flowchildren="h" childflowspacing="20" align="center" height="100%"/>
<style name="grid_thumb_container" type="container" flowchildren="v" childflowspacing="20" />
<style name="grid_thumb" bgroundedge="10"/>
<style name="grid_thumb_title" type="text" bg="false" align="center" css="color:#fff;font-family: var(--ff-secondary);font-size:24px;font-weight: var(--fw-bold);"/>

Display More

any clue would be lovely, thanks !

klaus.krpano · December 12, 2024 at 2:25 PM Official Post

An interesting example, but there is no scaling anywhere...?

The scale setting would need to set/changed to scale something...

jeromebg · December 12, 2024 at 2:51 PM

Right, when setting grid_thumb_container scale childrens are scaled.
scale is not really what I wanted to use...
there is no way to fit the scrollarea container which is in a container with a percent height value ?
the goal is to make this menu responsive and always have the 3 scrollareas visible, not sure if I'm clear ?
and would also need to limit the title width to the thumbnail width.

jeromebg · December 12, 2024 at 3:23 PM

Ok, if I calc the scale onresize it's working now...

Have to find a better way to calc the ratio but for barebone it's working.

EDIT: no really in fact... title get hidden when stageheight is small...

Code

<events onresize="resize_thumbs()"/>
<action name="resize_thumbs">
for(set(i,0), i LT layer.count, inc(i),
if(layer[get(i)].style === 'grid_thumb_container',
calc(layer[get(i)].scale,stageheight/1600);
));
</action>

klaus.krpano · December 12, 2024 at 3:31 PM Official Post

There are many possibility, but it also depends on how exactly it should work...

E.g. here a quick try:

Code

<style name="grid_scrollarea_container" type="container" width="100%" height="relink:stageheight:(stageheight-2*50-2*20)/3" bgborder="1 0xFF0000" scalechildren="true" />
<style name="grid_scrollarea" type="scrollarea" direction="h" flowchildren="h" childflowspacing="20" align="center" height="100%" />
<style name="grid_thumb_container" type="container" height="100%" flowchildren="v" childflowspacing="20" bgborder="1 0x00FF00" />
<style name="grid_thumb" bgroundedge="10" flowexpand="true" width="prop" />
<style name="grid_thumb_title" bgborder="1 0x0000FF" type="text" bg="false" align="center" css="color:#fff;font-family: var(--ff-secondary);font-size:24px;font-weight: var(--fw-bold);"/>

The grid_scrollarea_container heights now (instead of 33%) links to stageheight, subtracts there the absolute childflowspacing (50) and childmargin (20) sizes from its parent element and then divides by 3 to give the available space to the three rows.

The grid_thumb_container uses height=100% to take the size within that container.

The grid_thumb uses flowexpand=true and width=prop to scale the thumb to the available space with the grid_thumb_container.

The grid_thumb_title text is only remaining problem now, it has always has an absolute size for the moment, here some idea would be still required...

When given the thumb text some fixed space/height, the layout might be easier to define...

jeromebg · December 12, 2024 at 3:42 PM

Thanks Klaus, works great for thumbs but text is not scaled : https://www.360images.fr/barebone_scrol…children_klaus/

Also I understood why my resize function is not fully working, it is because childflowspacing keeps the same values

Tuur · December 12, 2024 at 3:46 PM

i came to this:

nest the text.

Code

<krpano logkey="true" >

	
	<base height="calc(stageheight / 3)-40"  /> 
	<events name="tuur" keep="true" onresize="base.height = (stageheight / 3)-40;" />
	
	
	
	<style name="grid_scrollarea_container" type="container" width="100%" height="33%"   />
	<style name="grid_scrollarea" type="scrollarea" direction="h" flowchildren="h" childflowspacing="10" align="left" height="100%"/>
	<style name="grid_thumb_container" type="container" height="100%" flowchildren="v" childflowspacing="0" scalechildren="true"/>
	<style name="grid_thumb" height="-50" width="prop" minwidth="100" minheight="100" bgroundedge="10" />
	<style name="grid_thumb_title" type="text" align="bottom" edge="top" bg="false" width="100%" height="50" vcenter="true"  css="color:#fff;font-family: helvetica;font-size:14px;text-align:center;"/>
	
	
	
	
	
	
	<layer name="gridmenu" type="container" width="100%" height="100%" keep="true" >
		<layer name="gridcontainer" type="container" width="100%" height="100%" flowchildren="v" childspacing="10" childmargin="20"  >

			<layer name="g1" style="grid_scrollarea_container" >
				<layer name="grid_niveau0" style="grid_scrollarea" height="link:base.height">
					<layer style="grid_thumb_container" >
						<layer style="grid_thumb" url="thumbs/air.jpg">
							<layer style="grid_thumb_title" html="La Baule et son Palais des congrès"/>
						</layer>	
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/entree_jour.jpg">
							<layer style="grid_thumb_title" html="Extérieurs"/>
						</layer>	
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/accueil.jpg">
							<layer style="grid_thumb_title" html="Accueil"/>
						</layer>	
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/embruns.jpg">
							<layer style="grid_thumb_title" html="Embruns"/>
						</layer>	
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/paquebot.jpg">
							<layer style="grid_thumb_title" html="Paquebot"/>
						</layer>	
					</layer>
				</layer>
			</layer>

			<layer name="g2" style="grid_scrollarea_container" >
				<layer name="grid_niveau1" style="grid_scrollarea" height="link:base.height">
					<layer style="grid_thumb_container"  >
						<layer style="grid_thumb" url="thumbs/niveau1_1.jpg">
							<layer style="grid_thumb_title" html="Expo 3000"/>
						</layer>
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/niveau1_2.jpg">
							<layer style="grid_thumb_title" html="Bréca"/>
						</layer>
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/niveau1_3.jpg">
							<layer style="grid_thumb_title" html="Brière"/>
						</layer>
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/audito.jpg">
							<layer style="grid_thumb_title" html="Auditorium"/>
						</layer>
					</layer>
				</layer>
			</layer>

			<layer name="g3" style="grid_scrollarea_container">
				<layer name="grid_niveau2" style="grid_scrollarea" height="link:base.height">
					<layer style="grid_thumb_container"  >
						<layer style="grid_thumb" url="thumbs/niveau2_1.jpg">
							<layer style="grid_thumb_title" html="Hall niveau 2"/>
						</layer>
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/niveau2_2.jpg">
							<layer style="grid_thumb_title" html="Pierre Sastre"/>
						</layer>
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/terrasse.jpg">
							<layer style="grid_thumb_title" html="Terrasse"/>
						</layer>
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/reunion.jpg">
							<layer style="grid_thumb_title" html="Salle des sous-commission"/>
						</layer>
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/president.jpg">
							<layer style="grid_thumb_title" html="Bureau VIP"/>
						</layer>
					</layer>
					<layer style="grid_thumb_container">
						<layer style="grid_thumb" url="thumbs/reunion_double.jpg">
							<layer style="grid_thumb_title" html="Cardinaux"/>
						</layer>
					</layer>
				</layer>
			</layer>

		</layer>
	</layer>

	
</krpano>

Display More

..better with relink indeed..

Tuur

klaus.krpano · December 12, 2024 at 3:57 PM Official Post

Quote from jeromebg

Thanks Klaus, works great for thumbs but text is not scaled

I know, I wrote about that above.

Here another approach:

Code

<style name="grid_scrollarea_container" type="container" width="100%" height="relink:stageheight:(stageheight-2*50-2*20)/3" bgborder="1 0xFF0000" scalechildren="true" />
<style name="grid_scrollarea" type="scrollarea" direction="h" flowchildren="h" childflowspacing="20" align="center" height="100%" />
<style name="grid_thumb_container" type="container" height="100%" flowchildren="v" xchildflowspacing="20" bgborder="1 0x00FF00" />
<style name="grid_thumb" bgroundedge="10" height="80%" width="prop" />
<style name="grid_thumb_title" flow="false" width="100%" height="20%" bgborder="1 0x0000FF" type="text" bg="false" maskchildren="true" textalign="center" align="bottom" css="color:#fff;font-family: var(--ff-secondary);font-size:2vh;font-weight: var(--fw-bold);" />

There the thumb text area gets a fixed 20% height and the font-size is scaled relative to the viewport height (using 2vh). The overflowing text will be cut off in this case.

As alternative it would be also possible to use 'ellipsis', but I've noticed there is a bug with the text alignment in this case (will check and fix this for the next release):

Code

<style name="grid_thumb_title" flow="false" width="100%" height="20%" bgborder="1 0x0000FF" type="text" bg="false" wordwrap="false" ellipsis="true" textalign="center" align="bottom" css="color:#fff;font-family: var(--ff-secondary);font-size:2vh;font-weight: var(--fw-bold);" />

jeromebg · December 12, 2024 at 4:18 PM

Thanks Klaus,
This community is so great, one problem, 3 solutions with different approach !
Many many thanks to Klaus and Tuur , always learning with you guys !

My approach : https://www.360images.fr/barebone_scrollarea_scalechildren/
Tuur approach : https://www.360images.fr/barebone_scrol…echildren_tuur/
Klaus approach : https://www.360images.fr/barebone_scrol…children_klaus/

klaus.krpano · December 12, 2024 at 5:43 PM Official Post

It was a nice example to play with

Here my last approach:

Code

<layer name="gridcontainer" type="container" width="100%" height="100%" align="center" flowchildren="v" childflowspacing="link:stageheight:stageheight*0.03" childmargin="20" >

The childflowspacing also depends now the stageheight.

The thumbs now automatically support multiple rows (not just 3) and the rounded thumb edges also scale with the size:

Code

<style name="grid_scrollarea_container" type="container" width="100%" height="relink:stageheight:(stageheight-(parentobject.childflowspacing*(parentobject.childobjects.length-1)+2*parentobject.childmargin))/parentobject.childobjects.length" scalechildren="true" />
<style name="grid_scrollarea" type="scrollarea" direction="h" flowchildren="h" childflowspacing="20" align="center" height="100%" />
<style name="grid_thumb_container" type="container" height="100%" flowchildren="v" />
<style name="grid_thumb" bgroundedge="20" onresize.addevent="bgroundedge=pixelheight*0.2;" height="80%" width="prop" />
<style name="grid_thumb_title" flow="false" width="100%" height="20%" type="text" bg="false" wordwrap="false" ellipsis="true" textalign="center" align="bottom" css="color:#fff;font-family: var(--ff-secondary);font-size:2vh;font-weight: var(--fw-bold);" />

And the text alignment problem when 'ellipsis' (...) is used on overflowing text, is fixed now for the next release (1.22.3).

Participate now!