spheretoscreen not working on iPhone

  • The spheretoscreen function seems to return bad values when running on an iphone. I am running krpano version 1.16.5, testing on an iPhone 4s, IOS version 6.1.3.

    My application, which only uses the html5 viewer, does extensive overlays over the panorama. I dynamically calculate coordinates for the overlay elements using the spheretoscreen function. The calculations and the resulting overlays work perfectly in all the other environments I have tested, which include Mac/PC IE/Chrome/Firefox/Safari/Opera desktop environments, IPad2 and IPad Retina IOS, and an Android Nexus 7 using Chrome/Firefox.

    But on my iPhone I get strange values and the overlays as a result are misplaced. Suspecting that it might have something to do with device pixel ratio of the retina display on the iPhone, I came up with a test where I took the current pan and tilt of the panorama and called spheretoscreen with those values. If spheretoscreen is working properly I should get back values corresponding to the center of the div containing the panorama, and on all platforms that I tested, except the iPhone, that is exactly what I got back, within a tiny rounding error. But my device pixel ratio theory is wrong, since if that is what the problem is, with the device pixel ratio of the iPhone 4s being 2, I should get back doubled values. But that is not what I got:

    In portrait orientation:
    actual center point x: 140.5, actual center point y: 178
    spheretoscreen center point x: 300, spheretoscreen center point y: 251


    In landscape orientation:
    actual center point x: 220.5, actual center point y: 104
    spheretoscreen center point x: 460, spheretoscreen center point y: 103


    Very screwy. Note that in both orientations x more than doubles, but the ratios are not quite the same. Y increases by 41% in portrait, while it is only off by 1 in landscape. So clearly no simple doubling is going on.


    I tested on the iPhone using both the built-in Safari browser and Chrome. Both browsers returned the same incorrect values. Note that I also downloaded krpano 1.17 and attempted to test with it, but alas, at least for now, 1.17 has broken my application. I am still investigating that, and I'll only post about that if I can't figure out a fix. Also unfortunately I can't give you a web url to hit - for now my application is running only on localhost - I'm testing the other devices by hitting the fixed IP of my development machine within my LAN.

    Not Cheers,
    Larry Wieland

  • Hi,

    the spheretoscreen and screentosphere functions are working with krpano coordinates and they don't need to be the same as some Javascript x/y coordinates. There might be an offset (depending on where the krpano viewer will be embedded on the page) and also a different scale (depending on the viewport scale and on the krpano stagescale setting).

    Best regards,
    Klaus

  • Hi Klaus,

    So on to issue #2. I am not setting the stagescale variable, so it should have its default value, which you state should be 0.5 for the iphone (but if I understand correctly what you are doing it should depend on the device pixel ratio, so for older, non-retina iPhones it should be 1).

    I am assuming that the coordinates returned from spheretoscreen are relative to the container div in which the pano is embedded instead of relative to the entire page. Is this correct?

    Again I will get back to my development environment on Tuesday US time and if necessary will post a simple test page that I can provide you a URL for.

    Cheers,
    Larry Wieland

  • Hi,

    it should depend on the device pixel ratio, so for older, non-retina iPhones it should be 1

    No, that assumption is wrong, iOS devices are working differently and have 'virtual resolution' - the working resolution, the stagescale and the sizes will be always the same on retina and non-retina devices.

    I am assuming that the coordinates returned from spheretoscreen are relative to the container div in which the pano is embedded instead of relative to the entire page. Is this correct?

    Correct - with 'screen' the krpano screen coordinates are meant, they are from 0/0 to stagewidth/stageheight.

    When you need relative coordinates in the range 0.0 to 1.0 (inside the krpano container), divide the x/y coordinates return by spheretoscreen by the stagewidth/stageheight values.

    Best regards,
    Klaus

  • OK I have the solution. The values that are being returned by the spheretoscreen function are affected by the value of the stagescale setting. In order for the screen point returned by spheretoscreen to match up to a screen point within the html element within which krpano is embedded, I have to retrieve the stagescale setting from krpano, and then multiply both the x and y value returned by spheretoscreen by the stagescale value in my javascript code to get the proper screen point.

    In practicality this means that I retrieve the stagescale setting from krpano once at startup and then use it as a scale factor to be applied to the values returned by every call I make to spheretoscreen (which is a lot!).

    So I'm glad that I can make my code work and have it work properly for all platforms, but this behavior is counter-intuitive to me. I would think that spheretoscreen would apply the stagescale setting itself, but alas I'm sure that it can't be changed at this point without breaking a lot of people's code that expect it to work the way it is working now. I would recommend, Klaus, that you update the documentation for the spheretoscreen function to point out this behavior *smile*


    Cheers,
    Larry Wieland

  • Hi,

    I would think that spheretoscreen would apply the stagescale setting itself

    There is a misunderstanding - the spheretoscreen and screentosphere action are intended to work with krpano elements and withing the krpano layout system. All x/y positions and sizes of all krpano elements are in the krpano viewer internal coordinate system.

    Best regards,
    Klaus

  • If you intend, Klaus, that spheretoscreen be used only internally within krpano, then I am concerned that the methodology I have come up with to get Javascript screen coordinates, using spheretoscreen scaled by stagescale, is only a hack that may not work in future releases. In my application I am placing overlays over the krpano using SVG. I made the call early on in the development of my app that the internal krpano xml/scripting environment could not meet my overlay needs, but SVG is more than capable, provided that I can get screen points based on the atv/ath of elements within the panorama. Being able to do this, in my estimation, greatly expands the usefulness of krpano, not just for me but for your entire user community. I will thus make a feature request that you provide a method within the krpano javascript api to support this functionality.

    Cheers,
    Larry Wieland

  • Hi,

    scaling the coordinates by stagescale is not a hack and absolutely okay of course, it's just not the way the spheretoscreen/screentosphere actions should work by default. They are basically intended for usage with krpano elements - e.g. when dragging a hotspot in krpano.

    Using overlays over the krpano viewer is also okay of course, but there can be cross-browsers problems this way - e.g. when some browsers will require 'translateZ' hacks for correct event handing (touch detection).

    Another way for extending krpano, would be the plugin interface - this way some required browser hacks will be made automatically by krpano itself:
    https://krpano.com/docu/plugininterface/#js

    Best regards,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!