Zoom problems on the iPad: Twixl/InDesign

Q&A about the latest versions
Post Reply
User avatar
TJacoby
Posts: 12
Joined: Wed Jan 17, 2018 10:22 am
Location: Columbus, Ohio
Contact:

I have created a number of cubic panoramic shots for use in an iPad app I am working on.

The app is being designed and developed using Adobe InDesign, with the Twixl 5.6.4 extension and Twixl Publisher 5.6.4.

I have created ten cubic panoramas in Pano 2 VR, and they all seem to work just fine when I test the app in the Twixl Viewer Classic app on my iPad. There is no complicated interactivity, and no skins. Basically just pan, zoom, and tilt. So far so good.


THE PROBLEM:

I have one VR which is not cubic; rather, it is just a single panoramic photograph shot on my iPhone. The dimensions are 4090 x 1006 pixels. It is basically just a rectangular photo that is about four times wider than it is tall.

I have created 2 test pages for this app in InDesign/Twixl that are identical in every way. Each page has a "Web Viewer" that contains the same index.html and image files. The only difference is that the "Web Viewer" on page 2 is about twice as tall. The panoramas are designed to zoom, tilt, and pan. Page 1 works fine. Unfortunately, page 2, once the image has been zoomed in on, cannot be zoomed out, at least not zoomed all the way out to the original starting position.

The "Web Viewer" has options to control the width and heigh and positioning of the rectangle, but no controls to change the size or orientation of the actual contents inside the rectangle (which are in this case the index.html I generated in Pano 2 VR).

I don't know if the problem is with the code generated by Pano 2 VR, InDesign/Twixl, or a weird Webkit problem on the iPad.

Any help or advice is greatly appreciated.
Tim Jacoby: Multimedia Designer and Educator
Think. Create. Innovate.

https://timjacoby.com
User avatar
TJacoby
Posts: 12
Joined: Wed Jan 17, 2018 10:22 am
Location: Columbus, Ohio
Contact:

Here are screen shots with explanations. This first example works fine.

page01.jpg
page01.jpg (257.77 KiB) Viewed 4550 times

This example is where the zoom-out problems are occurring.

page02 copy.jpg
page02 copy.jpg (325.48 KiB) Viewed 4550 times
Tim Jacoby: Multimedia Designer and Educator
Think. Create. Innovate.

https://timjacoby.com
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

I've not use the Twixl platform, though I am aware of it. My experience is with the Adobe DP, Mag+, Oomph (now deceased) platforms.

I notice that even though you have made the window larger to 1024 x 552 you are still loading the same size image 4090 x 1066. What happens if you take the 4090 x 1066 image and add black bars top and bottom to bring it to a size that matches the ratio of the window, 4090 x 2206, and load that into the larger window?

It seem to me as though the image and the frame have a relationship that requires the ratios to be the same.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
TJacoby
Posts: 12
Joined: Wed Jan 17, 2018 10:22 am
Location: Columbus, Ohio
Contact:

I notice that even though you have made the window larger to 1024 x 552 you are still loading the same size image 4090 x 1066. What happens if you take the 4090 x 1066 image and add black bars top and bottom to bring it to a size that matches the ratio of the window, 4090 x 2206, and load that into the larger window?
[/color]

Thanks for the comment!

I tired adding black bars to the top and bottom. That at least allows you to zoom in zoom all the way out. Unfortunately, zooming, panning, and tilting happen so quickly that the actual photograph disappears totally offscreen and you are looking at just one of the black bars. Its not just annoying--its very confusing. Like "wait, where did the photograph just disappear to?" because it happens so quickly.

All I am really trying to do is move the image up, down, right, left, and zoom in/zoom out. Since its a flat image, it really doesn't need to be treated like a typical cubic VR. There is no distortion of the image. Its really just zoom and move, like you would do to any photo in, say, iPhoto.

I'm wondering if there is a simple HTML tool that offers just a simple photo zoom/move option.
Tim Jacoby: Multimedia Designer and Educator
Think. Create. Innovate.

https://timjacoby.com
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

? have you tried input your panorama as a "Cylinder"

Otherwise suggest

In your photo editor open to create a new image as 4090 width x 2045 height px (makes a 2:1 canvas only). Width divided by 2 = 2045 new height.

Then open your panorama ... then copy / paste your cylinder to center of your new canvas. Then FLATTEN the two together.

This will create a new image with even top and bottom blank space that will when saved 4090 x 2045 equirectangle spherical image. When viewed it will have a black hole in top and bottom but that is ok. You can then limit or exclude from view the top and bottom in the viewing areas.

And it will let you zoom in/out and rotate (pan) 360 degrees.

Just a thought.

Dave
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

I'm wondering if there is a simple HTML tool that offers just a simple photo zoom/move option.
Take a look at MagicToolbox's function 'MagicZoom' it's quite affordable and works well on both desktop and mobile devices.

https://www.magictoolbox.com/magiczoom

In the case of Twixl you would just create a Web Viewer and add all the html into the WebResources folder.

You can also integrate the zoom into a Pano2VR project using an iFrame in a TextBox. Here's a sample;

