From 1f6300af41546e32056c7e2c6944648d48521a16 Mon Sep 17 00:00:00 2001
From: Diego Marcos Segura <diego.marcos@gmail.com>
Date: Fri, 8 Nov 2024 17:31:26 -0800
Subject: [PATCH] Add Logitech MX Ink component docs and rename buttons to
 match Logitech docs

---
 docs/components/logitech-mx-ink-controls.md | 66 +++++++++++++++++++++
 src/components/logitech-mx-ink-controls.js  | 11 ++--
 2 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 docs/components/logitech-mx-ink-controls.md

diff --git a/docs/components/logitech-mx-ink-controls.md b/docs/components/logitech-mx-ink-controls.md
new file mode 100644
index 00000000000..6aa4b1070cd
--- /dev/null
+++ b/docs/components/logitech-mx-ink-controls.md
@@ -0,0 +1,66 @@
+---
+title: logiteck-mx-ink-controls
+type: components
+layout: docs
+parent_section: components
+source_code: src/components/logiteck-mx-ink-controls.js
+examples: []
+---
+
+[trackedcontrols]: ./tracked-controls.md
+
+The logiteck-mx-ink-controls component interfaces with the Logitech MX Ink tracked pen. It
+wraps the [tracked-controls component][trackedcontrols] while adding button
+mappings, events, and a pencil model.
+
+## Example
+
+```html
+<a-entity logiteck-mx-ink-controls="hand: left"></a-entity>
+<a-entity logiteck-mx-ink-controls="hand: right"></a-entity>
+```
+
+## Value
+
+| Property             | Description                                        | Default Value        |
+|----------------------|----------------------------------------------------|----------------------|
+| hand                 | The hand that will be tracked (i.e., right, left). | left                 |
+| model                | Whether the Touch controller model is loaded.      | true                 |
+
+## Events
+
+| Event Name           | Description                       |
+| ----------           | -----------                       |
+| tiptouchstart        | Tip touched.                      |
+| tiptouchend          | Tip no longer touched.            |
+| tipchanged           | Tip changed.                      |
+| frontdown            | Front button pressed.             |
+| frontup              | Front button released.            |
+| frontchanged         | Front button changed.             |
+| reardown             | Rear button pressed.              |
+| rearup               | Rear button released.             |
+| rearchanged          | Rear button changed.              |
+
+## Read tip changes
+
+Listen to the `tipchanged` event.
+
+```html
+<a-entity logiteck-mx-ink-controls="hand: left" tip-logging></a-entity>
+<a-entity logiteck-mx-ink-controls="hand: right" tip-logging></a-entity>
+```
+
+```javascript
+AFRAME.registerComponent('tip-logging',{
+  init: function () {
+    this.el.addEventListener('tipchanged', this.tipChanged);
+  },
+  tipChanged: function (evt) {
+    console.log("Pen tip changed");
+  }
+});
+```
+
+## Assets
+
+- [Logiteck MX Ink glTF](https://cdn.aframe.io/controllers/logitech/logitech-mx-ink.glb)
diff --git a/src/components/logitech-mx-ink-controls.js b/src/components/logitech-mx-ink-controls.js
index d353c340b48..1c45eb7e422 100644
--- a/src/components/logitech-mx-ink-controls.js
+++ b/src/components/logitech-mx-ink-controls.js
@@ -16,17 +16,18 @@ var LOGITECH_MX_INK_MODEL_GLB_BASE_URL = AFRAME_CDN_ROOT + 'controllers/logitech
 /**
  * Button IDs:
  * 0 - trigger
- * 1 - grip
- * 3 - X / A
- * 4 - Y / B
+ * 1 - squeeze
+ * 5 - touchpad
+ * 6 - tip
+ * 7 - dock
  *
 */
 var INPUT_MAPPING_WEBXR = {
   left: {
-    buttons: ['trigger', 'squeeze', 'none', 'none', 'touchpad', 'tip', 'dock']
+    buttons: ['front', 'back', 'none', 'none', 'none', 'tip']
   },
   right: {
-    buttons: ['trigger', 'squeeze', 'none', 'none', 'touchpad', 'tip', 'dock']
+    buttons: ['front', 'back', 'none', 'none', 'none', 'tip']
   }
 };