Help using DragToggle in vnc_auto

[onny]

Hey,
it's very complicated to strip vnc.html down to a minimum, especially when you have to use and debug it on a mobile device aditionally.
I then tried to add set_viewportDrag in vnc_auto.html after rfb.connect function

rfb.connect("example.com", "1234", "", "websockify");
rfb.set_viewportDrag(true);

This sueccessfully disables the click event inside the vnc session but does not enable draging on my mobile Android phone.
I guess this might have something to do with CSS and stylesheets of the canvas element?

Thank you for any hint,
Jonas

[samhed]

As you can see in our example application (vnc.html which uses ui.js), on touch devices the actual page content is never bigger than the browser window but the VNC content can be. We call this behavior "clipping" or simply viewport. This is a setting which always is forced on touch enabled devices.

Our dragging relies on moving the display viewport on the VNC content. Since the viewport/content can be bigger than the browser window when NOT clipping we must couple dragging with clipping.

Use:

display.set_viewport(true);

[onny]

Thank you @samhed for this clarification. I'm still trying to figure out how I could adopt noVNC to my needs.
I was trying to use vnc.html as base for my VNC viewer but it was too complicated (too many UI elements which I don't need). vnc_auto.html is a good and basic example and all what I need there is local resizing and for mobile screen the dragging and viewport functionality.

I was trying to enable clipping/dragging but it seems that it is not easy like that:

            rfb.connect(host, port, password, path);
            var display = rfb.get_display();
            display.set_viewport(true);

:(
In case of local downscaling, should I reimplement this myself or is there any way I could use an already implemented function?
Since this didn't work in vnc_auto.html:

                rfb = new RFB({'target':       $D('noVNC_canvas'),
[...]
                               'resize': 'scale',
                               'shared':       WebUtil.getConfigVar('shared', true),
                               'view_only':    false,
[...]

Best regards,
Jonas

[DirectXMan12]

I was trying to enable clipping/dragging but it seems that it is not easy like that:

So, you have the first part right -- display.set_viewport(true) enables clipping. Then, you have to actually change the size of the viewport (display.viewportChangeSize(width, height)).

Dragging requires enabling dragging on the RFB object (rfb.set_viewportDrag(true)) while dragging.

Look for updateViewClip and updateViewDrag in app/ui.js.

In case of local downscaling, should I reimplement this myself or is there any way I could use an already implemented function?

noVNC does support local scaling. You can see how it works at https://github.com/novnc/noVNC/blob/master/app/ui.js#L1247 (applyResizeMode in app/ui.js). You'd have to replicate that yourself (basically, pass the desired screen size to rfb.get_display().autoscale(width, height, downscaleOnly)).

[onny]

I'll give that a try, thank you very much!