4

I am working on a project that uses two windows, similar to a video board, where the main screen is a control panel of sorts with a "preview" screen, and the secondary screen is a projection of the viewing content in 1920x1080 resolution. I would like the smaller control panel preview div to match the stylings of the larger viewing window. Currently, I am passing in a "windowInstance" prop to my styled component and adjusting the styles that way, for example:

const SomeComponent = styled.div`
  height: ${props => props.windowInstance === 'controlPanel' ? '300px' : '400px'}; 
`
// ...
return (
  <SomeComponent windowInstance={windowInstance} />
)

(windowInstance is passed from the parent component. this is not relevant for the problem at hand, and it gets a bit complicated)

Obviously, this has gotten quite tedious as my app has grown, and nothing is quite right unless I meticulously calculate the difference in window sizes as a percentage and translate that to the new property values. What I want to know is if there is any way with CSS or JS that I can unify these styles and have the results render correctly and identically on both screens.

Important to note is that neither window needs to be responsive or will ever be resized. Here is a sketch I did in excalidraw to better describe the goal:

Control Panel Viewing Window Example

Bender
  • 109
  • 7
  • Perhaps use vw and vh ? – mplungjan Mar 24 '21 at 12:13
  • @mplungjan vh/vw units will not solve this problem. They refer to the size of the window, which in the case of the control panel is the entire control panel window, not just the preview screen. – Bender Mar 24 '21 at 12:30
  • perhaps [this](https://stackoverflow.com/a/10441480/7879938) will help? – WebbH Mar 24 '21 at 13:17
  • @WebbH That solution is nice for box sizes, but I'd also like pixel/rem sizes to also be translated at well. Also, trying to convert everything to a relative percentage size has been a frustrating experience, as some elements simply cannot be sized that way feasibly. – Bender Mar 24 '21 at 13:25
  • 1
    Maybe you can use an iframe for including the preview screen in the control panel, then use `rem` for *everything* (font-size, margin, padding, … really eveything). In this case you can "just" define a different root font size for the iframe and full screen version. – keul Mar 24 '21 at 13:54
  • @keul that's actually a very interesting and creative solution! I'd be happy to give it a shot, except I just discovered the `zoom` css property. I'm having very positive early results. I am setting a class name on just the preview screen, targeting all its child elements, then applying a zoom relative to the size of the preview screen vs. the viewing window. I will report back with results. – Bender Mar 24 '21 at 14:12

1 Answers1

1

I was able to solve my problem using the css property zoom - which I was previously unaware of. It works like a charm. My preview screen happens to be exactly 47.5% of the size of my viewing window. So I solved the problem like this:

// Wrapper.js
return (
  <StyledWrapper className={windowInstance === 'controlPanel' && 'preview-screen'}>
    {children}
  </StyledWrapper>
)

// index.css
.preview-screen {
  zoom: 47.5%;
}
Bender
  • 109
  • 7