resizing on tablet devices

[sblinkhorn]

I am only eight months in to noVNC, and need some clarity on resizing etc.

I am using noVNC1.3 with an up-to-date tigerVNC and much else besides.  I have a customised version of vnc_lite.html with resize=remote.  My application provides access to software which operates using fixed-dimension windows (800x600px), though the server has a window size of 1024x768.  When the software runs, the display switches to fullscreen mode.

On desktop machines, all the major browsers allow zooming of the window using ctrl-+ and ctrl--, which in particular allows people with certain visual impairments to work with it successfully.

On my Android tablet, however, Chrome zooms an ordinary page using the pinching method, and there do not appear to be hot keys.  Pinch-zooming on the noVNC screen does not work.  Also I am not clear whether the smaller size of the rendered screen is to do with the resize=remote setting or just that a logical pixel on the tablet is smaller than on a desktop display.

What I would like to do is put "zoom in" and "zoom out" buttons on the top grey bar.  But as you will have gathered I am unclear about precisely where the source of my problem lies.  And there is only so much JavaScript one can consume in a day without compromising the health of one's cognitive digestion apparatus.

[sblinkhorn]

UPDATE:

It is possible programmatically to get the screen resolution of the tablet, and pass a factor back to vnc_lite to zoom the RFB so it approximates the physical size of the counterpart on a desktop monitor.  But controls on apps accessed through noVNC are then offset from their corresponding tappable/clickable screen areas - this happens on desktops too.  Zooming at the browser level works well on desktops.  Is there really no way of doing the same on tablets?

[Samuel Mannehed]

Hi Steve,

On 3/21/22 16:53, sblinkhorn wrote:
> *UPDATE:*

> It is possible programmatically to get the screen resolution of the
> tablet, and pass a factor back to vnc_lite to zoom the RFB so it
> approximates the physical size of the counterpart on a desktop monitor.
> But controls on apps accessed through noVNC are then offset from their
> corresponding tappable/clickable screen areas - this happens on desktops
> too.

So you're getting a mouse offset for some reason. How are you passing
this scaling factor to RFB?

> Zooming at the browser level works well on desktops.  Is there
> really no way of doing the same on tablets?

Not in the current version of noVNC, no.

> On my Android tablet, however, Chrome zooms an ordinary page using
> the pinching method, and there do not appear to be hot keys.
> Pinch-zooming on the noVNC screen does not work.  Also I am not
> clear whether the smaller size of the rendered screen is to do with
> the resize=remote setting or just that a logical pixel on the tablet
> is smaller than on a desktop display.
>
> What I would like to do is put "zoom in" and "zoom out" buttons on
> the top grey bar.  But as you will have gathered I am unclear about
> precisely where the source of my problem lies.  And there is only so
> much JavaScript one can consume in a day without compromising the
> health of one's cognitive digestion apparatus.

Yeah, this is a known issue and a feature we would like to see would be
browser side-scaling/zooming.

We have this issue on github:

https://github.com/novnc/noVNC/issues/1054

Currently, a pinching gesture on a tablet will result in "Ctrl+Scroll"
being sent to the server. If this is useful depends on the app you're
viewing.

Many times scaling or zooming in the browser is more useful.

Best regards,
--
Samuel Mannehed Software Development
Cendio AB https://cendio.com
Teknikringen 8 https://twitter.com/ThinLinc
583 30 Linköping https://facebook.com/ThinLinc
Phone: +46 13 214 600

[Steve Blinkhorn]

You wrote:
>
> Hi Steve,
>
> On 3/21/22 16:53, sblinkhorn wrote:
> > *UPDATE:*

> > It is possible programmatically to get the screen resolution of the=20
> > tablet, and pass a factor back to vnc_lite to zoom the RFB so it=20
> > approximates the physical size of the counterpart on a desktop monitor. =
> =20
> > But controls on apps accessed through noVNC are then offset from their=20
> > corresponding tappable/clickable screen areas - this happens on desktops=
> =20
> > too.
>
> So you're getting a mouse offset for some reason. How are you passing=20

> this scaling factor to RFB?
>
>

My setup initiates noVNC as the src parameter in an <iframe>. I
calculate the scale factor and pass it to a modified vnc_lite.html in
query data. Then I have played with various .style.zoom arrangements.
But I haven't worked out a way of adjusting pointer offsets to match.

--
Steve Blinkhorn <st...@prd.co.uk>


