Poor quality of pans on mobile devices

[ktshasta]

Hi, I've been experimenting with various output to try to achieve a better, sharper pan as viewed on my iPhone 5s. Dave has graciously checked out one of my pans on his Android device and thought that pan looked OK. But I'm still not satisfied with the quality especially compared to what I'm seeing on my desktop machine and display. That pan was 8000x4000 with levels of 2600,1300 and 650.

I decided to make a new pan and use a higher resolution this time - 12000x6000 image a little over 200 megs. The multi-res levels I used were 3000,1500 and 750. The iPhone 5s is supposed to have a screen res of 1136x640 pixels. Is there something else I need to do to make it look better on an iPhone? It still looks very blurry to me.

Here's the higher res pan embedded in another page: http://tinyurl.com/ktlngva - scroll down just a little ways.

And the same pan as straight output from Pano2VR: http://tinyurl.com/o6fr7fo

I'm not seeing much quality difference in the embedded vs. the straight output. Except that the skin seems to be responsive on the straight output page.

Can someone take a look at see what the quality is like on their mobile device? Is there something I'm missing about getting the quality down for these mobile devices? I've check out this pan on an iPad Air, also and the quality is not as good as my desktop display.

Thanks for any help!

kt

[ktshasta]

I think I know what is going on with my pans. They are not "responsive" and scaling down on my iPhone and iPad, hence they are looking "zoomed" in and not the correct FoV. Even though the frame is scaling down, the pan inside is not.

Garden Gnome wizards - can you please tell me how you are getting your pan on this page under Examples to be responsive? https://ggnome.com/pano2vr

It is an iframe and I'm using the same parameters that Hopki gave me earlier for iFrames. The size is 640x480, but it won't scale down with those settings. It only seems to scale down when I make the horizontal size 100%. What the heck am I doing wrong?

I feel like I'm SO close to figuring this out. I would really appreciate the help!

Thanks,

kt

[Hopki]

Hi kt,
Multi resolution looks at logical screen size, please see this link.
iPhone 5: Width: 320ps Height: 568px however the viewable area is even smaller.

The link to the non framed panorama will still use the lowest levels when viewed on the iPhone.
The iFrame in your page is 640 x 480px so this is the size the player will see and serve up the 750 tiles also.

What may also be a problem is your viewing limits. If you prevent zoom you may not zoom enough to load the higher levels.
The best thing to do is look at the tiles being loaded, to do this please see the web server tip found here.
When you open the page on your iPhone you will see the tiles that are being loaded. Zoom in and see if all the levels are being used.

The Garden Gnome website is using the ggpkg as its a Drupal site. Setting width to 100% makes the ggpkg responsive.
Try doing this with your iFrame?

Regards,
Hopki

[ktshasta]

Hi Hopki, Thanks for your reply. I had to take a break from all this and am now back at it. I started a reply post yesterday, but then had to leave my computer for a little while and when I finished the post and tried to post it, I lost it all, since it was wanting me to log into the forum again. I'll try to remember just what I wrote.

I decided to change my tile settings to 3000, 1500, 750 and 375. My pans are 12000x6000. I realize this is a little big, but I'm really trying to keep the quality high. This setting seems to be giving the best, sharpest output on my iPhone and iPad. I do limit the zoom to about 30, since anything more than that shows out of resolution images and I don't want the users viewing that. So far, everything is looking a lot better on my mobile devices. Since I can't seem to get the HTML5 output to work in a formatted web page, I'm simply linking off to the full screen pan output by Pano2VR.

Now, I'm trying to figure out how to add a simple, but nice looking "back" button to the Simplex skin. In the skin editor, there is an action for going to a specific URL, but I just need the coding to go back to the previous page each time. I've also left a post in the Skins forum area, looking for some help with this.

Thanks for your help - any other ideas with the skin editor would be much appreciated!

kt

[360Texas]

Humm let me see what I have for show and tell.

I placed an .svg [X] button which could very well been a design your own transparent 24bit .png in our skin that says "Return to Gallery" meaning my gallery is "back one browser page".

In the skin I placed this .svg button ( or a 35x35 pix .png ). Then I selected the button and assigned it:

Position
ID named "Close"
Position = relative to lower left corner of the skin
Size = is 35 x35

Appearance
Default .. no scaling etc

SVG or use you own design 24bit .png
default settings

Advanced
default setting (nothing)

Actions
Mouse click action 'Go to URL' parameters 'javascript:window.history.back() ' target blank
Mouse Enter action 'Show Element' parameters 'blank' target 'ReturnGallery'
Mouse Leave action 'Hide Element' parameters 'blank" target 'ReturnGallery'

See Jack's Demo page and Jack Hardy 2 Node Demo [our 360Texas back yard] panorama :

http://360texas.com/jack.html

Hope this helps

[ktshasta]

Thanks Dave! I'll try this out and take a look.

kt

[ktshasta]

Hi Dave, I followed your instructions below and was able to get my back button formatted with my other buttons, but there is no action happening. I simply want the action to be to return to the previous page (where the pan was linked from). It seems like my target for the Mouse Enter and Mouse Leave would be different than your ReturnGallery. I'm not sure what to put there.

Thanks for any help.

kt

[360Texas]

May we see your panorama with the history X back link ?

Your URL please ?

The mouse enter and leave are only turning show and hide the text information "Return to Gallery" words

The skin text words appear below our Circle (X) so when you mouse over.. they show /hide "Return gallery".

Mouse enter is like on mouse over show 'display skin text words "Return to Gallery" '
Mouse click is the history return back one page
Mouse leave is like on mouse leave hide 'display skin text words Return to Gallery" '

