This is how a resize currently works in our HTML5 client: 1. The browser's window.onresize is invoked 2. We wait 0.5s and then send a resize request to the server 3. The server resizes the remote session 4. The server sends a response to the client that the request was successful 5. The client resizes the viewport to the new size 6. The client resizes the canvas to the new size This has the effect that in, for example, Firefox 33 on Android you will get browser-side panning. This is a problem since we have no way of controlling this, thus the "panning swipes" will also be sent to the server as mouse events. A better solution would be to always have the canvas covering 100% of the page and only resize the viewport. This way we can hopefully avoid problems wrt canvas size since the browser itself will handle it.
We can't have the style attributes width and height being 100% for canvas since that will result in incorrect scaling. The canvas element has html attributes called width and height which are the correct ones to use. The canvas size will have to be resized in the javascript code. See: http://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5
However, we should still be able to have the canvas covering the whole page. As I mentioned, the canvas has two different widths and heights; the layout size and the resolution. If you only modify the layout size the content will scale, so we will have to modify both. The display code will have to be modified to not having the canvas following the size of the viewport. The canvas will instead follow the page.
(In reply to comment #2) > However, we should still be able to have the canvas covering the whole page. As > I mentioned, the canvas has two different widths and heights; the layout size > and the resolution. If you only modify the layout size the content will scale, > so we will have to modify both. > > The display code will have to be modified to not having the canvas following > the size of the viewport. The canvas will instead follow the page. I need to further clarify this: When "clipping"/panning, i.e. when using a touch device, the canvas will always be the size of the browser window. If the session is smaller, the session will only be drawn on a part of the canvas (the viewport). On non-touch devices we want scrollbars when the session is larger than the browser-window. This means that both the canvas and the viewport can be larger than the browser window.
So, when the browser window changes we will always change the canvas layout size and the canvas resolution should always follow the layout size.
I consider my work finished, I have submitted a pullrequest upstream with my changes. I will await comments/approval before I do a vendordrop and bring it to ThinLinc. https://github.com/kanaka/noVNC/pull/464
I adapted the PR to changes made to upstream master branch.
Brought to ThinLinc by vendordrop in commit 30125.
Tester should verify that automatic resize, serverside resize, panning and scrollbars work as intended.
Had forgotten to commit the changes to vnc.tmpl, done in r30144.
(In reply to comment #8) > Tester should verify that automatic resize, serverside resize, panning and > scrollbars work as intended. Just because I'm nice, here is a matrix for the tests needed: | touch | desktop | --+-------+---------+ xrandr incr. size | | | --+-------+---------+ xrandr decr. size | | | --+-------+---------+ auto incr. size | | | --+-------+---------+ auto decr. size | | | --+-------+---------+ centered session | | | --+-------+---------+ panning | | | --+-------+---------+ If the session is smaller than the window, it should be centered horizontally. On touch, panning is done with the "hand", on desktop you should get scrollbars.
The an issue which was brought to ThinLinc in the vendordrop here (r30125) cause the proper status messages not being shown if the session is disconnected.
The issue was fixed upstream: https://github.com/kanaka/noVNC/pull/474 Brought to ThinLinc in vendordrop - r30230 Update vnc.tmpl to match vnc.html - r30231 Removed a confusing status string - r30227
Tested with Firefox 36 on Fedora 21, and Chrome 42 on Android 5: | touch | desktop | --+-------+---------+ xrandr incr. size | ✔ | ✔ | --+-------+---------+ xrandr decr. size | ✔ | ✔ | --+-------+---------+ auto incr. size | ✔ | ✔ | --+-------+---------+ auto decr. size | ✔ | ✔ | --+-------+---------+ centered session | ✔ | ✔ | --+-------+---------+ panning | ✔ | ✔ | --+-------+---------+ Having it centered just horizontally and not vertically is a bit odd though. As is having a white filler for the unused areas.
