I need to implement a responsive view, that “auto sizes” views to “best fit” the size container they are provided. I have accomplished this before (somewhat) with a flex repeater and using calculations to determine the maximum size of a square, but because you cannot access the view port size, I have found it impossible to make that fully responsive.
Simply put I have a view that is a square (or rectangle) and I need it to “best-fit” N number of them within a flex repeater with the space given, maintaining the views aspect ratio.
It almost feels like as an alternative to “useDefaultViewWidth/Height” a “maintainAspectRatio” might solve this problem?
This is what I can currently accomplish, but say in this instance I want all 4 “Squares” to autosize to their maximum size.
Help me understand your definition of “best fit” and “maximum” size. What calculations, in brief, did you use to calculate the maximum size of a square? Have you tried making use of the Breakpoint container to adjust the layout of your flex repeater at various sizes? Can you provide more examples of how you would like your views to be laid out at these various viewport sizes? Since you are talking viewport size, I assume your root view is stretched the full size of the viewport, or thereabouts?
If you imaging the "Flow" option on a vision template repeater ,kindve like that. I want the repeated view to size to its maximum size that will fit within the overall repeater, for whatever number of views has been repeated.
This is the function I put together that calculates the maximum size a group of squares can be within an overall rectangle. The output is the width of the square.
def getMaxSquareSize(width, height, numOfSquares, padding):
import math
x = float(width)
y = float(height)
n = float(numOfSquares)
px = float(math.ceil(math.sqrt(n*x/y)))
if math.floor(px*y/x)*px<n:
sx = y/math.ceil(px*y/x) - padding
else:
sx = x/px - padding
py = math.ceil(math.sqrt(n*y/x))
if math.floor(py*x/y)*py<n:
sy = x/math.ceil(py*x/y) - padding
else:
sy = y/py - padding
if sx > sy:
return sx - (padding * 2)
else:
return sy - (padding * 2)
Here is an example of one of the views I am trying to make responsive, It includes a label, a flex repeater showing different statistics, and then a flex repeater showing a number of machines and their states. The number of objects in both flex repeaters needs to be dynamic. For instance if the one on the left is a 3:2 aspect ratio, then I want it to stretch that repeated view to fit the maximum size it can within the flex repeater, for the number of views required. Then I can handle text scaling with a media query. In the case of the squares, being a 1:1 ratio, I just want them to autofill as best as possible at their maximum size. Currently that is done with the function provided above. The images below currently I have to calculate the number of squares based off a static size for the flex repeater, I cant allow it to grow or elseI cant provide the function the width and height. And for the rectangles I have to create a bunch of different size versions of that view, and then use default width and height.
An alternate one might look like this
I would like it to be, but then I cant track the size of the flex container as it grows and shrinks, and therefore cant provide the width/height to my calculation to determine the maximum size of the embedded view.
I know that was a lot of information, so if anything is unclear please let me know.
Thanks,
Keith G.
I see what you’re trying to do. Typically we would use some sort of breakpoint container to dynamically display a different number of object depending on the containers dimensions. I’m curious as to how you determine what to display and what not to display. Is all the information not relevant? You could still show all the information if you arranged things differently, starting with smaller viewports first and then working your way up. Mobile devices are handled and so in close proximity to the user, so there might not be a need for the font and cards to be so big? I’m not completely familiar with your project’s user requirements and specifications, so forgive me if I have misinterpreted. Side note, although I’m not sure this was the intention, making use of the Dashboard component in stretch mode which uses more of a grid system might be better for achieving the look you’re going for.
Regarding this section, the number of views is determined by the output of a query, so there might be 4 or there might be 10, and color/text/value/order all need to be dynamic.
Essentially these are just dynamic displays that show on TVs throughout the facility, and they have worked great on TVs as such. But there is also a need to show them on the customers computers, so I am trying to make it so the repeated views can shrink and resize appropriately.
Here is what the TV looks like
I really think the solution here would be to make use of our breakpoint container, or several nested breakpoint containers, to display different layouts at different sizes. The closer we get to mobile, the more valuable the real-estate. In the current situation, I would start large, and then resize the window until the visible layout no longer works, at that point I would set a breakpoint, and adjust the layout (possibly using different components) so that it works again, and repeat until I get to a desired minimum (320 x 568 if we are talking mobile). Really, I think that’s the solution here. For extreme changes in size, we’ll need to adjust the layout. We’d save a bunch of headache if we didn’t force it, and instead let the browser and the various container types do the work for us. Give it a try. If you’re still having problems let me know, I’d be happy to help.
So the Dashboard component will resize widgets (which are just embedded views) like this is stretch mode. It would take a little more work to set up, because you’ll have to explicitly specify the number of rows and columns (which I guess you can do using part or all of your existing script), as well as the widget configuration objects in widgets, which includes their position (columnStart, rowStart, columnEnd, rowEnd). It’s an option if you think it might be useful.
p.s. Checkout out Ray and Perry’s talk on “Designing Effective Mobile-Responsive Industrial Applications” if you get a chance. I think you’ll find it useful if you haven’t seen it already. Ignition Community Conference Archives - 2020
