HTML5 fullscreen and fallback to flash

Q&A about the latest versions
sportsnapper
Posts: 73
Joined: Tue Jun 22, 2010 10:28 pm

Thu Nov 18, 2010 5:25 pm

I've got the fullscreen.ggt file from Hopki. I've also got the html file from Thomas that has the modenizer browser detect code. So the two pieces allowing me to make a browser independent pano exist.

But, has anyone yet sucessfully combined them and is willing to share that (even better a .ggt file)

Or do I have to get my coding hat on and work on it? :wink:

Gareth
User avatar
anahum
Posts: 172
Joined: Tue Apr 21, 2009 4:43 am
Location: Chile
Contact:

Fri Nov 19, 2010 1:00 am

Gareth, send me both files and I'll try and share it.
User avatar
vilmer
Posts: 66
Joined: Mon Jul 30, 2007 2:58 am
Location: Argentina

Fri Nov 19, 2010 3:32 am

Hey Gareth, I managed to combine the fullscreen funtion and the modernizr thingy. You can see and try the result here. It was also an attempt to shoot a pano with my camera on a monopod above my head, so pls no comments about the obvious errors. I know they are there ;-) And that those big fishes are not called sea dogs in English, that was more or less a joke for my Dutch friends.

Attached is a zip file, copy the flash_html5_fullscreen.ggt file to C:\Documents and Settings\*****\Application Data\GardenGnomeSoftware\Pano2VR\HtmlTemplates\flash (or wherevever your ggt files are) and copy the rest of the files to C:\Documents and Settings\******\Application Data\GardenGnomeSoftware\Pano2VR\HtmlTemplates\common (or wherever your 'common' directory is, should be near the ggt directory.

Create a new project, first make your flash version, with the 'enable html file' option checked, and the flash_html5_fullscreen.ggt template choosen. Name the swf file "big.swf"
Create in the same directory the html5 versions, name that html5.xml. (I know you should be able to use a placeholder here, but I changed the filenames in the ggt file to my needs, and I can't be bothered at the moment to change that back, think it was something with $n). Generate the tours and that's it.

Btw, if you have facebook, click the facebook button under the 'more' bar on top of the example I mentioned and see the magic happen on your wall ;-)
I'm working on a droplet that uses the ggt file, and creates automagically the normal flash file, a small flash file for the facebook wall, and 3 'html5' tours for iphone3 and 4 and ipad+safari browser. It also contains a link to a google map page with the location marked. And a twitter button that will create a tweet with the titel and a link to that tour. (these functions are all under the 'more' bar). This stuff is generated based on data I type into the user data.
flash_html5_fullscreen.zip
flash_html5_fullscreen
(25.85 KiB) Downloaded 434 times
Grts,
Ronald
sportsnapper
Posts: 73
Joined: Tue Jun 22, 2010 10:28 pm

Fri Nov 19, 2010 6:14 pm

Thanks for this, and thanks Arturo as well

I haven't had time to experiment with this today, but will try to look at it over the weekend (in between taking pictures!)

regards

Gareth
User avatar
alabwab
Posts: 21
Joined: Thu Nov 25, 2010 3:43 pm
Contact:

Tue Nov 30, 2010 6:55 pm

Hi Ronald,
Thank You for this excellent solution!!!
((BTW: There is just a small error (normally being ignored by the browser) in line 7 of the html-outoput: </script> is unmatched because it has already been closed in line 6))

You do not use a doctype declaration in the html-output: Do You think this might present a problem in certain browsers?

Greetings
Alois
User avatar
hansvw
Posts: 13
Joined: Mon Dec 15, 2008 5:03 pm
Location: Genoa, Italy
Contact:

Tue Nov 30, 2010 8:19 pm

Hi all,
here attached is another fullscreen html5 with swf fallback .ggt template.
Tested and working on all the major browsers and systems and on iPad, iPod Touch and iPhone (Safari).
Based on the work by Thomas and Arturo Nahum, I modified it where needed.
Thanks to Peter Nyfeler for his tests on iPhone.
Any feedback is appreciated.
Here it is:
fullscreen_iDevices_swf-fallback.ggt
Fullscreen HTML5/CSS3 with swf fallback
(5.82 KiB) Downloaded 630 times
Regards,
Hans
User avatar
alabwab
Posts: 21
Joined: Thu Nov 25, 2010 3:43 pm
Contact:

Wed Dec 01, 2010 12:01 am

Hi Hans,

the template works excellently. After getting error messages I realized that I have to use the html-output-tab in the HTML5/CSS3-output section - and - that I have to enter the flash-panorama-fallback in the html-output-tab manually.
http://www.alois.cc/fullscreen-2-ggt/html5-ouptput.pdf (screenshot download)

Therefore I think its worth while mentioning that You have to copy the template (fullscreen_iDevices_swf-fallback.ggt) into the html5-folder of Your HtmlTemplates-folder. (something like the following on a mac: /Users/username/Library/Application Support/GardenGnomeSoftware/Pano2VR/HtmlTemplates/html5/ )

Greetings
Alois
Last edited by alabwab on Fri Dec 10, 2010 1:46 am, edited 4 times in total.
User avatar
hansvw
Posts: 13
Joined: Mon Dec 15, 2008 5:03 pm
Location: Genoa, Italy
Contact:

Wed Dec 01, 2010 2:02 am

Hi Alois,
thanks for your feedback!
I took the needed steps for granted. Thanks for writing this helpful information.

Greetings,
Hans
User avatar
vilmer
Posts: 66
Joined: Mon Jul 30, 2007 2:58 am
Location: Argentina

Wed Dec 01, 2010 4:11 pm

Hey Alois,
actually, I removed the doctype part because the one I used was causing troubles in some browsers for some reason, forgot the put another one to serve them all. No idea if it would cause trouble not using it..

That </script> part has to be removed, I deleted several lines from the ggt I use because those functions only work with the skin I use. I forgot to remove that part. Thanks for the tip! And glad it works.

Ronald
User avatar
alabwab
Posts: 21
Joined: Thu Nov 25, 2010 3:43 pm
Contact:

Thu Dec 02, 2010 12:34 am

Hi Hans,
I just wanted to add an observation that might be of interest for people developing and testing css3/html5 output. I've been trying out the tool for changing the user agent in Safari (on Mac) 5.0.3 ((Version 5.0.3 (5533.19.4)) by selecting it in the "developer"-tab. At first glance this tool seems to be useful but on further investigation it seems to be of no or rather little use: e.g.: changing the user-agent to an iphone/ipod touch - leads to a white screen when opening sites produced by Your template although all the necessary files seem to be loaded AND - what is more important - although the files produced by Your template work flawlessly on iphone3, iphone4 and ipad. or: Other sites might load properly - but - changing the user agent in Safari does not cause different tile sizes being loaded.
These facts do not bother me, but I just want to inform people that for testing purposes the build-in developer tools of Safari are not reliable enough.
User avatar
hansvw
Posts: 13
Joined: Mon Dec 15, 2008 5:03 pm
Location: Genoa, Italy
Contact:

Thu Dec 02, 2010 11:46 pm

Hi Alois,
yes, unfortunately Safari developer tools don't offer a full browser/device emulation and often testing with such tools is not helpful and can be misleading.
User avatar
alabwab
Posts: 21
Joined: Thu Nov 25, 2010 3:43 pm
Contact:

Mon Dec 06, 2010 1:57 pm

Hi all,
AFAICS html5-ouput, flash-fallback, fullscreen-solutions and integrating it in websites are fairly well developed. Still IMHO there are some steps that could possibly enhance the task of generating browser/platform-"independent" content:
1. reliable and well probed standards for hmtl5/css3-generation: tile sizes, maximum file sizes for different devices to gain maximum quality without apps crashing and the like
2. flash- and html5/css3-ouput both using the same image tiles and thus reducing web-space and complexity. So far it seems that this goal cannot be reached, since html-output needs a certain amount of overlap to function (Although ptgui 9.0 seems to make use of this strategy for combined html5-flash-output)
3. Skin-related questions: is there any need of using a skin and navigation buttons in small devices?

Any tasks that I forgot?
Greetings
Alois
tuesi
Posts: 34
Joined: Fri Oct 22, 2010 12:34 pm

Wed Dec 15, 2010 9:13 pm

I just want to add one more comment regarding the path to the fallback flash file.

Using the file selector doesn't always give you the right value for the path.

The path that you enter in the field is relative to the html5 html file!

Just an example.
My folder structure

project folder
->intro.p2vr
->pub folder
----->intro.html
----->intro.xml
----->intro.swf

When I use the dialogue box to select the fallback .swf, it creates a path relative to the .p2vr file...it sets it to 'pub/intro.swf' But in actuality you have to set the path relative to the intro.html file...you actually want 'intro.swf' because the .swf is in the same folder as the .html file.
sirflor
Posts: 23
Joined: Wed Aug 12, 2009 7:46 pm

Tue Jan 11, 2011 6:31 pm

OK, it looks good after some tests.
I only tested with Mac (Safari HTML5, Firefox with Flash), iPad, Iphone.
I have to test it on a PC now.

But one thing I have to ask.
In the fallback field I have to define the real file-name.
Is there no way to use a syntax like for the other filname $n.swf?

If this would work, I can save a droplet, and speed up the work a lot.
User avatar
Hopki
Gnome
Posts: 10637
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Tue Jan 11, 2011 7:16 pm

Hopki
Garden Gnome Software 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/
Post Reply