Enable better support for Apple Pencil

Hello,

we have a Webapp, which is mainly used with iPads. The WebViewer works well, but we have one thing, that could be better.

Our users are all using the Apple Pencil. Often it happens, that the WebViewer detects the ball of the Hand as first touch. Then when the User begins to write with the Apple Pencil, a line is drawn from the ball of the Hand to the first Point where the Apple Pencil touches the Display.

I wonder if there is an option to improve this behavior. iOS has an option to disable “normal” touches when the Pencil is used. I know something like this is hard to achieve if not impossible to do, as this is an iOS-Feature and we are in the Web. But maybe there is an Option to minimize the “touch offset”, so there are less “false positives”.

Any suggestions on this? Maybe there is already such an option and i haven’t found it until now.

Thank you,

Chris

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello Chris,

If I am understanding thing correctly, what you are looking for is palm rejection.
Please note that palm rejection is currently difficult to implement in JavaScript in particular on iOS.

You can see some discussion here javascript - HTML5 canvas, palm rejection - Stack Overflow but unfortunately iOS does not seem to implement the radiusX and radiusY properties on touch events: Can I use... Support tables for HTML5, CSS3, etc.

From the previous code snippet provided that used radiusX, another approach you could try is filtering out points that are quite far away from the previous point. For example:

const { Tools, annotManager } = instance;

const oldMouseMove = Tools.FreeHandCreateTool.prototype.mouseMove;

Tools.FreeHandCreateTool.prototype.mouseMove = function(e) {
  oldMouseMove.apply(this, arguments);
  if (this.annotation) {
    const paths = this.annotation.getPaths();
    const lastPath = paths[paths.length - 1];
    if (lastPath.length >= 2) {
      const lastPoint = lastPath[lastPath.length - 1];
      const secondLastPoint = lastPath[lastPath.length - 2];

      const xDistance = lastPoint.x - secondLastPoint.x;
      const yDistance = lastPoint.y - secondLastPoint.y;
      const distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);

      const threshold = 100;
      if (distance > threshold) {
        console.log('removed last path');
        lastPath.pop();
        annotManager.redrawAnnotation(this.annotation);
      }
    }
  }
};

You can see if this works better for you, but just in general I suspect that the other iOS applications that have palm rejection are native apps.

Anthony Chen
Software Developer

PDFTron Systems, Inc.

www.pdftron.com

Hello Anthony,

thank you for your answer. Yes, palm rejection was what i was looking for. It seems that radiusX and radiusY is supported since iOS 14.5 which would be ok for us.
I’ll give it a try and if it isn’t working i’m using your solution to try filtering out points.

Thank you,

Chris

Hello Anthony,

i made it to work with radiusX and radiusY. This API is since iOS 14.5 supported on mobile Safari and works good so far. There’s one thing, that i woudl like to do and don’t know if there’s a way to do that.

When i’m in the FreeHandCreateTool i can now only draw with the Pencil. With the two-finger-gesture i can zoom in and out. It would be great, if i could also pan with one finger.

What i mean:
radiusX smaller than a certain value: Draw lines as expected
radiusX bigger than a certain value: Pan

Is this possibly somehow?

Best regards,

Christian Artinger

Hey Christian,

That is great to hear that you got it working.

At the moment, we don’t have APIs or workarounds to assist you with your issue.

The best solution we have is:

  1. fork the UI ( https://www.pdftron.com/documentation/web/guides/advanced-customization/#forking-and-linking )
  2. make changes to TouchEventManager.js; make the changes to handleTouchStart and handleTouchEnd

Thanks,
Anthony

1 Like

Hi Christian,

One thing I wanted to note is that we do have the documentViewer.enableStylusMode() API that I think might achieve what you’re looking for PDFTron WebViewer Class: DocumentViewer

From the API description “When in this mode, finger movements will scroll the document and using a stylus device will annotate the document.”

Matt Parizeau

1 Like

Hello Matt,

thanks for pointing that out! This is exactly what i was looking for. Is this working in WebViewer Version 7? I only find “setEnableStylusMode()”, which says “Returns whether stylus annotating mode is enabled.”, but I’m not finding anything that says, “Enables the Stylus mode”.

Anyways, we ware planning to upgrade to WebViewer Version 8 in the next time and for now i built a workaround (which is a little bit ugly but is working for us for now).

Chris

It looks like there’s a typo in the 7.3 docs and that one should be getEnableStylusMode. In 7.3 you can call docViewer.setEnableStylusMode(true) PDFTron WebViewer Class: DocumentViewer

Hello Matt,

there seems to be an error in the types.d.ts file for angular. When i try to set the option Angular is reporting an error:

I tried it with Version 7.3.3, 7.3.4, 8.1.0 and 8.2.0.

But when i set it like this it works:

(docViewer as any).setEnableStylusMode(true);

Edit: I just saw, that in WebViewer Version 8 onwards there is “enableStylusMode()” and “disableStylusMode()” as new Version for “setEnableStylusMode()” and this works just as it should.

Yeah our TypeScript file is generated from our docs so the typo in 7.3 is probably causing that issue where we define the same function twice. It should be good in 8.x.

1 Like