Perspective Reactive Design for Conveyor Layouts

[nicholas.robinson]

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

[cmallonee]

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

[nicholas.robinson]

@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

[Adriaan.leRoux]

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

[WillMT10]

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.

[nicholas.robinson]

@WillMT10 yikes!

[WillMT10]

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):

[nicholas.robinson]

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.

[WillMT10]

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?

[victordcq]

@nicholas.robinson

coordinate container with fixed settings

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.

you can also use it on x,y,width and height
The desinger marks it as wrong but it works

[nicholas.robinson]

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.

[nicholas.robinson]

There was interest expressed in this topic recently so I wanted to come back and add a bit more to this thread in case it can help someone out there. Will speak below about the direction we eventually went with conveyance layouts in Perspective.

The starting point is to have UDT's configured for the conveyor which presents the associated status bits in a predictable way. We have 1000's of conveyors so the UDT's are instantiated via scripting based on the vendor provided tag sheet (most data we work with is MODBUS). If anyone is interested in more details about how to instantiate UDT instances with scripting, let me know and we can start a separate thread.

UDT for a Conveyor

Then a straight conveyor is simply a label with certain properties, such as the color being linked to a style whose color represents the asset state.

Conveyor is Simply a Label

For curved conveyors, items from symbol factory are used. The color is still controlled with a style that is related to the status of the asset.

Curved Conveyors are from Symbol Factory

Conveyors can be rotated in the coordinate container using the angle property

The actual layout is then done in a coordinate container to allow the conveyors to be placed in physical relevance to each other. To make it flex the ratio option is selected on the coordinate container root and the aspect ratio controlled as follows:

Aspect Ratio Makes the Container Auto Adjust

CONCAT(
	{view.props.defaultSize.width},
	":",
	{view.props.defaultSize.height}
)

Example Conveyance Layout

Cheers,

Nick

[amarks]

@nicholas.robinson

A "conveyor" is just a flex container and a label.

That's probably your issue. As the container scales with the view the flex container will adapt. Sometimes, it doesn't work exactly as one would expect. I like to used scaled coordinate containers for my templates (embedded views).

Also, setting the ratio to 1:1 won't fix the issue. You need to set it to the aspect ratio of the view that you designed the layout on. Looks like maybe it's 1920x1080, so 16:9 in that case. Then, the view will always be 16:9 and will be contained by the device's resolution, filling the extra space in the other direction with whitespace.

For example, a 4:3:

4:3 on 16:9:

[jay.settle]

I was attempting to remake this and ran into some problems. Nick set me straight, see below...

As noted, here are what containers the components are in:

Conveyor Itself is a flex

The conveyance view it is in is a coordinate container

Settings are percent with the size = to the size of the view. The expression to do this:

CONCAT(
	{view.props.defaultSize.width},
	":",
	{view.props.defaultSize.height}
)

The conveyance view is embedded into a flex container

Here is how this behaves in a chrome browser:

Full Screen

Shrunk Down