Scaling the skin when scaling a tour.

Q&A about the latest versions
Post Reply
DDiCarlo
Posts: 114
Joined: Sun Nov 11, 2012 7:30 pm

I recently had a post where I was trying to automatically scale a tour for mobile devices in a responsive site. The issue was the tour would hang off of the responsive site, making the site, well for lack of a better description, non-responsive.

So, here is what I've found (Thanks to Martin for pointing me in the right direction).

The solution is to modify your responsive page and the Gardengnome Template (.ggt file) to % from fixed values and then to add a CSS class:

In an IFrame on my site was:
<iframe width="970px" height="375px" frameborder="0" src=" tour.html"></iframe>
Since I had given it a fixed size in Pano2vr, it will maintain that size no matter what.
I replaced the px size with %, example:
<iframe width="100%" height="100%" frameborder="0" src="tour.html"></iframe>
Then, the same needed to be done inside of the Garden Gnome output Template for future tours...

I also assigned a class to the iframe like
<iframe class="tourframe" scrolling="no" frameborder="0" src="tour.html"></iframe>
Then in your CSS add:
.tourframe {
width: 100%;
height: 355px;
overflow-y: hidden;
}

In CSS media queries you can also set tourframe to {display: none} if you don't want to show it on mobile and instead create a new link for full view.

The only issue is that the skin doesn’t seem to scale correctly. A work around can be to just left justify all important functions, but not an elegant solution at all…

Leading to my new question -

Does anyone know how to scale the skin along with scaling a tour in a responsive site?
I am not very technical and not even sure how the skin is added to a tour. But I do know that when I click fullscreen, the skin is scaled perfectly, so there must be a way :wink:

Thanks in advance!
Dean
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Dean,
The graphics in the skin are fixed sizes, you can anchor elements to parts of the skin window but not scale their size.
I have seen responsive panos but the problem is you end up with such small buttons they become un useable. This has been a topic for a meeting so we are looking at this issue.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
DDiCarlo
Posts: 114
Joined: Sun Nov 11, 2012 7:30 pm

I know that the elements will stay the same size, but elements that I have anchored to the right, disappear and get cut off as the browser is made smaller and things anchored to the center gravitate to the right. I would be happy if the skin would shrink and elements would stay true to their anchor. How do I get the elements anchored to the center to get redrawn and reanchored to the center when the browser shrinks? That would look better than how it currently works.

In my example, see this site and then make the browser smaller... http://new.remeorealty.com/featured/16362-gentry-lane The node gets smaller, but not the tour's skin.

My eventual goal is to make skin elements suited for fullscreen that remain hidden when in the site, but when the user clicks to go to fullscreen, they become visible and the "smaller" and more simplistic elements better suited for mobile will disappear.

As always, Thanks.
Dean
User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

I thought about it, and offered earlier for the connection of different options RWD Skin for detecting different screens
In topic - Responsive Skin design - https://gardengnomesoftware.com/forum/v ... f=6&t=8743
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Dean,
If you used the fullscreen option in the HTML tab then the pano will resize with the window.
Also in the page look for the container, your Pano2VR HTML page is fixed:

Code: Select all

<div id="container" style="width:958px;height:346px;">
Change the width and height to a percentage.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
DDiCarlo
Posts: 114
Joined: Sun Nov 11, 2012 7:30 pm

Thanks again Martin. Weird that the change doesn't have any effect on my desktop browser but that accomplishes it on my mobile.

Lastly regarding this issue, I've included 2 screenshots.

image 1. is a screenshot of the tour in fullscreen on my galaxy nexus
image 2. is the exact same thing, but for some reason it renders differently and the elements remain the same size and are jumbled and overlapping
screenshot 1 small.png
screenshot 1 small.png (99.2 KiB) Viewed 6584 times
screenshot 2 small.png
screenshot 2 small.png (92.6 KiB) Viewed 6584 times
To your point, Martin, the icons and everything are much smaller and harder to use, but I prefer it. I just don't understand how I can force this fullscreen behavior as opposed to the fullscreen behavior with large icons that become jumbled...

