Digital pen does not work for menu buttons

[David Compton]

We are using the WebViewer in an Ionic app.  We have found that the digital pen does not work on an iPad or on a Surface Pro for tapping on "sub-menu" buttons e.g. the annotation tools buttons on the annotation toolbar.  Yet the pen does work for drawing a free-hand annotation. Is this a known issue?  Is their a fix or a workaround?

Thanks,

David

[Matt Parizeau]

Hi David,

We just tried using a pen with a Surface Pro and weren't able to reproduce the issue you're describing. We tapped on the menu and were able to tap on the annotation tools and draw annotations all with the pen. We tested using Edge, what browser were you using? Would you be able to send a sample app that reproduces the problem?

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[David Compton]

My apologies - I gave you some incorrect information.  I just retested and the problem does not exist on Surface Pro.  So it only seems to be an issue on iOS in an Ionic app.

Regar

David Compton

--
You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webviewer+unsubscribe@googlegroups.com.
To post to this group, send email to pdfnet-webviewer@googlegroups.com.
Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

[Justin Jung]

Hello,

We don't yet have an Apple device with a pen to test with.

Inspecting the code, it might be related to the click handler not being triggered by the pen.

The relevant code is me.$annotCreateMenuContext.on('click', function(e) { ... }) in MobileReaderControl.

You could try debugging this click handler to see if it's being trigger, if it isn't then you could try using touchstart event instead.

Justin Jung

[David Compton]

Hi Justin,

Thanks for your response.

I replicated the $annotCreateMenuContext.on('click', function(e) { ... }) in MobileReaderControl as $annotCreateMenuContext.on('touchstart', function(e) { ... }).  That fixed the problem for the buttons on the annotation toolbar.  However the problem still exists for:

1. The initial toolbar where you select to bring up the annotation toolbar

2. The pop-up toolbars (Done, Delete, Note...) that appear if you tap on an existing annotation.  In this case the buttons seem to know they have been tapped as they change shade, but no action happens.

Can you give me some pointers on where to go to fix these other two issues?

Was there a better way for me to fix the annotation toolbar?

Is this something that you will address in a future release - or even a hotfix?  I think that the digital pen is becoming fairly commonplace and so this use case is not going to be unusual.

Kind regards,

David

--

[David Compton]

Hi Justin,

Further to my previous email I've just been doing some more testing with the digital pen on a Surface Pro.  In this scenario (with or without the touchstart change) selection of the buttons on the various menus works as expected.  However annotating itself, e.g. drawing a free hand annotation, does not work with the pen.  Being able to use a pen to annotate is really important to some of our customers, so this is a crucial issue for us.

Regards,

David

On 3 October 2017 at 18:56, David Compton <david.w...@gmail.com> wrote:

Hi Justin,

Thanks for your response.

I replicated the $annotCreateMenuContext.on('click', function(e) { ... }) in MobileReaderControl as $annotCreateMenuContext.on('touchstart', function(e) { ... }).  That fixed the problem for the buttons on the annotation toolbar.  However the problem still exists for:

1. The initial toolbar where you select to bring up the annotation toolbar

2. The pop-up toolbars (Done, Delete, Note...) that appear if you tap on an existing annotation.  In this case the buttons seem to know they have been tapped as they change shade, but no action happens.

Can you give me some pointers on where to go to fix these other two issues?

Was there a better way for me to fix the annotation toolbar?

Is this something that you will address in a future release - or even a hotfix?  I think that the digital pen is becoming fairly commonplace and so this use case is not going to be unusual.

Kind regards,

David

[David Compton]

Hi Justin,

I've been doing some further testing with the Surface Pro.  There is more to it than I first thought.  I'll start a separate forum thread for that issue once I can nail down some reproducible steps.  So lets just keep this thread focused on the iPad issues raised earlier.

Regards,

David

[Justin Jung]

Hello David,

We've just purchased an Apple Pencil, but didn't run into any issues that you've described.

Without any modifications, we were able to tap on the menu, sub-menu and add annotations as expected.

Can you reproduce the issues that you were saying in uncustomized webviewer?

If you can only reproduce the issue on the ionic project, could you send us a sample of the ionic app so that we can try on our end?

[David Compton]

Hi Justin,

We've done very little customization to the web viewer.   You can try it out by running a trial of the app from the App Store.  Just search for "Docs On Tap V2".

Kind regards,

David

--

[Justin Jung]

