Fullscreen from iframe HTML5 Object2VR

Q&A about the latest versions
Post Reply
User avatar
Studio PLAAT
Posts: 18
Joined: Thu Oct 15, 2009 12:07 pm
Location: Amsterdam
Contact:

Hello,

I am looking for a solution to use fullscreen in Object2VR HTML5 ?
I would like to break out of iframe with fullscreen like flash.

I found this note for Pano2VR:
http://gardengnomesoftware.com/bt/view.php?id=524
And tried: allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" in the iframe code.

But I don't get it to work.
Can someone help?

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

Hi Koen,
Please find a project attached.
In the output folder is an index.html page. This is using the iFrame code necessary to allow HTML5 to brake out of the iFrame.
Regards,
Hopki
Attachments
fullscreen.zip
(955.21 KiB) Downloaded 1669 times
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/
User avatar
Studio PLAAT
Posts: 18
Joined: Thu Oct 15, 2009 12:07 pm
Location: Amsterdam
Contact:

Hi Hopki,
Thanks for the quick support!

Got it working in desktop browsers :)
Unfortunately Ipads refuse to go in full screen-mode.

Any suggestion?

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

Hi Koen,
The mobile Safari can not use the fullscreen API. You will have to just add all the page code in your web page then the fullscreen button will fill the window.
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/
User avatar
Studio PLAAT
Posts: 18
Joined: Thu Oct 15, 2009 12:07 pm
Location: Amsterdam
Contact:

Hi Hopki,
Great thanks!
Got it working with the DIV (without iframe) inside the page.
Cheers,
Koen
Rajah
Posts: 254
Joined: Sun Jul 11, 2010 8:02 pm

Hi Koen,

Can you share your solution with us?

Frans
Rajah
Posts: 254
Joined: Sun Jul 11, 2010 8:02 pm

Hopki wrote:Hi Koen,
Please find a project attached.
In the output folder is an index.html page. This is using the iFrame code necessary to allow HTML5 to brake out of the iFrame.
Regards,
Hopki
Hi Martin!

This solution could be awesome, but.... I found out that it does not work in IE.
In IE8 only a part at the top does appear (about 20%) and with IE 10 it gives a scroll bar, despite "scrolling="no"

I really hope you have a solution!

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

Hi Frans,
Try this iFrame code:

Code: Select all

<iframe src="pano.html" name="panorama" width="640" height="480" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="float:left; margin-left:0px" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
Change the src to point to your file and change the name and size.
To remove scroll bars try making the iframe slightly larger then the project.
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/
Rajah
Posts: 254
Joined: Sun Jul 11, 2010 8:02 pm

Hi Martin,

Did what you suggested, I think. Unfortunately without result.
This is the div.html

Code: Select all

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
            <title></title>
			</head>
	<body style="margin: 0">
        
        <div style="margin: 0 auto; width:100%; height:100%;">
            <object type="text/html" data="zenw" style="width:100%; height:100%; margin:0%;">
            </object>
        </div>
        
        
    </body>
</html>
I can tell you that in IE there is a Script error:
An error occured on the script on this page.
Line 39 Char. 4
Object doesn't support property or method 'AddEventListener'
Code 0
Firefox give also about 1/3 of the pano.
Chrome and Safari (all desktop) are ok.

Here the link of the test page:
http://www.360360360.nl/vbwebpagina/

Hope you can solve this problem. Would make life a lot easier. Thanks in advance!

Frans
Rajah
Posts: 254
Joined: Sun Jul 11, 2010 8:02 pm

Problem solved.
Change in iframe and div.html the 100% width and height in pixels of the pano.
Add scrolling="no" in the iframe.

Only iPad fullscreen does not work. Suggestions?

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

Hi Frans,
As far as I know this is down to mobile Safari.
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/
awaves
Posts: 6
Joined: Mon Jun 24, 2013 10:10 pm

Hopki wrote:Hi Koen,
Please find a project attached.
In the output folder is an index.html page. This is using the iFrame code necessary to allow HTML5 to brake out of the iFrame.
Regards,
Hopki
Hello,

I am sorry but i have tested the attached file
http://gardengnomesoftware.com/forum/do ... hp?id=2472

and full screen don't work on IE10
(ok in FF , Chrome , Safari)

do you have solution for IE10?

see my another post : http://gardengnomesoftware.com/forum/vi ... f=6&t=8570
Regards.
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
IE10, I thought it supported the new HTML5 fullscreen API?
Can anyone else test this, my computers are all in storage at the moment as in between moving houses. Working from a mac book so can not test.
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/
awaves
Posts: 6
Joined: Mon Jun 24, 2013 10:10 pm

Thanks for your reply Hopki !

Unfortunately I think the html5 fullscreen API is not implemented in IE10 .

In any case on my test PC with windows 7 it does not work.

If someone here could confirm. thank you
Rajah
Posts: 254
Joined: Sun Jul 11, 2010 8:02 pm

The IE 10 and Chrome solution for Full Screen (I think)
I did change the files in 'fullscreen' of Hopki in this topic as follows:
The iFrame in the index.html of the website:

<iframe src="div.html" scrolling="no" width="700px" height="480px" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder= "0" ></iframe>
The div.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body style="margin: 0">

<div style="margin: 0 auto; width:700px; height:480px;">
<object type="text/html" data="panos" style="width:100%; height:100%; margin:0%;">
</object>
</div>

</body>
</html>

You can put the map "panos" where you want as long you pointing to it.

The index.html of the panorama:
if (swfobject.hasFlashPlayerVersion("9.0.0")) {
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "pano";
attributes.name = "pano";
attributes.align = "middle";
swfobject.embedSWF(
"start.swf", "container",
"100%", "100%",
"9.0.0", "",
flashvars, params, attributes);

} else // check for CSS3 3D transformations and WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {

// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
pano.readConfigUrl("start.xml");
// hide the URL bar on the iPhone
hideUrlBar();
}


} else ... }
was the most difficult to find. In the output of Pano2VR it's before if (swfobject.hasFlashPlayerVersion("9.0.0")) {


Frans
Post Reply