Smooth scrolling HTML5 "responsive" pans?

[Hopki]

The link I clicked was the HTML5 link:
http://www.mountainvisions.com/html5tes ... seCr2.html
The next video shows the first link, HTML5 then the second link QTVR.

HTML5 vs QTVR.mp4

(4.18 MiB) Downloaded 1263 times

Regards,
Hopki

[ktshasta]

Hopki, Sorry, I just looked at the video - trying to do things too fast. But that is NOT smooth scrolling to me. That is the user putting their mouse down and dragging the image around. What I'm after are the way the pans work in the old Quicktime and how they work in Flash. I know it can be achieved with HTML5 because I've seen Dave's on various devices and also some examples on the krpano site.

Am I not describing what I'm after well enough?

kt

[Hopki]

ahhhhhhhh, ok got ya,
Go to the HTML5 output and under the advanced setting tab deselect invert control.
Regards,
Hopki

[ktshasta]

YES!!!!! This is what I was looking for! I knew it was something simple.

THANK YOU Hopki and Dave!

Hugs,

kt

[360Texas]

Well, glad that worked out well,

Just not sure what they finally decided to do regarding the setting ?

[ktshasta]

Dave, apparently I had that "invert control" selected in the Advanced Tab. With that deselected, the pan scrolls smoothly!

kt

[360Texas]

Ok.. but which multi res value set are you using ?

I mean your 20kx10k pano is exceptionally large. 4 times larger than my 5000 x 2500 or 6000 x 3000

[ktshasta]

Dave, I'm sure they were the wrong values, so I'm going to do more testing and follow your advice on making all the levels evenly divisible by the lowest tile level.

kt

[ktshasta]

Dave, a quick question, you say your images are 16 bit. Are they jpegs? My jpegs are 8 bit. Only the original raw neff files are 16 bit.

Thanks,

kt

[360Texas]

This work flow is probably more than you want to know... but its worth repeating every few years as our work flow does not change if any.

For us to get the most from our aging full 35mm sensor Canon 5d (original flavor) we always shoot RAW .CR2 . Nikon is .neff.

Camera is set for Aperature Priority f/8 allowing the camera to choose the proper shutter speed.

We use the focus ring set to hyperfocal distance of 0.9 as found at dofmaster.com.

This keeps ALL in focus from the lens film plane mark "0|" starting 10" in front of the lens glass to infinity.

Our lens is a mature Sigma 8 f3.5 180°. We use a Fanotec Nodal Ninja Ultimate R1 with 4 +1 images tilted up 7° to cover the zenith.
The +1 is rotation click stop position 1.
1st image with the WhiBal.com White Balance Reference Card. Its like an 18% gray reference card.
2nd image is at click stop position 1 with out the gray reference card.

On our site.. the 7th Street Bridge we used an 18' MrotatorHD telescoping from Agnos.com (Italy) using the same technique.
Typically we us a Manfrotto tripod. On trips to Mexico we use a Monopod.

We move the original .CR2's to a folder on our external 3TB WD hard drive.

We open a group of 5 .cr2 images at one time in Adobe Camera Raw converter version 8.6 (ACR ).

In ACR "Select All" 5 images, and using the white balance adjustment eye dropper click the gray reference card in image 1.
This will white balance adjust ALL the images.

Still in ACR we click the LENS Correction tab for color and enable [x] Remove chromatic Aberration.
Because the Sigma 8mm FE (and other FE lenses) have Chromatic Aberration its necessary to align the Red Green Blue channel pixel layers together.
The Red Channel seems always to be off center creating red/ orange trace lines around darker objects (read focus blur).
Aligning the channels removes the slight blur and produces a much sharper image.

