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