--
Steve Blinkhorn <st...@prd.co.uk>

****************************************************************************
This email is for the addressee only. If you are not the addressee
you should immediately delete this email from your system(s) and
inform us. It may contain information that is confidential or
otherwise privileged, and should not be copied or redistributed to
recipients not originally specified as addressees without permission.

S F Blinkhorn MA PhD CPsychol FBPsS, Managing Director,
Psychometric Research & Development Ltd.
PO Box 1143, St Albans, Herts, AL1 9UT, UK
Registered in England No. 1909571
Registered Office: Verulam Point, Station Way, St Albans, Herts, AL1 5HE
Phone: +44 (0)1727 841455
http://www.prd.co.uk
****************************************************************************

[Samuel Mannehed]

On 3/21/22 19:19, Steve Blinkhorn wrote:
> My setup initiates noVNC as the src parameter in an <iframe>. I
> calculate the scale factor and pass it to a modified vnc_lite.html in
> query data. Then I have played with various .style.zoom arrangements.
> But I haven't worked out a way of adjusting pointer offsets to match.

Yes, but _how_ do you apply the scale factor? The RFB object has no API
yet for setting a scaling factor.

Are you setting these styles on the screen div?

[Steve Blinkhorn]

rfb._screen.style.zoom = <scalefactor>;

works.

Get BlueMail for Android

[Steve Blinkhorn]

I've held off on this one for a few weeks while making sure everything
else in my setup is working as intended, and to get a proper
perspective on the issue. So let me restate the issue.

My users see screens some of which are straight HTML, others are
<iframe> elements where the content of the <iframe> is rendered by
noVNC. On desktop and laptop machines, zooming the browser window
zooms the whole of what the user sees, including the <iframe> content.

But on tablets, first the CSS resolution is typically 132 pixels/inch,
whereas on desktops/laptops it is typically 96 pixels/inch, and
second the only zooming available is pinch-to-zoom, which doesn't zoom
the <iframe> contents. So I end up sometimes with text in the
<iframe> which is just too small for comfortable reading over an
extended period, however splendid the physical resolution of the
device's screen.

I have a customised version of vnc_lite.html, to which I can pass
command-line arguments at startup, after I have detected device
characteristics. So if I detect a tablet device, I can pass a zoom
factor of 1.375, and have a line like:

rfb._screen.style.zoom = $zoomfactor;

which correctly rescales the image on the screen, but doesn't
correspondingly correct the pointer offsets. So, clicking on a
visible on-screen button will generally not have the intended effect,
but there will be a patch of screen somewhere nearby that corresponds
to the unrescaled button position.

As I understand it core/util/cursor.js and/or core/util/browser.js
would need attention to achieve what I need, but I'm only a scratch
JavaScript programmer.

Or is there some other way of achieving what I want without the need
for new coding?

Please, no suggestions I should just rework the material that appears in
the <iframe> elements. The scale of that task would be enormous.

--
Steve Blinkhorn <st...@prd.co.uk>
I wrote:
>
> ------SW522XWFHYUUQC8J837B8J4SBGJ54Z
> Content-Transfer-Encoding: quoted-printable
> Content-Type: text/plain; charset="UTF-8"
>
> rfb._screen.style.zoom =3D <scalefactor>;
> works.
>
> =E2=81=A3Get BlueMail for Android =E2=80=8B

>
> On 21 Mar 2022, 18:56, at 18:56, Samuel Mannehed <sam...@cendio.se> wrote:
> >On 3/21/22 19:19, Steve Blinkhorn wrote:
> >> My setup initiates noVNC as the src parameter in an <iframe>. I
> >> calculate the scale factor and pass it to a modified vnc_lite.html in
> >> query data. Then I have played with various .style.zoom
> >arrangements.
> >> But I haven't worked out a way of adjusting pointer offsets to match.
> >
> >Yes, but _how_ do you apply the scale factor? The RFB object has no API
> >
> >yet for setting a scaling factor.
> >
> >Are you setting these styles on the screen div?
> >
> >Best regards,

> >--=20

> >Samuel Mannehed Software Development
> >Cendio AB https://cendio.com
> >Teknikringen 8 https://twitter.com/ThinLinc

> >583 30 Link=C3=B6ping https://facebook.com/ThinLinc

> >Phone: +46 13 214 600
> >

