html5/css3: Resolution settings for i-pad / i-phone ?

Q&A about the latest versions
User avatar
soulbrother
Posts: 547
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

Hi all,

as we are still in the beta phase, tests of different resolution and tiles settings possibly not finished, but lets collect here all informations of settings for the
i-phone G3
i-phone G4
i-pad

As it is a bit confusing to read about different settings, I want to ask again:

What are the recommended settings, what are the settings that are tested and should work well ?

Lets speak only about a simple Full-Sphere Panorama without hotspot, without any links to other panoramas, no tour.

Lets keep this thread clean from other topics, lets talk mostly about settings of:

cube face size:
window size:
FoV mode:

And settings in the mobile tab:
Max. Screen Size:
Tile size:

Just to make shure that the thread will be clear arranged ;-)


Please check this pano: http://panobilder.de/html5-1/pavillion-21-1.html

Could users of i-phone and i-pad please test it and have also a look on the nadir,
because you can detect the tile size that haas been loaded and used by your i-phone/ i-pad
nadir.jpg
nadir.jpg (37.24 KiB) Viewed 9365 times
I have used exactly those settings:
settings01.jpg
settings01.jpg (41.45 KiB) Viewed 9365 times
Attachments
settings02.jpg
settings02.jpg (30.18 KiB) Viewed 9365 times
smooth
Posts: 1493
Joined: Sat Sep 09, 2006 7:30 pm

First thing you need to do is make iPhone friendly url's (no caps, no numerals and as short as possible).

My 3Gs iPhone shows it at 640 as per your instructions.
The viewing experience is poor because of the layout. In vertical mode the panos only in the lower half of the screen about 60% with ugly text above (black on white).
In horizontal mode the pano is set in from the left about 10 pixel and down from the top about 10% with white background filling this area.
Double tapping brings up the menu and fills the browser window (but not fullscreen) just full browser window in both orientations. All menu buttons work as expected.

Regards, Smooth 8)
Image
User avatar
soulbrother
Posts: 547
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

Thanks for your notice !
The layout was simply the default html template, but O.K. lets go ahead with

Step 2:

I created anotherone with a shorter URL:

http://panobilder.de/i/pav.html

In the Nadir again there is written the size of the loaded cubes,

this time I created with the Fullscreen html template from Hopki:
Find it there: http://gardengnomesoftware.com/forum/vi ... 825#p18684


All other settings are exactly as shown in the first example,

@all Apple mobile-users: PLEASE test and let us know your results and also other helpfull hints,


Big THANKS !!!


and best regards, sent from Munic :-)
smooth
Posts: 1493
Joined: Sat Sep 09, 2006 7:30 pm

OK, url much better (still can be improved)
Name the HTML file "index.html" and put it in a folder named pav.

The URL becomes panobilder.de/i/pav instead of http://panobilder.de/i/pav.html

Now the browser window is full but the fullscreen button does nothing. Both vertical and horizontal show same good result.
Buttons work apart from fullscreen as stated, info (maybe you put nothing?) and change drag/mouse direction type.

Tile size as before for me on my iPhone 3Gs is 640.

If I save the bookmark to my "home screen" and open it from there it is a much better viewing experience without the Safari browser "bars" invading the real estate.

Regards, Smooth 8)
Image
User avatar
soulbrother
Posts: 547
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

lets go ahead with

Step 3:

same settings, same layout ( fullscreen) but shorter URL:

panobilder.de/ipav/
index.html ;-)


But in the Infofields should be a text ( same in example no.2), I can see it in my Safari Brower...
Infotable should be shown the center area of the screen...

screenshot:
screenshot-safari.jpg
screenshot-safari.jpg (55.15 KiB) Viewed 9342 times
Again:
@ all apple i-pod and i-phone users, please test it and let us know your results, especially, what tile-size is loaded on what device.
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

We might also suggest... The browser names that currently support HTML5?

IE 8 = NO
Chrome - my version [can't find version number] shows only 1 very small square tile that rotate from front to back.. but no rotation around the panorama. The tool bar buttons < > and i are the only 3 that seem to work. the full screen button only moves the small tile to the center of the screen while the tool bar does not move to screen center.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
smooth
Posts: 1493
Joined: Sat Sep 09, 2006 7:30 pm

URL is great! :D
Though .com is a button unto itself where as .de isn't.
So panobilder.com/ipav is actually less typing. :wink:

All worked this time except the useless fullscreen button that does nothing.

Regards, Smooth 8)
Image
Biscott
Posts: 8
Joined: Fri Sep 03, 2010 11:27 am

Hi all,

I want just to say that on my iPod Touch G3 (OS4), it seems that I got the same results as Smooth. It works fine. The Nadir says "640". The "FullScreen button" doesn't seems to work. But the "Toggle Mouse Way button" is OK.

Did somebody already test it on iPad and iPhone G4?
Biscott
Posts: 8
Joined: Fri Sep 03, 2010 11:27 am

OK. It's working fine on iPad too.
smooth
Posts: 1493
Joined: Sat Sep 09, 2006 7:30 pm

Biscott wrote:OK. It's working fine on iPad too.
I'm guessing he would like to know what the tile size is you see on the iPad :wink:

Regards, Smooth 8)
Image
brianwatson
Posts: 10
Joined: Tue Sep 21, 2010 11:48 am

Hi,
I get 1600 tile size with my iPad.

The pano opens "full screen" (not strictly full screen because the url and favourites bar are still visible) and the fullscreen button does nothing. My own qtvrs open in a smaller size, and the fullscreen button toggles "fullscreen". I can't see why this difference, and I would like to see REALfull screen!

Brian
User avatar
k.ary.n
Gnome
Posts: 616
Joined: Wed Aug 15, 2007 1:02 pm

Hi Brian,

You won't be able to get your image to go to "real" fullscreen, because this simply can't be done with Safari Mobile. Fullscreen here means resizing to fill the browser window. The URL bar will always stay on top.
smooth
Posts: 1493
Joined: Sat Sep 09, 2006 7:30 pm

k.ary.n wrote:Hi Brian,
You won't be able to get your image to go to "real" fullscreen, because this simply can't be done with Safari Mobile. Fullscreen here means resizing to fill the browser window. The URL bar will always stay on top.
Unless you save it as a short cut (+ add to home screen) and call the panorama from cache. In that case you will get real fullscreen. Still, the fullscreen button is useless with Safari.

Regards, Smooth 8)
Image
brianwatson
Posts: 10
Joined: Tue Sep 21, 2010 11:48 am

Thanks,
Well at least I now know iPad visitors to my site will see, and that there is no way around that (yet).

For my own use, another way I found was to import all the files for each panorama into GoodReader, and view the html file that way, which DOES show the whole thing, without the URL bar.

Many thanks,

Brian

www.brianwatsonphoto.co.uk
User avatar
anahum
Posts: 172
Joined: Tue Apr 21, 2009 4:43 am
Location: Chile
Contact:

k.ary.n wrote:Hi Brian,

You won't be able to get your image to go to "real" fullscreen, because this simply can't be done with Safari Mobile. Fullscreen here means resizing to fill the browser window. The URL bar will always stay on top.
Karyn, if you visit from an iPhone these panos I created, you will see that the URL bar can be hidden (only the top and bottom bars remain) --> http://demo.360panotours.com/ip

I posted another question about how to achieve this with a ggt (in this case I used some js and css code provided by another forum member (Joop Greypink).... but it would be great if this can be done using a standard ggt template. Please your comments.
Post Reply