Also Hum, your suggestion seems good to me also, but I thought I saw some new feature of version 4 that already provides the ability to take the same tour and just use a different skin for different applications? Is it as easy as changing tour.html to reference skin1.js in one view and then when you want to change the appearance to have an alternative html file for the tour to reference skin2.js? Is this correct or was I imagining this? Are you just saying that it would be nice to have the ability to make the two versions of the HTML file when rendering in Pano2vr?

I really like this forum - probably the best for any software I've ever used.

Dean
User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

Also Hum, your suggestion seems good to me also, but I thought I saw some new feature of version 4 that already provides the ability to take the same tour and just use a different skin for different applications?
Like this visual concept
Attachments
responsive_ui_concept.png
responsive_ui_concept.png (48.45 KiB) Viewed 6579 times
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj
jmcilvaine
Posts: 48
Joined: Thu Oct 11, 2012 11:59 am

Hi DiDicarlo

Here is a solution that wont require messing with your .ggt file. Just make sure you use the fullscreen option in the html tab when you create the project:

<iframe src="http://www.inmotionrems.com/tour_demos/ ... _room.html" frameborder="0" allowfullscreen scrolling="no"></iframe>

http://tours.inmotionrems.com/responsive.php

Little demo showing that you can put the child div containing the tour wherever you want on the page (or on its own) and it will scale to the parent div or screen. Like Hopki said, the fixed sized tour elements wont scale, but otherwise this works on my desktop and mobile (galaxy SIII with flash installed)

You'll really want separate skins for desktop and mobile. This work fine on mobile devices with high res screens, but lower res would be messy. You can use device detection to serve the appropriate page.
DDiCarlo
Posts: 114
Joined: Sun Nov 11, 2012 7:30 pm

wow jmcilvaine, thanks for the detailed description! Really appreciated!

I am still trying to figure out how I can consistently have the tour go fullscreen on a phone but have the top appearance where the elements are scaled. Is there a secret to that? If there was, i could have a link to go fullscreen that would pull it up like that, which was acceptable and much less work that creating a new skin and making two versions of every tour...

Thanks again for the link, I am not a web guy, but I've forwarded it on to the person that does all of my site work.

Dean
User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

which was acceptable and much less work that creating a new skin and making two versions of every tour...
Therein lies the concept - RWD
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj
jmcilvaine
Posts: 48
Joined: Thu Oct 11, 2012 11:59 am

Hi Dean,

Having a desktop and a mobile skin would not be that much more effort once you have the skin. With so many screen resolutions and aspect ratios on mobile devices a "one skin fits all" solution will have to have a lot of compromises. You did a really sweet job with your desktop skin, and since most users will be looking at your tour from a desktop, you wont want to compromise that skin to get it to work with a mobile device and look good.

png and jpg elements (and external swf's) in your skins are non-responsive and there is no way around that with P2VR unfortunately. If you wanted to go the "one skin fits all" approach, then I would design a skin on a 400W x 600H canvas to simulate a phone being held in normal "portrait" aspect ratio, cram in everything as tight as possible on that canvas and anchor your controls on the corners. Then the skin will "spread out" on wider screens and still look good on a desktop. I'm hoping that a future release of P2VR will allow fixed width or % on external elements and margins. I put in a request for that over a year ago and really don't know what all is involved to get it implemented. I'm sure its no easy task.

Anyhow, we are in a related business. I do custom IDX web sites and photography/tours for Realtors. I've been playing around with this for a while and getting close to what I want. When its done I'll be more than happy to share what I have with you. What I wanted to do was make responsive tabbed panels that will contain the tour, photo gallery, video, property details and a map. I'll grab property info and details from my MLS database so that will auto populate in the tour, all I will need to do is punch in the MLS ID.

Here is what I have going:

http://tours.inmotionrems.com/responsive-tabs.php

Joe
Post Reply