Stylus eraser button support #52

personalizedrefrigerator · 2023-11-24T13:50:45Z

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.

Update:

As of September 2024, the the stylus eraser button should work, but platform support is limited:
- Windows 11+Microsoft Edge: Should be supported.
- Linux+Chromium, Linux+Firefox: Probably not supported (see https://stackoverflow.com/a/78764151).
- Chrome+Android: Supported only on some Android devices (based on the upstream issue).

The text was updated successfully, but these errors were encountered:

Wladefant · 2023-11-24T16:12:27Z

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 · 2023-11-24T16:34:16Z

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 · 2023-11-24T16:56:43Z

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 · 2023-11-26T16:34:03Z

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 · 2023-11-26T17:52:44Z

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

yajo · 2024-01-06T10:38:23Z

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 · 2024-01-06T20:06:30Z

Related upstream bug report.

Previously, the pen-eraser-button shortcut for switching from a pen to an eraser was broken. This commit **should** fix the issue. However, I don't have a device with a (working in a browser) eraser button to test.

Wladefant · 2024-08-02T09:17:37Z

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 · 2024-08-02T09:28:37Z

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

personalizedrefrigerator · 2024-08-02T15:14:02Z

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.
- Update: Confirmed that the eraser works in Microsoft Edge (based on Chromium) on Windows 11.
(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 added the enhancement New feature or request label Nov 24, 2023

personalizedrefrigerator changed the title ~~Eraser support~~ Stylus eraser button support Nov 25, 2023

personalizedrefrigerator added upstream and removed upstream labels Jan 6, 2024

Robin-Sch mentioned this issue Sep 10, 2024

Stylus buttons personalizedrefrigerator/joplin-plugin-freehand-drawing#13

Closed

personalizedrefrigerator added the chrome/android label Sep 12, 2024

personalizedrefrigerator mentioned this issue Sep 12, 2024

Bug: Assign the eraser to a pen button #75

Closed

personalizedrefrigerator added bug Something isn't working upstream chrome/linux and removed enhancement New feature or request labels Sep 12, 2024

personalizedrefrigerator changed the title ~~Stylus eraser button support~~ [Chrome+Android,Chrome+Linux] Stylus eraser button support Sep 12, 2024

personalizedrefrigerator changed the title ~~[Chrome+Android,Chrome+Linux] Stylus eraser button support~~ Stylus eraser button support Sep 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stylus eraser button support #52

Stylus eraser button support #52

personalizedrefrigerator commented Nov 24, 2023 •

edited

Loading

Wladefant commented Nov 24, 2023

personalizedrefrigerator commented Nov 24, 2023 •

edited

Loading

Wladefant commented Nov 24, 2023

personalizedrefrigerator commented Nov 26, 2023

Wladefant commented Nov 26, 2023

yajo commented Jan 6, 2024

personalizedrefrigerator commented Jan 6, 2024 •

edited

Loading

Wladefant commented Aug 2, 2024

Wladefant commented Aug 2, 2024

personalizedrefrigerator commented Aug 2, 2024 •

edited

Loading

Stylus eraser button support #52

Stylus eraser button support #52

Comments

personalizedrefrigerator commented Nov 24, 2023 • edited Loading

Wladefant commented Nov 24, 2023

personalizedrefrigerator commented Nov 24, 2023 • edited Loading

Wladefant commented Nov 24, 2023

personalizedrefrigerator commented Nov 26, 2023

Wladefant commented Nov 26, 2023

yajo commented Jan 6, 2024

personalizedrefrigerator commented Jan 6, 2024 • edited Loading

Wladefant commented Aug 2, 2024

Wladefant commented Aug 2, 2024

personalizedrefrigerator commented Aug 2, 2024 • edited Loading

personalizedrefrigerator commented Nov 24, 2023 •

edited

Loading

personalizedrefrigerator commented Nov 24, 2023 •

edited

Loading

personalizedrefrigerator commented Jan 6, 2024 •

edited

Loading

personalizedrefrigerator commented Aug 2, 2024 •

edited

Loading