Sorry I should have provided this before. For your convenience here is the skin set for small smart phone:

Cryptic file name really describes the function of the buttons in skin: left right up down + - full screen .ggsk

copy paste this skin in the same folder as your project. OPEN YOUR PROJECT. Click on our SKIN.ggsk file which will open the skin.

So now you have our skin open and your project.

We are going to copy and paste the tree element shown as (X) Close over into your current project.

In our skin.. find the (X) Close skin element. Tap or select this element and copy

IN your project $/ SKINname (which you just opened) now find a clear space in the TREE and paste it. Now the X close is in your project tree. You will need to click and drag it up so it is near your 'Controller' skin element.

X .png replace with your new .png or .svg

(X) Close.png icon

close.png (1.82 KiB) Viewed 7713 times

Skin

lrud+-fs.ggsk

(24.16 KiB) Downloaded 163 times

[ktshasta]

Hi again, I did get this finally to connect up. But I had to put the actual URL for that particular page in there under "Parameters". Wouldn't there be a universal command to just return to the previous page? Your "javascript:window.history.back()" was not giving me anything.

I decided to leave my "Back" text on for now and see if that will be more helpful for users. But now I can't get the back button to not open the web page in a new browser window. I'm not putting anything in the "target" area, but it somehow thinks I'm putting in "_blank" or at least acts like it.

Sorry, I don't have this uploaded yet. Got to walk dogs now between rain showers and then I'll upload and give the link.

Thanks for your help!

kt

[360Texas]

If you are testing local on your machine.. it might function properly until you get it on your server.

Check the javascript snippet in our skin...

Have fun walking your puppies... looking forward to seeing your project on the server.

[ktshasta]

Hi Dave - you were right, it just wasn't working right on the local server but works like a charm online! Here's the link if you want to take a look. Both pans have the new skin and it just barely fits on my iPhone. I might get rid of the "info" button, if it looks like we won't need it.

http://tinyurl.com/knx4dms

Thanks a bunch for your help Dave!

kt

[360Texas]

Your worth while panorama work serves this site very well. I can almost feel like I am also wearing waist high waders and digging holes along the stream for plantings. I had to look up and learn a bit more about this type of volunteer work. http://cift.pair.com/shasta/RiverMender ... e5_05.html

I learned that riparian-zone restoration is the ecological restoration of riparian-zone habitats of streams, rivers, springs, lakes, floodplains, and other hydro-logic ecologies. A riparian zone or riparian area is the interface between land and a river or stream.
http://en.wikipedia.org/wiki/Riparian-zone_restoration

By the way we used to live in North Eastern Oregon. Its not too far on the map from your River Menders work is located. We were with the Corps of Engineers at Umatilla Army Depot constructing the infamous Incinerator. We lived in Hermiston Oregon for 3 years. After that we returned to Texas and retired.

Constructive feed back:

On panorama 5/05 there appears to be a cloud stitch error. This can happen if the clouds are moving too quickly between click stops. Not much you can do out in the field to prevent this issue.

Possible post processing fix: Lightly clone or blur the stitch areas. You probably missed this stitch issue because it was located out of sight on the left or right image side seam.


In Photoshop, open your stitch panorama.
Toolbar /Filter\ | Other | Offset [Offset dialog box make sure (x) Wrap Around option is selected
On the Horizontal slider move the left side image farther to the left . The image will wrap around the edge far enough to see the cloud separation issue. Click OK and return to Photoshop work area where you can clone or blur the mismatch issue.

Return to OFFset and move it back to the approximate old position... Click ok and then save the repaired panorama.

The repaired pano then needs to be rebuilt and uploaded.

Sometimes I will do a Photoshop offset to place the miss located "center of interest" to the actual center of the panorama so that when the pano is opened for viewing .. my center of interest is seen first before auto-rotation starts.

[ktshasta]

Hi Dave, Thanks for you kind comments. And thanks for finding that stitching error! I usually do fix all that stuff in PS. Not a problem - I'll get that done. Isn't the offset filter wonderful! I use that a lot.

One question: Did the full tool bar fit on your phone? It barely fits on my iPhone 5s in portrait view which is smaller, so I'm hoping it fits on other devices as well.

The River Menders site is getting a makeover to be mobile friendly. You can see the old site here: rivermenders.net

Enjoy the rain you're supposed to be having down there. We've been getting some nice showers here in Boise.

Cheers,

kt

[360Texas]

Using Samsung Galaxy 4s and Chrome and AFTER very long URL name structure.. finally got to the 05 panorama. Argggg very long URL and very difficult to TAP into cell phone URL bar. After 3 attempts... I was able to see your tool bar on my smart phone.

Yes, the tool bar works fine. In portrait orientation 1st button is near left return arrow. Far right is the Full Screen button. Because the smart phone is a touch screen for arrows < up/Down > not sure if you need that button cluster. Maybe only the closely set < and > arrows will do for both cell phone and desktop screens.

If you need the existing toolbar setup viewing in landscape... might anchor/ position tool bar ... bottom far left corner instead of bottom center.

Glad I finally got your panorama working on our smart phone.

[ktshasta]

Hi Dave, Thanks for checking that out. Sorry, I should have sent a TinyURL - I just hate trying to tap in those long URLs, too!

Personally, I would never use those directional arrow buttons, but I noticed you use them all on your pans. Did you start with just two and then get feedback about that? I might be able to get away without the "info" button, which would free up some space.

And I didn't mean you should enjoy THAT much rain down there! Good grief! Sorry to hear about all the flooding.

Thanks for your help!

kt