[VNC] Use vnc.html

[JesterOrNot]

No description provided.

[Kreyren]

Recommends adding in-code documentation i.e

<!-- 
Used to append options to vnc.html 
- autoconnect .. To automatically connect on the host
- resize=scale .. To scale the resolution based on used preview
-->

[Kreyren]

Note that this solution has a bar on the left side of the screen

Relevant: novnc/noVNC#941 (Old issue)

[JesterOrNot]

How do we remove it?

[JesterOrNot]

We need to remove the sidebar how do we do this?

[Kreyren]

@JesterOrNot How do we remove it?

I am unable to find documentation for this.

Possibilities:

1. https://github.com/novnc/noVNC/pull/725/files ? May be possible to manipulate app/styles/base.css
2. wip

---

I would try something like:

<style> #noVNC_control_bar {  display: none;} </style>
code_here

In the worst case scenario

[jankeromnes]

We need to remove the sidebar how do we do this?

I think we want to keep it. I've found it useful before, especially on mobile (e.g. for copy/pasting and such).

[JesterOrNot]

Can someone test this PR?

[jankeromnes]

LGTM! 👍

[Kreyren]

LGTM

EDIT: i've would add the in-code documentation

[JesterOrNot]

Merge @jankeromnes?

[Kreyren]

Seems that CI hugged up

[meysholdt]

Will this PR also add
when the VNC client runs in the Preview View in Gitpod? I'm a bit worried there it adds more clutter than it adds value. It would distract people from working with their apps and damages the feeling that things are "simple". What use cases does it solve?

[JesterOrNot]

@meysholdt It would :(

[Kreyren]

@meysholdt referencing #170 (comment)

I guess that asking upstream again is the only option to get more info based on the fact that we don't have documentation on this

[jankeromnes]

Can someone test this PR?

I've tested it by opening https://gitpod.io/#https://github.com/techwithtim/Hangman and running this in the Terminal:

gp preview "$(gp url 6080)/vnc.html?resize=scale&autoconnect=true"

Works like a charm, and I don't find the controls too distracting. Cool that users can now benefit from these by default. 🙂

EDIT: i've would add the in-code documentation

I agree that documentation could be nice, e.g. in cases like these where it's unclear what some things mean or do exactly.

But it's not a strong requirement on my part, so I'll let @JesterOrNot make the call of whether to add the comment, or keep this a short-and-sweet HTML one-liner. 🙂

[JesterOrNot]

@Kreyren We could always file another issue

[Kreyren]

@JesterOrNot your turn, be nice! :p

[Kreyren]

I've tested it by opening https://gitpod.io/#https://github.com/techwithtim/Hangman and running this in the Terminal:

gp preview "$(gp url 6080)/vnc.html?resize=scale&autoconnect=true"

Would be also nice to have README.md in the vnc-full directory that informs about this in case anyone wants to work on vnc in the future to know how to properly test this.

[JesterOrNot]

I decided to add the comments because they can only help :)

[Kreyren]

Also side-note:

In theory we can customize this to fix gitpod-io/gitpod#1193

(should be resolved as separate issue)

[meysholdt]

Tied it, too:

• the screen is unusable because of the strong zoom factor. There should be no zoom at all. The virtual screen should have the resolution of the preview widget.
• the "fullscreen" button is broken with a JavaScript error TypeError: fullscreen error at HTMLInputElement.toggleFullscreen (https://1233234234.ws-eu01.gitpod.io/app/ui.js:1215:42)

[Kreyren]

the screen is unusable because of the strong zoom factor. There should be no zoom at all. The virtual screen should have the resolution of the preview widget.

True

in theory we can use xrandr --output OUTPUT --scale 2x2 for this while making some kind of GUI that would allow end-user to change the scaling on demand.

the "fullscreen" button is broken with a JavaScript error TypeError: fullscreen error at HTMLInputElement.toggleFullscreen (https://1233234234.ws-eu01.gitpod.io/app/ui.js:1215:42)

WFM

EDIT: better image and confirm of the issue

[jankeromnes]

the screen is unusable because of the strong zoom factor. There should be no zoom at all. The virtual screen should have the resolution of the preview widget.

When I try resize=downscale or resize=remote instead of resize=scale, it doesn't seem to do anything. Maybe this should be a bug report or feature request to noVNC?

the "fullscreen" button is broken with a JavaScript error TypeError: fullscreen error at HTMLInputElement.toggleFullscreen (https://1233234234.ws-eu01.gitpod.io/app/ui.js:1215:42)

Maybe that's because iframes are not allowed to go fullscreen in some browsers? (E.g. to prevent annoying fullscreen ads taking over your screen).

For me, fullscreen button shows the error when in a preview pane, but it works as expected when the preview is opened in a new tab.

[Kreyren]

Maybe that's because iframes are not allowed to go fullscreen in some browsers? (E.g. to prevent annoying fullscreen ads taking over your screen).

UserAgent: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

(don't know how else to sent browser info)

[Kreyren]

For me, fullscreen button shows the error when in a preview pane, but it works as expected when the preview is opened in a new tab.

Sorry did not test it in gitpod, same(?) issue here.

From console:

Source map error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Resource URL: https://g5fd4h65sfd4h65sd4f65hs4d-eu01.gitpod.io/bundle.js
Source Map URL: bundle.js.map

Request for fullscreen was denied because at least one of the document’s containing elements is not an iframe or does not have an “allowfullscreen” attribute. vnc.html
TypeError: The expression cannot be converted to return the specified type.

[Kreyren]

What is the proposed course of action for this? i've check the available documentation and i can't find anything relevant to resolve the scaling issue atm.

[JesterOrNot]

@Kreyren Also can you talk to the noVNC people again I don't know what you meant novnc/noVNC#1371

[Kreyren]

@JesterOrNot ehh what

[JesterOrNot]

Me: @Kreyren We could always file another issue
You: @JesterOrNot your turn, be nice! :p

[Kreyren]

@JesterOrNot Figured that much, but what do you expect from me assuming that it seems that you've described the issue sufficiently

also why is making a button in GUI that would changed the css style not an option? Or how do you expect it to be toggleable ?

[JesterOrNot]

This is a commonly discussed when integrating noVNC in to other systems, so I think this is worth having open and investigating further.

@JesterOrNot, the toolbar is needed for many user interactions (e.g. touch, clipboard). Is this something you've considered? Perhaps there are other ways than just completely removing the toolbar.

[Kreyren]

iiuc the clipboard and touch capabilities are the concern here?

For clipboard i guess that the proper implementation would be use the end-user's clipboard if browser allows it.

For touch i don't think it's worth processing until gitpod has better implementation for portable devices (gitpod-io/gitpod#970) assuming that none would probably want to use touch on PC version (personally i don't see the usecase for it there assuming that the GUI is not optimized to work with touch)

[JesterOrNot]

What does iiuc mean?

[Kreyren]

iiuc == if i understand correctly

added in https://en.wikipedia.org/w/index.php?title=SMS_language&action=history

[jankeromnes]

For the resolution, I think we need to fix this in the X server config for now (until we can achieve a direct link between preview size and X screen size).

E.g. we could divide the Xvfb screen size by 2, maybe this will help make things more legible?

[jankeromnes]

Ok, I'm going to clean up and merge this PR. Thanks again!

I've also enabled reconnect=true (autoconnect=true was a good idea, but that actually just skips the initial screen with "Connect" button -- to actually reconnect when the connection breaks, you need reconnect=true)

FYI, here are all the vnc.html options: https://github.com/novnc/noVNC/blob/master/docs/EMBEDDING.md

Also, having the noVNC preview automatically reconnect on connection breaks is compelling enough to switch from vnc_lite.html to vnc.html.

For what it's worth, I find the extra controls very useful, but if someone else really doesn't like them, we could potentially contribute a hidecontrols=true option to noVNC upstream.