CODEWITHSUNDEEP
javascriptpointer-eventswacom
coreyschram
coreyschram

Reputation: 195

PointerEvents not detecting Wacom Tablet

I'm attempting to use Pointer Events to detect graphics tablet input including pen pressure, but Chrome and Firefox don't seem to be reading the tablet device (Wacom Intuos 4) properly. All pointer events come back with the same pointerId and pointerType as my mouse, with the default pressure reading of 0.5. The code I'm using looks something like this:

container.addEventListener("pointerdown", (event) => {
    console.log(event.pointerId);
    console.log(event.pointerType);
    console.log(event.pressure);
}, true);

This outputs "1", "mouse", and "0.5". This occurs for the "pointerdown", "pointermove", and "pointerup" events.

I've tried this on both Windows and Linux with the appropriate drivers installed, and other applications detect pen pressure (Krita, for instance).

Do Chrome and Firefox not support graphics tablets properly yet, or am I simply doing something wrong?

Upvotes: 4

Views: 2762

Answers (3)

Tommy
Tommy

Reputation: 11

You might get better results if you enable/disable Windows Ink and/or add the following CSS for your element.

div {
  touch-action: none;
}

Upvotes: 1

Mike Q.
Mike Q.

Reputation: 11

Try using a function like below to determine if the different pointer types are being detected:

targetElement.addEventListener("pointerdown", function(ev) {
   // Call the appropriate pointer type handler
   switch (ev.pointerType) {
     case "mouse": 
       process_pointer_mouse(ev); 
       break;
     case "pen": 
       process_pointer_pen(ev); 
       break;
     case "touch": 
       process_pointer_touch(ev); 
       break;
     default:
       console.log("pointerType " + ev.pointerType + " is Not suported");
   }
 }, false);

Mozilla has lots of documentation on pointer events for mouse, pens, and touch.

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events

https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType

Upvotes: 1

RobV8R
RobV8R

Reputation: 1076

To answer your question:

Do Chrome and Firefox not support graphics tablets properly yet, or am I simply doing something wrong?

No, you're not doing anything wrong.

Most modern browsers support Pointer Events. I have found that (like everything else browser based) the degree of "support" can vary.

This begs the quesiton, "how do we avoid the browser incompatibility nonsense?" For this particular case, I'd recommend Pressure.js.

To see it in action (and test it with your device of choice), check out the Pressure.js examples.

Upvotes: 6

Related Questions