HTML5 Correct fullscreen behaviour

SProfanter · Thu Mar 08, 2012 8:02 pm

Hi,
our Pano is embedded in a FancyBox so it opens like a In-Page-Popup.
Everything works fine except fullscreen: When clicking on "Toggle Fullscreen" the Pano doesn't expand to the full screen but only to the size of the FancyBox.
See my demo here: http://profanter.me/fullscreen.html

There are two possibilities to fix the wrong behaviour of Pano2VR Player:

Implement a callback to call before Pano switches to fullscreen, so that developer can manually switch the parent div to fullscreen

OR

Use "position: fixed" in Pano2VR Player instead of "position: absolute" or give developer the possibility to choose if he wants "fixed" or "absolute"

I've tested the second option by modifying the "pano2vr_player.js":
As you can see in the original code (beautified), the fixed option is already implemented, but not enabled:

Code: Select all

..
this.setFullscreen = function (v) {
        if (this.ill != v) {
            this.ill = v;
            this.lIi = true;
        }
        if (this.ill) {
            if (1) {
                divViewport.style.position = "absolute";
                var li = getViewerOffset();
                divViewport.style.left = window.pageXOffset - li.x + margin.left + "px";
                divViewport.style.top = window.pageYOffset - li.y + margin.top + "px";
                document.body.style.overflow = "hidden";
            } else {
                divViewport.style.position = "fixed";
            }
            if (l1.divSkin && l1.divSkin.ggEnterFullscreen) {
                l1.divSkin.ggEnterFullscreen();
            }
        } else {
            divViewport.style.position = "relative";
            divViewport.style.left = "0px";
            divViewport.style.top = "0px";
            document.body.style.overflow = "";
            if (l1.divSkin && l1.divSkin.ggExitFullscreen) {
                l1.divSkin.ggExitFullscreen();
            }
        }
        Iij();
    };
...

Now I modified the code to:

Code: Select all

...
            if (0) {
...

so relative is enabled. This results in the "Modified Pano2VR Player" from the demo above.

This is a lot better.

@GardenGnomeSoftware Developers:
What do you think? Do you plan to implement one of the above suggestions. My favourite is the callback.

Thanks!!
Stefan

SProfanter · Fri Mar 09, 2012 11:38 pm

Found a solution:
I'm wrapping the pano2VR_player.setFullscreen function with the following: http://stackoverflow.com/questions/5258 ... ipt-jquery

Which results in the following: http://profanter.me/fullscreen.html (Use "Open Wrapper Tour")

Here again my full code:

Code: Select all

<html>                                                                  
<head>                                                                
<script type="text/javascript" src="/pub/js/jquery-1.7.1.min.js"></script>  
<script type="text/javascript" src="/static/tour/p2q_embed_object.js"></script> 
<script type="text/javascript" src="/static/tour/pano2vr_player.js"></script> 
<script type="text/javascript" src="/static/tour/skin.js"></script>       
<script type="text/javascript">

// hide URL field on the iPhone/iPod touch
function hideUrlBar() {
	
	if (window.pageYOffset==0) {
		window.scrollTo(0, 1);
		// repeat every second for slow rendering pages
		setTimeout(function() { hideUrlBar(); }, 3000);
	
	}
}

	var wrap = function (functionToWrap, before, after, thisObject) {
		return function () {
			var args = Array.prototype.slice.call(arguments),
				result;
			if (before) before.apply(thisObject || this, args);
			result = functionToWrap.apply(thisObject || this, args);
			if (after) after.apply(thisObject || this, args);
			return result;
		};
	};
	
	var fullscreenDiv;
	var beforeFullscreen = "";
	
	var expandDiv = function() {
		if (!fullscreenDiv.hasClass('fullscreen'))
		{			
			beforeFullscreen = {
				parentElement: fullscreenDiv.parent(),
				index: fullscreenDiv.parent().children().index(fullscreenDiv),
				x: $(window).scrollLeft(), y: $(window).scrollTop()
			};
			$('html').css('overflow', 'hidden');
			$('body').css('overflow', 'hidden');
			$('body').append(fullscreenDiv).css('overflow', 'hidden');
			window.scroll(0,0);
			fullscreenDiv.addClass('fullscreen');
			$('#fullscreen_toggle').html("Close Fullscreen");
		}
	};
	
	var resetDiv = function() {
		if (fullscreenDiv.hasClass('fullscreen'))
		{			
			fullscreenDiv.removeClass('fullscreen');
			$('#fullscreen_toggle').html("Show Fullscreen");	
			if (beforeFullscreen.index+1 >= beforeFullscreen.parentElement.children().length) {
				beforeFullscreen.parentElement.append(fullscreenDiv);
			} else {
				fullscreenDiv.insertBefore(beforeFullscreen.parentElement.children().get(beforeFullscreen.index));
			}
			$('body').css('overflow', 'visible');
			$('html').css('overflow', 'visible');
			window.scroll(beforeFullscreen.x, beforeFullscreen.y);
		}
	};

	var beforeFullscreen = function (toFullscreen) {
		if (toFullscreen)
			expandDiv();
		else
			resetDiv();
	};

	$(function() {	// check for CSS3 3D transformations and WebGL
		if (ggHasHtml5Css3D() || ggHasWebGL()) {
			pano=new pano2vrPlayer("html_inner");
			// add the skin object
			pano.setFullscreen = wrap(pano.setFullscreen,beforeFullscreen);
					
			skin=new pano2vrSkin(pano,'/static/tour/');

			// load the configuration
			pano.readConfigUrl('/static/tour/Eingangstuer.xml');
			// hide the URL bar on the iPhone
			hideUrlBar();
			
			var help = $("#html_container font");
			help.parent("div").addClass("HelpDiv");
			help.parent("div").html(help.html());
			
		} else {
			alert("No CSS 3D or WebGL");
		}
		
		
		fullscreenDiv = $('#html_inner');
	});
        
</script>
<style type="text/css">
	.HelpDiv {
		font-size: 12px;
		line-height: 1.1;
	}

	#html_container {
		line-height: 1.15;	
	}

	.tour_container {
		width:900px;
		height:510px;
		background-color: #808080;
	}
	
	#html_inner {
		width: 100%;
		height: 100%;
	}
	
	.fullscreen{
	  display: block !important;
	  position: fixed !important;
	  top:0 !important;
	  left:0 !important;
	  width:100% !important;
	  height:100% !important;
	  z-index:9999 !important;
	  margin:0 !important;
	  padding:0 !important;
	  background:#999 !important;
	}