> >--=20
> >You received this message because you are subscribed to a topic in the
> >Google Groups "noVNC" group.
> >To unsubscribe from this topic, visit
> >https://groups.google.com/d/topic/novnc/DHGH13Vgxi0/unsubscribe.
> >To unsubscribe from this group and all its topics, send an email to
> >novnc+un...@googlegroups.com.
> >To view this discussion on the web visit
> >https://groups.google.com/d/msgid/novnc/312ffa97-bfd7-3bf9-abbf-114d71f19c=
> e9%40cendio.se.
>
> --=20
> You received this message because you are subscribed to a topic in the Goog=
> le Groups "noVNC" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/nov=
> nc/DHGH13Vgxi0/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to novnc+u=
> nsubs...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/=
> novnc/8b8030d3-c39a-4504-b1f4-043c936a2050%40prd.co.uk.
>
> ------SW522XWFHYUUQC8J837B8J4SBGJ54Z
> Content-Type: text/html; charset="UTF-8"
> Content-Transfer-Encoding: quoted-printable
>
> <html><head></head><body style=3D"zoom: 0%;"><div dir=3D"auto">rfb._screen.=
> style.zoom =3D &lt;scalefactor&gt;;<br></div>
> <div dir=3D"auto">works.<br><br></div>
> <div dir=3D"auto"><!-- tmjah_g_1299s -->Get <!-- tmjah_g_1299e --><a href=
> =3D"https://bluemail.me"><!-- tmjah_g_1299s -->BlueMail for Android<!-- tmj=
> ah_g_1299e --></a><!-- tmjah_g_1299s --> <!-- tmjah_g_1299e --></div>
> <div class=3D"gmail_quote" >On 21 Mar 2022, at 18:56, Samuel Mannehed &lt;<=
> a href=3D"mailto:sam...@cendio.se" target=3D"_blank">sam...@cendio.se</a>&g=
> t; wrote:<blockquote class=3D"gmail_quote" style=3D"margin: 0pt 0pt 0pt 0.8=
> ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;">
> <pre class=3D"blue">On 3/21/22 19:19, Steve Blinkhorn wrote:<br><blockquote=
> class=3D"gmail_quote" style=3D"margin: 0pt 0pt 1ex 0.8ex; border-left: 1px=
> solid #729fcf; padding-left: 1ex;"> My setup initiates noVNC as the src pa=
> rameter in an &lt;iframe&gt;. I<br> calculate the scale factor and pass it=
> to a modified vnc_lite.html in<br> query data. Then I have played with va=
> rious .style.zoom arrangements.<br> But I haven't worked out a way of adjus=
> ting pointer offsets to match.<br></blockquote><br>Yes, but _how_ do you ap=
> ply the scale factor? The RFB object has no API <br>yet for setting a scali=
> ng factor.<br><br>Are you setting these styles on the screen div?<br><br>Be=
> st regards,</pre></blockquote></div></body></html>
>
> <p></p>
>
> -- <br />
> You received this message because you are subscribed to a topic in the Goog=
> le Groups &quot;noVNC&quot; group.<br />
> To unsubscribe from this topic, visit <a href=3D"https://groups.google.com/=
> d/topic/novnc/DHGH13Vgxi0/unsubscribe">https://groups.google.com/d/topic/no=
> vnc/DHGH13Vgxi0/unsubscribe</a>.<br />
> To unsubscribe from this group and all its topics, send an email to <a href=
> =3D"mailto:novnc+un...@googlegroups.com">novnc+unsubscribe@googlegrou=
> ps.com</a>.<br />
> To view this discussion on the web visit <a href=3D"https://groups.google.c=
> om/d/msgid/novnc/8b8030d3-c39a-4504-b1f4-043c936a2050%40prd.co.uk?utm_mediu=
> m=3Demail&utm_source=3Dfooter">https://groups.google.com/d/msgid/novnc/8b80=
> 30d3-c39a-4504-b1f4-043c936a2050%40prd.co.uk</a>.<br />
>
> ------SW522XWFHYUUQC8J837B8J4SBGJ54Z--
>
>

[Samuel Mannehed]

Sorry for the late reply.

> rfb._screen.style.zoom = $zoomfactor;

As I said earlier, the RFB object has no API for this, so doing stuff like that isn't supported. New code would need to be written.

If you see objects named like "_screen", the leading "_" usually means that it's an internal object that shouldn't be used outside that class or file.