Toggle Fullscreen on iOS devices - how do you deal with it?

Q&A about the latest versions
Post Reply
HaraldJ
Posts: 156
Joined: Wed Oct 10, 2012 2:05 pm
Location: Surrey, United Kingdom
Contact:

Mon Jun 22, 2015 2:56 pm

With an HTML5 panorama in an iFrame on an iOS device you can't switch to fullscreen mode and back, as far as i know that's a "feature" of iOS.

It's annoying - a panorama in an iFrame can make a lot of sense on a large screen, on an iPhone5 it's a bit of a pain.
And a "fullscreen" button that simply does nothing is a waste of space.

How do you deal with the issue?
Do you make the button invisible with a bit of Javascript to detect iOS?

Would it be possible to use Javascript to change the behaviour of a Fullscreen button if there is iOS? Opening the panorama itself via the URL, perhaps in a new browser window/tab? It would be a workaround, but it would be better than no fullscreen and a dead button.

What do you think?

Thanks!

Harald
Harald Joergens
Harald Joergens Photography
Nutfield, Surrey, United Kingdom
User avatar
stalwart
Posts: 649
Joined: Thu Oct 02, 2008 11:52 am

Sat Jun 27, 2015 10:34 am

Hi Harald,

Great question - so "bump"!
User avatar
Tony
Posts: 1023
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Sun Jun 28, 2015 3:32 am

Hi HaraldJ,
HaraldJ wrote:Would it be possible to use Javascript to change the behaviour of a Fullscreen button if there is iOS? Opening the panorama itself via the URL, perhaps in a new browser window/tab? It would be a workaround, but it would be better than no fullscreen and a dead button.
Yes that's exactly what I do. If you check out one of my Z Ward blog posts http://bit.ly/zward-doc you will see and embeded panorama, using an iFrame, of the staircase at the prison. If you view it on a desktop browser with Flash installed you will see the Flash Version. But if you view it on an iPad or iPhone you will see the HTML5 version

Image

The HTML5 version has a different skin with only an info box, fullscreen button and a toggle gyro button. If you tap on the fullscreen button it opens the panorama fullscreen in a new window. If you tap on the fullscreen button in this new window it closes the page. As you say a workaround but a reasonably successful one.

To do this you need to have two skins and a separate .html file, I call mine fullscreen.html. The in situ version 'fullscreen' button has the following Actions ascribed to it, Source: Mouse Click | Action: Go To URL | URL: fullscreen.html | Target: _blank. The skin for the fullscreen.html page has a 'fullscreen' button with the following Actions ascribed to it, Source: Mouse Click | Action: Go To URL | Parameters: javascript:window.close();

So when you tap the fullscreen button in index.html, on iPad or iPhone, it opens a new window, fullscreen.html, above the current one. When you tap on the fullscreen button it closes the window.

To simplify the building process I use a droplet that creates all of the .html files and a separate fullscreenskin.js that I just drop into the Output folder before publishing.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
HaraldJ
Posts: 156
Joined: Wed Oct 10, 2012 2:05 pm
Location: Surrey, United Kingdom
Contact:

Sun Jun 28, 2015 8:42 am

Hi Tony,

This is a clever solution, thank you very much! It works just as what I had in mind on an iPhone or iPad.

I would like to go one step further for HTML5:

It's possible, with a bit of Javascript, to detect if a device is using iOS:

Code: Select all

var is_iOS_device=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
If the device uses IOS, I would like to do exactly what you do - open the URL in a new window, and close that window. If it's not an iOS device, I would like the default behaviour.

The skin Javascript file might be a good place to make such a change, although it's generated every time the output is built. If you have a fullscreen button that toggles fullscreen mode, you'll have code like this is your skin Javascript file:

Code: Select all

	
this._fullscreen.onclick=function () {
    me.player.toggleFullscreen();
}
This could be changed to deal with iOS:

Code: Select all

var is_iOS_device=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
this._fullscreen.onclick=function () 
{
   if(is_iOS_device)
   {
      // Deal with special processing for iOS
   }
   else
      me.player.toggleFullscreen();
}
Unfortunately, if we know we are on iOS, we would need to know if we are in full screen mode or not, and act accordingly. Is there a way to find out???

Thanks!

Harald
Harald Joergens
Harald Joergens Photography
Nutfield, Surrey, United Kingdom
rkreienbuehl
Posts: 5
Joined: Tue Oct 06, 2015 10:23 am

Tue Oct 06, 2015 6:32 pm

Hello
I had the same problem with fullscreen on the iPhone/iPad. After I red this thread I managed it like this:
(I embed the Panorama responsive with Bootstrap, there come the CSS classes from)