</style>                                                             
</head>                                                                 
<body>                                                                  
				<div id="html_container" class="tour_container">
                    <div id="html_inner">
                    </div>
				</div>                               
</body>                                                                 
</html>

Sat Mar 10, 2012 1:18 am

Test observations and constructive comments:

Using Safari on PC the first pano opened and hung at 78% for 30 seconds. Our Samsung monitor size is 1920x1200 pix. Your pano did not open to our full screen monitor size.

: First pano opened very slowly... with severe cubeface delays; openwrapper.jpg (109.3 KiB) Viewed 11587 times

After finally loading to 100% clicking on green icon to enter building the 2nd pano failed to open.

: openwrapper2.jpg (159.21 KiB) Viewed 11587 times

BHiggins · Sat Mar 10, 2012 5:11 pm

Using mac safari as well, and your "Correct Behavior" pano works perfectly (it does have a lengthy download time) but I think that 360 Texas's comment that it doesn't fill the whole screen is not correct. The html5 player only fills the browser window rather than a true full screen as in flash. (unless I am missing something)

From my interpretation your solution works great. Thanks for sharing. (We use fancy box quite a bit as well, so this is great info)

Burley

Sat Mar 10, 2012 8:51 pm

More observations and comments
On clicking the link to "Correct behavior"... Using Safari 5.1.2 the pano does not open full screen. The screen as shown in the screen capture show Safari expanded to full height and width 1920 x 1170 pixels of the browser to include the Safari top tool bar. The nice smaller fancy box is a subset box mid center screen. Also I do get a true full screen [removes the Safari Browser upper tool bar] when clicking the pano toolbar [x] open full screen

: openwrapnotfullscreen.jpg (103.71 KiB) Viewed 11561 times

When attempting to click the green footprint^ icon to enter the building... now I see an Err box. [upate ADD] Now ALL link icons return with this error

: openwrappernotERR.jpg (25.11 KiB) Viewed 11561 times

Mouse behavior is also a bit odd in that I can not mouse click to tag the pano for dragging .... after 5 or 6 click attempts.. Mouse does find the pano... then I can drag the pano. Behavior is like a keyboard buffer is filled... and until the buffer is cleared.. the next character appears on the screen. Maybe its a Safari 5.1.2 undocumented feature.

SProfanter · Sun Mar 11, 2012 12:22 pm

Hi, thanks for your comments!!

360Texas wrote:...
On clicking the link to "Correct behavior"... Using Safari 5.1.2 the pano does not open full screen. ...

When you click on "Open Wrapper Tour" the Tour first opens in the smaller fancy box. Then you have to click on the "toggle fullscreen" button from Pano2VR Player to switch to fullscreen. This should work.

