From a0907e9390e8a135a280f7e4157eced05b8ec687 Mon Sep 17 00:00:00 2001 From: matt Date: Sun, 12 Sep 2021 17:53:03 +0000 Subject: [PATCH] KASM-1834 added new anti-aliasing feature --- app/ui.js | 6 ++++++ core/display.js | 32 ++++++++++++++++++-------------- core/rfb.js | 6 +++++- vnc.html | 8 ++++++++ 4 files changed, 37 insertions(+), 15 deletions(-) diff --git a/app/ui.js b/app/ui.js index d41d1aa1..38a33f73 100644 --- a/app/ui.js +++ b/app/ui.js @@ -193,6 +193,7 @@ const UI = { UI.initSetting('treat_lossless', 7); UI.initSetting('jpeg_video_quality', 5); UI.initSetting('webp_video_quality', 5); + UI.initSetting('anti_aliasing', 0); UI.initSetting('video_area', 65); UI.initSetting('video_time', 5); UI.initSetting('video_out_time', 3); @@ -412,6 +413,8 @@ const UI = { UI.addSettingChangeHandler('dynamic_quality_max', UI.updateQuality); UI.addSettingChangeHandler('treat_lossless'); UI.addSettingChangeHandler('treat_lossless', UI.updateQuality); + UI.addSettingChangeHandler('anti_aliasing'); + UI.addSettingChangeHandler('anti_aliasing', UI.updateQuality); UI.addSettingChangeHandler('jpeg_video_quality'); UI.addSettingChangeHandler('jpeg_video_quality', UI.updateQuality); UI.addSettingChangeHandler('webp_video_quality'); @@ -953,6 +956,7 @@ const UI = { UI.updateSetting('dynamic_quality_min', 3); UI.updateSetting('dynamic_quality_max', 9); UI.updateSetting('treat_lossless', 7); + UI.updateSetting('anti_aliasing', 0); UI.updateSetting('jpeg_video_quality', 5); UI.updateSetting('webp_video_quality', 5); UI.updateSetting('video_area', 65); @@ -1282,6 +1286,7 @@ const UI = { UI.rfb.showDotCursor = UI.getSetting('show_dot'); UI.rfb.idleDisconnect = UI.getSetting('idle_disconnect'); UI.rfb.videoQuality = UI.getSetting('video_quality'); + UI.rfb.antiAliasing = UI.getSetting('anti_aliasing'); UI.rfb.clipboardUp = UI.getSetting('clipboard_up'); UI.rfb.clipboardDown = UI.getSetting('clipboard_down'); UI.rfb.clipboardSeamless = UI.getSetting('clipboard_seamless'); @@ -1694,6 +1699,7 @@ const UI = { // avoid sending too many, will only apply when there are changes setTimeout(function() { UI.rfb.qualityLevel = parseInt(UI.getSetting('quality')); + UI.rfb.antiAliasing = parseInt(UI.getSetting('anti_aliasing')); UI.rfb.dynamicQualityMin = parseInt(UI.getSetting('dynamic_quality_min')); UI.rfb.dynamicQualityMax = parseInt(UI.getSetting('dynamic_quality_max')); UI.rfb.jpegVideoQuality = parseInt(UI.getSetting('jpeg_video_quality')); diff --git a/core/display.js b/core/display.js index 2e1eff83..0f567017 100644 --- a/core/display.js +++ b/core/display.js @@ -43,11 +43,6 @@ export default class Display { } this._targetCtx = this._target.getContext('2d'); - //Smoothing causes high DPI displays to look blurry - this._targetCtx.mozImageSmoothingEnabled = false; - this._targetCtx.webkitImageSmoothingEnabled = false; - this._targetCtx.msImageSmoothingEnabled = false; - this._targetCtx.imageSmoothingEnabled = false; // the visible canvas viewport (i.e. what actually gets seen) this._viewportLoc = { 'x': 0, 'y': 0, 'w': this._target.width, 'h': this._target.height }; @@ -55,11 +50,6 @@ export default class Display { // The hidden canvas, where we do the actual rendering this._backbuffer = document.createElement('canvas'); this._drawCtx = this._backbuffer.getContext('2d'); - //Smoothing causes high DPI displays to look blurry - this._drawCtx.mozImageSmoothingEnabled = false; - this._drawCtx.webkitImageSmoothingEnabled = false; - this._drawCtx.msImageSmoothingEnabled = false; - this._drawCtx.imageSmoothingEnabled = false; this._damageBounds = { left: 0, top: 0, right: this._backbuffer.width, @@ -73,6 +63,7 @@ export default class Display { this._scale = 1.0; this._clipViewport = false; + this._antiAliasing = 0; // ===== EVENT HANDLERS ===== @@ -80,6 +71,12 @@ export default class Display { } // ===== PROPERTIES ===== + + get antiAliasing() { return this._antiAliasing; } + set antiAliasing(value) { + this._antiAliasing = value; + this._rescale(this._scale); + } get scale() { return this._scale; } set scale(scale) { @@ -462,10 +459,17 @@ export default class Display { this._target.style.height = height; } - if (factor === 1 && this._target.style.imageRendering !== 'pixelated') { - this._target.style.imageRendering = 'pixelated'; - } else if (factor !== 1 && this._target.style.imageRendering !== 'auto') { - this._target.style.imageRendering = 'auto'; + Log.Debug('Pixel Ratio: ' + window.devicePixelRatio + ', VNC Scale: ' + factor + 'VNC Res: ' + vp.w + 'x' + vp.h); + + var pixR = Math.abs(Math.ceil(window.devicePixelRatio)); + var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; + + if (this.antiAliasing === 2 || (this.antiAliasing === 0 && factor === 1 && this._target.style.imageRendering !== 'pixelated' && pixR === window.devicePixelRatio && vp.w > 0)) { + this._target.style.imageRendering = ((!isFirefox) ? 'pixelated' : 'crisp-edges' ); + Log.Debug('Smoothing disabled'); + } else if (this.antiAliasing === 1 || (this.antiAliasing === 0 && factor !== 1 && this._target.style.imageRendering !== 'auto')) { + this._target.style.imageRendering = 'auto'; //auto is really smooth (blurry) using trilinear of linear + Log.Debug('Smoothing enabled'); } } diff --git a/core/rfb.js b/core/rfb.js index 41b94f07..41a91276 100644 --- a/core/rfb.js +++ b/core/rfb.js @@ -225,7 +225,6 @@ export default class RFB extends EventTargetMixin { this._canvas.style.margin = 'auto'; // Some browsers add an outline on focus this._canvas.style.outline = 'none'; - this._canvas.style.imageRendering = 'pixelated'; this._canvas.width = 0; this._canvas.height = 0; this._canvas.tabIndex = -1; @@ -425,6 +424,11 @@ export default class RFB extends EventTargetMixin { } } + get antiAliasing() { return this._display.antiAliasing; } + set antiAliasing(value) { + this._display.antiAliasing = value; + } + get jpegVideoQuality() { return this._jpegVideoQuality; } set jpegVideoQuality(qualityLevel) { if (!Number.isInteger(qualityLevel) || qualityLevel < 0 || qualityLevel > 9) { diff --git a/vnc.html b/vnc.html index a2705f54..df036f5e 100644 --- a/vnc.html +++ b/vnc.html @@ -278,6 +278,14 @@ +
  • + + +