Html 5/CSS 3 - Flash; state of the market

Q&A about the latest versions
Robert Harshman
Posts: 75
Joined: Thu Nov 30, 2006 5:53 pm
Location: Chicago/Austin TX
Contact:

Am I missing something here, or is the curent solution from this beta that you need two links? One to serve the iPhone/Pad and Safari 5 users and and a second flash version for the rest of the world?

If I produce a 360 in html5/css3 today it will only work on i devices or users using safari 5. There does not seem to be a flip to flash if you're using another browser.

Is this correct?

If it is, then this is the biggest hurdle stopping this from being usable. If we have to add "use this link from a i device or if not using safari 5" then it might as well not be there. Users do not like choices that they don't understand or care about.

Regards,

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

I Phone/I Pad,
I have not been convinced with this technology, found the JooJoo,
https://thejoojoo.com/sites

By the look of it, out before the I Pad, and supports flash, and half the price, with Apps and allsorts.

I read somewhere in the forum how good it would be to visit a customer and show a tour on the I Pad, well so far I can not see any evidence that you can store tours on them without having to mod them first, and even so, not seen one yet doing it. So what’s wrong with a netbook?

The argument so far for html 5 is that’s it up and coming and it’s an Apple…….

With every one else supporting flash, even the mobile Android OS,
I am just going to wait and see, in the mean time still playing with html 5 and trying to squeeze as much functionality out of it as possible, on a positive note you might be able to sell a tour twice, once and for Flash and then for html 5.

You can leave the web developers to get on how they display it; however auto detecting Flash and html5 will be my next task once I get a satisfactory detection working for Max screen sizes.

So the plus side is selling it twice, or use it to seal the deal, throw it in for free.
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
k.ary.n
Gnome
Posts: 615
Joined: Wed Aug 15, 2007 1:02 pm

Robert Harshman wrote:If I produce a 360 in html5/css3 today it will only work on i devices or users using safari 5. There does not seem to be a flip to flash if you're using another browser.
Yep. So far I think two links are necessary. See Vimeo and YouTube for example.

On a side note, some of you may be interested in this site: http://diveintohtml5.org/table-of-contents.html#video.

The answer to this question might be found in this site, but I haven't read through the whole thing...
Robert Harshman
Posts: 75
Joined: Thu Nov 30, 2006 5:53 pm
Location: Chicago/Austin TX
Contact:

k.ary.n wrote: Yep. So far I think two links are necessary.
This is a big mistake. With the release of Pano2vr v3 it's become the market leader in the i space. But the i, html5/CSS3 space is a very small percentage of the market today. I would think less than 12% of the potential viewers. while that will grow over time as other browsers fully support CSS3 it's not today.

It's possible to tell what device, screen size, OS, browser etc is being used to view content. I think the lack of included flip to flash or flip to html5/CSS3 by default from the html that Pano2VR produces is a major over-site. With out it, it's a tough sell.

I hope version 2 of the beta corrects this.

Regards,

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

The "final" solution will be of course just one page where everything is auto detected. If you visit http://gardengnomesoftware.com/samples/pano2vr_3/tour/ it will already auto detect your browser and it will show the correct page. This page uses modernizr to detect the browser capabilities. The reason why it is not in there yet are the special HTML5 cube faces with overlap. The Pano2VR Flash player can not handle those yet, but it should work in the next beta.
MfG, Thomas
Robert Harshman
Posts: 75
Joined: Thu Nov 30, 2006 5:53 pm
Location: Chicago/Austin TX
Contact:

Yea!
:D
User avatar
dp.math
Posts: 69
Joined: Sat Jun 07, 2008 10:00 am

all right for the auto-detect.

I'm trying to build an html -ggt template which includes the jscript, but founding some problems. Do Thomas will include this in the normal or fullscreen ggt template?

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

dp.math wrote:all right for the auto-detect.

I'm trying to build an html -ggt template which includes the jscript, but founding some problems. Do Thomas will include this in the normal or fullscreen ggt template?
Yes, I plan to.
MfG, Thomas
Joop Greypink
Posts: 12
Joined: Mon Aug 09, 2010 3:02 pm

Still having some problems with my home-made HTML5-fullscreen.ggt on the iPhone/iPad. I made this for mobile only.
In the css I have these settings for the container div:

Code: Select all

#container {
				position: absolute;
				width: 100%;
				top: 0px;
				height: 100%;
				left: 0px;
			}
Unfortunately this doesn't hide the URL text field, which is 60px high on the iPhone.
So I hard-coded like this:

Code: Select all

function updateOrientation() {
				switch(window.orientation) {
					case  90:
					case -90:
						if (window.pageYOffset==0) {
							landscape();
							window.scrollTo(0, 1);
						}
					break;
					default:
						if (window.pageYOffset==0) {
							portrait();
							window.scrollTo(0, 1);
						}
					break;		
				}
			}
		
		function portrait()

{
		var containerHeight = 420+'px';
        document.getElementById('container').style.height = containerHeight;
		

        }

  function landscape()

{
        var containerHeight = 260+'px';
        document.getElementById('container').style.height = containerHeight;
        }
This function is called like this:

Code: Select all