360Texas wrote:....
When attempting to click the green footprint^ icon to enter the building... now I see an Err box. ...

Sorry, I forgot to mention that this is only a demo tour and the footprints don't work in this demo. And "profanter.me" is the developement server, which is very slow. I removed the footprints now for less confusion. If you are interested in the full tour visit one of the following (this is production server and much faster). The "tour_type" parameter sets a value in your session and is only for debugging. It's like a global switch for the whole page.

http://toeglhof.com/en/tour?tour_type=1: First try to load flash, if FlashBlocker is enabled or Flash not installed use HTML5
http://toeglhof.com/en/tour?tour_type=2: Force HTML5
http://toeglhof.com/en/tour?tour_type=3: Force Flash

360Texas wrote:....
Mouse behavior is also a bit odd in that I can not mouse click to tag the pano for dragging .... after 5 or 6 click attempts.. Mouse does find the pano... then I can drag the pano. Behavior is like a keyboard buffer is filled... and until the buffer is cleared.. the next character appears on the screen. Maybe its a Safari 5.1.2 undocumented feature.

I tested the Pano on Windows with current Safari (5.1.2) release (as you have it) and it works like in Firefox and Chrome. I don't have the problems you mentioned. Maybe your PC hasn't enough "power"?

------------------------

Ok, the Pano on the demo page works perfectly. Here the pano is embedded as a div into FancyBox.

But on the real page http://toeglhof.com we include the Pano in FancyBox as an iFrame. Here is the new Problem, when using the above ".fullscreen" class, the pano only expands in the FancyBox but not the whole browser window. So I have to find another solution for this. If I find something out, I'll let you know!!

Sun Mar 11, 2012 9:20 pm

Stefan, Thank you for posting the website URL for us.

Using our PC and IE9 ALL works GREAT ! Beautiful location. VERY PROFESSIONAL and fully functional multi-language site. If you created this site.. Congratulation it all works with NO ERR's.

SProfanter · Sun Mar 11, 2012 10:41 pm

360Texas wrote:Stefan, Thank you for posting the website URL for us.

Using our PC and IE9 ALL works GREAT ! Beautiful location. VERY PROFESSIONAL and fully functional multi-language site. If you created this site.. Congratulation it all works with NO ERR's.

Thanks for your feedback and you compliments!!!! It's all my work

As mentioned alredy, the only thing which isn't yet as I want it to be is the HTML5 Pano fullscreen. But I think and hope sometime I'll find a solution.

SProfanter · Fri Feb 08, 2013 10:15 am

I had too much problems using iFrame, therefore I switched to the inline version (load div content via AJAX, display it in fancybox).

Then I use the following code to detect, if user clicked on fullscreen button of Pano2VR.
This code moves the wrapper (html_inner) from fancybox into the body (as first element). This is needed for browsers which don't support the "request fullscreen" thingy (i.e. IE, Opera).

Code: Select all

checkPosIntervalId = setInterval(function(){
			var isFullscreen = false;
			if ($("#html_inner").children("div").css("position") == "absolute")
				isFullscreen = true;
			if (isFullscreen != prevFullscreenState) {
				prevFullscreenState = isFullscreen;
				
				if (isFullscreen) {
					$("#html_inner").children("div").css("left","0px"); //set position of pano2vr
					$("#html_inner").children("div").css("top","0px"); //set position of pano2vr
					$("#html_container").prependTo($("body")); //move container into body
					$(".fancybox-overlay").hide();
				} else {
					$(".fancybox-overlay").show();
					$("#html_container").prependTo($("#tour_container")); //move container back into fancybox
					$.fancybox.reposition();
					$.fancybox.update();									
				}
			}
		}, 100);

And here is the div code loaded into fancybox:

Code: Select all

<div style="position:relative; height:510px; width:900px;">
    <div id="tour_container" style="position:absolute; top: 50%; left: 50%; height:510px; width:900px; margin-top:-255px; margin-left:-450px; padding: 0px;">
        <div id="flash_container" class="tour_container">
            <div id="flash_inner" class="tour_container">
            </div>
        </div>
        <div id="html_container" class="tour_container">
            <div id="html_inner">
            </div>
        </div>
        <div id="not_supported">
            <!-- ERROR message if no config supported -->
        </div>
    </div>
</div>

Here ist the running code:
http://toeglhof.com/en/tour?tour_type=2

Greetz

tomwidd · Fri Feb 08, 2013 10:57 am

Hey SProfanter,
Thanks so much for getting back with your solution, after I msg'd you.
I'll try it shortly. I've had a few issues with fancybox and iframe content in other places too, for example using HTML5 video player with Flash fallback loaded into fancybox, has some issues.
I'll post my working version here soon

