Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
Posts: 219
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline
Accepted Solution

How to add zoom to WebView in QML?

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"
            }
        }
    }
}

 

Retired
Posts: 32
Registered: ‎05-09-2012
My Device: BB10
My Carrier: None

Re: How to add zoom to WebView in QML?

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

Highlighted
Developer
Posts: 219
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: How to add zoom to WebView in QML?

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?

Retired
Posts: 155
Registered: ‎07-16-2012
My Device: Dev Alpha
My Carrier: Bell

Re: How to add zoom to WebView in QML?

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,


Developer
Posts: 219
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: How to add zoom to WebView in QML?

Thank you!!! This solution solved that problem!

Developer
Posts: 219
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: How to add zoom to WebView in QML?

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

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

Developer
Posts: 89
Registered: ‎10-18-2012
My Device: BB Z10
My Carrier: -

Re: How to add zoom to WebView in QML?

[ Edited ]

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 }
}

Developer
Posts: 196
Registered: ‎12-14-2009
My Device: Not Specified

Re: How to add zoom to WebView in QML?

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?

New Developer
Posts: 19
Registered: ‎02-17-2013
My Device: Z30
My Carrier: Telekom Germany

Re: How to add zoom to WebView in QML?

[ Edited ]

Hey sgallego84

 

thanks a lot for your hint on onContentScaleChanged.

That made my day ;-)