Hello, i can’t get either of the sample projects for PictureBox to scroll or zoom, even though one project title is "PictureBox_ScrollAndZoom. I have deployed them via Volt to my iphone and also to the desktop browser, same result. The picture displays, but will not scroll or zoom. I have changed the picture to a much larger one, it displays but will not zoom either. Thoughts?
This feature is based on the IScroll library, which is no longer supported by its author. I notice almost 100 open issues on the zoom feature alone. I expect we will be deprecating this.
So how do we do a zoom and scroll of an image? Bootstrap Image doesn’t have those features.
Other than opening the image in another browser window, how do we include an “image” control in AppStudio and provide the ability to pinch and zoom the image (not the app)?
I could even go for a full screen “form” of the image. I’ve noticed that some viewport settings allow pinch and zoom.
Again, any suggestions or I’ve already tried this would be helpful.
There isn’t anything built into AppStudio that does this - but a google will show lots of different ways to do this. You’ll need to sift through the results to find something which works for you.
Here’s what I came up with: First, several of the options use Hammer.js. I decided against having two libraries. PinchZoom.js doesn’t use any CSS, special libraries, etc. Non-minifyed it is 34k. I was having problems getting it to work. iScroll is still out there.
1- The PinchZoom demo works on the github site, but note it is based on version 2.2.0. The demo also has some CSS that corrects a problem in the code. See line 482 of the PinchZoom included file in the upload below for details. In the upload below, the program is corrected (at least for use in the AppStudio demo below - see github issue post noted).
2- The download of the latest release provides 2.3.4. It does not work. It causes a syntax error immediately.
3- If the picture is longer than the viewport height, you will find it is difficult to scroll down to the bottom.
In practice it may be good to add a gutter you can drag.
4- The docs say double tap will zoom in and out - this does not work on any device.
I found that the width settings of the containers are critical and set to 100%. In my case I wanted the image to be close to the width of the device viewport. The image could be longer than the viewport.
Project1.appstudio.zip (252.3 KB)
Update: This seems to work pretty good as the demo I uploaded. There’s a slight bounce when using two finger gestures and releasing on andriod and some of the picture blacks out on iOS for a quick flash.
When I put this into my app, it did not work. I remembered you have to have an image loaded (or whatever content the HTML you are applying this too) prior to initialization of the PinchZoom.
But I was already accounting for that. What I didn’t realize was that if the image (or HTML) was hidden, then the sizes read are zero, and PinchZoom creates a container with zero height. The Image, etc. must be displayed first before PinchZoom initialization so the new container created by PinchZoom (DIV) has the same size as the HTML. This new DIV is the area that is enabled as gestural. This means that you must display the HTML first, then apply the PinchZoom.
PinchZoom can be applied multiple times. But once seems to be enough once it’s done right, even if you change content or images.
But, now that it is inside my app, it’s got a really bad bounce issue on zoom. The image likes to paint the 0,0 quadrant when gesturing and back to the appropriate origin and on two finger slide, it likes to (what looks like the coordinates are inverted) show another section of the image while gesturing.
OVERALL = try something else. I’ll be looking too.