krpano opens on pc, but not on ipad :(

  • Hi guys,

    I've been working on a new webpage generation process for our virtual tours, so that it will produce only one all-in-one page, and then dynamically switches page contents through javascript according to the user interaction (instead of loading a new ASP generated page for every user action). It works well on pc in Chrome, IE and Safari (even though not filling the whole height of the screen in IE9, don't know yet why), but not on the iPad.

    http://virtualtour.be/vtrs/virtualto…?downloadable=1

    So when you click a (360) icon on the floorplan, the idea is that it will hide whatever is presently on the page, show the "panodiv" section, and open an instance of krpano in it. When I do this on iPad, I get an empty screen, and when I view the source of the web page (using a javascript shortcut which I found on the internet), I only see two lines:

    <head><script src="/_swf/krpano/krpanoiphone.license.js" type="text/javascript" charset="UTF-8">
    </script><script src="/_swf/krpano/krpanoiphone.js" type="text/javascript"></script></head>

    I copied the above by typing, I hope there is no mistake. But the conclusion is that the whole rest of the code for the page seems to be gone!

    I pulled out most of my hair trying to solve this problem :( It goes wrong on the viewer.embed("panodiv"); part, but I have no clue why. I must be doing something terribly stupid, but what?

    Any help (or advice how to troubleshoot) is most appreciated!

    PS. Forgot to mention that http://virtualtour.be/vtrs/virtualto…?downloadable=0 is the old format, which works fine on iPad, but does load a new page for each button click.

  • Do you mean that on the first link (where downloadable=1), when you click on an 360 icon, the panorama actually opens after the three alert messages?

    I get an empty page where the panorama should open, both on iPad 1 and iPad 3. I don't know anyone who has an iPad 2, so can't say, but I would be very surprised...

  • Hi,

    the first link shows that Javascript error when clicking a spot:

    Code
    ReferenceError: Can't find variable: showPanorama

    you can see that error when enabling the Javascript console on the iPad or also in the Desktop Safari when enabling the Developer Tools,

    best regards,
    Klaus

  • Klaus,

    I'm truly sorry about that. I introduced that error by mistake after I had already posted here; I used an apostrophe to comment out a javascript alert line in showPanorama(), where I should have used "//". That is why showPanorama() could no longer be called.

    But now that this is fixed, the real problem is still there. Would you mind to have another look?

    Thanks!

  • Hi,

    what are these functions doing:
    $("#mainpage").hide();
    $("#panodiv").show();

    and what's the height of the parent element of the panodiv element?
    the parent seems to be the <body> element, but that element doesn't seems to have a height?
    so the height=100% can't work...

    best regards,
    Klaus

  • Hi Klaus,

    Thanks very much for looking into it.

    These are jQuery functions, a Javascript library. Specifically they hide the table with id "mainpage", which contains everything that is normally visible, and unhide the "panodiv" div section above it, where krpano should embed itself.

    I don't know if this is the cause of the trouble for krpano's embed function, but I never had any other trouble with jQuery.

    The 100% height was indeed an issue... I assigned now 100% height both to the <html> tag and the <body> tag on your recommendation, and it fixed the problematic behavior on IE, where the panorama would only fill a small part on top of the browser window (on Chrome it worked fine).

    But alas, it did not fix the problem on the iPad (according to a friend who tested it for me, as I don't have an iPad here with me). It still opens an empty page...

    Best regards,
    Ronny

    Update 17:10 - I just tried it at home, and indeed it still opens a white page with as page source only those two lines mentioned in my first page

    Update May 19, 2012 - I also tried with "jQuery.noConflict()" and then jQuery() everywhere instead of $(), but it made no difference, the problem of an empty white pano page is still there. I knew krpano is using the underscore (_) internally as a special variable, but never heard it also uses $() as a special function, but still I wanted to be sure.

    - Ronny D'Hoore

    4 Mal editiert, zuletzt von rdhoore108 (19. Mai 2012 um 13:20)

  • As far as I understand from other posts in this forum, there is a compatibility problem between jQuery functions and krpano, but nobody really knows what or where...

    So, since I really need to find a solution, I got a version to work on iPad that does not show/hide parts of the page to display a panorama, but uses floatbox instead to open the panoramas (click on a 360 icon on the floorplan):

    http://virtualtour.be/vtrs/virtualto…?downloadable=2

    However, now the button plugins (zoom, navigate, close, ...) don't do a thing. When I look in the krpano console, there is no warning or any message when I touch a button. (The normal interactions with krpano like panning and zooming by multi-touch do work.)

    The buttons do work on pc with the same url... (Of course "full-screen" won't work on iPad and I shouldn't show it there, but for now I didn't add any logic to distinguish between flash or html5.) And they actually do work on iPad in the normal online version of this webpage (which also uses floatbox). The strange thing is that the "plugins" and the krpano scripting for these buttons is exactly the same in the krpano.xml files for both links...

    How could I start to troubleshoot this?

    PS. on iPad, the first time I open a panorama, I do see a Javascript error on line 5 in krpanoiphone.js - "TypeError: Result of expression 'h' [null] is not an object."

    Thanks.

  • Your 2 link doesnt work. You can download safari on pc and either use simulatedevice or change the user agent to see how it would work on an ipad. It should be the same. I've never been able to see a problem on your links on my ipad... But one of them is broken.
    Im no js expert, but there are situations when there is a bad js syntax errror, all js stops. For instance, when you think you have a loop ended but it is not.

  • Sorry, that's fixed now. I'm still trying very hard to get it ready by the deadline, so I'm still working on it.

    It is still not clear to me what you exactly mean when you say you don't see a problem.

    With http://virtualtour.be/vtrs/virtualto…?downloadable=1, the problem is that if I click on a 360 icon, they open a white page on iPad 1 and 3. Do you actually get krpano?

    With http://virtualtour.be/vtrs/virtualto…?downloadable=2, krpano does open, but the buttons (plugins) don't work.

    You have an interesting point there about broken javascript. So that Safari freaks out on something which the other browsers just happily accept... But I assume that would produce an error in the javascript console, and I don't see any.

    About trying it on a pc in Safari and setting it to iPad user agent, I did that now, and there the source is still there (unlike when I do it on the iPad itself, there I only saw 2 lines of source), so things are maybe not as bad as they first seemed. I just need to figure out why on earth it's not appearing *confused*

  • Actually, I don't think my problem with the white page opening instead of krpano (first link above, with downloadable=1) is because of a javascript error, because when I put an alert just before "viewer.embed();", which is the very last line in the function, the alert still displays.

    One problem with iPad is that it updates the screen only after the whole showPanorama() js function has been processed. I've been assuming the problem is with the viewer.embed() function, just because the screen contents is still there on the alert above it, but really it should have been cleared already by the time the alert is reached, and replaced with the panodiv white screen.

    When I do the same on any other browser, the screen indeed has already updated to a white screen (ready to embed there) when the alert pops up.

    So again, the iPad doesn't make the debugging any easier :(

  • Weird,
    "1"
    javascript gives a
    krpano embedding error: there is no html element with this id: panodiv

    showPanorama('http://virtualtour.be/vtrs/virtualto…no004','floor_0');

    "2"
    TypeError: 'null' is not an object (evaluating 'h[e]')

    But I wouldn't use iframes for JS / ipad anyway. It's a good way to crash safari with everything loaded. Just use a single player/page with a normal link. Or deconstruct your html page with just the bare code, until you discover what causes the panodiv error.
    And use safari, it's easy to debug rather than an ipad.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!