<body onorientationchange="setTimeout(function() { updateOrientation(); }, 10);" >
OR like this

Code: Select all

addEventListener("load", function() { setTimeout(updateOrientation, 0); }, false);
This seems to work, but after rotating the iPhone, only after a reload.
Also this is not for the iPad.

Anyone has a solution resetting the container-height without a reload and how's this done for the iPad?
smooth
Posts: 1493
Joined: Sat Sep 09, 2006 7:30 pm

Clues http://www.vrhabitat.com/
Nice!

Regards, Smooth 8)
Image
Joop Greypink
Posts: 12
Joined: Mon Aug 09, 2010 3:02 pm

Found a solution for fullscreen on iPhone and iPad by adding an a css file as well as an additional javascript file.
Commented in html file of attached solution files.
iphone-ipad_set.zip
fullscreen HTML5-solution for iPhone/iPad
(3.08 KiB) Downloaded 445 times
User avatar
dp.math
Posts: 69
Joined: Sat Jun 07, 2008 10:00 am

Joop Greypink wrote:Found a solution for fullscreen..
Hi Joop may be a small cleaner than your index file?

regards, mimmo
Joop Greypink
Posts: 12
Joined: Mon Aug 09, 2010 3:02 pm

Hi Mimmo,

Don't understand what you mean.....

Joop

dp.math wrote:
Joop Greypink wrote:Found a solution for fullscreen..
Hi Joop may be a small cleaner than your index file?

regards, mimmo
rolling-stone
Posts: 4
Joined: Sun Oct 17, 2010 9:32 am

i posted this in answer to another post but thought it should be here too...

k.ary.n / thomas - please accept my apologies and delete my post if for some reason I'm not meant to have borrowed from your work or if this is bad advice... congrats on version 3, still in beta and already brilliant! I was about to buy krpano when I saw the new HTML 5 feature!

I think this is quite a good way of auto detecting.... (although it still needs thorough testing on an actual ipad/iphone - no guarentees it works perfectly) and as I've been helped so much from reading this forum I thought I should help out... i'll try to be as clear and concise as possible. If you edit the attached files and folders as instructed it should work.
virtual-tour.zip
(21.69 KiB) Downloaded 311 times
1. The attached folder, named "virtual-tour", includes an html file (tour.html) similar to the one I am using... open it and change "example.xml" and "example.swf" to your starting files (first file in the tour)... adjust the flash file's width and height as necessary. (you will find HTML5 width and height in the inline styles and set to 100%. this is so it starts in "full screen")... once again, needs more testing. save tour.html and close it.**

2. Paste all your swf and xml files loose in this folder ("virtual-tour")

3. Add the HTML5 specific jpeg's (all images, all sizes) to the folder named "images"

4. Open the folder named "resources", paste your skin file here (must be name "skin.js" unless you change the link in tour.html).

5. Add the images for your skin. NOTE: I've got mine in the folder named "skin-images" but you may have to do a find and replace in skin.js to change the file locations of the buttons or put the skin images where it's looking for them.

6. upload the whole folder (virtual-tour) to your server and link to tour.html to open...

**no other links in tour.html need changing but you can add your google analytics code at the bottom (once again, anyone have a better way to add google analytics?) and change anything you want once you understand it. i just thought this would be a good way of getting started.

That should be it... unless i've missed something it should now use the HTML5 tour for safari5/ipad/iphone (still needs testing on iphone ipad) users and Flash for everyone else.

Ideas and corrections are welcome if (more likely, when) anyone spots a problem... i'm not much cop with javascript so i've done this blind...

please feel free to test the one i've done already... go to http://www.stmaryskenton.org, scroll down and click "Launch Tour".

I've done mine slightly differently... You'll notice i've had to fudge it slightly to make it work in a fancybox iframe!!! it will show the flash file in the fancybox if no html5 support but In safari5 (and hopefully ipad/iphone) it shows an image link which opens a new window with the html5 tour... thats the only way i've got it to work full screen for html5 users, from the same link, using the fancybox iframe (html5's fullscreen mode doesn't work in a fancy box). As it's only a small number of users that will see the html5 version i figure they can click one more time for now.

KNOWN ISSUES: I need to do a proper skin for both versions and not all the files open looking in the right direction!!!! Probably countless others...

Hope this helps,
Nick
HJTravels
Posts: 29
Joined: Fri Oct 05, 2007 7:04 pm

Wow, this has helped me a great deal. My only problem is that I can't seem to get the Flash version to show up at 100% vertical in the Auto-Selecting page, not sure why it's not working. But it squashes the Flash down. I have posted the regular Flash page and one set to 900px vertical as samples, but not sure why it squashes the Flash when it's set to 100% vertical. HTML5 Version works 100%.

Auto-Selecting Page, 100% height and 100% width
http://www.easyviewmedia.com/test/index.html

Page with Flash at 100% width & 900px vertical
http://www.easyviewmedia.com/test/index-900.html

And Simple Flash HTML page from Pano2VR with 100% height and 100% width
http://www.easyviewmedia.com/test/index-flash.html

Any ideas or help would be greatly appreciated.

Thanks,
Dan
Post Reply