Perspective Reactive Design for Conveyor Layouts

We are working towards switching from Vision to Perspective. One thing we would like to solve for is how to have conveyor layouts auto adjust to screen size on different size desktop monitors (not related to mobile design).

Below is how it looks on a laptop and a bigger monitor. In case of the bigger monitor I want it to grow and keep all the same ratios, just be bigger. It leaves too much of the screen empty and because the components themself don’t grow, it kind of defeats having a bigger screen anyway.

It seems necessary to have the conveyors built on a coordinate container with fixed settings so that they are relative to each other but then putting that in a flex container does not get us what we want.

The behavior we want is like an X/Y chart inside of a flex container.

Laptop screen

Bigger Monitor

Thanks,

Nick

1 Like

Have you experimented with a coordinate container set to use percent mode instead of fixed?

@cmallonee yeah, we have tried that but it does like below, the components loose their positional relation no matter if its the big or small screen.

Nick

This is a good question, I’ve wondered the same thing, you have to scale it so that it keeps a 1:1 ratio, but using percentage distorts the image

Under mode you should see the aspectRatio property (only applies when in Percent mode). Set this value to 1:1 and see if that helps.

@WillMT10 yikes!

Weird…do you have style classes set on those components? Wondering if there is some weird interaction happening there when the aspectRatio is set. I’m just grasping at straws though…

Ran a quick test and this is how it stretches for me if I don’t set the aspect ratio:

This is with an aspect ratio of 1:1 (this is what it looks like in my designer too):

A “conveyor” is just a flex container and a label. The label background color is based on the value of a motor UDT state. The label text comes from the parameters of the associated motor UDT. The conveyor can be clicked on to get a detailed status bit pop-up window.

image

image

Hmm…I can’t seem to replicate the weird sizing you’re seeing when the aspectRatio is set, even with embedded flex containers. What do you have set for the props on your flex containers? And do you have the label components set to grow?

You could use calc() in a fixed container, that requires some math tho, and be careful as adjusting the container (by accident) by dragging it while it has a calc() value it gets overwriten (so maybe add it in an expressing binding) i use this often to float something to the side of a screen.
image
you can also use it on x,y,width and height
The desinger marks it as wrong but it works

What worked is to use percent and set the aspect ratio per screen design size.

So for 1920 x 1080 we used 16:9 and it worked.