Add debug overlay, handle more pointer events.

Additionally, improved css a bit.

src/input/autopilot_device_win.rs

@@ -59,9 +59,11 @@ impl InputDevice for WindowsInput {
             PointerEventType::DOWN => {
                 POINTER_FLAG_INRANGE | POINTER_FLAG_INCONTACT | POINTER_FLAG_DOWN
             }
-            PointerEventType::MOVE => POINTER_FLAG_INRANGE | POINTER_FLAG_UPDATE,
+            PointerEventType::MOVE | PointerEventType::OVER | PointerEventType::ENTER => {
+                POINTER_FLAG_INRANGE | POINTER_FLAG_UPDATE
+            }
             PointerEventType::UP => POINTER_FLAG_UP,
-            PointerEventType::CANCEL => {
+            PointerEventType::CANCEL | PointerEventType::LEAVE | PointerEventType::OUT => {
                 POINTER_FLAG_INRANGE | POINTER_FLAG_UPDATE | POINTER_FLAG_CANCELED
             }
         };
@@ -151,9 +153,15 @@ impl InputDevice for WindowsInput {
                     InjectSyntheticPointerInput(self.touch_device_handle, m, len as u32);
 
                     match event.event_type {
-                        PointerEventType::DOWN | PointerEventType::MOVE => {}
-
-                        PointerEventType::UP | PointerEventType::CANCEL => {
+                        PointerEventType::DOWN
+                        | PointerEventType::MOVE
+                        | PointerEventType::OVER
+                        | PointerEventType::ENTER => {}
+
+                        PointerEventType::UP
+                        | PointerEventType::CANCEL
+                        | PointerEventType::LEAVE
+                        | PointerEventType::OUT => {
                             self.multitouch_map.remove(&event.pointer_id);
                         }
                     }
@@ -180,7 +188,7 @@ impl InputDevice for WindowsInput {
                         }
                         _ => {}
                     },
-                    PointerEventType::MOVE => {
+                    PointerEventType::MOVE | PointerEventType::OVER | PointerEventType::ENTER => {
                         unsafe { SetCursorPos(screen_x, screen_y) };
                     }
                     PointerEventType::UP => match event.button {
@@ -195,7 +203,7 @@ impl InputDevice for WindowsInput {
                         }
                         _ => {}
                     },
-                    PointerEventType::CANCEL => {
+                    PointerEventType::CANCEL | PointerEventType::LEAVE | PointerEventType::OUT => {
                         dw_flags |= MOUSEEVENTF_LEFTUP;
                     }
                 }

src/input/uinput_device.rs

@@ -305,7 +305,10 @@ impl InputDevice for UInputDevice {
                     self.num_touch_mapping_tries += 1;
                 }
                 match event.event_type {
-                    PointerEventType::DOWN | PointerEventType::MOVE => {
+                    PointerEventType::DOWN
+                    | PointerEventType::MOVE
+                    | PointerEventType::OVER
+                    | PointerEventType::ENTER => {
                         let slot: usize;
                         // check if this event is already assigned to one of our 10 multitouch slots
                         if let Some(s) = self.find_slot(event.pointer_id) {
@@ -413,7 +416,10 @@ impl InputDevice for UInputDevice {
                         );
                         self.send(self.touch_fd, ET_SYNC, EC_SYNC_REPORT, 0);
                     }
-                    PointerEventType::CANCEL | PointerEventType::UP => {
+                    PointerEventType::CANCEL
+                    | PointerEventType::UP
+                    | PointerEventType::LEAVE
+                    | PointerEventType::OUT => {
                         // remove from slot
                         if let Some(slot) = self.find_slot(event.pointer_id) {
                             self.send(self.touch_fd, ET_ABSOLUTE, EC_ABS_MT_SLOT, slot as i32);
@@ -459,7 +465,10 @@ impl InputDevice for UInputDevice {
                     self.num_touch_mapping_tries += 1;
                 }
                 match event.event_type {
-                    PointerEventType::DOWN | PointerEventType::MOVE => {
+                    PointerEventType::DOWN
+                    | PointerEventType::MOVE
+                    | PointerEventType::OVER
+                    | PointerEventType::ENTER => {
                         if let PointerEventType::DOWN = event.event_type {
                             self.pen_touching = true;
                             self.send(self.stylus_fd, ET_KEY, EC_KEY_TOUCH, 1);
@@ -509,7 +518,10 @@ impl InputDevice for UInputDevice {
                             event.tilt_y,
                         );
                     }
-                    PointerEventType::UP | PointerEventType::CANCEL => {
+                    PointerEventType::UP
+                    | PointerEventType::CANCEL
+                    | PointerEventType::LEAVE
+                    | PointerEventType::OUT => {
                         self.send(self.stylus_fd, ET_KEY, EC_KEY_TOUCH, 0);
                         self.send(self.stylus_fd, ET_KEY, EC_KEY_TOOL_PEN, 0);
                         self.send(self.stylus_fd, ET_KEY, EC_KEY_TOOL_RUBBER, 0);
@@ -546,7 +558,10 @@ impl InputDevice for UInputDevice {
                     self.num_touch_mapping_tries += 1;
                 }
                 match event.event_type {
-                    PointerEventType::DOWN | PointerEventType::MOVE => {
+                    PointerEventType::DOWN
+                    | PointerEventType::MOVE
+                    | PointerEventType::OVER
+                    | PointerEventType::ENTER => {
                         if let PointerEventType::DOWN = event.event_type {
                             match event.button {
                                 Button::PRIMARY => {
@@ -574,7 +589,10 @@ impl InputDevice for UInputDevice {
                             self.transform_y(event.y),
                         );
                     }
-                    PointerEventType::UP | PointerEventType::CANCEL => match event.button {
+                    PointerEventType::UP
+                    | PointerEventType::CANCEL
+                    | PointerEventType::LEAVE
+                    | PointerEventType::OUT => match event.button {
                         Button::PRIMARY => self.send(self.mouse_fd, ET_KEY, EC_KEY_MOUSE_LEFT, 0),
                         Button::SECONDARY => {
                             self.send(self.mouse_fd, ET_KEY, EC_KEY_MOUSE_RIGHT, 0)

src/protocol.rs

@@ -82,6 +82,14 @@ pub enum PointerEventType {
     CANCEL,
     #[serde(rename = "pointermove")]
     MOVE,
+    #[serde(rename = "pointerover")]
+    OVER,
+    #[serde(rename = "pointerenter")]
+    ENTER,
+    #[serde(rename = "pointerleave")]
+    LEAVE,
+    #[serde(rename = "pointerout")]
+    OUT,
 }
 
 #[derive(Serialize, Deserialize, Debug)]

ts/lib.ts

@@ -176,6 +176,16 @@ class Settings {
             this.save_settings();
         };
 
+        this.checks.get("enable_debug_overlay").onchange = (e) => {
+            let enabled = (e.target as HTMLInputElement).checked;
+            if (enabled) {
+                debug_overlay.classList.remove("hide");
+            } else {
+                debug_overlay.classList.add("hide");
+            }
+            this.save_settings();
+        };
+
         this.check_aggressive_seek = this.checks.get("aggressive_seeking");
         this.check_aggressive_seek.onchange = () => {
             this.save_settings();
@@ -306,6 +316,11 @@ class Settings {
                 this.toggle_energysaving(true);
             }
 
+            if (this.checks.get("enable_debug_overlay").checked) {
+                debug_overlay.classList.remove("hide");
+            }
+
+
             if (document.getElementById("custom_input_areas").classList.contains("hide")) {
                 this.checks.get("enable_custom_input_areas").checked = false;
             }
@@ -385,6 +400,8 @@ class Settings {
 }
 
 let settings: Settings;
+let debug_overlay: HTMLElement;
+let last_pointer_data: Object;
 
 class PEvent {
     event_type: string;
@@ -683,6 +700,10 @@ class PointerHandler {
         video.onpointerup = (e) => this.onEvent(e, "pointerup");
         video.onpointercancel = (e) => this.onEvent(e, "pointercancel");
         video.onpointermove = (e) => this.onEvent(e, "pointermove");
+        video.onpointerout = (e) => this.onEvent(e, "pointerout");
+        video.onpointerleave = (e) => this.onEvent(e, "pointerleave");
+        video.onpointerenter = (e) => this.onEvent(e, "pointerenter");
+        video.onpointerover = (e) => this.onEvent(e, "pointerover");
 
         let painter: Painter;
         if (!settings.checks.get("energysaving").checked)
@@ -693,11 +714,19 @@ class PointerHandler {
             canvas.onpointerup = (e) => { this.onEvent(e, "pointerup"); painter.onstop(e); };
             canvas.onpointercancel = (e) => { this.onEvent(e, "pointercancel"); painter.onstop(e); };
             canvas.onpointermove = (e) => { this.onEvent(e, "pointermove"); painter.onmove(e); };
+            canvas.onpointerout = (e) => { this.onEvent(e, "pointerout"); painter.onstop(e); };
+            canvas.onpointerleave = (e) => { this.onEvent(e, "pointerleave"); painter.onstop(e); };
+            canvas.onpointerenter = (e) => { this.onEvent(e, "pointerenter"); painter.onmove(e); };
+            canvas.onpointerover = (e) => { this.onEvent(e, "pointerover"); painter.onmove(e); };
         } else {
             canvas.onpointerdown = (e) => this.onEvent(e, "pointerdown");
             canvas.onpointerup = (e) => this.onEvent(e, "pointerup");
             canvas.onpointercancel = (e) => this.onEvent(e, "pointercancel");
             canvas.onpointermove = (e) => this.onEvent(e, "pointermove");
+            canvas.onpointerout = (e) => this.onEvent(e, "pointerout");
+            canvas.onpointerleave = (e) => this.onEvent(e, "pointerleave");
+            canvas.onpointerenter = (e) => this.onEvent(e, "pointerenter");
+            canvas.onpointerover = (e) => this.onEvent(e, "pointerover");
         }
 
         // This is a workaround for the following Safari/WebKit bug:
@@ -714,6 +743,65 @@ class PointerHandler {
     }
 
     onEvent(event: PointerEvent, event_type: string) {
+        if (settings.checks.get("enable_debug_overlay").checked) {
+            let props = [
+                "altKey",
+                "altitudeAngle",
+                "azimuthAngle",
+                "button",
+                "buttons",
+                "clientX",
+                "clientY",
+                "ctrlKey",
+                "height",
+                "isPrimary",
+                "metaKey",
+                "movementX",
+                "movementY",
+                "offsetX",
+                "offsetY",
+                "pageX",
+                "pageY",
+                "pointerId",
+                "pointerType",
+                "pressure",
+                "screenX",
+                "screenY",
+                "shiftKey",
+                "tangentialPressure",
+                "tiltX",
+                "tiltY",
+                "timeStamp",
+                "twist",
+                "type",
+                "width",
+                "x",
+                "y",
+            ];
+            if (!last_pointer_data) {
+                last_pointer_data = {};
+                for (let prop of props) {
+                    let span_id = `prop_${prop}_span`;
+                    let span = document.getElementById(span_id);
+                    span = document.createElement("span");
+                    span.id = span_id;
+                    debug_overlay.appendChild(span);
+                    debug_overlay.appendChild(document.createElement("br"));
+                }
+            }
+            for (let prop of props) {
+                let span_id = `prop_${prop}_span`;
+                let span = document.getElementById(span_id);
+                let v = event[prop];
+                span.textContent = `${prop}: ${v}`;
+                if (last_pointer_data[prop] == v) {
+                    span.classList.remove("updated");
+                } else {
+                    span.classList.add("updated");
+                    last_pointer_data[prop] = v;
+                }
+            }
+        }
         if (this.pointerTypes.includes(event.pointerType)) {
             let rect = (event.target as HTMLElement).getBoundingClientRect();
             const events = event_type === "pointermove" && typeof event.getCoalescedEvents === 'function' ? event.getCoalescedEvents() : [event];
@@ -944,6 +1032,7 @@ function init() {
     );
     webSocket.binaryType = "arraybuffer";
 
+    debug_overlay = document.getElementById("debug_overlay");
     settings = new Settings(webSocket);
 
     let video = document.getElementById("video") as HTMLVideoElement;

www/static/style.css

@@ -1,37 +1,15 @@
 @media (prefers-color-scheme: dark) {
-    body, html {
-        background: #202020;
-    }
-    #settings {
-        color: #ddd;
-        background: #303030;
-    }
-    #handle {
-        background: #303030;
-        color: #ddd;
-    }
-    form {
-        background: #303030;
-        color: #ddd;
-        border: 0.5em solid #252525;
+    :root {
+        --color: #ddd;
+        --background-color-1: #303030;
+        --background-color-2: #202020;
     }
 }
 @media (prefers-color-scheme: light) {
-    body, html {
-        background: #fff;
-    }
-    #settings {
-        color: #111;
-        background: #eee;
-    }
-    #handle {
-        background: #eee;
-        color: #111;
-    }
-    form {
-        background: #eee;
-        color: #111;
-        border: 0.5em solid #f7f7f7;
+    :root {
+        --color: #111;
+        --background-color-1: #eee;
+        --background-color-2: #fff;
     }
 }
 main {
@@ -50,6 +28,8 @@ body, html, main {
     padding: 0;
     overflow: hidden;
     display: flex;
+    color: var(--color);
+    background: var(--background-color-2);
 }
 video {
     max-width: 100%;
@@ -76,17 +56,17 @@ input[type='text'] {
 input[type='range']::-webkit-slider-runnable-track, input[type="range"]::-moz-range-track {
       background-color: #00aaff;
 }
-form, form input {
-    font-size: 1.4em;
-    display: grid;
-}
 .container {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
+#settings, #handle, #debug_overlay {
+    color: var(--color);
+    background: var(--background-color-1);
+}
 #settings_scroll {
     overflow: auto;
     width: 100%;
@@ -151,7 +131,7 @@ form, form input {
     display: block;
     margin-top: 0.5em;
 }
-#settings section.hide, section label.hide, section button.hide {
+#settings section.hide, section label.hide, section button.hide, #debug_overlay.hide {
     display: none !important;
 }
 select {
@@ -205,3 +185,25 @@ label input:disabled + span {
     -moz-user-select: text;
     -ms-user-select: text;
 }
+#debug_overlay {
+    --padding: 3px;
+    position: absolute;
+    top:0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: fit-content;
+    height: fit-content;
+    z-index: 1;
+    pointer-events: none;
+    opacity: 75%;
+    padding: var(--padding);
+    border: 2px solid var(--color);
+    white-space: pre;
+    font-size: small;
+    text-align: center;
+}
+#debug_overlay span.updated {
+    color: darkgreen;
+}