Auto Resize windows to fit various vision client screen size without scroll bars

Hi there, I am struggling with window sizes not resizing to suit my client screen sizes.
I am new to ignition and have basic knowledge of scripting etc. It would be great if someone could help me with my problem and give me a step by step instruction.

My HMI design is pretty compact and would like the window and anything inside it to auto resize on vision client depending on the client’s screen size without a scrolling bar displayed(would like to use it on touchscreen and it is annoying to have to scroll). I tried using relative and anchor but with no luck.

Cheers

You can try adjusting the minimum size in the project settings (Client // User Interface). It should allow the windows to shrink down to it. There is also a minimum size setting for each window, but it defaults to 0 x 0. May still be good to look for a sanity check.

From a personal design standpoint, I set minimum size to 10 x 10 pixels smaller than the lowest resolution I want to support. Then I design the windows to fit that minimum size.

1 Like

Thanks for that, I will try :+1:

Is this doable on perspective?

As far as I know perspective Views scale to any window size on their own. As long as the position of all components is within the window at all times there shouldn’t be any scroll bars.

You can make the position of components relative to the windows size by converting the coördinates to percentages, in a coördinate container at least.

That all being said, Jordan’s approach will probably still be helpful in perspective depending on what you’re making.

You see I have already created a view on 1920x1080 with a multiple amount of embedded views each to their own position and size. Now the aim is to convert this on a 1024x768 screen resolution size to fit an HMI. Im using Flex container but all the embedded views seem to change position diagonally(the ones with an angle assigned) or the scroll bar appears to some of them and finally labels do not change size. So Im looking to find the way (if there is one) to simply resize the entire view having all components in the correct size and position but seems impossible at the moment without remaking the view on a different size from scratch almost.

How do I convert the coordinates to percentage? would I need to make a coordinate container for every embedded View?

Under the position section of your property editor you will find an x and y coordinate. All you have to do is to take the current value, divide that by the width or height of your view(depending on the coordinate) and then multiply it by 100. So c/s*100 where c = coordinate and s = size.
After that simply enter the result and end it with %. You can do this for the width and height for your components too.

As for converting your current larger view to something smaller, if it’s a different aspect ratio you’re probably out of luck and have to do it manually. Otherwise, it should scale down on it’s own after setting all positions to percentages.

Thank you very much for this. I will give it a go and let you know. That was the first thing I tried. So i clicked on the background of the larger view and set its mode to percent. Again I have the same issue.