4

I am working on a web application where the user should be abled to sign a document on a tablet. We use the Galaxy Tab 12.2 because the S-Pen has the desired precision. The canvas where i draw on uses listens to the touch events to draw on the canvas.

        canvas.addEventListener('touchstart', handleStart);
        canvas.addEventListener('touchmove' , handleMove);

The problem here is, that if the user touches the canvas with his fingers, the canvas will draw lines there.

Is there a way to differentiate between S-Pen events and 'normal' touch events?

I know that on the Surface Pro 3 with Internet Expoler I can handle Pen input different from finger input.

chillichief
  • 1,164
  • 12
  • 22

3 Answers3

6

Ok so i found a solution myself that is working pretty well. The SPen fires an ontouch event with radiusX and radiusY = 0.

The events that are triggered with a finger always have a radius > 0. So all that was to do is add

if(e.targetTouches[0].radiusX === 0)

into the event handlers to draw on my canvas.

Check out this Jsfiddle

chillichief
  • 1,164
  • 12
  • 22
2

The S-Pen should fire an onMouseOver event when it gets close to the screen (depending on browser & S-Pen version), you can take advantage of that by storing a global variable isSPen = false and having a global onMouseOver event setting that variable to true. Try different browsers and see which ones will deliver the event, usually the stock browser always works best.

If that doesn't work, you may need to host your webpage inside an app container; Android has an OnHoverListener that picks up the S-Pen. You can use a full-screen WebView and communicate to it with Android's JavaScript messaging API: Example

Hope I helped you out, good luck

Aaron Gillion
  • 2,227
  • 3
  • 19
  • 31
  • Using the `mouseOver` event is a pretty clever idea. I'm not sure how reliable this solution is. I found another way and i will post it as an answer, if you want to check it out – chillichief Apr 08 '15 at 10:39
-1

The pointerType property can be accessed through the 'pointerdown' event instead of relying on the 'mousedown' event.

Chaosin Chaitanuvong
  • 1
  • 2