KASM-3972 use an array of known scaling values to produce pixel perfect output (#54)

* KASM-3972 use an array of known scaling values to produce pixel perfect output

* KASM-3972 drop automatic pixel perfect support to only 1.25 and 1.5 ratios common to Windows installations

* KASM-3972 change setting name and commit html changes

---------

Co-authored-by: ryan.kuba <ryan.kuba@kasmweb.com>

app/ui.js

@@ -245,6 +245,7 @@ const UI = {
         UI.initSetting('virtual_keyboard_visible', false);
         UI.initSetting('enable_ime', false);
         UI.initSetting('enable_webrtc', false);
+        UI.initSetting('enable_hidpi', false);
         UI.toggleKeyboardControls();
 
         if (WebUtil.isInsideKasmVDI()) {
@@ -559,6 +560,8 @@ const UI = {
         UI.addSettingChangeHandler('enable_ime', UI.toggleIMEMode);
         UI.addSettingChangeHandler('enable_webrtc');
         UI.addSettingChangeHandler('enable_webrtc', UI.toggleWebRTC);
+        UI.addSettingChangeHandler('enable_hidpi');
+        UI.addSettingChangeHandler('enable_hidpi', UI.enableHiDpi);
     },
 
     addFullscreenHandlers() {
@@ -1406,6 +1409,7 @@ const UI = {
         UI.rfb.keyboard.enableIME = UI.getSetting('enable_ime');
         UI.rfb.clipboardBinary = supportsBinaryClipboard() && UI.rfb.clipboardSeamless;
         UI.rfb.enableWebRTC = UI.getSetting('enable_webrtc');
+        UI.rfb.enableHiDpi = UI.getSetting('enable_hidpi');
         UI.rfb.mouseButtonMapper = UI.initMouseButtonMapper();
         if (UI.rfb.videoQuality === 5) {
             UI.rfb.enableQOI = true;
@@ -1700,6 +1704,10 @@ const UI = {
                     UI.rfb.idleDisconnect = idle_timeout_min;
                     console.log(`Updated the idle timeout to ${event.data.value}s`);
                     break;
+                case 'enable_hidpi':
+                    UI.forceSetting('enable_hidpi', event.data.value, false);
+                    UI.enableHiDpi();
+                    break;
             }
         }
     },
@@ -1842,6 +1850,7 @@ const UI = {
         UI.rfb.idleDisconnect = UI.getSetting('idle_disconnect');
         UI.rfb.videoQuality = UI.getSetting('video_quality');
         UI.rfb.enableWebP = UI.getSetting('enable_webp');
+        UI.rfb.enableHiDpi = UI.getSetting('enable_hidpi');
     },
 
 /* ------^-------
@@ -2100,6 +2109,7 @@ const UI = {
             UI.rfb.enableWebP = UI.getSetting('enable_webp');
             UI.rfb.videoQuality = parseInt(UI.getSetting('video_quality'));
             UI.rfb.enableQOI = enable_qoi;
+            UI.rfb.enableHiDpi = UI.getSetting('enable_hidpi');
 
             // Gracefully update settings server side
             UI.rfb.updateConnectionSettings();
@@ -2159,6 +2169,16 @@ const UI = {
         }
     },
 
+    enableHiDpi() {
+        if (UI.rfb) {
+            if (UI.getSetting('enable_hidpi')) {
+                UI.rfb.enableHiDpi = true;
+            } else {
+                UI.rfb.enableHiDpi = false;
+            }
+        }
+    },
+
     showKeyboardControls() {
         document.getElementById('noVNC_keyboard_control').classList.add("is-visible");
     },

core/rfb.js

@@ -143,6 +143,7 @@ export default class RFB extends EventTargetMixin {
         this._forcedResolutionY = null;
         this._clipboardBinary = true;
         this._useUdp = true;
+        this._hiDpi = false;
         this._enableQOI = false;
         this.TransitConnectionStates = {
             Tcp: Symbol("tcp"),
@@ -753,6 +754,14 @@ export default class RFB extends EventTargetMixin {
         }
     }
 
+    get enableHiDpi() { return this._hiDpi; }
+    set enableHiDpi(value) {
+        if (value !== this._hiDpi) {
+            this._hiDpi = value;
+            this._requestRemoteResize();
+        }
+    }
+
     // ===== PUBLIC METHODS =====
 
     /*
@@ -1312,7 +1321,6 @@ export default class RFB extends EventTargetMixin {
             !this._supportsSetDesktopSize) {
             return;
         }
-
         const size = this._screenSize();
         RFB.messages.setDesktopSize(this._sock,
                                     Math.floor(size.w), Math.floor(size.h),
@@ -1340,6 +1348,10 @@ export default class RFB extends EventTargetMixin {
             else if (limited && this.videoQuality == 0){
                 x = 1280;
                 y = 720;
+            } else if (this._hiDpi == true) {
+                x = x * window.devicePixelRatio;
+                y = y * window.devicePixelRatio;
+                scale = 1 / window.devicePixelRatio;
             } else if (this._display.antiAliasing === 0 && window.devicePixelRatio > 1 && x < 1000 && x > 0) {
                 // small device with high resolution, browser is essentially zooming greater than 200%
                 Log.Info('Device Pixel ratio: ' + window.devicePixelRatio + ' Reported Resolution: ' + x + 'x' + y); 
@@ -1355,7 +1367,7 @@ export default class RFB extends EventTargetMixin {
         } catch (err) {
             Log.Debug(err);
         }
-
+        
         return { w: x,
                  h: y,
                  scale: scale };

vnc.html

@@ -295,6 +295,12 @@
                                         <span class="slider-label">Toggle Control Panel via Keystrokes</span>
                                     </label>
                                 </li>
+                                <li>
+                                    <label class="switch"><input id="noVNC_setting_enable_hidpi" type="checkbox" />
+                                        <span class="slider round"></span>
+                                        <span class="slider-label">Render Native Resolution</span>
+                                    </label>
+                                </li>
                                 <li>
                                     <label for="noVNC_setting_idle_disconnect">Idle Timeout:</label>
                                     <select id="noVNC_setting_idle_disconnect" name="vncIdleDisconnect">