Resizing for mobile

Q&A about the latest versions
Post Reply
bogsdolox
Posts: 11
Joined: Mon Sep 08, 2014 4:58 pm

Resizing for mobile

Post by bogsdolox » Tue Jun 07, 2016 4:14 pm

I want a tour to be viewable on a smartphone and on a desktop.

I have seen various posts about "Is mobile" and screen widths but I cannot seem to get this working. What do I apply this to? Is there a tutorial?

Secondly, there are a LOAD of different screen sizes that I want my tour to appear correctly on. Does anyone have a solution?

Thanks

User avatar
Hopki
Gnome
Posts: 8754
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Resizing for mobile

Post by Hopki » Tue Jun 07, 2016 9:18 pm

Hi bogsdolox,
The panorama by default will be rendered out as a multi resolution output so this will display on most modern devices, I'm saying most as Im sure there is some cheap device that wont show it.

Its the skin that needs to be responsive.
If you look at the ht_image popup component you will see that this is responsive as it uses percentage for its size.
This is ok for a popup image but probably not the best for a floor plan as you need to attach node markers to show locations.
As the floor plan scales so the node markers will shift position, not good.

The other thing is scaling images is bad :( this is because if you have a 100 x 100px image then scale it up it will look pixelated because you now don't have the correct amount of pixels for the size.

So for a floor plan you are best advised to make two or more floor plans, one larger than the other, each the proper size so will look good at its given size.
You can then use the visible Logic Block to show and hide the different sizes depending on player width.

The "Is Mobile" detects iOS, Android and IE Mobile.
So you could use this to hide and show elements but as tablets still have large screens I would use screen width.

I know Iv just said I would not use "Is Mobile" with floor plans but the following project does to show you how it can be used.

The attached project has three rectangles that represent three sized floorpans.
There is also a drop down menu.

There is also a button that toggles visibility of a container, the container has the floor plans and drop down menu as child elements so they all will hide and show with the container.

The drop down menu has the Is Mobile condition in the logic block and will only show on iOS, Android and IE Mobile.
The rectangles have a bit more going on.

If you look in each rectangle there is several conditions to make up the expression in the logic block.
1.jpg
1.jpg (47.17 KiB) Viewed 2252 times
Here you can see that this rectangle will show when:
The player width is more than and equal to 300px and less than 400px and is not a mobile.

The next size up has the conditions:
The player width is more than and equal to 400px and less than 500px and is not a mobile.

The last rectangle the largest:
The player width is more than and equal to 500px and is not a mobile.

So to sum it up, mobiles get the drop down menu and non mobiles get the floor plan and depending on screen size, what size floor plan.
In practice you would get rid of the Is Mobile conditions and add the lowest logic block to the drop down menu so you get two different sized floor plans and then on a small screen show the drop down.

Regards,
Hopki
Attachments
responsive.zip
(3.18 MiB) Downloaded 153 times

User avatar
stalwart
Posts: 607
Joined: Thu Oct 02, 2008 11:52 am

Re: Resizing for mobile

Post by stalwart » Thu Jun 09, 2016 5:48 pm

Hi Martin,

Thanks for this example - works a treat! Is this currently the only option for a "responsive" GUI? I am (still) building the exteremly complex 30-odd node GUI for St George's Park (!) VT and trying to cram all the info required into a mobile GUI of 320 x 460 px (iPhone 5 Safari broswer window dims) is a pain. Can be done, of course, but the graphics are almost too small to read on my twin 32" Dell Ultrasharps (which are 3840 x 2160 pix) - the "change scene" button is lost....:

www.360imagery.co.uk/draft/SGP_5-4

Trouble is, I have so many "regular expressions" showing / hiding various elements on "mouse click" actions, trying to have 2 versions of everything (for "<=" 414 pix wide for iOS & ">=" everything else, I guess).

Is there no way of using .SVG files throughout and the tour automatically recognising browser / player width and autosize the SVG GUI elements accordingly? If this is on the "feature request list", how high up is it, and when is it likely to be implemented...? Panotour Pro has been using automatic browser window scaling for some time....... :shock:

Stu

User avatar
Hopki
Gnome
Posts: 8754
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Resizing for mobile

Post by Hopki » Fri Jun 10, 2016 4:12 pm

Hi Stu,
You can add scaling in Pano2VR but it all depends on how much you will be changing the size of things.
If your scale them then the pixel count stays the same and things can start to look ugly.
If you swop things out then yes its more work but each image is perfectly formed at there size, just like me :-)

If you not resizing that much then use percentage as you probably wont notice.
Regards,
Hopki

User avatar
Peter Stephens
Posts: 294
Joined: Thu Mar 27, 2008 12:32 pm
Location: Exeter, Devon, UK
Contact:

Re: Resizing for mobile

Post by Peter Stephens » Wed Sep 21, 2016 10:28 am

Is there a way that a container can reduce its size when on mobile without using percentage that will increase it's size on larger screens? I have an old tour that keeps growing and the popup menu box is now too large to display correctly on a mobile. I'm happy with it's size on desktop computers, but on mobile I could do with shrinking the menu box a little to fit it all in. Looking at the skin editor I'm not sure it's possible, I'm guessing I need to redesign the tour from scratch.

Pete

User avatar
Hopki
Gnome
Posts: 8754
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Resizing for mobile

Post by Hopki » Tue Sep 27, 2016 11:15 pm

HI Pete,
You could use the Is Mobile trigger to resize and position the menu.
This is found under the size and position logic blocks.
Regards,
Hopki

User avatar
Peter Stephens
Posts: 294
Joined: Thu Mar 27, 2008 12:32 pm
Location: Exeter, Devon, UK
Contact:

Re: Resizing for mobile

Post by Peter Stephens » Thu Sep 29, 2016 6:01 pm

Thank you. I think I tried that, but will have another go soon. Will let you know if it works.

Pete

Post Reply

Who is online

Users browsing this forum: Bing [Bot], Exabot [Bot], Roy Reed and 26 guests