Multiple HTML5 issues

Q&A about the latest versions
Post Reply
jmcilvaine
Posts: 48
Joined: Thu Oct 11, 2012 11:59 am

I'm getting much closer to a finished product for my Real Estate tour set up. I have created a project file that does the following:

1) Creates a flash version of the tour. I have no known issues with this that I can see so far.
2) Creates an HTML5 "desktop" version similar to the flash version but uses still images instead of small panos for the thumbnail "preview". I have this set to "prefer flash".
3) Creates an HTML5 "mobile" version. I will use a PHP script to detect the device and if it is a phone it will go to this version. Tablets will use the HTML5 "desktop" version.
4) Creates the thumbnails for tour
5) Creates a larger "preview" thumbnail that appears when the smaller thumb is hovered over for the HTML5 version. I may eliminate this in the future unless the is a better way to handle "mouse enter/leave" for touch.
6) I also have a droplet that creates the "preview" panos that appear when the thumb is hovered over in flash.

Known issues on the desktop HTML5:

a) The radar beam does not rotate on the floor plan. It works fine in flash.
b) The floor plan alpha does not go to zero (to fade out the floor plan) when I click on the floor plan hotspots. It works fine on the flash version.

Known issues on the mobile HTML5 (I only have a Samsung Galaxy S3 to test with)

a) The pano auto rotates even with no auto rotation set on the project
b) The floor plan toggle works on my mobile Chrome browser, but not the stock browser
c) The floor plan does not fade out when I click a hot spot (same as desktop).

Here is the "desktop" link:

http://tours.inmotionrems.com/demo/unbr ... 261953.php

Mobile link:

http://tours.inmotionrems.com/demo/tour ... _tour.html

I have also attached the project file and skins. Once GG can resolve the HTML5 Flat Pano and image scaling I will be able to make a beautiful "responsive" tour using pano2VR for panos and stills. I was able to build and upload this 11 node tour in about an hour with my current set-up. 6 months ago it would have taken me a couple days!
Attachments
html_mobile.ggsk
(1.34 MiB) Downloaded 214 times
html_fp_th.ggsk
(1.67 MiB) Downloaded 196 times
flash_thumbs_floorplan.ggsk
(1.67 MiB) Downloaded 199 times
2000_S_Ocean_Dr.p2vr
(12.7 KiB) Downloaded 184 times
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

jmcilvaine wrote:Known issues on the desktop HTML5:

a) The radar beam does not rotate on the floor plan. It works fine in flash.
b) The floor plan alpha does not go to zero (to fade out the floor plan) when I click on the floor plan hotspots. It works fine on the flash version.
Regarding html5 item 'b': You must have fixed this in the past week? Because the floor plan disappears completely for me in IE11 and Firefox 26.0 on a Windows 7 laptop.

Regarding html5 item 'a': Agreed, the radar beam does not rotate for me in IE11 or Firefox 26.0. Try this for starters:
Step #1. Open Firefox, and then open the Firefox Web Console. Click on Firefox in upper-left >> Web Developer >> Web Console
Step #2. Now visit http://tours.inmotionrems.com/demo/unbr ... 261953.php, in that same Firefox browser, and read the Web Console printout. The Web Console says 4 files are missing:
http://tours.inmotionrems.com/demo/unbranded/tools.php
http://tours.inmotionrems.com/demo/unbr ... etails.php
http://tours.inmotionrems.com/demo/tour ... _small.swf
http://tours.inmotionrems.com/demo/tour ... ils/$n.jpg

Step #3: Fix those missing file errors, then see if the radar beam still does not work. Javascript reads the web page from the top-down. Errors along the way may very likely stop the javascript from processing further, before the radar beam code has a chance to be included. So, for starters fix the missing file errors, then watch the Web Console again, because new different errors might then appear. Repeat the process until no more errors appear in the Web Console.

PS: IE has a similar Web Console. In IE click on Tools >> F12 Developer Tools
jmcilvaine
Posts: 48
Joined: Thu Oct 11, 2012 11:59 am

Thanks for your reply DonL!

1) The "tools.php" and "details.php" were actually added after I posted. I added those files to eliminate that error.
2) After scratching my head for a little bit, I discovered the "$n" errors were coming from the placeholder in the markertemplates so I created a couple "dummy files" so that there was something there. That eliminated those errors.

After that I tried opening the HTML5 project and got this error:

Error: WebGL: enable: invalid enum value 0xde1 pano2vr_player.js:

Also got a couple warnings:

Unknown pseudo-class or pseudo-element '-webkit-scrollbar'. Ruleset ignored due to bad selector.
Unknown pseudo-class or pseudo-element '-webkit-scrollbar-thumb'. Ruleset ignored due to bad selector.

Really have no clue why HTML5 wont work. If all devices would just support Flash life would be a lot easier....hehehehe
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi jmcilvaine,
The way yo have set up the radar beam is not how you would do it.
The reason for this is every node marker in the map has a spinning radar beam, ok you can not see them but it is happening and taking up resources.

How to set this up the intended way that you should do this to save host computers and tablets valuable resources.

I removed the beam from your marker_active.svg so just shows the red dot and then created a new beam.svg element.
Add the action to the markertemplate: Activate => Set Element Position => Offset X/Y: $self => Target: beam,
I had to manually add this to each of the marker_nodes in the floor-plan, but using 4.5 beta and the new skin you can just copy and paste the action.
As in your skin resized the elements to 80 x 80.

Moved the beam element as a child of the floor-plan but set it so it is behind all the marker_nodes. The beam element is position X:57 Y:68, the same as the floor-plan, so its starting position in the floor-plan is (0,0). Otherwise it will not locate correctly on the marker_nodes.

The first marker_node has the additional action: Init => Set Element Position => Offset X/Y: $self => Target: beam.
What will happen now is when the tour opens the init action moves the beam to the first node in the floor plan, marker_node1.
When you click on a different node and the node becomes active the activate action will set the position of the beam to that node.

This means only one beam element is needed.
I have attached the skin and the separate SVG elements.
Regards,
Hopki
Attachments
html_fp_th_skin.zip
(1.67 MiB) Downloaded 218 times
svg.zip
(1.86 KiB) Downloaded 206 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/
jmcilvaine
Posts: 48
Joined: Thu Oct 11, 2012 11:59 am

Thanks Hopki! This will give me something to play with tonight...:)

Question: I had this set up similar in Flash, should the flash skin be re-done the same way? Also I still can't seem to get the HTML5 map to toggle Alpha to 0 when a marker is clicked. It works fine in flash.

Thanks!

Joe
Post Reply