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

[HaraldJ]

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

[stalwart]

Hi Harald,

Great question - so "bump"!

[Tony]

Hi HaraldJ,

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



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

[HaraldJ]

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

[rkreienbuehl]

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]

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

[Hopki]

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

[JGoding]

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

Hi HaraldJ,

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



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