Stylus eraser button support

personalizedrefrigerator commented 9 months ago

Currently, the eraser button on physical styluses does nothing.

At present, this is because Chromium seems to not report stylus events when the stylus is down (just when the stylus is above the screen), or a bug in how js-draw is registering pointer event listeners.

Even if we can only listen for button events when the pointer is above the screen, pressing the button could be used to, for example, switch tools.

Wladefant commented 9 months ago

If it is only possible to listen for button events when the pointer is above the screen, it is still perfect for using the eraser. Samsung Notes, for example, activates the eraser while holding the button and switches back to the normal pen when lifting the finger off.

Or was that what you were talking about, that that is not possible?

personalizedrefrigerator commented 9 months ago

At least with my tablet, this is what happens when I try to draw with the eraser button down:

Pushing the eraser button while the pen is above the screen: Pointer move events now have buttons: 1,
Touching the pen to the screen: Pointer events are no longer received
Lifting the pen from the screen: Pointer events are received again, with buttons: 1

This can be seen by checking the "live update" checkbox on the input logging page, pushing the eraser button, then trying to draw.

Additionally, MDN and the PointerEvents spec state that buttons: 32 means that the eraser is pressed (not buttons: 1).

Input log

``` {"eventType":"pointermove","currentTime":1700843362438,"timeStamp":5315,"x":402.655029296875,"y":476.7665710449219,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362422,"timeStamp":5306.700000000012,"x":402.3324890136719,"y":477.41156005859375,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362407,"timeStamp":5291.100000000006,"x":401.7950134277344,"y":480.851806640625,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362389,"timeStamp":5274.400000000023,"x":401.3649597167969,"y":484.07696533203125,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362375,"timeStamp":5257.8000000000175,"x":401.3649597167969,"y":486.17340087890625,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362357,"timeStamp":5241.200000000012,"x":401.3649597167969,"y":487.8397216796875,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362341,"timeStamp":5224.5,"x":401.5262145996094,"y":488.5385437011719,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362326,"timeStamp":5207.900000000023,"x":401.74127197265625,"y":489.1298522949219,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362309,"timeStamp":5191.200000000012,"x":402.0637512207031,"y":489.6673889160156,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362291,"timeStamp":5158,"x":402.5474853515625,"y":490.5811462402344,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362275,"timeStamp":5153.8000000000175,"x":402.601318359375,"y":490.6348876953125,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362255,"timeStamp":5141.3000000000175,"x":402.655029296875,"y":490.79620361328125,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843362240,"timeStamp":5092.400000000023,"x":402.7087707519531,"y":490.9574279785156,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361672,"timeStamp":4554.600000000006,"x":439.58258056640625,"y":518.9629516601562,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361658,"timeStamp":4542.100000000006,"x":439.7975158691406,"y":519.7692260742188,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361642,"timeStamp":4526.400000000023,"x":440.1200256347656,"y":522.886962890625,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361625,"timeStamp":4509.8000000000175,"x":440.496337890625,"y":523.1019287109375,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361610,"timeStamp":4493.100000000006,"x":440.7113342285156,"y":522.886962890625,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361591,"timeStamp":4476.400000000023,"x":440.7113342285156,"y":522.4569702148438,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361574,"timeStamp":4459.8000000000175,"x":440.496337890625,"y":520.79052734375,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361555,"timeStamp":4443.200000000012,"x":440.0125427246094,"y":520.5217895507812,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361540,"timeStamp":4426.5,"x":439.0987548828125,"y":520.6830444335938,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361523,"timeStamp":4409.900000000023,"x":438.7762756347656,"y":521.059326171875,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361511,"timeStamp":4393.3000000000175,"x":438.7762756347656,"y":521.4893798828125,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361495,"timeStamp":4376.700000000012,"x":438.9375,"y":522.1881713867188,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361474,"timeStamp":4359.900000000023,"x":439.31378173828125,"y":523.2095336914062,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361464,"timeStamp":4343.5,"x":440.0125427246094,"y":525.413330078125,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843361445,"timeStamp":4325.700000000012,"x":441.4638366699219,"y":529.4448852539062,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360322,"timeStamp":3195.2000000000116,"x":292.302490234375,"y":604.430908203125,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360307,"timeStamp":3178.600000000006,"x":281.6596374511719,"y":601.6357421875,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360274,"timeStamp":3162,"x":276.230712890625,"y":597.4429931640625,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360255,"timeStamp":3128.600000000006,"x":271.124267578125,"y":589.1112060546875,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360237,"timeStamp":3111.9000000000233,"x":268.8129577636719,"y":585.2409057617188,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360205,"timeStamp":3095.4000000000233,"x":266.7703857421875,"y":581.26318359375,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360192,"timeStamp":3078.7000000000116,"x":265.2115478515625,"y":577.177978515625,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360176,"timeStamp":3062.100000000006,"x":264.8353271484375,"y":573.0926513671875,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360155,"timeStamp":3045.5,"x":264.9428405761719,"y":568.5773315429688,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360140,"timeStamp":3028.7000000000116,"x":265.3728332519531,"y":563.8471069335938,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360122,"timeStamp":3012.2000000000116,"x":266.3403625488281,"y":559.331787109375,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360105,"timeStamp":2995.600000000006,"x":267.4154052734375,"y":553.8489379882812,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360088,"timeStamp":2978.9000000000233,"x":268.7054443359375,"y":547.9898071289062,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360074,"timeStamp":2962.3000000000175,"x":270.479248046875,"y":542.5607299804688,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360057,"timeStamp":2945.7000000000116,"x":272.091796875,"y":536.0565795898438,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360043,"timeStamp":2929,"x":273.91937255859375,"y":529.0148315429688,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360023,"timeStamp":2912.4000000000233,"x":276.49945068359375,"y":523.0482177734375,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843360008,"timeStamp":2895.7000000000116,"x":279.72454833984375,"y":516.167724609375,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359988,"timeStamp":2879.100000000006,"x":283.7021789550781,"y":508.26605224609375,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359972,"timeStamp":2862.5,"x":287.787353515625,"y":500.9018249511719,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359954,"timeStamp":2845.8000000000175,"x":290.8511962890625,"y":493.1613464355469,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359939,"timeStamp":2829.100000000006,"x":292.8937683105469,"y":486.8721923828125,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359921,"timeStamp":2812.4000000000233,"x":295.3663635253906,"y":483.4857482910156,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359907,"timeStamp":2795.9000000000233,"x":298.053955078125,"y":480.47552490234375,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359891,"timeStamp":2779.2000000000116,"x":299.7202453613281,"y":476.8203125,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359875,"timeStamp":2762.5,"x":301.6553039550781,"y":473.8638610839844,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359856,"timeStamp":2745.9000000000233,"x":303.3753662109375,"y":470.96112060546875,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359842,"timeStamp":2729.3000000000175,"x":305.04168701171875,"y":468.3272705078125,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359823,"timeStamp":2712.7000000000116,"x":307.62176513671875,"y":466.7684326171875,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359805,"timeStamp":2696.100000000006,"x":309.07305908203125,"y":462.68310546875,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359792,"timeStamp":2679.4000000000233,"x":310.52435302734375,"y":456.5552062988281,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":1,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359776,"timeStamp":2662.7000000000116,"x":312.72821044921875,"y":451.2873840332031,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359759,"timeStamp":2646.2000000000116,"x":314.8244934082031,"y":447.9009094238281,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359740,"timeStamp":2629.5,"x":316.92083740234375,"y":445.2132873535156,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359723,"timeStamp":2612.8000000000175,"x":318.04962158203125,"y":442.36431884765625,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359707,"timeStamp":2596.2000000000116,"x":318.8021545410156,"y":438.65533447265625,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359689,"timeStamp":2579.5,"x":319.2859191894531,"y":434.03253173828125,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359673,"timeStamp":2563,"x":319.9309387207031,"y":428.60345458984375,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359656,"timeStamp":2546.3000000000175,"x":320.8446960449219,"y":423.4968566894531,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359641,"timeStamp":2529.600000000006,"x":321.48974609375,"y":418.9278869628906,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359623,"timeStamp":2513.100000000006,"x":322.457275390625,"y":414.3050842285156,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359607,"timeStamp":2496.4000000000233,"x":323.5323486328125,"y":409.0372009277344,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359590,"timeStamp":2479.7000000000116,"x":324.1235656738281,"y":403.2318420410156,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0}, {"eventType":"pointermove","currentTime":1700843359579,"timeStamp":2463,"x":324.5535888671875,"y":392.9649353027344,"isPrimary":true,"pointerType":"pen","pointerId":2,"buttons":0,"pressure":0} ```

