In a previous blog post, I covered 3 tips to make better looking LabVIEW UIs. It’s great to make a UI that looks good, but what happens if it’s used on a different sized monitor or your user re-sizes the screen? You need to make sure that the UI still looks good and that everything is displayed proportionally.
In the last blog post, I covered quick tips for making re-sizing easy in LabVIEW – the use of docked splitters to automatically re-size controls or to dock command buttons in one place. An example of this is splitting a UI into 2 panes, with your command bar at the top and an XY Graph filling the entire lower pane. If you select ‘Fit Control to Pane’ when you re-size your UI, the XY Graph will automatically re-size.
This is useful, but it doesn’t solve the re-sizing problem when you have more than one control in a panel, or when you need to use a container like a tab.
If you have multiple controls in a UI or in a pane, a good method when a window re-sizes is to move the position of your controls so that they move proportionally with the UI. An example of this is a start screen where an operator enters information to start a test. If this is initially aligned centrally when a UI re-sizes it should remain centre aligned.
A Start Screen with Data Entry Fields – these should remain centre aligned when the UI re-sizes.
A trick that I use to re-position multiple controls, like in the image above is to place all controls on a transparent tab, then re-position the tab. This makes re-positioning simpler as you only have a single element to move.
Re-sizing Multiple Controls using Control References
This re-positioning method requires you to get the size of the UI or Panel hosting the controls, then use its coordinates, along with the tab controls co-ordinates to calculate the new position of the tab control.
Handling Panel Re-size Events
A problem with this method of moving controls when a LabVIEW UI re-sizes is that LabVIEW generates multiple Panel Resize events whilst a user is dragging a window size. This can lead to your re-sizing code running many times, and your controls slowly drifting across the UI as the screen re-sizes. It looks terrible and is very slow to respond.
A workaround for this is to filter out all the intermediate Panel Resize events and just re-size when the user has finished re-sizing the UI. Fortunately, this is possible, as LabVIEW will generate 2 events when a UI has finished re-sizing, both with the same Panel Bounds.
Code within a Panel Re-size Event – this will only run resizing code when the user has finished re-sizing
The code above will run re-sizing functions when the new Panel Bounds are the same size as the Old Panel Bounds. There is also some checking if the UI has changed to or from the Maximized state, as this only generates a single Panel Re-size event.
By using these two simple tips, it is easy to create UI’s that scale and re-position controls for different monitor resolutions. This makes your applications look more professional and gives a better user experience.
I’ve created VI Packages of the UI re-sizing functions that we use in our projects. If they would help in your projects, you can download them here.