Polygon-HotSpot not working on iPad1/iOS 5.1.1 and iPhone

Q&A about the latest versions
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

Good morgning,

I made a tour with 8 panoramas and linked them by a map and polygon-hotspots. In the first (start) pano I have a point-hotspot which contains a external link (URL), a polygon-hotspot to an URL and two polygon-hotspots to other panoramas. In the other panoramas ther are between one and four polygon-hotsports to "move" to the next/previous panorama. I created a flash and a HTML version.

Flash: all is working

HTML:
  • on PC: no problems, as in flash all is working
  • on iPad(iOS 5.1.1) and iPhone(iOS 7.1.1): moving, point-hotspot and map working as desired, polygon-hotspots: none of them is working
ADDING 10:51: button as mentioned in other topics added. I can switch visibility of polygons on and off. I used the action -> polygone mode -> 0 or 1. Result as listed above. With polygons on or off on PC as before, on iOS-Devices same problem.

Where is my bug??
Have a nice day

Christian
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

update:

I tried some settings. And then I transferred the html-file done by Pano2VR to my server and using this html-file the tour works on my iPad. So I looked around in my code and found nothing which blocks the polygon-hotspot and doesn't block the point-hotspot. Interesting is, when I go to fullscreen on iPad the polygon-hotspots are working!
Have a nice day

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

Hi Christian,
Testing this locally with Pano2VR Pro 4.5 final release and through the web server on the Mac running 10.9 I can not reproduces this.
I have tested with an iPhone5 and iPad 2 and Air.
Poly hotspots set to link nodes together using the drag and drop method from the tour browser as well as using the drop down combo box in the URL text field.
All working as should.

If your still having problems please can you giv eke more information regarding your platform, which version you are using and a step by step to reproduce the fault.
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/
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

Hi Hopki,

I worked now nearly the whole day on this problem and made the following random discovery:

on iMac with flash deactivated, on iPad with iOS 5.1.1 and iPhone with iOS 7.1.1

as long as I don't scroll on the webpage all hotspots are working. On all devices. When I scroll a few pixel down (with the mobile devices when changing orientation to get the tourwindow back in sight) or on the iMac to center the view the hotspots don't work. After scrolling up to the upper end they work again.

Here is the page with the tour: http://cbup.fr/Testserver/HdB/Inhalt/DE/Galerie1.html I switched on the visibility of polygon hotspots for the HTML-output (I tried all versions with always the same result, but so you can see them)


EDIT 17:09

The polygon hotspots are there and working. But they are not!! moving when scrolling. They kept their absolute position on the screen (hardware). When you scroll for example 200px down, the hotspot is 200px below its indicated position.

??????

Other question, maybe I made a heavy bug: the name of the html-output file has no influence? The page in which the tour is integrated is in a other folder. I correct the skin.js with a text-editor to set the correct path for the images. All images are "produced" in one "images"-folder. I hope there is no context in the pano2vr-editor and the path where the files are written. The xml-file, the images and the both .js-files are written in the folder I need, the generated html-file is written in the folder with the .js-files and xml-file but not used.
Have a nice day

Christian
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

Ok, next period of testing done. It seems to be a problem with my page-layout. But that I won't change.

My principle web-layout is:

Main-Container with 80% width and 100% hight centered. Inside a Head-Container with full width of the Main-Container, 215px height and fixed to top. Then a Help-Container with full width of Main-Container, 100% height and 230px padding-top. Inside this Help-Container is the Content-Container with full width of Help-Container, height auto and scroll auto.

I need the Help-Container to have the scrollbar if needed only from bottom of the Head-Container till bottom of the screen. If I use only the Help-Container the scrollbar begins on top of the screen behind the Head-Container which looks not very pleasant. This constellation causes the problems with the polygon-hotspots under HTML-use. If deleting the Content-Container and using the Help-Container as only container it works. But as mentioned with the scrollbars on top behind the head. No way.

At the moment I think I have two possibilities:

a) ignore the mobile world (maybe possible if doing a separate mobile-website) or

b) make a link to the pano-tour on the page and start the show in a new tab/window under full screen

Or maybe someone has a good idea how to fix the problem with the nested containers.
Have a nice day

Christian
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Christian, there are a couple of rectangles in your skin.js file. One is named, "Schutzschirm" width: 850px and height: 450px. The other is named, "Startauswahl" width: 852px and height: 452px. Likewise, the page inspector seems to indicate one or both of those rectangles have a z-index that is over the polyhotspots when the pano is displayed in the page layout. However, in fullscreen apparently one or both of those rectangles no longer blocks the polyhotspots.

