Cascades Development

[Pumano-]

I want to load local html file with pinch and zoom for WebView.

How I can do it in QML?

My code now is:

import bb.cascades 1.0

Page {
    ScrollView {
        Container {
            background: Color.create("#f8f8f8")
            layout: StackLayout {
                layoutDirection: LayoutDirection.TopToBottom
            }
            WebView {
                url: "local:///assets/web/moscowmetromap.html"
            }
        }
    }
}

[danielrr5]

I can think of two ways of doing this:

1. Handle it in your web page by handling the gesture events (ongesturestart, ongesturechange, ongestureend) and scaling your HTML element(s), although I don't know if the built-in browser supports those events.
2. Handle it in Cascades by modifying the WebView viewport scaling when a pinch event occurs: https://developer.blackberry.com/cascades/reference/bb__cascades__pinchhandler.html

Let me know if that works out for you.

Regards, 

Daniel

[Pumano-]

I have code:

import bb.cascades 1.0

Page {
    titleBar: TitleBar {
        visibility: ChromeVisibility.Visible
                title: "            Chicago subway map"
    }
    Container {
        layout: DockLayout {
        }
        id: gestureParent
        property string gestureState: "pinch"
        // ScrollView {
        Container {
            preferredWidth: 1542
            preferredHeight: 1847
            layoutProperties: DockLayoutProperties {
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill
            }
            ScrollView {
                id: gestureContainer
                scrollViewProperties {
                    scrollMode: ScrollMode.Both
                }
                ImageView {
                    id: gestureImage
                    imageSource: "asset:///maps/chicago.png"
                } // end imageview
                gestureHandlers: [
                    PinchHandler {
                        property bool pinchInProgress: false
                        property real previousPinchRatio: 0
                        onPinchStart: {
                            if (gestureParent.gestureState == "pinch") {
                                pinchInProgress = true;
                            }
                        }
                        onPinchUpdate: {
                            if (pinchInProgress) {
                                                                                    
                                // The total scale factor is the sum of the current pinch ratio
                                // and the accumulated pinching performed previously.
                                var totalScaleFactor = event.pinchRatio + previousPinchRatio;
                                gestureContainer.scaleX = totalScaleFactor;
                                gestureContainer.scaleY = totalScaleFactor;
                                // gestureContainer.rotationZ = event.rotation;
                                if (totalScaleFactor > 5.0) {
                                    gestureContainer.scaleX = 5.0;
                                    gestureContainer.scaleY = 5.0;
                                    // When the pinching is larger then 2.0 its time to try out the 
                                    // long press gesture.
                                    // pinchInProgress = false;
                                    // instruction.text = "Great! Now long-press";
                                } else if (totalScaleFactor < 1.0) {
                                    gestureContainer.scaleX = 1.0;
                                    gestureContainer.scaleY = 1.0;
                                    // instruction.text = "I said ENLARGE, change direction";
                                } else {
                                    // instruction.text = "Continue pinching";
                                }
                            }
                        }
                        onPinchEnd: {
                            if (pinchInProgress) {
                                // Save the current scaling of the image, so that the 
                                // zoom factor can be adjusted for this during the next pinch session.
                                previousPinchRatio = gestureContainer.scaleX - 1.0;
                            } else {
                                previousPinchRatio = 0;
                                gestureParent.gestureState = "pinch";
                            }
                        }
                    }
                ]
            }
        } // end imageview Container
        //   } // end scrollview
    } // end main container
} // end page

 Pinch working but some touch bugs because ScrollView handler want to scroll and pinch working not good.

Second problem: if I pinch big image, after pinch I can't scroll image for looking another area of image. After pinch scrollView don't work good. I don't know its my error or bug?

[amarcon · Accepted solution]

Hi,

I've made some tests on the CascadesCookbookQML sample app with the GestureHandler.qml...

So, on your ScrollViewProperties, try setting pinchToZoomEnabled to true, same as bellow:

scrollViewProperties {
    scrollMode: ScrollMode.Both
    pinchToZoomEnabled: true
}

 Hope this helps,

[Pumano-]

Thank you!!! This solution solved that problem!

[Pumano-]

scrollViewProperties {
                    scrollMode: ScrollMode.Both
                    pinchToZoomEnabled: true
                    maxContentScale: 5
                    minContentScale: 1
                }

Tip: maxContentScale: 5 and   minContentScale: 1 can solve overzooming and etc.

[sgallego84]

The problem of this approach is that when you make zoom the web page doesn't render again, so the content looks pixeled.

To solve this I have added this to ScrollView:

onContentScaleChanged: {
      webView.settings.viewport = { "initial-scale" : scale }
}

[stardomains]

Why doesn;t this work for :

import bb.cascades 1.0
Page {
    Container {
        ScrollView {
        id: scrollView
        scrollViewProperties.pinchToZoomEnabled: true
        scrollViewProperties.scrollMode: ScrollMode.Both
       
     
            WebView {
                url: "https://maps.google.com/"
          
        }}
        
    }
}

 It scales the entire webpage instead of zooms in. How can you get it to pass the pinch/zoom and scrooling to the map?