Pinch to zoom

[thomasphilibert]

hi all,

Simple question : it's possible to enable the "pinch to zoom" on NoVNC ? If no, can i do implement a js module like this to enable the pinch to zoom ?

Thank you !

[samhed]

No, it's not possible at the moment. It would be very nice to have!

That library looks promising! I have personally tried getting gestures to work with hammer.js but that code was filled with bugs and the maintainers seems to have abandoned the project. I ended up giving up. Would be awesome if we could get something working! Tell me if you need help with implementation or testing.

[thomasphilibert]

The library implementation is not the best solution.

But I have an idea: Do you think if it's possible to add an overlay transparent div (in position absolute and hight z-index) who are displayed only when two finger are on the touchscreen ?

[samhed]

What problems have you encountered?

[thomasphilibert]

Canvas return a black screen.

It is possible to send a click like an trigger() in Jquery on the display?

[samhed]

Does using this library could cause the canvas to draw black? That sounds strange.

Yes, you can create a MouseEvent and use dispatchEvent to trigger it.

[thomasphilibert]

Yes but I did not look in detail. I try again soon (i am not an js developper).

In vnc-lite.html, i try to add an event on rfb in the main function :

        var element = document.getElementById('customListener');
        element.addEventListener('click', simulateClick);

        function simulateClick() {
            var e = new Event( "mousedown", { pageX: 300, pageY: 300 } );
            console.log(e);
            rfb.dispatchEvent(e);
            var e = new Event( "mouseup", { pageX: 300, pageY: 300 } );
            rfb.dispatchEvent(e);
        }

But, no work; seem no dispatched on the canvas. my method is not good?

Thomas

[thomasphilibert]

Ok, I have solved it with this this (uncleared and poor code for the moment) :

in body :

<div id="customContainer" style="position: absolute; left:0;top: 0;background-color: transparent; width:100%; height: 100%;"></div>

in main js function :

        function simulateTouch(e) {
            var canvas = rfb._canvas;
            var mouseEvent = new MouseEvent(e.type, { clientX: e.clientX, clientY: e.clientY } );
            canvas.dispatchEvent(mouseEvent);
        }

        var element = document.getElementById('customContainer');
        element.addEventListener('mousedown', simulateTouch);
        element.addEventListener('mouseup', simulateTouch);

I have a question: what the best way to acces to the canvas ?

[samhed]

What do you mean access? You can use document.getElementById() just like you have done with your customContainer

[CendioOssman]

Well, you shouldn't really. The canvas is internal to the RFB object. Anything with a _ prefix is off limits.

So we either need to extend the API to allow synthetic mouse events. Or this gesture support needs to be implemented inside the RFB object.

[samhed]

Right, had forgotten we recently put an abstraction layer around that

[DirectXMan12]

I'd love at some point to switch over to a custom element, and have click events on the RFB element get translated internally to clicks on the canvas by us. Unfortunately, I think that's a ways away, since custom element support is a bit spotty right now in browsers and we're trying to avoid using a bajillion polyfills.

[samhed]

This has partially been resolved by #1414, it doesn't support zooming on the client side yet, but a touch pinch gesture will now send Ctrl + Scroll (which many applications use for zoom).

[Kylejustknows]

This has partially been resolved by #1414, it doesn't support zooming on the client side yet, but a touch pinch gesture will now send Ctrl + Scroll (which many applications use for zoom).

This has bugged me for a while.

On most mobile browsers, there is an option called "Force enable zoom". After enabling it, almost everything can be pinched to zoom......Except for noVNC page..... (It seems noVNC page override the browser to handle the touch input directly)

What is worse is, now noVNC pinch action is sending "Ctrl+Scroll" to remote PC, causing lots of chaos (one accidental pinch action, the icons on remote computer file explorer suddenly became super large etc. All applications handle the Ctrl+Scroll differently)

Embarrassingly, a very old software called "ThinVNC" (also a remote control using html5 webpage) handled the "Pinch zoom" correctly. Turn out it simply throw a full view then allows the browser to handle the "Pinch zoom" like a normal webpage.

A walkaround is, using vnc_lite.html, and the blank part outside view frame can be used to pinch-zoom (doesn't work for the normal vnc.html), which is very hard to use, but it does works.

How I wish noVNC can simply give back the mobile browser build-in pinch-zoom ability.

[samhed]

That's why this issue isn't closed. This area must definitely be improved.

[Kylejustknows]

I am not a js coder, here are some my shallow opinions:

I think there are 2 ways to get the zoom working, we either:

1. Give up the multi-touch handle grab (enable the browser's native pinch-zoom), then add "double click and hold == mouse pressed and drag" action translation in the backend for touch screen users.

2. Improve the "Local scaling" function, instead of current "NONE or 100%", if we can make it progressive 10% ~ 1000% adjustable scaling, and using pinch to change the scaling settings (instead of sending CTRL+SCROLL) to make the zoom working.

[maxbad]

How is this

[HomieeJo]

How I wish noVNC can simply give back the mobile browser build-in pinch-zoom ability.

Don't know if you still need it but for everyone who might look for a solution there is a way to just forward the gestures to chrome by simply removing the line where the gestures are attached to the remote canvas.

Just remove this line if rfb.js and it should work.

this._gestures.attach(this._canvas);

However you can't control the remote anymore with gestures but if you only want it as a viewer on your mobile device it works great. Clicks will still work.