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
New Contributor
Posts: 9
Registered: ‎11-21-2011
My Device: Torch 9800
My Carrier: Singtel
Accepted Solution

Pinch zoom to change device pixel ratio in webview

Can pinch to zoom change the device pixel ratio in webview by registering onPinchUpdated in QML?  There is html text on the screen dynamically created locally in my app and I want the user to increase and decrease the custom CSS formatted text in the HTML via a pinch zoom.  Right now a pinch zoom will zoom the page if setup but then the text appears off of the screen and you have to scroll back and forth to read it which is not what the users want.

 

Setting it through myWebViewId.settings.devicePixelRatio using the zoom image example from docs doesn't work http://developer.blackberry.com/native/documentation/cascades/dev/touch/

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Pinch zoom to change device pixel ratio in webview

It won't change the pixel density as this is a hardware thing, however I understand what you are trying to do.

 

Why not link the pinch to the labels (or whatever control you are using to display) scale factor?


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
New Contributor
Posts: 9
Registered: ‎11-21-2011
My Device: Torch 9800
My Carrier: Singtel

Re: Pinch zoom to change device pixel ratio in webview

The scale of the WebView just scales it like a normal control and extends beyond the screen limits which unfortunately doesn't help.

 

The below code updates the devicePixelRatio in the background but the screen doesn't refresh with the new changes unless I set the devicePixelRatio in the source code.

 

            WebView {
                id: webView
                property double initialScale: webView.settings.devicePixelRatio
                property double scaleFactor: 0.8

                html: _app.logViewer.logText

                gestureHandlers: [
                     // Add a handler for pinch gestures.
                    PinchHandler {
                        // When the pinch gesture starts, save the initial scale of the image.
                        onPinchStarted: {
                            webView.initialScale = webView.settings.devicePixelRatio;
                        }

                        // As the pinch expands or contracts, change the scale of the text.
                        onPinchUpdated: {
                            console.log("Current device pixel ratio: " + webView.settings.devicePixelRatio);
                            console.log("New device pixel ratio: " + webView.initialScale + ((event.pinchRatio - 1) * webView.scaleFactor));
                            webView.settings.devicePixelRatio = webView.initialScale + ((event.pinchRatio - 1) * webView.scaleFactor);
                        }
                    }
                ]
            }

New Contributor
Posts: 9
Registered: ‎11-21-2011
My Device: Torch 9800
My Carrier: Singtel

Re: Pinch zoom to change device pixel ratio in webview

I can effect that change by adding this to the ScrollView:

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

And this to the onPinchUpdated:

webView.settings.devicePixelRatio = webView.initialScale + ((event.pinchRatio - 1) * webView.scaleFactor);

webView.loadHtml(_app.logViewer.logText);

 

But it doesn't work very well at all in terms of the display because there are too many loads executed on a pinch so I think that my next solution will be using menu buttons...

New Contributor
Posts: 9
Registered: ‎11-21-2011
My Device: Torch 9800
My Carrier: Singtel

Re: Pinch zoom to change device pixel ratio in webview

Skipped the pinch zoom and added 2 buttons to the menu, works but still have to insert all the html again which is not ideal but can live it.

Developer
Posts: 26
Registered: ‎12-26-2012
My Device: Q10
My Carrier: Sprint

Re: Pinch zoom to change device pixel ratio in webview

having the same problem.
did you do increase/decrease font size buttons?