Can I create a Perspective Coordinate Container with different grow / shrink behaviour?

Ignition
1

Hello.

I'm working to make an outline of a plant floor -- so an image (we used an image component, although a background image might be more appropriate), with some components overlaid onto it. The primary use of this screen will be as a large screen display of plant operations, however, we are hoping to make it usable on mobile as well.

One suggestion that was floated by my team for how to make this work on mobile, would be having the user able to pan around the factory floor. We want it to be such that if the screen is larger than say 800 pixels in width, everything will expand nicely to fill the screen, but when it shrinks below 800 pixels, we get scrollbars.

We have the larger of these two modes working, using a coordinate container set to percent mode, with overflow set to visible

However, once the screen gets small enough, we want to swap to using something akin to a coordinate container in fixed mode, with overflow set to scroll.

An obvious solution to this would be using a breakpoint container, and placing the two different coordinate containers inside of it. However, we expect to be changing the buttons and overlays on the plant floor, and so duplicating the same logic across two containers would create additional work.

I also tried another approach with configuring bindings, but it didn't work well

Another option would be somehow configuring bindings on the mode and scroll properties of the xy container (say, connecting them to page.props.dimensions.primaryView.width -- although this seems to not work in the designer).

However, when I tried manually swapping these, the positioning of my elements was messed up. Eg, starting at my default size, and changing the mode to fixed and scroll, then growing the screen out past its original size -- which caused the background image component to take up less than 100% of the background -- and then changing the coordinate container back to percent, the images width property was now no longer 1, but rather 0.98. The overlaid components were also misaligned.

This makes me suspect that binding these mode properties is not a good solution.

Is there a way to have the two child components of the breakpoint be nearly the same, differing only in their resize behaviour? Eg, some cleaver embedded view shenanigans

2

The breakpoint container method was much less involved than I expected it. I kept my original view as the percent container.

I created a second view, with a breakpoint container -- which is the one which will be displayed on the webpage.

As the large child, I put an embedded view of the original view, with the "useDefaultViewWidth"/Height settings set to False.

As the small child, I put a coordinate container, with mode fixed and overflow scroll. Inside that container, I put the embedded view, with "useDefaultViewWidth"/Height settings set to True, and width/height set to auto.

This got me my desired behaviour of differing resizing behaviour depending on the size.

1 Like