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

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

Closed
wants to merge 5 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c9692e5
Add touchpad mobile button to the control bar.
bitbound Oct 27, 2023
810d294
Make touchpad button togglable.
bitbound Oct 27, 2023
6175985
Implement TouchpadMode gesture handling.
bitbound Feb 4, 2024
2c11e27
Adjust cursor coordinates by hotspot.
bitbound Feb 4, 2024
183a7bc
Fix linting errors.
bitbound Feb 4, 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
62 changes: 62 additions & 0 deletions app/images/touchpad.svg
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

Could we make this icon a bit smaller? It seems larger than the other toolbar icons:

trackpad button size

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 10 additions & 1 deletion app/styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -553,6 +556,12 @@ html {
:root:not(.noVNC_connected) #noVNC_mobile_buttons {
display: none;
}

#noVNC_mobile_buttons > .noVNC_button {
Copy link
Member

Choose a reason for hiding this comment

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

If you make this selector more specific, you can avoid the *:not(#noVNC_mobile_buttons) above.

I think #noVNC_control_bar > .noVNC_scroll > #noVNC_mobile_buttons > .noVNC_button { should work.

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
Expand Down
85 changes: 75 additions & 10 deletions app/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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")
Expand Down Expand Up @@ -461,6 +464,12 @@ const UI = {
.classList.remove('noVNC_open');
},

/**
* @param {string} text
* @param { "normal" | "info" | "warn" | "warning" | "error" } statusType
* @param {number} time
* @returns
*/
Copy link
Member

Choose a reason for hiding this comment

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

This seems a bit out of place, we don't have these types of docstrings anywhere else.

showStatus(text, statusType, time) {
const statusElem = document.getElementById('noVNC_status');

Expand Down Expand Up @@ -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';
Copy link
Member

Choose a reason for hiding this comment

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

Doesn't UI.getSetting() work for you?

Copy link
Member

Choose a reason for hiding this comment

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

Should we default to touchpad_mode on very small screens?


UI.updateViewOnly(); // requires UI.rfb
UI.updateTouchpadMode();
},

disconnect() {
Expand Down Expand Up @@ -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();
}
Copy link
Member

Choose a reason for hiding this comment

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

How come you went this route instead of centering the viewport on where the cursor already is?

},

disconnectFinished(e) {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Copy link
Member

Choose a reason for hiding this comment

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

Good that you remembered adding this!

}

if ((!UI.rfb.clipViewport || !UI.rfb.clippingViewport) &&
UI.rfb.dragViewport) {
// We are no longer clipping the viewport. Make sure
Expand Down Expand Up @@ -1429,7 +1451,7 @@ const UI = {
* ------v------*/

showVirtualKeyboard() {
if (!isTouchDevice) return;
if (!isTouchDevice()) return;

const input = document.getElementById('noVNC_keyboardinput');

Expand All @@ -1447,7 +1469,7 @@ const UI = {
},

hideVirtualKeyboard() {
if (!isTouchDevice) return;
if (!isTouchDevice()) return;

const input = document.getElementById('noVNC_keyboardinput');

Expand Down Expand Up @@ -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);
Copy link
Member

Choose a reason for hiding this comment

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

UI.saveSetting()?

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();
Expand Down Expand Up @@ -1704,12 +1767,14 @@ const UI = {
.classList.add('noVNC_hidden');
document.getElementById('noVNC_clipboard_button')
.classList.add('noVNC_hidden');
document.getElementById('noVNC_clipboard_button')
Copy link
Member

Choose a reason for hiding this comment

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

This should say noVNC_touchpad_button I believe.

.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');
}
},
Expand Down
34 changes: 34 additions & 0 deletions core/display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -433,6 +463,10 @@ export default class Display {
this._rescale(scaleRatio);
}

rescale(factor) {
this._rescale(factor);
}

// ===== PRIVATE METHODS =====

_rescale(factor) {
Expand Down
Loading
Loading