I don't know your answer, however I recommend that if you were to backup your skin.js file for later restore, and then delete those two rectangles to confirm whether which rectangle is blocking the polyhotspots on the normal page layout, but not in fullscreen?

Don
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

Hi Don,

thanks for looking to my problem.

The rectangle "Schutzschirm" covers the whole window to protect the navigation-symbols. First the rectangle with the loading comes, it went off when finished loading. Then the rectangle "Startauswahl" is shown with the choice to start with or without music. If chosen one way to start itself get alpha o and the rectangle "Schutzschirm" gets alpha 0 too.

So I copied as you proposed the skin, kicked off this three rectangles and created new files for the HTML-output. Uploaded and the same result as with the rectangles :-(

If you scroll a little bit down, the tooltip appears when your mouse is the same "amount of pixels" below the displayed polygon that you scrolled up. It seems the "virtual polygon" stays in absolute coordinates of the screen until you leave the window. And the tooltip is normally displayed next to your mouse-indicator. When scrolled a bit ist comes in relative position to the displayed polygon. So the position to display the tooltip is correct concerning the window, the polygon-sensor-area has moved...

But while writing this I have an idea - I will look if I use somewhere the position-entry im my css. During fullscreen there is no css active (not one of mines). Maybe...
Have a nice day

Christian
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Christian, here are two syntax errors on "Galerie1.html" that might be enough to cause the page not to display as expected:

1) An opening <html> tag is missing. Please locate a <html> tag immediately before the <body> tag at approximately line 16 of "Galerie1.html".

2) In "Galerie1.html" at approximately line 192 you started to write a comment, and did not finish. Consequently the remainder of the page is commented. The code currently looks like this:

Code: Select all

        </div> <!-- SpaceKeeper -->
        <!-- 
        <div id="Fuss">
          <script language="JavaScript">
                            var dLM = new Date(Date.parse(document.lastModified));
                            var day = new Array("Sonntag","Montag","Dienstag",
                                "Mittwoch","Donnerstag","Freitag","Samstag");
                            var month = new Array("Januar","Februar","März","April","Mai","Juni",
                                "Juli","August","September","Oktober","November","Dezember");
                            var date = dLM.getDate();
                            var day = day[dLM.getDay()];
                            var year = dLM.getFullYear();
                            var month = month[dLM.getMonth()];
                            var hours = dLM.getHours();
                            var minutes = dLM.getMinutes();
                            var seconds = dLM.getSeconds();
                            if (date<10) date = "0"+date;
                            if (month<10) month = "0"+month;
                            if (hours<10) hours = "0"+hours;
                            if (minutes<10) minutes = "0"+minutes;
                            if (seconds<10) seconds = "0"+seconds;
                            document.write("&copy; SARL Hôtel de Bordeaux  1990 - "+year+"&nbsp; &nbsp; Aktualisiert: " +day+", "+date+". "+month+" "+year);
                      </script>
        </div> <!-- Fuss -->
    </div> <!-- Schirm -->
</body>
</html>
and should look like this:

Code: Select all

        </div> <!-- SpaceKeeper -->
        <!-- My Correctly Written Comment -->
        <div id="Fuss">
          <script language="JavaScript">
                            var dLM = new Date(Date.parse(document.lastModified));
                            var day = new Array("Sonntag","Montag","Dienstag",
                                "Mittwoch","Donnerstag","Freitag","Samstag");
                            var month = new Array("Januar","Februar","März","April","Mai","Juni",
                                "Juli","August","September","Oktober","November","Dezember");
                            var date = dLM.getDate();
                            var day = day[dLM.getDay()];
                            var year = dLM.getFullYear();
                            var month = month[dLM.getMonth()];
                            var hours = dLM.getHours();
                            var minutes = dLM.getMinutes();
                            var seconds = dLM.getSeconds();
                            if (date<10) date = "0"+date;
                            if (month<10) month = "0"+month;
                            if (hours<10) hours = "0"+hours;
                            if (minutes<10) minutes = "0"+minutes;
                            if (seconds<10) seconds = "0"+seconds;
                            document.write("&copy; SARL Hôtel de Bordeaux  1990 - "+year+"&nbsp; &nbsp; Aktualisiert: " +day+", "+date+". "+month+" "+year);
                      </script>
        </div> <!-- Fuss -->
    </div> <!-- Schirm -->
</body>
</html>
I'm not saying the above are the overall problem, but little things like that add up, and may stop the page from displaying properly...except perhaps in FullScreen mode when the pano breaks out of the page layout....

Don

EDIT: On my comment #1 above the <html> tag goes just before the <body> tag.
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

Hi Don,

