Page 1 of 2

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

Posted: Wed Aug 25, 2010 12:35 pm
by soulbrother
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 9414 times
I have used exactly those settings:
settings01.jpg
settings01.jpg (41.45 KiB) Viewed 9414 times

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

Posted: Wed Aug 25, 2010 1:32 pm
by smooth
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)

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

Posted: Wed Aug 25, 2010 4:54 pm
by soulbrother
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 :-)

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

Posted: Wed Aug 25, 2010 5:13 pm
by smooth
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)

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

Posted: Wed Aug 25, 2010 6:03 pm
by soulbrother
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 9391 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.

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

Posted: Wed Aug 25, 2010 6:06 pm
by 360Texas
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.

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

Posted: Wed Aug 25, 2010 7:36 pm
by smooth
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)

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

Posted: Fri Sep 03, 2010 11:44 am
by Biscott
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?

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

Posted: Fri Sep 03, 2010 11:09 pm
by Biscott
OK. It's working fine on iPad too.

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

Posted: Sat Sep 04, 2010 8:28 am
by smooth
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)

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

Posted: Tue Sep 21, 2010 11:57 am
by brianwatson
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

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

Posted: Mon Sep 27, 2010 2:04 pm
by k.ary.n
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.

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

Posted: Mon Sep 27, 2010 2:12 pm
by smooth
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)

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

Posted: Tue Sep 28, 2010 11:11 am
by brianwatson
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

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

Posted: Tue Sep 28, 2010 5:47 pm
by anahum
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.