center page in html5

[MPW]

Hello,
instead of fullscreen from the beginning I like a defined panorama-window centered on the page.
Until now I used the <div align="center">tag and it worked fine for my (prefered) flash AND html5 outputs.

On my pano http://www.mpwstudio.de/preview/turmmuseum/ it´s working for the flash, but NOT for the
html5. Over there the window is centered but the content is kind of offset. It´s working fine without the
<div align="center">-tag. Do you have any idea?

I´m lost when it comes to html-code. Is there a chance to implentate a module within Pano2VR-output settings
to have some more options for the html-site? Thinking of align center (also for html5), background-image.

[360Texas]

Using my Win8.1 PC and Chrome version 38.0.2125.122m which is HTML5 content aware.

Right mouse click verifies that your server delivered the FLASH version of the panorama not the HTML5 CSS3 version.

Looking at the page source code you have defined the align = center Flash to be an 800 x 600 px .swf

The output is centered horizontally on the page on my 2560 x 1400px @ 72pixels per inch screen.

2560x1400.png (106.75 KiB) Viewed 4504 times

[MPW]

Thank you 360Texas,

I also get the flash version without problems.
However when opening this pano on my Ipad and when receiving only the
HTML5 version I get the output also centered on the screen, but the room
which is shown is off center. It´s like standing not in front of the window, but left of it.
So the content is distored during rotating.
Maybe I also have to edit the xml-file?

[360Texas]

I am using iPad3 and iOS8.1 with safari.

Page opens: In portrait (long side up) panorama is too wide to fit on the screen... about 10px over hang on left and right screen side AND is set for align = centered

I assume it is HTML5 because Safari does not use flash.

In landscape (long side horizontal) the panorama is nicely positioned in center top to bottom and left to right.

All looks good for me.

[MPW]

Strange,

my Safari on the Ipad mini still produces this distortion on the left.
Made a screenshot (with a camera). I have highlighted the normal center position of the pano
with the red rectangle. You can see the more extreme distortion on the left side, while the right side is
nearly ....undistortioned(?). When ratoting the pano it swipes from out of the right, which is very unusual.
Still trying to find out the safari version. It´s the same in fullscreen.

[MPW]

...additionally found out that the nadir is also located next to the right side of the container, which
makes sense I think.
The hotspots are running out of their position in the pano as soon as they are leaving the right side....

[360Texas]

Thanks for the picture..it helps to understand your issue.

I am assuming that you are showing us the INITIAL field of view (zoom) settings upon entering the panorama. Meaning you had not tried to zoom in or out after you opened the page.

Distortion on the left and right side of the panorama is normal IF you have zoomed out too far.

You might look at your project VIEWING Parameters

PROBABLY MORE THAN YOU would like to know at this point.

Typically, we set these to:

Viewing Parameters/limits
Pan: Initial view - rotate the panorama around to your POINT of INTEREST like the door way so the first you will see the door then start auto rotation to right to see other points of interest.
Tilt: Initial view - at the doorway tilt up / down maybe to see less of the ceiling or floor
FOV: Initial view Zoom in or out to minimize the image barrel distortion. Typically that might be a default 70 degree WIDTH view on the horizon (scale is 120° full zoom out to 5 degrees full zoom in or pixelated view).

We use Min 50 and Max 110 settings.

Field of View (zoom): This is in degree view on the horizon where you need to limit the visitors ability to zoom in/out. Keeps the visitor from going to extreme zoom in / out. Our limit scales are Min 50° zoom in and Max zoom out 110° your initial view might be set at the middle at say 70° on the horizon.

Zoom out max 120°------> set limit 110°-----> set 70° initial view-------->50° min set limit ---------5° full zoom in pixelated . The red ranges are the zoom factors the visitor can not use.

The image center (50% top to bottom and 50% left to right) is the view where vertical and horizontal line seem normal. AND this image center is the pan/tilt where you need your initial point of interest to be located.

[MPW]

I already looked up the point of view parameters.

Yes,the photo shows the initial view but the problem remains if I use the zoom.
Zoom is restricted to keep viewers out of disturbing areas. I used a FoV of 75.
It´s OK on the flash.

But: all these settings normally influence the panorama on both sides symmetrically.
I know about the distortion when zooming to much. Here we have more distortion
only on one side. Like starting a pano, making a step to the right and start the rotation.
It´s offset. It´s like adding a deep blue rectangle on the right side of the skin.
Now you only see the middle and the left part of the pano, which looks unusual.

Maybe something changed from previous versions. There I opened the index-file in an editor,
entered my <div align="center"> at the right position and it worked for flash and HTML5 until changing to PanoPro.
I still use a flashfallback.swf`, it is positioned correctly by the tag. The html5 seems to
have it´s problems with this editing.

But I´m still wondering, why it´s only me, who is getting the strange html5 animation.

[360Texas]

my Safari on the Ipad mini still produces this distortion on the left.

Maybe other forum members using an iPad mini and its Safari browser might be able to replicate this ??

[MPW]

Thanks for all this.

I´ll also try to find a friend with the same hardware.
Beside this I meanwhile removed the center-tag from the index.html on a turmmuseum2.
Now also the HTML5 is working fine on my IOS (not centered any more of course).

Must be the html coding?!