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.