Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Resize the browser to match VNC session #1849

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Resize the browser to match VNC session #1849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94021a7
Added resize browser mode
Sep 5, 2024
1f6913b
Dealing with Lint issues
Sep 5, 2024
9edae1d
Dealing with Lint issues
Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions NewWindow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>noVNC</title>
</head>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although an example is useful, I don't think we want another HTML file to maintain. I think it is sufficient with some information in the documentation somewhere.


<body>
<div id="top_bar">
<ul>
<li>
<label for="noVNC_setting_host">Host:</label>
<input id="noVNC_setting_host">
</li>
<li>
<label for="noVNC_setting_port">Port:</label>
<input id="noVNC_setting_port" value="5701">
</li>
<li>
<label for="noVNC_setting_path">Path:</label>
<input id="noVNC_setting_path" type="text" value="websockify">
</li>
<li>
<label for="noVNC_setting_token">token:</label>
<input id="noVNC_setting_token" type="text" value="">
</li>
<li>
<button type="button" onclick="OpenWindow();">Open Window</button>
</li>
</ul>
</div>

<script>
function OpenWindow() {
let rul;
// vnc. html/?token=token&autoconnect=1&resize=browser','_blank','toolbar=no,location=no,status=no,menubar=no,resizable=yes,width=800,height=420'

rul = "vnc.html?";

path = document.getElementById('noVNC_setting_path').value;
port = document.getElementById('noVNC_setting_port').value;
host = document.getElementById('noVNC_setting_host').value;
token = document.getElementById('noVNC_setting_token').value;

if (token) {
rul += "token=" + token + "&";
}
if (host) {
rul += "host=" + host + "&";
}
if (port) {
rul += "port=" + port + "&";
}
if (path) {
rul += "path=" + path + "&";
}

rul += "autoconnect=" + "1" + "&";
rul += "resize=" + "off";

window.open(rul,
'_blank',
'toolbar=no,location=no,status=no,menubar=no,resizable=yes,width=800,height=420'
);
}
</script>
</body>
</html>
38 changes: 38 additions & 0 deletions app/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ const UI = {
reconnectCallback: null,
reconnectPassword: null,

// Old browser resolution
bodyWidthBrowserResize: 0,
bodyHeightBrowserResize: 0,

prime() {
return WebUtil.initSettings().then(() => {
if (document.readyState === "interactive" || document.readyState === "complete") {
Expand Down Expand Up @@ -988,6 +992,28 @@ const UI = {
.classList.remove("noVNC_open");
},

_updateBrowserWindows(width, height) {
let bodyWidth = document.body.clientWidth;
let bodyHeight = document.body.clientHeight;

let OldResolutionEqual = false;
if (UI.bodyWidthBrowserResize === document.body.clientWidth &&
UI.bodyHeightBrowserResize === document.body.clientHeight) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, this is a very roundabout way of checking things. Why not compare with the previous VNC session size?

OldResolutionEqual = true;
}
if (UI.bodyHeightBrowserResize === 0 ||
OldResolutionEqual) {
if ((width != 0) && (height != 0)) {
window.resizeBy(width - bodyWidth, height - bodyHeight);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not resizeTo() and avoid having to calculate things?

UI.bodyWidthBrowserResize = width;
UI.bodyHeightBrowserResize = height;
}
} else {
// disabled
UI.bodyWidthBrowserResize = 0;
}
},

connect(event, password) {

// Ignore when rfb already exists
Expand Down Expand Up @@ -1058,6 +1084,12 @@ const UI = {
UI.rfb.clipViewport = UI.getSetting('view_clip');
UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
if (UI.getSetting('resize') === 'off') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be relevant for 'remote' as well, I think?

UI.bodyHeightBrowserResize = 0;
UI.rfb.resizeBrowser = UI._updateBrowserWindows;
} else {
UI.rfb.resizeBrowser = false;
}
UI.rfb.qualityLevel = parseInt(UI.getSetting('quality'));
UI.rfb.compressionLevel = parseInt(UI.getSetting('compression'));
UI.rfb.showDotCursor = UI.getSetting('show_dot');
Expand Down Expand Up @@ -1311,6 +1343,12 @@ const UI = {

UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
if (UI.getSetting('resize') === 'off') {
UI.bodyHeightBrowserResize = 0;
UI.rfb.resizeBrowser = UI._updateBrowserWindows;
} else {
UI.rfb.resizeBrowser = false;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be simpler to always have the callback registered, and check the setting once the callback fires?

},

/* ------^-------
Expand Down
13 changes: 13 additions & 0 deletions core/rfb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,7 @@ export default class RFB extends EventTargetMixin {
this._clippingViewport = false;
this._scaleViewport = false;
this._resizeSession = false;
this._resizeBrowser = false;

this._showDotCursor = false;
if (options.showDotCursor !== undefined) {
Expand Down Expand Up @@ -364,6 +365,14 @@ export default class RFB extends EventTargetMixin {
}
}

get resizeBrowser() { return this._resizeBrowser; }
set resizeBrowser(void_) {
this._resizeBrowser = void_;
if (this._resizeBrowser && (this._rfbConnectionState === 'connected')) {
this._resizeBrowser(this._fbWidth, this._fbHeight);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Callbacks are not that flexible. Please use a CustomEvent like we do for other things in the RFB object.

}
}

get showDotCursor() { return this._showDotCursor; }
set showDotCursor(show) {
this._showDotCursor = show;
Expand Down Expand Up @@ -2875,6 +2884,10 @@ export default class RFB extends EventTargetMixin {
this._fbWidth = width;
this._fbHeight = height;

if (this._resizeBrowser) {
this._resizeBrowser(width, height);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's probably best if this happens last, so that all state is properly updated.


this._display.resize(this._fbWidth, this._fbHeight);

// Adjust the visible viewport based on the new dimensions
Expand Down