Pinch zoom on iOS HTML Viewer

Anyone know if it’s possible to enable pinch to zoom on the iOS HTML viewer?

As far as I know yes. You must have the correct values for viewport in your html.

I’m a web dev by trade and I know you can set viewport meta tags to prevent resizing, however I thought resizing defaulted to available unless overridden. That seems to be the way it is with mobile safari anyway.

Also, I’m using an HTMLViewer to view PDFs as well as HTML pages. When you view a PDF in Safari on the iPad you can pinch to zoom etc. within the document. When you use Xojo’s HTML viewer you can’t, it’s stuck at 100%. The same is true for websites, images and local HTML pages.

I’d also be interested in a way to zoom/scale the contents of the iOS HTML viewer.

There is a rather simple code available for Safari desktop, but on iOS I could not get it to work.

Unfortunately, there is no ExecuteJavaScript for iOSHTMLViewer, so I figured instead I would send it to the DOM through a BookMarlet, as in

HTMLViewer1.LoadURL("javascript:alert('hello');")

No joy. Yet, bookmarklets exist in iOS, here is an example page Useful Bookmarklets for your iPad and iPhone - Digital Inspiration

But that requires apparently setting up bookmarks on the phone, which would not be convenient.

What we really need is ExecuteJavaScript. Then zooming by code should be possible.

<https://xojo.com/issue/39606>

Also, I filed a request for standard pinch zooming to work :

39608 - We need Zooming enabled in HTMLViewer iOS
Please enable the standard pinch zooming in iOS HTMLViewer, like any user will expect in Safari.

<https://xojo.com/issue/39608>

Thanks for the Feedback case Michel, I’ve signed on. Was meaning to do it myself but been working to a very tight deadline.

I don’t know the JavaScript for it, but you can execute JavaScript in an iOSHTMLViewer using declares as I posted in this conversation. https://forum.xojo.com/conversation/post/169870

Maybe you can make the pinch to zoom work using that?

[quote=192266:@Jason King]I don’t know the JavaScript for it, but you can execute JavaScript in an iOSHTMLViewer using declares as I posted in this conversation. https://forum.xojo.com/conversation/post/169870

Maybe you can make the pinch to zoom work using that?[/quote]

Thank you Jason. Here is a project that uses your ExecuteJavaScript declare to zoom 2x. It can easily be adapted.

Simply change the percentage value in the JavaScript of the button, here 200% :

Dim rien as Text = HTMLViewer1.ExecuteJavaScript("document.body.style.zoom=""200%""")

Maybe using Stephen J. Beardsley gestures one can come up with pinch to zoom. https://github.com/sbeardsl/xojoGestures

Here is the link : htmlzoom.xojo_binary_project

Thanks guys, that should help for HTML pages , however I also need it for PDF documents etc. too.

Looking at questions in stack overflow, all that is needed in Swift is to enable zooming using:

webView.scalesPageToFit = YES;

So it’s just a property of the UIWebview. I assume the HTMLviewer is just a UIWebview underneath?

I’ve not played with any declares in IOS yet, but do any of the gurus think it would be possible to do using declares? I can have a look if you guys think I’m not wasting my time!

From a quick test of a PDF placed onto my web site, it seems scalePagetofit is already active for PDF files. I tried various PDF sizes up to A4 size, all fit to the size of the HTMLViewer.

JavaScript is inactive for zooming such documents, though.

Getting true pinch zoom probably requires declares and lot more doing.

Yeah, they do scale nicely to fit the screen already. However, I have a client who has a library of technical drawings in PDF format within the app I am creating for them. As they have very intricate detail, they need to be able to pinch and zoom on them, or see a full overview. I need the pinch to zoom enabled for that.

As I say, in swift/obj c it’s just a single line of code to enable the functionality. It’s just a property of the UIWebview.

Not played with declares yet, however I assume something as simple as setting a property should be possible?

[quote=192348:@Richard Vivash]Yeah, they do scale nicely to fit the screen already. However, I have a client who has a library of technical drawings in PDF format within the app I am creating for them. As they have very intricate detail, they need to be able to pinch and zoom on them, or see a full overview. I need the pinch to zoom enabled for that.

As I say, in swift/obj c it’s just a single line of code to enable the functionality. It’s just a property of the UIWebview.

Not played with declares yet, however I assume something as simple as setting a property should be possible?[/quote]

Jason King can probably do that eyes closed. He already provided several badly needed features, including the ExecuteJavaScript needed to zoom that way.

Otherwise, declares are not that terrible for just setting a bool. The most difficult is less the code than going through the iOS Developer Library pages which are often confusing. I have been to the page, though, and it seems indeed very straightforward
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/#//apple_ref/occ/instp/UIWebView/scalesPageToFit

Jason has been amazing for iOS development. I’m using his code for camera access already and it works perfectly. I’ll have a poke around with the declares using iOS kit as an example.

Try (untested but it is the declare for the property you mentioned):

Declare sub setScalesPageToFit lib "UIKit" selector "setScalesPageToFit:" (obj_id as ptr, yesNo as boolean) SetScalesPageToFit(HTMLViewer1.handle, true)

Seems to work perfectly Jason, once again you have saved the day! Thanks so much! I owe you a beverage of your choice or two :wink:

[quote=192360:@Jason King]Declare sub setScalesPageToFit lib “UIKit” selector “setScalesPageToFit:” (obj_id as ptr, yesNo as boolean)
SetScalesPageToFit(HTMLViewer1.handle, true)[/quote]

Works great ! Thank you Jason :slight_smile:

Until today, I had not realized that pinch to zoom worked only for pictures…

You’re welcome. Glad I could help!

Not wanting to draw you away from Jason’s helpful declare, but just in case you need other properties or events too I’d like to inform you iOSLib has two implementations of the HTMLViewer: One being a simple module extension that reads and handles a few WebKit notifications too and the other one being a custom control with the full scope of events via a delegate. Would be great to have some feedback if everything works fine or if there are things missing.

Very nice job. Congratulations.

I just tried to play with SetScale in the delegate WebViewer in order to obtain a zoom effect, but it does not seem to work as a simple property like JavaScript zoom factor . More like a delta. I placed this in a slider ValueChanged event :

HTMLViewer1.Scale(me.value,me.value)

Each time I move the slider, instead of going from small to big and back it keeps going bigger and bigger. It is a bit confusing.