We can only find Docs On Tap (https://itunes.apple.com/au/app/docs-on-tap/id506865550?mt=8), and it doesn't seem like mobile WebViewer.

Also, can you reproduce the issue in an uncustomized WebViewer?

[David Compton]

Hi Justin,

I've made Docs On Tap V2 available in Canada on the App Store - previously it was not - my apologies.  

I cannot reproduce the issue when trying your sample annotations app in the Safari browser on my iPad.  So maybe the problem is related to the app being Ionic/Cordova.

Kind regards,

David

--

[David Compton]

Hi Justin,

Were you now able to download Docs On Tap V2 from the App Store?

Regards,

David

On 9 October 2017 at 13:09, David Compton <david.w...@gmail.com> wrote:

Hi Justin,

I've made Docs On Tap V2 available in Canada on the App Store - previously it was not - my apologies.  

I cannot reproduce the issue when trying your sample annotations app in the Safari browser on my iPad.  So maybe the problem is related to the app being Ionic/Cordova.

Kind regards,

David

[Justin Jung]

Yes we were able to download the app and reproduce the issue.

It's hard to say, but you might have to change all the button click events to touchstart.

The relevant events are all inside MobileReaderControl.js

Please let us know if the problem persists even afterwards!

[David Compton]

Hi Justin,

This issue is proving very problematic.  Upon further testing I found that it was not as simple as adding the touchstart event.   I've spent a lot of time researching and trying to implement a solution. I found many references to similar problems but none resolve the issue satisfactorily.  They either don't work or they cause other problems.   A couple of the things I tried are as follows (I'm just focussed on the $annotCreateMenuContext for simplicity - but all jquery mobile buttons are affected) :

1.  If I alter the 'click' event to 'click touchstart' then the digital pen does work to select an annotation type.  However there are negative impacts e.g. when drawing an annotation nothing gets drawn to the screen until the user stops annotating; clicking the button to close the annotation toolbar causes the Options button to also be clicked on the underlying toolbar (I think that the event is effectively being called twice); the main toolbar will not close i.e. clicking on the document no longer closes the main toolbar.

2.  To avoid some of the issues above I tried returning false at the end of the event and also calling preventDefault within the event.  Both of these approaches stopped the underlying Options button being clicked, but they did not resolve the other problems.

I tried or investigated many other potential solutions including the Pointer Events Polyfill, creating a jQuery special event and using the jQuery Mobile vclick event. None of these provided a solution.

We really need a solution to this as our customers are expecting to be able to use a digital pen with our app on an iPad.

Kind regards,

David Compton

--

[Justin Jung]

Hello David,

Hmm.. You might want to try disabling the fastclick plugin, as it may be causing issues with your case. In the past, we've seen issues with fastclick in an UIWebView and there might be similar problems with ionic app.

You can disable it by commenting out the calls to FastClick.attach at the top of MobileReaderControl.

This may help your testing as fastclick won't interfere with your touch or click events.

[David Compton]

Hi Justin,

Unfortunately disabling fastclick makes no difference.

Regards,

David

--

[Justin Jung]

Hello,

Could you provide us with a sample app that reproduces the issue?

Then we would be able to investigate further.

Thanks,

[David Compton]

In the process of creating a sample app I was able to resolve the problem.  I found that this issue was caused as a result of another workaround to remove fastclick when running under iOS (see https://mail.google.com/mail/u/0/#search/%5Bwebviewer%5D/15c60dbe7e1d29ce).  Adding back in the fastclick code and moving to WKWebView has now fixed the problem with clicking on buttons with the digital pen and the problem that resulted in the need to remove fastclick.  (I was able to move to WKWebView now that the guys at Ionic have ironed out some problems in the Cordova plugin).

I still have one further issue that is related to the digital pen.  When you tap on the document to bring up the initial toolbar the screen flashes white for an instance.  It does not do this every time - it seems to be roughly every second time when the flash occurs.  I have created a very simple sample project that illustrates the problem:  https://github.com/daveywc/pdftron-ionic

The sample project is a blank ionic project with only the following changes:

1.  Copy the PDFTron library into src/assets/pdftron

2.  Copy a couple of sample XOD files into src/assets/files

3.  Add some code to initialise the web viewer into src/pages/home/home.tx

Note that using mobileRedirect: true is not an option for this project.

Thanks,

David

--

[Justin Jung]

Hello David,

We were able to reproduce the issue you've described with the sample project, but unfortunately we didn't find a solution that resolves it.

We found reports of jQuery Mobile and Cordova issues that sounded similar, and we tried using their css workaround without success.

We will try to think about it some more, but if you figure anything else out, then let us know.

[David Compton]

Hello Justin,

I have not been able to come up with any resolution.  What about on your side - have you come up with anything else?   

Also another sort of related question.  I've noticed in a couple of forum posts mention of an updated version of the mobile web viewer.  Do you have any details of what the updated version will contain and when it will be released?  There are a few things that our customers would really like added to their mobile experience with web viewer.

Kind regards,

David

--

[Justin Jung]

Unfortunately we couldn't find a resolution either. Strangely it seems like the DOM isn't actually changing when the white flash happens.

We tried a number of css changes to workaround the issue, but weren't successful.

The plan is to unify desktop and mobile viewers so the code for customizations and viewing is much more similar.

We don't currently have a timeline for the release, but it's likely to be next year.