Add "touchpad mode" with pinch-zoom for mobile view.

app/styles/base.css

@@ -345,7 +345,10 @@ html {
   padding: 0 10px;
 }
 
-#noVNC_control_bar > .noVNC_scroll > * {
+/* Do not apply margin to #noVNC_mobilebuttons div. There is now
+   more than one button inside it, so we'll apply margins directly
+   to the buttons in another rule. */
+#noVNC_control_bar > .noVNC_scroll > *:not(#noVNC_mobile_buttons) {
   display: block;
   margin: 10px auto;
 }
@@ -553,6 +556,12 @@ html {
 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
   display: none;
 }
+
+#noVNC_mobile_buttons > .noVNC_button {
+  display: block;
+  margin: 10px auto;
+}
+
 @media not all and (any-pointer: coarse) {
   /* FIXME: The button for the virtual keyboard is the only button in this
             group of "mobile buttons". It is bad to assume that no touch

app/ui.js

@@ -88,7 +88,7 @@ const UI = {
             });
 
         // Adapt the interface for touch screen devices
-        if (isTouchDevice) {
+        if (isTouchDevice()) {
             // Remove the address bar
             setTimeout(() => window.scrollTo(0, 1), 100);
         }
@@ -232,6 +232,9 @@ const UI = {
         document.getElementById("noVNC_view_drag_button")
             .addEventListener('click', UI.toggleViewDrag);
 
+        document.getElementById("noVNC_touchpad_button")
+            .addEventListener('click', UI.toggleTouchpadMode);
+
         document.getElementById("noVNC_control_bar_handle")
             .addEventListener('mousedown', UI.controlbarHandleMouseDown);
         document.getElementById("noVNC_control_bar_handle")
@@ -461,6 +464,12 @@ const UI = {
             .classList.remove('noVNC_open');
     },
 
+    /**
+     * @param {string} text
+     * @param { "normal" | "info" | "warn" | "warning" | "error" } statusType
+     * @param {number} time
+     * @returns
+     */
     showStatus(text, statusType, time) {
         const statusElem = document.getElementById('noVNC_status');
 
@@ -1061,8 +1070,10 @@ const UI = {
         UI.rfb.qualityLevel = parseInt(UI.getSetting('quality'));
         UI.rfb.compressionLevel = parseInt(UI.getSetting('compression'));
         UI.rfb.showDotCursor = UI.getSetting('show_dot');
+        UI.rfb.touchpadMode = WebUtil.readSetting('touchpad_mode', 'false') === 'true';
 
         UI.updateViewOnly(); // requires UI.rfb
+        UI.updateTouchpadMode();
     },
 
     disconnect() {
@@ -1116,6 +1127,12 @@ const UI = {
 
         // Do this last because it can only be used on rendered elements
         UI.rfb.focus();
+
+        // In touchpad mode, we want the cursor centered in the
+        // viewport at the start so we can see it.
+        if (UI.rfb.touchpadMode) {
+            UI.rfb.centerCursorInViewport();
+        }
     },
 
     disconnectFinished(e) {
@@ -1345,7 +1362,7 @@ const UI = {
             // Can't be clipping if viewport is scaled to fit
             UI.forceSetting('view_clip', false);
             UI.rfb.clipViewport  = false;
-        } else if (brokenScrollbars) {
+        } else if (brokenScrollbars || UI.rfb.touchpadMode) {
             UI.forceSetting('view_clip', true);
             UI.rfb.clipViewport = true;
         } else {
@@ -1369,13 +1386,18 @@ const UI = {
 
         UI.rfb.dragViewport = !UI.rfb.dragViewport;
         UI.updateViewDrag();
+        UI.updateTouchpadMode();
     },
 
     updateViewDrag() {
         if (!UI.connected) return;
 
         const viewDragButton = document.getElementById('noVNC_view_drag_button');
 
+        if (UI.rfb.dragViewport) {
+            UI.rfb.touchpadMode = false;
+        }
+
         if ((!UI.rfb.clipViewport || !UI.rfb.clippingViewport) &&
             UI.rfb.dragViewport) {
             // We are no longer clipping the viewport. Make sure
@@ -1429,7 +1451,7 @@ const UI = {
  * ------v------*/
 
     showVirtualKeyboard() {
-        if (!isTouchDevice) return;
+        if (!isTouchDevice()) return;
 
         const input = document.getElementById('noVNC_keyboardinput');
 
@@ -1447,7 +1469,7 @@ const UI = {
     },
 
     hideVirtualKeyboard() {
-        if (!isTouchDevice) return;
+        if (!isTouchDevice()) return;
 
         const input = document.getElementById('noVNC_keyboardinput');
 
@@ -1586,11 +1608,52 @@ const UI = {
         }
     },
 
-/* ------^-------
- *   /KEYBOARD
- * ==============
- *   EXTRA KEYS
- * ------v------*/
+    /* ------^-------
+     *  /KEYBOARD
+     * ==============
+     *   TOUCHPAD
+     * ------v------*/
+
+    toggleTouchpadMode() {
+        if (!UI.rfb) return;
+
+        UI.rfb.touchpadMode = !UI.rfb.touchpadMode;
+        WebUtil.writeSetting('touchpad_mode', UI.rfb.touchpadMode);
+        UI.updateTouchpadMode();
+        UI.updateViewDrag();
+    },
+
+    updateTouchpadMode() {
+        if (UI.rfb.touchpadMode) {
+            UI.rfb.dragViewport = false;
+
+            UI.forceSetting('resize', 'off');
+            UI.forceSetting('view_clip', true);
+            UI.forceSetting('show_dot', true);
+
+            UI.rfb.clipViewport = true;
+            UI.rfb.scaleViewport = false;
+            UI.rfb.resizeSession = false;
+            UI.rfb.showDotCursor = true;
+        } else {
+            UI.enableSetting('resize');
+            UI.enableSetting('view_clip');
+            UI.enableSetting('show_dot');
+        }
+
+        const touchpadButton = document.getElementById('noVNC_touchpad_button');
+        if (UI.rfb.touchpadMode) {
+            touchpadButton.classList.add("noVNC_selected");
+        } else {
+            touchpadButton.classList.remove("noVNC_selected");
+        }
+    },
+
+   /* ------^-------
+    *   /TOUCHPAD
+    * ==============
+    *   EXTRA KEYS
+    * ------v------*/
 
     openExtraKeys() {
         UI.closeAllPanels();
@@ -1704,12 +1767,14 @@ const UI = {
                 .classList.add('noVNC_hidden');
             document.getElementById('noVNC_clipboard_button')
                 .classList.add('noVNC_hidden');
+            document.getElementById('noVNC_clipboard_button')
+                .classList.add('noVNC_hidden');
         } else {
             document.getElementById('noVNC_keyboard_button')
                 .classList.remove('noVNC_hidden');
             document.getElementById('noVNC_toggle_extra_keys_button')
                 .classList.remove('noVNC_hidden');
-            document.getElementById('noVNC_clipboard_button')
+            document.getElementById('noVNC_touchpad_button')
                 .classList.remove('noVNC_hidden');
         }
     },

core/display.js

@@ -87,8 +87,38 @@ export default class Display {
         return this._fbHeight;
     }
 
+    get viewportLocation() {
+        return this._viewportLoc;
+    }
+
     // ===== PUBLIC METHODS =====
 
+    /**
+     * Attempt to move the viewport by the specified amounts
+     * and returns the amount of actual position change.
+     * @param {number} moveByX
+     * @param {number} moveByY
+     * @return {{ x: number, y: number }}
+     */
+    viewportTryMoveBy(moveByX, moveByY) {
+        if (moveByX === 0 && moveByY === 0) {
+            return {
+                x: 0,
+                y: 0
+            };
+        }
+
+        const vpX = this._viewportLoc.x;
+        const vpY = this._viewportLoc.y;
+
+        this.viewportChangePos(moveByX, moveByY);
+
+        return {
+            x: this._viewportLoc.x - vpX,
+            y: this._viewportLoc.y - vpY
+        };
+    }
+
     viewportChangePos(deltaX, deltaY) {
         const vp = this._viewportLoc;
         deltaX = Math.floor(deltaX);
@@ -433,6 +463,10 @@ export default class Display {
         this._rescale(scaleRatio);
     }
 
+    rescale(factor) {
+        this._rescale(factor);
+    }
+
     // ===== PRIVATE METHODS =====
 
     _rescale(factor) {