Ipad - full screen issues

  • Hi

    This is my second post on issues with full screen on ipad, it may later prove necessary to post code or alternatively to supply screen shots but first I will attempt a written description and see if that is enough to get any leads.

    I have not exhausted the possibilities that this is a bug of my own making but I have now managed to reproduce the problem with a pano I made very early on when I relied almost exclusively on the droplets supplied with krpano examples and toolkit so it seems unlikely that the problem is in the xml as I am seeing it with code from different sources.

    Case 1:

    1. Embed pano in html file - pano div is sized 700 x 450 pixels so smaller than the screen on either ipad or my laptop.

    2. Use menu buttons supplied in defaultskin.xml altered only so that the menu will appear on ipad - this is done simply because it is
    necessary to be able to transition to full screen to show the problem (remove the device="desktop" statement for each button) I simply
    need a fullscreen button to demonstrate the issue.

    I included seven lines duplicated lines of html so that I had a bit of content above the pano.

    hello<br> ( x 7 )
    <div id="pano" style="width:700px; height:450px;">

    This works fine - I cannot provoke the fault, I can alternate between full screen and 700x450 repeatedly using the fullscreen menu button, when the pano is fullscreen it "clicks" nicely into place on the screen and I cannot see any of the surounding webpage.

    Case 2:

    Increase the amount of content that appears above the pano, in my case I had 26 lines but I suspect it will depend on font size.

    hello<br> ( x 26 )

    <div id="pano" style="width:700px; height:450px;">

    Now the problem occurs and is consistent, if I scroll the page so that the bottom edge of the pano div is visible then I scroll several lines of "hello" off the top of the screen.

    Now when I tap the button for fullscreen a different and problematic behaviour occurs.

    The pano div gets bigger but does not align itself properly with the available display area ( basically the full screen size minus the safari top menu bar ) I can still see quite a lot of the surounding webpage and also see lines of "hello", I am still seeing content from outside of the pano-div because the pano-div failed to align itself properly to "click into place". The effect is pretty much like a "zoom webpage so pano appears as big as view area but offset pano so that it does not fully occupy view area.

    I can use my finger to now scroll the "missed" pano div so that it "locks into place" where it should have locked to give a correct JS viewer full screen effect. There is a definite "snap" behaviour - as soon as the pano-div is close to alignment it snaps into place decisively. Once in place it seems to be stable - after all there is now no control surface available outside the pano-div so actually there is no obvious method
    of moving the pano out of place once it has snapped into place.

    The problem now is that an area of the bottom of the pano div is now unresponsive, the menu does not work and I cannot pan the panorama using my finger if I place my finger in the bottom portion of the pano div. I can only get a response if I use the upper portion of the div.

    I am not sure but I think that the height of this unresponsive area may be related to the amount of mis-alignment when the "fullscreen div" failed to align itself properly - this is based only on subjective observation but it does seem that in cases where the mis-alignment is greatest and the pano div is too low in the screen area ( so that more webpage and more lines of "hello" still appear at the top ) then the unresponsive area at the bottom seems to be higher ( this can be tested once the pano has been moved on the screen and "snapped" into place ).

    If this explanation is unclear I can try and supply pics but it will probably mean taking photos.

    Any ideas?

    kind regards
    Jon

    Edited once, last by Jonnie (March 5, 2012 at 2:49 PM).

  • Hi

    I have been experimenting with the example webpage into which I embed my pano. Results so far indicate a high correlation between the problem and whether or not the webpage fits naturally in the ipad screen with no scrolling necessary.

    My "trimmed" webpage that is carefully constructed so as not to exceed the screen height (or more accurately available area after the safari browser has taken up the top portion) of the ipad has not yet demonstrated the problem.

    My "untrimmed" webpage that is longer than the available area exhibits the problem reliably.

    My impression playing around leads me to think in terms of a "view port" and its equivalent tactile area - lets call it a "touch port" which should be aligned (so that visual events and touch events occur at the same screen cordinates) but have become mis-aligned, the degree or severity of the misalignment being in some way proportional to the amount by which the webpage height exceeds the available view area.

    I dont know whether a "touch port" really exists within the ipad operating system but it is a useful device at a conceptual level to describe the observed behaviour.

    For instance when I have a full screen case which exhibits what I would like to call "view port - vs - touch port mis-alignment" then I do find that the bottom portion of my pano which contains the menu strip is unresponsive to gestures that I intend to control the pano - for instance I cannot exit fullscreen mode using the button intended to do this since this lies at the bottom of the screen.

    However this unresponsive lower portion of screen is actually responsive if I use gestures that are meaningful outside of the pano - for instance if I place my finger on the screen in this lower area and move it upwards then the correct response should be that the pano pans up.

    Actually what happens is that the whole pano view port is moved up the screen - this is more appropriate behaviour for a point outside of the pano "touch port" but inside the "touch port" of the surounding webpage, ipad "thinks" I am touching a point outside of the pano when I am actually touching inside the pano.

    Although at a visual level the pano occupies the entire available area and therefore we cannot "see" the surounding web page - if we think in "touch space" rather than "visual space" then the pano "touch port" does not occupy the whole screen because it is mis-aligned with the pano view port - actually the "touch port" of the surounding webpage occupies the lower part of the window and so thinkking in "touch space" - it is natural that ipad thinks I want to scroll the pano viewport up the screen rather than thinking that I want to scroll the scene within the pano viewport.

    I think that is an accurate rationalisation of the observed behaviour - only someone expert in ipad will know whether my talk of "touch port" mis-alignment is an accurate description of why the problem occurs or whether its just a useful device to describe a problem but no more meaningful than that.

    Kind regards
    Jon

    Summary Of Problem in brief steps

    1. Pano embedded as a div in a webpage - pano viewport smaller than available view area.
    2. Touch full screen menu button.
    3. Pano expands to an area suitable for fullscreen mode but the pano viewport is misaligned with the available view area so we still see some of the surounding webpage.
    4. Touching surounding webpage I can move the webpage and the pano and help the pano into position, when it is close it "snaps" into place - visually things now look right, an ordinary fullscreen pano display.
    5. The "touch port" however did not "snap" into place and is still misaligned, screen gestures performed with a viewport do not necessarily lie within the "touch port" corresponding to that "view port" - control of the pano is compromised and an non-graceful exit from fullscreen is necessary ( close browser ).
    6. "Touch port" is just a concept I am using to explain a problem.


    Edited 2 times, last by Jonnie (March 6, 2012 at 7:52 PM).

  • Hello

    Here is a link to an example that I made for illustration, it contains very little except what is needed to show the problem, I stripped out code that
    was not required. The code was taken from the krpano example directory "simple tour" I then modified for a simple menu, removed thums and
    changed the html so as to remove the overflow none css style statements which is required to show the problem.

    ( Issue is Ipad specific - Iphone not tested ).

    http://www.buymydreamhotel.com/pano/simpletour.html

    To reproduce - Ipad2 - safari - instructions are for LANDSCAPE view ( but problem may also be seen in portrait )

    1. Load page and scroll page up or down until two "hellos" are visible at bottom between pano and bottom of screen.
    2. Touch the fullscreen menu button.
    3. If the pano appears fulscreen exactly as expected then go back to step 1 and with the pano scrolled to different positions up and down the screen, repeat until the pano appears full screen size but mis-aligned.

    If the problem appears then you will probably see something like some lines of "hello" at the top of the screen and the further down the
    screen the pano is wide enough for the screen but is mis-aligned ( since of course the hellos should not be visible ).

    Now touch the screen in the vicinity of the "hellos" - you should be able to guide the pano into place, it will probably "Snap" into place.
    Now it should look like a normal full screen except that the menu is now dead - it does work and indeed you can scroll the whole webpage up by pusing it up the screen, it may be necessary to reload the page so as to recover from full screen.

    Behaviour varies for me but the above description is typical behaviour, sometimes the lower 25% of the pano becomes unresponsive sometimes less.

    Kind regards
    Jon


    Update: I re-used code from the krpano examples directory, I just did a "copy-replace" text edit on the names for the image tile directory name in the xml. I had not noticed that the original example code was using mobile images for all devices, there is a comment in the original xml. Since I have tested that the pano does reproduce the problem I will not correct this oversight - its not relevent to the problem.

    Edited 6 times, last by Jonnie (March 7, 2012 at 11:07 PM).

Participate now!

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