Select a scene depending on ratio

Hi,

I wonder if it’s possible to have 2 scenes :

  • one in stretch flexible mode,
  • the other in shrink to fit mode.

Then, depending of my window ratio ( portrait or landscape) at the loading or when resizing, to select and display the scene i want ?
(portrait = scene shrink, landscape = scene stretch).
If yes could you please gimme some clue ?

Thanks in advance

i think , this must be the same, isn´t it?
just set the document to flexible and choose on the objects “scale including content”

Thanks for your answer strmiska,

But I think I dont get your answer :slight_smile:
Stretch isn’t the same as shrink : stretch distorts, and shrink resizes proportionnally ?

I could use layouts (with expand to fill), but it seems to me that layouts are only based on width instead of ratio which isn’t good for my case (an interactive cartoon map that my client wants to be fullscreen as much as possible.) And my client dislike the shrink to fit only option which was in my opinion the best option.
Responsive hell :smiley:

sorry, but i don´t understand what you exactely want. if i create fullscreen websites with hype,
i used to have different layouts for different screensizes. there you can layout your fullscreen for every screen.
you can scale object proportionally, including content, or you can let images stretching, like what you want.
or let the images expand to fill. all you have to do is, choose the right pins for the elements
in the "Flexible Layout" - panel.
maby this is your answer:

DBearFreelancer28. Mrz.
@LucasKA

I'm not sure there is anything "baked" into Hype. Hype does have a "shrink to fit" in the Flexible Layout section of the Inspecto. This effectively keeps the ratio when reducing the window from it's largest size. This way you could set up your document for the highest screen resolution and have everything shrink to fit. I'm not sure if this will work for your purposes.

Other than this, Javascript would be your way forward. Hype does have built in methods for getting and setting width and height of elements.

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode 
}else{
//...
}

with listener:

var myQueryListener= window.matchMedia("(orientation: portrait)");
// Beim Laden ...
doStuff(myQueryListener);


myQueryListener.addListener(doStuff);

function doStuff(myQueryListener) {
    if (myQueryListener.matches) {
//portraitmode
    } else {
      //...
    }
}

NOT tested :slight_smile:

1 Like

Thank you a lot guys, that helps :slight_smile:

:smiley:

Finally my client understood that it’s crazy to display an interactive map in any ratio. So he accepts now to have sometimes some margins, and i can use now the shrink to fit option, YEAH !

2 Likes