Smooth scrolling HTML5 "responsive" pans?

Q&A about the latest versions
ktshasta
Posts: 54
Joined: Fri Sep 25, 2009 8:14 pm

Hi, I must be doing something wrong, because the HTML5 pans I have output do not have smooth scrolling like the Flash ones do. Instead you have to move the image with your mouse like you would do in Photoshop. On the krpano site they show pans that are smooth scrolling and supposedly HTML5. Is Pano2VR able to output this? What am I doing wrong? I want to be able to produce "responsive" (i.e. scalable pans) that will look good on all mobile devices as well as desktop.

Thanks for any insight!

kt
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Please, do you have a website URL where we too can see your work?

This is our responsive site. Our HTML5 w/ flash fall back panoramas were developed to display full screen enabled so they will scale to the device screen size. On your desk top you may wish to manually drag your browser screen to a smaller size to see how the panorama scales to the device size.

(tested with PC IE 8.1 IE 11 and Chrome 38// Samsung GS4 Chrome // Microsoft Surface Pro 3 with Win8.1 and IE 11 // Apple iPad 3 iOS 8 and Safari)
When you click the link.. they ALL open in full screen resized to device screen.

Depending IF your browser is HTML5 content aware you will get to see the html5 version display. If your browser is not html5 compliant then the server will download the Flash version.

Visit is our gallery content. http://360texas.com/gallery.html
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
jare
Posts: 365
Joined: Thu Mar 19, 2009 1:26 pm
Location: RU/CZ
Contact:

Advanced settings > Movement > Inertia
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
With HTML5 if the cube faces are to large this can cause jerky moment.
Reduce the cube face size or better still use multi resolution.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
ktshasta
Posts: 54
Joined: Fri Sep 25, 2009 8:14 pm

Hi, Thanks for all the replies!

Dave - your site looks great and your HTML5 pans scroll nice and smoothly - just what I'm trying to achieve! Your site looks just fine on my iPhone, by the way. For any of you wanting to quickly test your responsive web site, here is a great page that will show you how it looks in many mobile formats: http://www.responsinator.com You can be looking at a site and click on the bookmark for this responsinator site and it will automatically show you the site you were just looking at in all the mobile formats - way cool!

So I'm afraid we don't have any HTML5 pans on a working web site right now. That is what I'm trying to figure out, but I'm not getting that smooth scrolling like Dave is achieving (and many others are, I'm sure).

I do have the "Inertia" option checked in the Advanced settings.

And it's not just jerky movement - it's like there is NO movement. You have to put your mouse down and move the mouse from left to right to have the image move at all. It's not the same as Flash or the older Quicktime. It's like the sphericals you see in the Google PhotoSphere site. I can't find the one pan we submitted to that now, or I would share that. Same crappy scrolling, though. I'll try to upload an HTML5 pan I've been experimenting with and let you know the URL once I do. I'm also going through all the Pano2VR help files again to see what I'm missing.

At least I know smooth scrolling IS possible with HTML5 and with Pano2VR - I just need to figure it out! :-)
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Our panorama image is 6000 x 3000 /16bit
Ok, appears that probably you need to redo your panorama set to use Multi resolution for both Flash and HTML5 output :

Our Flash Output will generate the compiled .swf with all panoramas.
Settings
cube face at 1250
Quality 90

Display 640 x 480

Autorotate
Enable Rotate
Pan Speed 0.07
Delay 5.0 seconds
Return to horizon 2.0
Change node "never"

Our multi res settings are: [ same as HTML5 so they will over write and use [flash and html5 use the same tile set]
[enabled]
level Tile Size 650
1 pixel overlap w/ switch bias default 0.040

Levels
2600
1300
650

HTML [disabled]


Our HTML5 Output Will create all the required tiles
Settings:
cube face at 1250
Quality 90

Display 640 x 480

Enable Rotate
Pan Speed 0.07
Delay 5.0 seconds
Return to horizon 2.0
Change node "never"

HTML tab
Full Screen [x]

Flash fallback player [x]
flash fallback file [none}
prefer Flash if available [none]

output File file: [output\yourname. html]

Our multi res settings are:
[enabled]
level Tile Size 650
1 pixel overlap w/ switch bias default 0.040

Levels
2600
1300
650

Others would agree that smaller level set of values might be better.. but for now please lets try the above levels.

Thanks for the iPhone feed back.. that helps a lot.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
ktshasta
Posts: 54
Joined: Fri Sep 25, 2009 8:14 pm

Hi Dave, Thanks so much for sharing all your parameters. I'll take a look at those. For the time being, I did just upload an HTML5 pan so you all can see what I'm talking about as far as the LACK of smooth scrolling. Take a look at this one:

http://www.mountainvisions.com/html5tes ... seCr2.html

It's not showing up full screen and no skin for now. It's the smooth scrolling I'm really after. :-)

BTW, we have this same pan on our site with the old QT player here: http://www.mountainvisions.com/QTVR/Ida ... ecr2f.html

But if you don't have QT, is won't show.

Back to the drawing board!

kt
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

We used to live in Oregon before moving back to Texas.

And we visit since 1999 every year Cancun MX read 85° clear 100 foot horizontal visibility Caribbean water every year for SCUBA and snorkeling trips

As I remember those Walla Walla, Oregon stream waters were near freezing LOLLLLL. [ Read dry suit required.]

Your panoramas might need autorotate

HTML5 and Flash Advanced Settings :
Control
Sensitivity default 8
Movement [x] inertia
Mouse [. ] disabled [. ] Invert control (no selections)
double-click [ .] toggle full screen (no selection)
Mouse Wheel: [. ] (no selection) [x] Invert
keyboard [.] no selection
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
skyfocus
Posts: 268
Joined: Sat Jun 12, 2010 10:52 am
Location: The Netherlands
Contact:

I followed this thread and I tried the proposed settings with multi-resolution. It sounds great, using the same tiles for flash and html5 and it takes away the mobile browser headache.
But .... when using these settings the output is far from smooth and responsive. Starting the pano up (windows 8.1 firefox latest) only takes about 10+ seconds and when rotating I see
white flashes in the screen. I tested it only on a windows machine, this is my default machine and if it is not working there I stop trying
other devices and browsers. I do have a big skin file with a big menu structure in it, but this was not a problem with the config I'm using now with normal flash output
and 3 mobile resolutions ....

De you have a demo project I can these settings with ? Just to be absolute sure to have the same settings ....

Regards,

Arjan
Windows 10 Pro x64, Pano2VR pro V6.1.13 , Browser latest Firefox
Website: https://www.skyfocus.nl/
ktshasta
Posts: 54
Joined: Fri Sep 25, 2009 8:14 pm

Hi Dave, I actually live in ID, not OR. Although I was born in OR, I couldn't stand the rain and moved to ID where it hardly ever rains and the sun shines a lot.

So I tried a new pan with all your parameters and still not getting smooth scrolling on the HTML5 version. My image was much larger than yours, about 20,000 x 10,000, but I went ahead and used all your numbers on the cube face, tile sizes, etc.

Why should I have to use the auto rotate? I don't mind using it, but I want the user to be able to scroll on the image smoothly like with the Flash version and also be able to scroll on mobile devices. You are able to achieve this with your pans. I still can't figure out what I'm doing wrong. Any ideas???

Frustrated! :(

kt
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Your panorama loads a bit slow for me, but that said while it is loading and after it has loaded it is very smooth.
Please see attached video.
smooth.mp4
(4.21 MiB) Downloaded 2048 times
This was on a Mac Book Pro.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Sorry Martin, don't have QTVR so get an err on load.


I have a brother (professional photographer)who is now retired and lives in Pocatello.

Viewed on Dell 27 monitor All in one PC Win 8.1 w/ Chrome version 38.xxxx. 8gb ram, 2gig video card, connected to internet at 12 mbps.
I did take another look at your panorama and since it does not auto rotate I can only see very smooth rotation using my 4 way keyboard arrow keys.


Repeat for clarity: Keyboard rotation was very smooth. When zooming in.. I can almost feel the cold clear water.


OK... your 20k x 10k panorama might be referred to as a gigapixel flavor panorama.

I think the apparent lack of your smooth rotation might be due to the viewer is having difficult time loading all the tiles.

After searching the forum for "gigapixel" I found these multi-res setting might work for you.

http://ggnome.com/forum/viewtopic.php?f ... res#p36867
Title multires optimal tile settings for 20x10k equi

Level tile size 512px
Levels:
6144
4096
2048
1024
512

Key is getting 512 to divide equally in to 6144 or whole number in this case 12
6144 /512 = 12
4096 /512 = 8
2048 /512 = 4
1024/ 512 = 2
512 / 512 = 1 or level tile size

= too much information ?
If your selected value of 6346 / 512 = 12.494 this will generate fractional tiles and you will get 100+ or so more tiles than necessary.

Using these levels should generate groups of tiles without having fractional tile images. After generating a set of tiles browse down to the tile image sets and you should see whole image tiles or images that contain no fractional image tile white space.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Dave,
Click the link smooth.mp4 to download.
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Got it Thanks
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
ktshasta
Posts: 54
Joined: Fri Sep 25, 2009 8:14 pm

Hopki, You are viewing the QuickTime version which does scroll smoothly - but alas, QT is not being supported, so I'm trying to get the same smooth scrolling results with HTML5, so that the pans will play on iOS devices and others.

kt
Post Reply