http://rebrand.ly/zoombasic

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
TJacoby
Posts: 12
Joined: Wed Jan 17, 2018 10:22 am
Location: Columbus, Ohio
Contact:

Have you tried input your panorama as a "Cylinder"?
Dave—

I have tried that, but the cylinder and spherical approaches add a level of distortion that I don’t like, even when I tweak the Field of View, etc. The image itself would look great printed out on paper and hung from the wall, but it just looks really strange as a cylinder/cubic. But thanks for the suggestion.
Take a look at MagicToolbox's function 'MagicZoom' it's quite affordable and works well on both desktop and mobile devices
.

Tony—

That might work. I’m hoping I can find something that still allows for pinch to zoom on a tablet. Interestingly, I created an HTML doc and used CSS, which allows zoom but controlling the actual photograph is very squirely—it flys all over the page and sometimes out of view completely. It’s a sloppy approach and I don’t like it. WebKit, HTML and CSS, iOS, it’s all a confusing mess. But MagicZoom may be a reasonable compromise.

Thanks Dave and Tony for the info.

Tim
Tim Jacoby: Multimedia Designer and Educator
Think. Create. Innovate.

https://timjacoby.com
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Tim,
I’m hoping I can find something that still allows for pinch to zoom on a tablet.
Okay try this one http://rebrand.ly/zoompinch

This was built using the Smooth Zoom Pan - jQuery Image Viewer a javascript / CSS based image viewer that can be configured and implemented in web pages with simple copy / paste steps. Supports all major touch enabled devices and platforms iOS, Android and Windows.

You can find it at https://codecanyon.net/item/smooth-zoo ... wer/511142

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
TJacoby
Posts: 12
Joined: Wed Jan 17, 2018 10:22 am
Location: Columbus, Ohio
Contact:

Okay try this one http://rebrand.ly/zoompinch
Tony--

That may be exactly what I'm looking for. I'll check it out tomorrow.

Many thanks,

Tim
Tim Jacoby: Multimedia Designer and Educator
Think. Create. Innovate.

https://timjacoby.com
User avatar
TJacoby
Posts: 12
Joined: Wed Jan 17, 2018 10:22 am
Location: Columbus, Ohio
Contact:

Okay try this one http://rebrand.ly/zoompinch
Tony--

Does this require copy/pasting and modifying code by hand, or does it sit within a GUI?

Tim
Tim Jacoby: Multimedia Designer and Educator
Think. Create. Innovate.

https://timjacoby.com
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

By hand but its very simple and comes with complete instructions and samples. Just swap out their images for yours.

If you look at the source of the content page i show in my example it will give you an idea of how simple it is.

https://s3-ap-southeast-2.amazonaws.com ... ntent.html

Tony
Last edited by Tony on Sun Jan 21, 2018 6:10 am, edited 1 time in total.
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Tim,

I've created a version using the dimensions of the window and image in your post. I've sent you a PM with more details.

https://rebrand.ly/pinchzoom2

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
TJacoby
Posts: 12
Joined: Wed Jan 17, 2018 10:22 am
Location: Columbus, Ohio
Contact:

By hand but its very simple and comes with complete instructions and samples. Just swap out their images for yours.
Tony--

I built a fairly simple HTML/CSS document that basically does the same thing you have linked to here, except that it uses the iOS pinch and zoom (rather than javascript) to resize and move the graphic. Both my version and the one you posted have the same problem--neither solution constrains the pan, zoom, or tilt to just the edges of the photo, and you can accidentally drag the image almost completely out of view and end up looking at mostly the black background. In other words, I'd like to constrain the zoom and movement of the image so that it is not possible to see beyond the edges of the image. I took a look at the code in the link you sent, but I didn't see anything that would work. I assume they have much more to cut and paste from.

If you know, I'd be extremely thankful if you fill me in. If not, I may purchase it and have a look myself.

Thanks again.

Tim
Tim Jacoby: Multimedia Designer and Educator
Think. Create. Innovate.

https://timjacoby.com
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Both my version and the one you posted have the same problem--neither solution constrains the pan, zoom, or tilt to just the edges of the photo, and you can accidentally drag the image almost completely out of view and end up looking at mostly the black background. In other words, I'd like to constrain the zoom and movement of the image so that it is not possible to see beyond the edges of the image.
Updated: pan_LIMIT_BOUNDARY: "YES"

http://rebrand.ly/pinchzoom2

If anyone is curious, the picture was taken at a spot called Loch Ard Gorge on the Great Ocean Road in Victoria, Australia. For more info https://goo.gl/maps/as3wi85jwAU2

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
TJacoby
Posts: 12
Joined: Wed Jan 17, 2018 10:22 am
Location: Columbus, Ohio
Contact:

Tony--

Thanks for the help.

The preview was working fine in my browser, but not in the Twixl app previewer. I downloaded the newest files from the site (only $16!), including updated jquery (the version I had was 2011) and so far so good. Now to tweak, but I think its going to work just fine.

Exciting.

Many thanks!

Tim
Tim Jacoby: Multimedia Designer and Educator
Think. Create. Innovate.

https://timjacoby.com
Post Reply