Problems making an iphone interface

  • Hi all!

    Thank you very much in advance for the help.

    I am trying to make my own interface to be used within iphones. I don't own one so the only thing I can do is test it in safari and ask kindly to some friends to test it in their iphones.
    This is a screen shot of the interface using safari in my PC.

    Unfortunately it doesn't look like that on iphones. According to all the visitors "there is only a little red dot at the bottom, too small to be clicked" *sad*
    So this is the link to the virtual tour:

    http://www.clients.tourvista.co.uk/vt/bmag/html5_only_index2.html (only for HTML5)

    There is a different version of the interface here:

    http://www.clients.tourvista.co.uk/vt/bmag/html5_only_index3.html

    I thought the issue was related to using "crop" so I made this one using individual images rather than a bundle. But that's not it.

    I would be very thankful if anyone could help me to find what is going wrong.

    Cheers!

  • Hi,

    first - add the "viewport" meta tags from the default krpano html examples,
    without that it's not possible get the native iphone/ipad resolution,

    then - the internal krpano resolution (for a theoretical fullscreen) on the iphone is 960x640,
    that means only on the iPhone4 the pixels will be shown 1:1 and on the iPhone3 (with 480x320) the pixels will be downscaled automatically, but the working/designing resolution would be 960x640,

    best regards,
    Klaus

  • Hi!

    Thank you for your quick reply Kalus!

    I have added the meta tags from the HTML file as you suggested to fix the resolution issue.
    Although seems that there is some improvement, apparently it is still too small. (Again, I haven't seen it by myself...)

    Should I increase the altsize attribute to make the button bigger?

    Thank you very much for all you help and hard work!

    Cheers

  • HI Raphael,


    Its just an ickle bit big

    There is another issue with iphone interfaces and that is orientation. If in wide view obviously you loose alot of height. 2 possible work arounds are % wdith and height or a warning message on tour start to say "This tour is best viewed in portrait mode"

    Anyway nearly there with your box, hope this helps.

    best wishes,

    tom

  • Brilliant! A screen shot! That will definitely help.

    Also I can see that the available space for a menu is actually 320 x 415 instead of 320x480, due the bars at the top and at the bottom.

    The landscape and portrait orientation is a big issue indeed. I think that what I will do is to display the instructions and the menu horizontally, as it is the best view for virtual tours. Maybe in the future it will be possible to define two type of interfaces depending on the device orientation.

    Thanks again for all your help Tom!

    Cheers!

  • Third one lucky (I hope)

    http://www.clients.tourvista.co.uk/vt/bmag/index.html

    The menu's height is less than 230px so hopefully will stay inside the screen both in landscape and portrait position.

    Please can anyone test it in an iphone please? *whistling*

    The fully functional virtual tour with floor plan, hotspots and infospots works properly in my android tablet (using flash). Mobile devices with Android should get a simpler virtual tour with the buttons interface.

    Thank you very much indeed!

  • Hi Rafael,


    I tested last night on my iphone but there was fatal error - xml parsing failed - so i thought you maybe working on it. This morning is the same, but I see the in web browser the tour is working, so you may or may not know about this issue. Check it on safari developer thingy for iphone and you should be able to see why.

    Best wishes,

    tom

  • Thanks for testing Tom.

    Yesterday I changed something in the javascript code that made it don't behave properly.
    Apparently this is ok:

    But this one doesn't work, as whatever device is used, it always loads main.xml, hence the parsing error.

    Now it should work properly...

    Thank you very much for your help Tom!!!

  • Hi there,

    Please do help your self:

    Source

    There is some kind of problem showing the source in main.xml file (doggy characters), so I have created this other file in order to make it readable.
    Sorry if I don't go into detail how I did the floorplan effect, but everything is in the code. Just make yourself a big cup of coffee and go for it *smile*

    Regarding the fade in thing on the map, that is a tweak of this plugin I purchased:

    External link

    I'm not sure if post a direct link is ok, but that's what I used.

    I hope this helps.

    My best regards

    Rafael

Participate now!

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