PointerEvents not detecting Wacom Tablet

Question

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?

This is not the fault of Chrome and Firebox. Just because wacom forces you to use their sdk product. https://www.wacom.com/en-cl/enterprise/business-solutions/software-and-solutions/sdks — MT-FreeHK, Aug 22 '18 at 04:42
@Observer I am, as I said in my question I'm using an Intuos 4. — coreyschram, Aug 22 '18 at 23:59

score 6 · Accepted Answer · answered Aug 22 '18 at 04:09

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.

also this demo: https://patrickhlauke.github.io/touch/pen-tracker/ — XoXo, Dec 23 '21 at 14:12

score 1 · Answer 2 · answered Aug 22 '18 at 19:29

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

score 1 · Answer 3 · answered Feb 12 '19 at 16:53

1

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

div {
  touch-action: none;
}

answered Feb 12 '19 at 16:53

Tommy

11
1

PointerEvents not detecting Wacom Tablet

3 Answers3

Linked