A list of HTML 5 problems

[makiedog]

I'm a newbie with this latest Pano2VR version 3. While trying to publish iDevice compatible tours, I'm encountering the following problems with HTML5. I should also explain that the Flash version works fine using the same codes:

For HTML 5 output:
1) Toggle visibility of hotspots
Hiding/unhiding hotspot visibility doesn't work. It works for elements but not hotspot proxies with graphics attached.

2) Toggle alpha of elements
While this works on Safari on my Windows desktop, it doesn't work on an iPad2

3) Mouse over
I was hoping if you linger the finger over a hotspot I could trigger a text pop-up. HTML5 doesn't like it:(

For Flash output:
3) Anyone tried viewing it on an Android 3 tablet such as Galaxy Tab or Xoom? The performance is abysmal, even though the tours were small (800 pixel tiles), very slow and jerky. It is much worse on the Xoom. The same tour on iPad is super fast and smooth.

I think it would be good to have a list of exceptions for HTML5 in the Wiki, such as what features to avoid and what are the common ones between the 2 platforms. This way the developers don't need to be chasing known issues.

[Hopki]

Hi
Thomas has spent many hours coding to get the skin editor to work almost the same for Flash and Html5, but there is no escaping the differences.

The advice here is build two skins, think about the device that will show it, the iPad or the iPhone or both, you must always develop for the smallest screen. We have got around this on our Examples Tour by having two different tours, one for Flash and the other for the Apple devices, then we went one step further and had two different Html5/Css3 skins, one for the iPad and one for the iPhone.

Try the Example tour on the iPad then iPhone they are different: http://gardengnomesoftware.com/pano2vr_example.php

However for Html5/Css3 avoid using the Hide and Show actions as well as the Alpha. They will cause problems as you have seen by the sounds of it.
You can move an element, so slide a map off the screen etc, and also scaling works as well, so to hide something use the source and action, mouse click, set element scale 0/0.
To show it, set element scale 1/1.

The problem with having this listed in the wiki is that when it first came out the iPad IOS was good, these actions worked fine as well as large tile size for supper sharp panoramas, then Apple screwed with it and ever since things just have gone to poo.
The iPad 2 is a little better but not much, so what ever we write today may change tomorrow.

This is documented in the forum many times and the above is the only real issues as well as tile size, at the moment iPad is best at 960px iPad 2 a little more, but again I would not change it just encase that changes too.

Thomas was very disappointed with the Xoom flash player performance, lets see if the Play Books any better when it comes out. (UK)

Regards
Hopki

[makiedog]

Thanks Hopki, the problem with searching through all the post in the forum is one often doesn't know what to look for until one spends lot's of time testing to isolate the problems. I thought that's what wikis are for- documentation.

Anyway, regarding the Flash performance issue on Android tablets, I wonder if it has to do with Flash's inability to handle SVG graphics efficiently such as the Simplex buttons. I haven't checked Flash's performance on Android 2.2 or 2.3., I wonder if it performs better on these more mature versions. But chances are they'll be on smartphones and not tablets.

[Lucaliuk]

You can move an element, so slide a map off the screen etc, and also scaling works as well, so to hide something use the source and action, mouse click, set element scale 0/0.
To show it, set element scale 1/1.

Thank you for the tip

Luca

[Lucaliuk]

I've tried with scaling action...but in html5 it doesn't work. (with the same action, in swf format, is working)

Luca

[Hopki]

Hi
@makiedog
Using the search box above and just trying to keep to key words does shorten the list, but yes very time consuming. I also agree about the Wiki, perhaps it should be in there, ok ill put it in.....I was putting it off as said, whats good today changes tomorrow, but this does look like Apple will not fix this anytime soon, so in it goes, Using the Skin Editor, I will also add any other oddities as I find them or see them reported.

@Luca
The scale element actions should work without any problems, if you post your skin I will have a look.

Regards
Hopki

[360vr_nl]

Showing and hiding a small text box on a 'mouse in' and 'mouse out' works all right with a show and hide element command, is my experience. See here (the text boxes at the controls)

Unfortunately a 960 px panorama with skin crashes on the iPad 1 (and not on the iPhone 4) as where the same pano without skin works as a charm.
I think this is a memory issue, but lowering the quality of the tiles to 80% was not the answer.

[Lucaliuk]

@Luca
The scale element actions should work without any problems, if you post your skin I will have a look.

Regards
Hopki

Hi Hopki,
thank you very much for your kindness

I am not a god of the skin editor , but I do not understand why the scaling action works in SWF format and not in HTML5.

What I'd like to do is:
- bring up the "retour a la visite" botton when I click the hotspot with the magnifying glass icon
- bring up the pop up window with info about "Jules Verne" when I click on the hotspot with the " i "

This is the link for the download of the project (simplified and reduced): http://www.sendspace.com/file/2duzkp

Thanks again for the help

Lucaliuk

[Hopki]

Hi Lucaliuk

I have changed a few things and it is working.
If using for HTML5 you MUST remove all Hide and Show and Alpha actions as this will cause problems. This skin is full of them so I have made another with just a few elements so you can see it working.

How it works.

There is a container that is opening the Jules Verne Window, Container 14.
This lis linked to the Hotspot by using Hotspot Proxy ID.
So the ID of the Hotspot in the Hotspot Editor, in this case the ID is jules_verne.

The container has jules_verne in the Hotspot Proxy ID. The container then has teh actions to scale the window to 1/1. The window close button has the action to scale it to 0/0.

Regards
Hopki

[Lucaliuk]

Fantastic!
Thank you very much Hopki!!
Now I'm out of office if I can I'll try tonight or in the coming days.
I really hope that this practical example is useful to many users of the forum.

Thanks again
Luca

[shiruhan]

hey Hopki

i think Action 'Trigger click' also cause problems in Html5 output. it gives a 'slow script' error in Safari.

[Hopki]

Hi
Were are you using this action, can you post a skin?
Regards
Hopki

[dallasrab]

Hopki,

then we went one step further and had two different Html5/Css3 skins, one for the iPad and one for the iPhone.

Try the Example tour on the iPad then iPhone they are different: http://gardengnomesoftware.com/pano2vr_example.php

How were you able to accomplish this? I've downloaded your project files and still cannot figure out where you inserted the iPod/iPhone skin. Your Pano2VR files just have the Flash and iPad skins selected, but no iPod/iPhone skin.

I've tried to dig into your index.html file and see if there were any commands that directed a device to use this skin, but all I could find were the commands for flash to open the .swf file and for CSS3 to open the .xml file....and I'm not even sure if this is where the proper commands would be anyway?

I'm a little lost here. I'm trying to create a virtual tour with one flash skin and two html5 skins (one for ipad and one for iphone), and as you probably can see I'm having a tough time. Is there any way you could guide me in the right direction? I appreciate your help here Hopki!

Dallas

[Hopki]

Hi Dallas
Please see this KB document: http://gardengnomesoftware.com/wiki/Gen ... TML5_skins
Regards
Hopki

[dallasrab]

Hopki,

Thank you for the information and prompt response. I appreciate this...everything looks cut and dry, this is great. I'll let you know if I have any issues. Thanks again!

Dallas