image 100%+prop goes out of context

MrSoul · September 2, 2024 at 10:32 PM

Hello,

I'm having a problem with the "prop" value, which is causing a bug in my Lightbox.

This lightbox is built with a container layer to add margin and darken the background, and inside, a layer that contains the image.

I'd like this image to be displayed at a maximum of 100% of the parent at its largest width, while respecting its aspect ratio.

First of all, the maxwidth and maxheight parameters don't work with percentages, which doesn't suit me (if the image is smaller than its context, then it's zoomed in, which I don't want).

But I especially have a problem with "prop"from what I've tested:

If the image size is not defined, it will be displayed at its original size, regardless of the context.
If width and height are set to 100%, the image is displayed at 100% of the context (after deducting the margins defined in the container), but this logically breaks the aspect ratio.
If the width or height is set to 100% and the other value is set to prop, then the aspect ratio is respected and the 100% value respects the context and its margins, but the other axis set to prop no longer respects the context and may go outside the margins and the viewport...

As a result, in my example, if I want to display a horizontal image on a vertical screen, the image is taken out of the screen, and if I invert height and width, then it would be the vertical images that would be taken out of the display on a horizontal screen.

In short, what I'd like is the equivalent of the "object-fit: contain;" function in css:

CSS

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

Do you have any ideas on how to get round this problem?

Here's my code:

XML

<!-- Lightbox -->
<layer 
    name="boxbg"
    type="container"
    visible="false" 
    width="100%"
    height="100%"
    keep="true" 
    bgcolor="0x000000"
    bgalpha="0.0"
    bgblur="0"
    childmargin="30 30 120"
    scalechildren="true"
>
    <layer 
        name="boximg" 
        type="image"
        url=""
        align="center" 
        height="100%" 
        width="prop" 
        alpha="0"
        onclick="close_lightbox();" 
    />        
</layer>
<action name="open_lightbox">
    set(layer[boxbg].visible, true);
    set(layer[boximg].url, get(layer[boximg].img_url));
    tween(layer[boxbg].bgalpha, 0.6, 0.3);
    tween(layer[boxbg].bgblur, 6, 0.3);
    tween(layer[boximg].alpha, 1, 0.3);
</action>
<action name="close_lightbox">
    tween(layer[boxbg].bgalpha, 0, 0.3);
    tween(layer[boxbg].bgblur, 0, 0.3);
    tween(layer[boximg].alpha, 0, 0.3);
    delayedcall(0.3, set(layer[boxbg].visible, false));
</action>
<!-- // Lightbox -->
<hotspot name="test" style="skin_imagestyle" ath="-83.05398201806679" atv="10.8840575489464825" title="test" distorted="false" onclick="set(layer[boximg].img_url, 'test.png'); open_lightbox();" />

Display More

Thank you

MrSoul · September 3, 2024 at 12:20 AM

I've added an action that sets ‘prop’ to width for horizontal screens (desktop) and to height for vertical screens (mobile). It also updates it if the screen size changes.

It doesn't fix the problem, but it makes it less obvious, so if you have any ideas, I'd love to hear them.

PS: what would be the best method of getting the size of the image I want to open?
PS2: Wouldn't it be easier to use an iframe? But then, how do you send the image url from KrPano to the iframe? (to have just one html+js, or php page)

XML

    <!-- Lightbox -->
    <layer 
        name="boxbg"
        type="container"
        visible="false" 
        width="100%"
        height="100%"
        keep="true" 
        bgcolor="0x000000"
        bgalpha="0.0"
        bgblur="0"
        childmargin="30 30 120"
        scalechildren="true"
        flowchildren="true"
        onresize="resize_lightbox"
    >
        <layer 
            name="boximg" 
            type="image"
            url=""
            align="center" 
            height="100%"
            width="prop" 
            alpha="0"
            onclick="close_lightbox();" 
        />        
    </layer>
    <action name="open_lightbox">
        set(layer[boxbg].visible, true);
        set(layer[boximg].url, get(layer[boximg].img_url));
        tween(layer[boxbg].bgalpha, 0.6, 0.3);
        tween(layer[boxbg].bgblur, 6, 0.3);
        tween(layer[boximg].alpha, 1, 0.3);
        resize_lightbox();
    </action>
    <action name="close_lightbox">
        tween(layer[boxbg].bgalpha, 0, 0.3);
        tween(layer[boxbg].bgblur, 0, 0.3);
        tween(layer[boximg].alpha, 0, 0.3);
        delayedcall(0.3, set(layer[boxbg].visible, false));
    </action>
    <action name="resize_lightbox">
        if(stagewidth LT stageheight,
            set(layer[boximg].width, 100%);
            set(layer[boximg].height, prop);
        ,
            set(layer[boximg].width, prop);
            set(layer[boximg].height, 100%);
        );
    </action>
    <!-- // Lightbox -->

Display More

indexofrefraction · September 3, 2024 at 11:35 AM

to get the displayed pixel size of the parent use layer[boxbg].pixelwidth/height

to get the pixel size of the image use layer[boximg].imagewidth/height (after layer[boximg].loaded=true)

in layer[boximg].resize set the images width/height to be contained in the parents pixelwidth/height

MrSoul · September 4, 2024 at 4:14 PM

Quote from indexofrefraction

to get the displayed pixel size of the parent use layer[boxbg].pixelwidth/height
to get the pixel size of the image use layer[boximg].imagewidth/height (after layer[boximg].loaded=true)
in layer[boximg].resize set the images width/height to be contained in the parents pixelwidth/height

Thank you, that was very helpful!

I've decided to compare the aspect ratio of the viewport without the margins to the aspect ratio of the image so that it works regardless of the size of the image/viewport:

XML

    <!-- Lightbox -->
    <layer 
        name="boxbg"
        type="container"
        visible="false" 
        width="100%"
        height="100%"
        keep="true" 
        bgcolor="0x000000"
        bgalpha="0.0"
        bgblur="0"
        childmargin="30 30 120"
        scalechildren="true"
        onresize="resize_lightbox()"
    >
        <layer 
            name="boximg" 
            type="image"
            url=""
            align="center" 
            height=""
            width="" 
            alpha="0"
            onclick="close_lightbox();" 
            onloaded="resize_lightbox()"
        />        
    </layer>
    <action name="open_lightbox">
        set(layer[boxbg].visible, true);
        set(layer[boximg].url, get(layer[boximg].img_url));
        tween(layer[boxbg].bgalpha, 0.6, 0.3);
        tween(layer[boxbg].bgblur, 6, 0.3);
        tween(layer[boximg].alpha, 1, 0.3);
    </action>
    <action name="close_lightbox">
        tween(layer[boxbg].bgalpha, 0, 0.3);
        tween(layer[boxbg].bgblur, 0, 0.3);
        tween(layer[boximg].alpha, 0, 0.3);
        delayedcall(0.3, set(layer[boxbg].visible, false));
    </action>
	<action name="resize_lightbox">
		set(margin, 30);
		set(marginbottom, 120);
		set(availablewidth, calc(layer[boxbg].pixelwidth - margin - margin));
		set(availableheight, calc(layer[boxbg].pixelheight - margin - marginbottom));
		set(imgwidth, calc(layer[boximg].imagewidth));
		set(imgheight, calc(layer[boximg].imageheight));
		set(aspectratiovp, calc(availablewidth / availableheight));
		set(aspectratioimg, calc(imgwidth / imgheight));
		if( (imgwidth LT availablewidth) AND (imgheight LT availableheight),
				set(layer[boximg].width, null );
				set(layer[boximg].height, null );
		,
			if( aspectratiovp GT aspectratioimg,
				set(imgresizedwidth, calc(round(availableheight * aspectratioimg)));
				set(layer[boximg].height, get(availableheight) );
				set(layer[boximg].width, get(imgresizedwidth) );
				,
				set(aspectratioimg, calc(imgheight / imgwidth));
				set(imgresizedheight, calc(round(availablewidth * aspectratioimg)));
				set(layer[boximg].width, get(availablewidth) );
				set(layer[boximg].height, get(imgresizedheight) );
			);
		);
	</action>
    <!-- // Lightbox -->

Display More

So I've got two little questions to improve things and make the code cleaner:

- Can we add general variables like those found in the skin_settings parameters?

- Could we have something like this on the hotspots :

XML

<hotspot [...] imgurl="../photos/20230815144033_4711.jpg" onclick="open_lightbox();" />

rather than :

XML

<hotspot [...] onclick="set(layer[boximg].img_url, '../photos/20230815144033_4711.jpg'); open_lightbox();" />

And how do you set it up? (retrieve the imgurl parameter in the action to reuse it)

PS: Sorry, I have a lot of trouble with the doc, English is not my natural language, I'd even say I'm rubbish at it and this one is "exhaustive"!

indexofrefraction · September 4, 2024 at 9:33 PM

Code

<hotspot ... imgurl="../photos/20230815144033_4711.jpg" onclick="open_lightbox();" />
<action name="open_lightbox" scope="local">
    trace(caller.imgurl);
</action>

Code

<hotspot ... imgurl="../photos/20230815144033_4711.jpg" onclick="open_lightbox(*imgurl);" />
<action name="open_lightbox" scope="local" args="url">
    trace(url);
</action>

see here --> https://krpano.com/docu/xml/#action

MrSoul · September 5, 2024 at 1:48 PM

Great, I used the first solution.

However, it only seems to work with a get() (I'm having trouble understanding which variable you can call with or without a get()).

And I've just found for the parameters in skin_settings :

In xml: get:skin_settings.design_margin
In actions : skin_settings.design_margin

However, I have just one small question about this: if I want to retrieve several variables in the same XML parameter, it doesn't work any more:

To fill in childmargin="30 30 120", childmargin="get:skin_settings.design_margin get:skin_settings.design_margin get:skin_settings.design_marginbottom" doesn't work, any idea how?

Tuur · September 5, 2024 at 2:25 PM

I think like:

childmargin = skin_settings.design_margin + ' ' + skin_settings.design_margin ... etc ;

.. a space between the apostrophes..

On phone..Untested.

Tuur

indexofrefraction · September 5, 2024 at 2:42 PM

trace/debug/error() etc doesn't need a get() and also calc() auto resolves variables

most other functions don't to that and you need get(myvar) or in modern syntax *myvar

childmargin="30 30 120" <-- this is one value and you cant just add some gets. you would write -->

childmargin="calc:skin_settings.design_margin + ' ' + skin_settings.design_margin + ' ' + skin_settings.design_marginbottom"

(or in code as tuur posted above)

--> manual --> https://krpano.com/docu/actions/#get

MrSoul · September 6, 2024 at 6:12 PM

Super, thank you both, you're top notch, it answered all my questions :)

I'll show you the finished result: https://vr.remy-photographie.com/tours/galerie-du-presbytere/

PS: I'm not a fan of the new syntax (even though I've used it), I find it detracts from the readability of the code, especially when multiplication is used: calc(*var * *var2);

indexofrefraction · September 8, 2024 at 12:03 AM

in expressions get/* is not needed

calc( var1 * var2 ) or just ( var1 * var2 )

var3 = var1 * var2

get/* is just needed outside expressions

eg.

layername = 'test';

layer[*layername].html = layername + '_layer';

krpano.com - Documentation - Actions / Scripting Reference

Participate now!