Fallback to HTML5

Q&A about the latest versions
Post Reply
burgons
Posts: 1
Joined: Fri Oct 22, 2010 12:20 am

Hi All

Thomas listed a really interesting feature in his blog post "Pano2VR 3.0 beta2 released". Namely, "HTML5: Flash fallback in the HTML template".
Any idea how this actually works?

Sounds as though this could be a really useful feature when developing for a mixed desktop/mobile environment.

Thanks

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

Hi
Instructions coming soon, but basically you will find it in the Html5/Css3 html page, just enter the first swf in the tour, so will look to see if Html5/Css3 compatible, if not it will call the swf, note all files need to be in the same folder to work, xml's and SWF's, but work it does. :)
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
anahum
Posts: 172
Joined: Tue Apr 21, 2009 4:43 am
Location: Chile
Contact:

Hopki wrote:Hi
Instructions coming soon, but basically you will find it in the Html5/Css3 html page, just enter the first swf in the tour, so will look to see if Html5/Css3 compatible, if not it will call the swf, note all files need to be in the same folder to work, xml's and SWF's, but work it does. :)
Hi Hopki. Great to see that you joined Thomas's team!!! Congratulations and a great addition to support us with your great experience.

One question. I do not see any news related to get better full screen support to run html5/css3 panos on iDevices (i.e. hiding the url bar, etc.) Are you going to provide a sort of full screen templates?
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Humm good question, unlike flash which has it’s own player Html5/Css3 opens in the browser, I have already posted a full screen ggt file, although this can only fill the browser window. You need a chromeless window to open, so like any other chromeless window, its how its opened and not the html page it’s self.
Just Google how to open a chromeless window that fills the screen.
Hay but I am no expert. :)
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
anahum
Posts: 172
Joined: Tue Apr 21, 2009 4:43 am
Location: Chile
Contact:

Hopki, I'm not an expert in js , html nor css, but there are some css styles allowing to do it. I used some hints from other forum's members and it can be done and works (to hide the url in iPhone Safari --> see from an iPhone/iPod Touch this site)... but requires non-standard pano2vr additional files/ggt/css/etc. It would be great if you could make a standard full screen ggt (and css?) for iDevices that hides the url bar. I think this is very important to successfully deploying panoramas in the small available screen left by Safari.
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Arturo
I am in full agreement with you about having as much seen as possible, the link to that excellent website still shows the address bar at the top even with my i pad. It does save having to ad a load bar :)
This is a good idea and does need looking at.
Hows things anyway?
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
anahum
Posts: 172
Joined: Tue Apr 21, 2009 4:43 am
Location: Chile
Contact:

Hopki, strange that you see the url bar. I use an iPod Touch and the url bar shows only while loading, but as soon as the web page or the pano loads, the url bar retracts and hide at the top. Only the antenna/battery bar remains at the top and the back/+/favorites bar remains at the bottom. (may be my ggt is not detecting iPads properly).
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Arturo
Just to confirm my i pod touch also hides the address bar, but not on i pad.
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
anahum
Posts: 172
Joined: Tue Apr 21, 2009 4:43 am
Location: Chile
Contact:

Well, I'll need to check and see why iPads are not detected, but not a problem with that nice screen size. The issue is with small devices. Thanks for your test and feedback.
Gray37
Posts: 1
Joined: Mon Oct 25, 2010 7:36 pm

Hi there,

I am currently using Pano2VR to create virtual tour videos as part of a Google maps project, and would like to use your new Fallback to HTML5 feature to call on HTML5 when users are viewing the page with a smartphone device.

At the moment I am calling the flash swf files via an XML file (http://www.ucl.ac.uk/admission/virtual- ... est37.html) via the following code:

Code: Select all

function addMarker(point, title, video, details) {
      var marker = new GMarker(point, {title: title, icon:camera});
      GEvent.addListener(marker, "click", function() {
        if (details) {
          marker.openInfoWindowTabsHtml([new GInfoWindowTab("Video", video),
                                         new GInfoWindowTab("More", details)]);
        } else {
          marker.openInfoWindowHtml(video);
        }
      });
 
      var id = gmarkers.length;
      gmarkers.push(marker);
      map.addOverlay(marker);
 
      return id;
    }
 
    function flashMovieHTML(title, file) {
      return '<div style="width:335px; height:260px">' + 
               '<b>' + title + '</b>' +
               '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="325" height="244" ' + 
                       'id="'    + title + '" ' + 
                       'title="' + title + '">' + 
                   '<param name="movie"      value="http://www.ucl.ac.uk/admission/virtual-tours/' + file + '" />' + 
                   '<param name="quality"    value="high" />' + 
                   '<param name="wmode"      value="opaque" />' + 
                   '<param name="swfversion" value="8.0.35.0" />' + 
                   '<embed src="http://www.ucl.ac.uk/admission/virtual-tours/' + file + '" ' +
                       'quality="high" ' + 
                       'width="325" ' +
                       'height="244" ' +
                       'name="' + title + '" ' +
                       'type="application/x-shockwave-flash" ' + 
                       'pluginspage="http://www.macromedia.com/go/getflashplayer">' +
                   '</embed>' + 
               '</object>' + 
            '</div>';
    }
Can you please help with adapting this code so that incorporates the new HTML5 fallback script:

Code: Select all

<script type="text/javascript"> 
		// check for CSS3 3D transformations
		if (Modernizr.csstransforms3d) {
			// use HTML5 panorama
			document.writeln('<div id="container" style="width:640px;height:480px;"></div>');
			pano=new pano2vrPlayer("container");
			pano.readConfigUrl("CancerInstitute_out.xml");
			updateOrientation();
			setTimeout(function() { updateOrientation(); }, 10);
			setTimeout(function() { updateOrientation(); }, 1000);
		} else {
			// use Flash panorama
			if (DetectFlashVer(9,0,0)) {
				p2q_EmbedFlash('CancerInstitute_out.swf', '640', '480',
					'bgcolor', '#f0f0f0',
					'play', 'true',
					'cache','true',
					'allowFullscreen','true',
					'autoplay','true'); 
			} else {  // flash is too old or we can't detect the plugin
				document.write('This content requires the Adobe Flash Player Version 9 or higher. ');
			}
		}
		</script> 
I have tried, but only seem to get errors so far.

My Google maps project with just the plain flash files is here: http://www.ucl.ac.uk/admission/virtual- ... est37.html

Many thanks for your help.

Gray
User avatar
thomas
Chief Gnome
Posts: 2611
Joined: Fri Sep 01, 2006 3:56 pm
Location: Vienna, Austria
Contact:

The fallback code uses Modernizr to decide if the browser supports CSS3 3D transformations so you don't need to use the code produced by Pano2VR. Just download the Modernizr script and add it to your existing code.
MfG, Thomas
Post Reply