Thanks again

tomwidd · Fri Feb 08, 2013 3:09 pm

hmm cant seem to get this working.
Can I check -
1. Should I be loading the #tour_container div into fancybox, as inline rather than ajax or where you loading a seperate page with your pano code in?
2. Should the pano object be initialized to #tour_container or #html_container or #html_inner
3. Should the fullsccreen JS code be in the jquery block in the head
Think I'm missing something obvious here but cant quite get it working.
example here - http://www.tomwidd.co.uk/photography/pa ... /test.html
Thanks again

SProfanter · Fri Feb 08, 2013 3:21 pm

My anchor code to open the fancybox 2 looks like:

Code: Select all

<a class="more_tour fancybox.ajax" target="_blank" href="/tour/embedded/foo">Foo tour</a>

At "/tour/embedded/foo" the previously posted code for the div is written.

The jQuery onload function contains the fancybox initialization:

Code: Select all

	$('.more_tour').each(function () {
		var a = $(this);
		a.fancybox({
			'centerOnScroll':   false,
			'closeBtn'		:	true,
			'autoCenter'	:	false,
			beforeClose : function (){
				clearInterval(checkPosIntervalId);						
			},
			beforeShow 	: function (){
				StartTour();
			}
		});
	});

StartTour is:

Code: Select all

function StartTour(file, skinName)
{
	// check for CSS3 3D transformations and WebGL
	if (ggHasHtml5Css3D() || ggHasWebGL())
	{
		
		if (checkPosIntervalId != 0)
			clearInterval(checkPosIntervalId);	
		showAsHtml5(file, skinName);

		var prevFullscreenState = false;	
		checkPosIntervalId = setInterval(function(){
			var isFullscreen = false;
			if ($("#html_inner").children("div").css("position") == "absolute")
				isFullscreen = true;
			if (isFullscreen != prevFullscreenState) {
				prevFullscreenState = isFullscreen;
				
				if (isFullscreen) {
					$("#html_inner").children("div").css("left","0px");
					$("#html_inner").children("div").css("top","0px");
					$("#html_container").prependTo($("body"));
					$(".fancybox-overlay").hide();
				} else {
					$(".fancybox-overlay").show();
					$("#html_container").prependTo($("#tour_container"));
					$.fancybox.reposition();
					$.fancybox.update();									
				}
			}
		}, 100);	
	} else if (tour_force_flash || swfobject.hasFlashPlayerVersion("9.0.0")) {
		showAsFlash(file);
	} else {
		$("#html_container").hide();
		$("#flash_container").hide();
		$("#not_supported").show();
	}
};

Then showAsHTML5:

Code: Select all

var pano;

function showAsHtml5(file, skinName)
{
	$("#html_container").show();
	$("#flash_container").hide();
	$("#not_supported").hide();
	// create the panorama player with the container
	delete pano;
	delete $("#html_inner");
	$("#html_container").empty();
	$("#html_container").append('<div id="html_inner"></div>');
	$("#html_inner").show();
	if ($("#tour_container").length == 0) 
		return;
	pano=new pano2vrPlayer("html_inner");
	

	// add the skin object
	skin=new pano2vrSkin(pano,'/static/tour/');
	// load the configuration
	pano.readConfigUrl('/static/tour/foo.xml');
	// hide the URL bar on the iPhone
	hideUrlBar();
};

This is the full code, hope it helps

tomwidd · Tue Feb 19, 2013 12:08 pm

Thanks very much for posting that code. I got it working in the end with a couple of little changes.
http://www.tomwidd.co.uk/photography/pa ... astonbury/
For some reason it wont work for me when triggering StartTour(), beforeShow: in fancybox code. afterShow is ok though.
Also I started this whole thing to make it work better with iOS / Safari / html5 version and fullscreen. But I noticed the fancybox not hiding properly when fullscreen on iphone safari. I got round it by hiding the fancybox skin aswell as the overlay -
$(".fancybox-overlay").hide();
$(".fancybox-skin").hide();
(I haven't checked if there's a fancbox parent that could hide to hide everything in fancybox). It looks like your example tour link above might have the same issue on iPhone safari.

* I did just notice though - the new version of pano2VR has proper fullscreen working! I'll try that next and see if plays nicely with fancybox..

Thanks again
T

SProfanter · Tue Feb 19, 2013 12:17 pm

Thanks for the tip about the fancybox-skin hiding.

If you mean by new version of Pano2VR the version 4:
I already use this version.
But the HTML5 Fullscreen works only in Safari/Chrome/Firefox but not in IE10.
Therefore I fixed it with the code above.