Notes:

js-draw does have code that should support erasing with the eraser button on the pen, but, for the reasons mentioned above, it's untested.
Firefox on Android doesn't work either, so it's not Chromium-specific. (Firefox, however, seems to also report all pen events as touch events...)
- It could be that a specific CSS property needs to be set to support this. However, I haven't found that while searching online.

Wladefant commented 9 months ago

I tried it. While connected to air actions it definitely registers the button press. Dont know how to test whether it works with the button pressed for a long time. There is no reaction for that

personalizedrefrigerator commented 9 months ago

Samsung Internet does seem to send pointer events when drawing with the eraser button pressed. However, these pointer events have buttons: 1. According to the Pointer Events spec, however, this means "Left Mouse, Touch contact, Pen contact".

Wladefant commented 9 months ago

Yes i see that. I didnt get any event when eraser buttons is pressed. Strange. It should be 32

yajo commented 7 months ago

FWIW now that this lib is included in Joplin for handwritten notes, this would improve a lot the note-taking experience in Samsung tablets with S-Pen.

personalizedrefrigerator commented 7 months ago

Related upstream bug report.

Wladefant commented 3 weeks ago

the chinese app touchnotes supports erasing with a samsung pen. No other pen events are working, but the pressing and holding event does work, so there is defeinitely a work around for there

Wladefant commented 3 weeks ago

Did you try to fix it in May. What should I try?

personalizedrefrigerator commented 3 weeks ago

the chinese app touchnotes supports erasing with a samsung pen. No other pen events are working, but the pressing and holding event does work, so there is defeinitely a work around for there

In Joplin, js-draw runs within a WebView, which (on most systems) is based on Chromium. From a brief web search, it looks like touchnotes is a native app. Based on this and the upstream bug report, I suspect that the issue is related to Chromium and not the native Android APIs.

Possible next steps:

The upstream bug report states that the issue doesn't happen on Windows — confirm this.
(Difficult to implement & maintain): Look into capturing native pointer events on Android and forwarding them to the image editor's WebView.
(Difficult): Create a custom build of Chromium and try to debug and/or fix the issue.

personalizedrefrigerator / js-draw

Stylus eraser button support #52