I don't know where I lost the HTML-tag... I placed it and deleted the old footer. But there is no change in the problem, I agree with you that one simple syntax error could cause this problem. What I don't understand that the movement in the panorama works and the poly-hotspots too if you don't move the entire page up or down. Where is my logic error that keeps the hotspots on a fixed position.
Have a nice day

Christian
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

I found the solution for the polygon-hotspots in my case. I have a basic-box which has a width of 80% and a height of 100% which is only to have the box-shadows on left and right always from top to bottom. Even if the content of the actual page needs only a part of the screen. Now I replaced in the css-file the "height: 100%; by only "min-height: 100% !important;". Now I can use the hotspots.

The bad thing is the scrollbar is now outside my page on the right side of the screen. Ok, it would be a compromise.

BUT:

I added some text below the panorama. I scroll down and all of the text will be "under" my head-box". But not the panorama. It went straight above over my head. :shock: :shock:

Maybe I should go to the next do-it-yourself-store, buy some garden gnomes and play outside with them instead. :roll:


EDIT:

Set for the head the z-index to 9999 and it seems to work. With safari, firefox, opera and chrome under OSX. Later I check what it looks under Windows. :)
Have a nice day

Christian
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

No pro without cons :x

Set the head to z-index 9999 is fine as long as you use full screen on your computer. See what iPad is doing:
Bildschirmfoto 2014-06-04 um 13.58.23.png
Bildschirmfoto 2014-06-04 um 13.58.23.png (664.53 KiB) Viewed 9902 times
I made the screenshot with the simulator - but in real it is the same :-(((
Have a nice day

Christian
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Christian, seems you made progress since your last post, because it is looking good to me. The polyhotspots are working. Here is a simulator view showing Galerie1.html:
http://www.responsimulator.com/?url=cbu ... erie1.html

Only one javascript error at the moment: The "hideUrlBar" function is missing. If you want it, then provide it somewhere for use on Galerie1.html. If you don't want it, then remove this line from Galerie1.html:

Code: Select all

// hide the URL bar on the iPhone
setTimeout(function() { hideUrlBar(); }, 10);
Here is a screenshot of the "hideUrlBar" error from my Windows 7 laptop >> Firefox >> Developer >> Web Console. Scroll down to see the error:
201406041319.Galerie1_screenshot.png
201406041319.Galerie1_screenshot.png (155.68 KiB) Viewed 9893 times
Don
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

Hi Don,

yes some progress - the question is in which direction :lol: :lol:

It seems good if not in full-screen-mode. With full-screen the head of the webpage is on top :(
Have a nice day

Christian
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Now I see in Galerie1.html the <div id="KopfFarbe"> header appears on top when the pano is in full screen mode.

At the top of Galerie1.html, you link to two CSS files like this:

Code: Select all

<link href="../../CSS/Allgemein.css" rel="stylesheet" type="text/css" media="screen">
<link href="../../CSS/Galerie1.css" rel="stylesheet" type="text/css" media="screen">
The two CSS files have some redundant entries shared between them. Both have an errant entry at the very bottom that looks like this:

Code: Select all

/* clearfix */
.clear
And should either be removed, or look like this:

Code: Select all

/* clearfix */
.clear {
}
Despite the redundant entries, and I'm not 100% sure, but I figure the entries in Galerie1.css will dominate, because Galerie1.css is written below Allgemein.css on the Galerie1.html page code, and therefore Galerie1.css loads last. So, either way, both CSS files define #KopfFarbe as having a z-index: 9999. That is very high. Adjust the #KopfFarbe z-index to less than 899 or less and #KopfFarbe might display under the pano instead of above it while in full screen mode. (Why? Because I quickly peeked in the pano2vr_player.js file. <I'm in a rush today.> Looks like the <div> for the pano is z-index: 5000 and the hotspots are z-index: 900. So, anything below 900 might do.) Seems worth a try?

Don
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

Hi Don,

ok for the clear-class. I have to set the z-index to over 1000. At the moment I set it to 1050. With z=1000 the polygon-hotspots are behind the head but the point-hotspots not! With z=1050all of the player-window is behind the head. With the result in full screen the head is visible too.

I - as an absolute non-professional programmer - do not understand to give a div-box a z-index to keep it up. At the moment I make it "on top" for the browser it keeps there for the iOS-devices because they are doing the full screen not really full screen but full browser frame. So the browser is still the displaying area with the instruction to keep the head on top.

By the way - the point hotspots are not doing all they should do on iOS-devices. If I have a text and a URL for a point hotspot, the URL part is working. The text is never displayed.
Have a nice day

Christian
Post Reply