When we are satisfied with the technical corrections we save only the 4 the corrected images out (less the whibal card #1 image)
In ACR below the image find Work Flow settings ... click it and an output dialog box opens. We set the Color Space Depth to 16bits /Channel and the 4368 x 2912 px res to 120 pixels per inch.
Then click SAVE file extention to .TIF (non compressed file type)

We never use .jpg because saving JPEG more than a few times introduces compression artifacts (read errors) into the saved images. More saves = more compression artifacts.

Now we have 4 .TIF 16bit color depth images. The maximum Jpeg color depth is 8 bit or only 1/2 the colors available in Raw format. (actually there are 32 bit )

We use PTGui Pro for stitching and output of 16bit .TIF equirectangle image for use in Pano2vr image converter.

Bigger images are always better as you always make smaller images if needed. But not the converse (smaller to larger).

You probably already knew this.

[skyfocus]

Hi 360Texas,

Maybe a bit off topic .... but

I was wondering if you haven't got issues with the menu you are using in one of your examples http://360texas.com/gallery/crhosp/crhosp.html
I'm using the same kind of menu structure and recently I try to move to multi-resolution in flash and html5 to handle most of the mobile devices out there.
It is now looking better than my first tests, but I still experience issues ....

I've created 1 flash skin for the desktop and two html5 skins to have a big menu on a big screen like tablets and a small menu for mobile phones.

I have a iPhone4s and an iPad3 to test it with. And the menu works fine on these devices. The correct skin is loaded (using a little extra javascript to determine the correct screensize).
A customer tried it on both a Galaxy S2 plus and a Galaxy S3 and experienced a problem with the menu. There are two buttons on top of each other that toggle the menu in and out just like your menu. On de Galaxy S2 plus and S3 it looks like the button is pressed twice resulting in a menu that moves out and directly in again. This makes the menu unusable on these devices. On the other hand on a Galaxy S4 it does work !

See: http://www.skyfocus.nl/SkyFocus/Tours/Salland-test/

I let my customer also test your tour and it has exactly the same problem.

regards,

Arjan

[360Texas]

Drop down Menu issues - double click ? We did test the hospital menu with our Samsung GS4 using the default web browser (from Samsung default program set) and the downloaded to GS4 full version App Google Browser version 38. We also tested with our iPad 3 and iOS 8 with Safari. Both devices worked properly.

Its the browser used by the smartphones and probably not the smartphone itself.

The menu seems to function properly as it sometimes seems like it wants a double click or I just need to hit the hot clickable zone over the text area inside the button.. meaning the entire white filled area is not active.. only the hot/active area above the text. AND I agree all the menu buttons need to be spaced and enlarged for small cell phone screen /fat fingers probably like mine.

Its good to know the cell phone or device manufacture and version being used for testing. However, its more important to know what browser being used. Because many folks like their own flavor of browser and they do download Chrome, IE and other HTML5 content aware browsers. And smartphones now have sufficient ram to hand downloaded browsers. My test browser on smartphone is Chrome ver 38. For tablets (our new test tablet is Surface Pro 3 with Win8.1) uses IE 11x.

I will look into rebuilding the drop down menu (Martin Hopki(n)s sample using larger buttons and buttons spaced further apart. More later

OH and I really like your pole panoramas - your fly out menu is very suitable for small phone screens. Using our 27" desktop PC and Chrome 38, your buttons appear large.
I did use our GS4 to look at your Pole Panorama. The buttons were scaled down to fit the small 5" smart phone portrait oriented screen while still large enough for human finger tip. They also fly out AND all still fit in screen portrait width screen. THIS IS GREAT planning and work !!!

Thanks for the show and tell.

[skyfocus]

On a S4 it does work, it's the S2 and S3 that have issues. And you are right it is also browser dependent. Both devices tested the menu's with the Samsung native browser on it, but on the S4 I also tested with the Samsung browser.

Tomorrow I can get my hands on a S3 to test it more thoroughly, I'll get back on that.

Meanwhile I'm rewriting my menu to not have toggeling buttons. Should be possible.

Another thing I noticed while testing the various devices is that on new phones like the S4 and the Nexus 5 there is a kind of race-condition (all browsers). I use a little script to determine the screen size that is used, if it's bigger than 740 pixels wide, it will use the big menu, if it's lower than 740 it will use the small menu. It always selects the big menu the first time it's starting on these devices, reloading the tour selects the correct small version. Adding a timed delay to the tour startup will solve this issue.

regards,

Arjan