Sizing of RCA Image

[tmarrinan]

Hello!
I am using Trame's RemoteControlArea to stream images generated from a custom visualization. All is working great, but I'd like the ability to display the image at a different resolution than the visualization is rendered at.
For example, I would like the visualization to always be 90% of the width of the browser window and adjust the height to maintain proper aspect ratio, regardless of the size of the rendered image. If I set the style of the RemoteControlArea to width: 90%;, it seems to only set the size of the containing div though.
Any tips on sizing the actual images streamed would be appreciated!

[jourdain]

RCA report size on the server side and it is up to you to properly implement/handle it.

https://github.com/Kitware/trame-rca/blob/master/examples/00_cone/app.py#L70-L75

[tmarrinan]

Yes, I am able to get the size of the RCA area. But my issue is that I have a visualization where image size is fixed. I'd like to display those images at different resolutions however (i.e. stretch or squash the image), so as to make the user see the visualization at a reasonable size for their screen.
In typical CSS, I can load an image, but display it at a different resolution using the width and height properties. But setting width and height in the style of the RCA component only sets the containing div, not the image.

[jourdain]

Indeed, but you might still be able to do that via css selector and css definition. If you use css var, you might be able to update the various values from JS dynamically.

[tmarrinan]

I can change the style width and height dynamically, but the problem is that it changes the div container, not the image itself. I cannot seem to figure a way to get a handle on the actual html image since it is a child of a Vue component.

[jourdain]

That is why css selector is your friend with a css file.

[tmarrinan]

Thank for the suggestions - I was able to get it working!
I'll include my code for future reference:

from trame.widgets import vuetify, rca, client
from trame.ui.vuetify import SinglePageLayout

# ...

rca_view_style = 'width: 1000px; height: 600px;'
with SinglePageLayout(server) as layout:
    client.Style('#rca-view div div img { width: 100%; height: auto; }')
    with layout.content:
        with vuetify.VContainer(fluid=True, classes='pa-0 fill-height', style='justify-content: center; align-items: start;'):
            v = rca.RemoteControlledArea(name='view', display='image', id='rca-view', style=rca_view_style)

In this manner, I can set the width and height of the RCA (div), and set the size of the image nested two other divs inside the RCA div to 100% of the parents width (i.e. the RCA container since other divs also have width set to 100%). Setting height to auto preserves the aspect ratio.
Note that the height of rca_view_style should be calculated to match the aspect ratio of the image.