Hi! I'm trying to support the Apple Pencil in an iOS webapp / Safari using HTML5 / Javascript.
So far I get touch events and can read the "force" property for pressure sensitivity.
That works fine!
The problem is however, that when using regular touch (no pencil), I get a "force" touch value of 0.
So my question is, how can I make a webapp that supports both the Apple Pencil (with pressure support)
as well as regular touch (with or without pressure).
Is there some way to tell those events apart?
Thanks so much.
Best,
- karma
I just want to follow up on this in case anyone has the same issue.
To support both pressure sensitive touch (Apple Pencil) as well as regular touch, I ended up with this simple workaround:
var pressure = 0.0;
// on touch event...
if (typeof(e.touches[0]["force"])!="undefined")
{
if (e.touches[0]["force"]>0)
{
pressure = e.touches[0]["force"];
}
else
{
if (e["type"]=="touchstart")
pressure=1.0;
}
}
else
{
pressure = 1.0;
}
The key observation that I initialliy didn't realize, is that touchstart is always non-zero on touchstart when using the Apple Pencil.
Hence, the above code reads the pressure, and ignores any (touchmove) events with zero pressure.
For regular touch however, pressure is set to 1.0. This works for me in Safari as well as in WKWebView.