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


Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums Device Forums on April 1st (Developers, see below)

BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com

Developers, for more information about the BlackBerry Developer Community please review Join the Conversation on the BlackBerry Developer Community Forums found on Inside BlackBerry.


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. Smiley Happy

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);
                        }
                    }
                ]
            }

Highlighted
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?