Track mouse position on device screen

app/styles/base.css

@@ -866,6 +866,21 @@ select:active {
   ime-mode: disabled;
 }
 
+#noVNC_mouse_coordinates {
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: 20px;
+  min-width: 150px;
+  font-size: 20px;
+  font-weight: 600;
+  text-align: center;
+  background-color: #fff;
+  border: 2px solid #E0E0E0;
+  border-radius: 0 0 0 5px;
+  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+}
+
 /*Default noVNC logo.*/
 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 @font-face {

app/ui.js

@@ -707,6 +707,17 @@ const UI = {
         }
     },
 
+    trackMouse() {
+        UI.rfb.canvas.addEventListener('mousemove', function(e) {
+            let scaleRatioX = UI.rfb.canvas.width / UI.rfb.canvas.clientWidth;
+            let scaleRatioY = UI.rfb.canvas.height / UI.rfb.canvas.clientHeight;
+            let x = Math.floor(e.offsetX * scaleRatioX);
+            let y = Math.floor(e.offsetY * scaleRatioY);
+            document.getElementById('noVNC_mouse_coordinates').innerText = "(" + x + ", " + y + ")"
+        });
+    },
+
+
 /* ------^-------
  *    /VISUAL
  * ==============
@@ -1036,6 +1047,8 @@ const UI = {
         UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
         UI.rfb.showDotCursor = UI.getSetting('show_dot');
 
+        UI.trackMouse();
+
         UI.updateViewOnly(); // requires UI.rfb
     },
 

core/rfb.js

@@ -271,6 +271,8 @@ export default class RFB extends EventTargetMixin {
         }
     }
 
+    get canvas() { return this._canvas; }
+
     get capabilities() { return this._capabilities; }
 
     get touchButton() { return this._mouse.touchButton; }

vnc.html

@@ -332,5 +332,9 @@
         <source src="app/sounds/bell.oga" type="audio/ogg">
         <source src="app/sounds/bell.mp3" type="audio/mpeg">
     </audio>
+
+    <div id="noVNC_mouse_coordinates">
+        (0, 0)
+    </div>
  </body>
 </html>