Code: Select all

this._fullscreen.onclick=function () {

            var is_iOS_device=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);

            if(is_iOS_device)
            {
                if(document.getElementById(me.player.da.id).classList.contains("embed-responsive")) {
                    document.getElementById(me.player.da.id).classList.remove("embed-responsive");
                    document.getElementById(me.player.da.id).classList.remove("embed-responsive-4by3");
                    document.getElementById(me.player.da.id).classList.add("pano-fullscreen");
                }
                else {
                    document.getElementById(me.player.da.id).classList.remove("pano-fullscreen");
                    document.getElementById(me.player.da.id).classList.add("embed-responsive");
                    document.getElementById(me.player.da.id).classList.add("embed-responsive-4by3");
                }
                window.dispatchEvent(new Event('resize'));

            }
            else {
                me.player.toggleFullscreen();
            }
}
And the pano-fullscreen class:

Code: Select all

.pano-fullscreen {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: auto;
    height: auto;
    z-index: +1;
}
This works very good. Now my problem is, that I have to add this to every skin.js. When I will use a Master Panorama in Wordpress (GGPKG-Plugin) the Panorama doesn't work on i-devices...
Is there a way to change skin.js for this skin directly in Pano2VR, so every GGPKG contains the modified skin.js?
HaraldJ
Posts: 156
Joined: Wed Oct 10, 2012 2:05 pm
Location: Surrey, United Kingdom
Contact:

Wed Oct 07, 2015 12:49 pm

rkreienbuehl wrote: I had the same problem with fullscreen on the iPhone/iPad. After I red this thread I managed it like this:
(I embed the Panorama responsive with Bootstrap, there come the CSS classes from)
That looks very interesting indeed, I'd love to try it out!

Could you please be so kind and elaborate on "I embed the Panorama responsive with Bootstrap"? I'm a bit lot here.

Thanks!

Harald
Harald Joergens
Harald Joergens Photography
Nutfield, Surrey, United Kingdom
User avatar
Hopki
Gnome
Posts: 11116
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Mon Oct 12, 2015 10:26 pm

Hi Guys,
With Pano2VR 5, you can use a logic block and detect screen size, so:
Player Width: <= 1024 show fullscreen button which will open a new pano.
Player Width: > 1024 show fullscreen button with toggle fullscreen action.

The logic block detects the logical screen size so even the iPad Air 2 is 1024 x 768px.
Regards,
Hopki
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/
JGoding
Posts: 4
Joined: Fri Apr 03, 2020 11:11 am
Location: Melbourne, Australia
Contact:

Wed Feb 17, 2021 1:11 am

Hi Tony,


I am trying to action your suggestion for a job but struggling to work out just how. I'm wondering if you might be kind enough to provide any further explanation on how to use the 2 skins with the one project file?

Or perhaps you might be kind enough to supply us with some of your working files so I can investigate how you did it in a bit more detail and apply these settings?

Thanks in advance!

Joe
Tony wrote:
Sun Jun 28, 2015 3:32 am
Hi HaraldJ,
HaraldJ wrote:Would it be possible to use Javascript to change the behaviour of a Fullscreen button if there is iOS? Opening the panorama itself via the URL, perhaps in a new browser window/tab? It would be a workaround, but it would be better than no fullscreen and a dead button.
Yes that's exactly what I do. If you check out one of my Z Ward blog posts http://bit.ly/zward-doc you will see and embeded panorama, using an iFrame, of the staircase at the prison. If you view it on a desktop browser with Flash installed you will see the Flash Version. But if you view it on an iPad or iPhone you will see the HTML5 version

Image

The HTML5 version has a different skin with only an info box, fullscreen button and a toggle gyro button. If you tap on the fullscreen button it opens the panorama fullscreen in a new window. If you tap on the fullscreen button in this new window it closes the page. As you say a workaround but a reasonably successful one.

To do this you need to have two skins and a separate .html file, I call mine fullscreen.html. The in situ version 'fullscreen' button has the following Actions ascribed to it, Source: Mouse Click | Action: Go To URL | URL: fullscreen.html | Target: _blank. The skin for the fullscreen.html page has a 'fullscreen' button with the following Actions ascribed to it, Source: Mouse Click | Action: Go To URL | Parameters: javascript:window.close();

So when you tap the fullscreen button in index.html, on iPad or iPhone, it opens a new window, fullscreen.html, above the current one. When you tap on the fullscreen button it closes the window.

To simplify the building process I use a droplet that creates all of the .html files and a separate fullscreenskin.js that I just drop into the Output folder before publishing.

Tony
Post Reply