UI Interest Group Blog

Community Browser
cancel
Showing results for 
Search instead for 
Did you mean: 

Resizable UI’s in LabVIEW

Member

Introduction

Often as I open new software and the user interface pops up, I make a few typical clicks around, and I can almost immediately recognize it as a LabVIEW application. It’s funny how as a LabVIEW developer, I can recognize just from a user interface alone and some minor interaction that it has been written in LabVIEW. In the past, I found this true with other development platforms; although this is no longer as obvious. So, what is one of the things that made me suspicious of it being written in LabVIEW besides my familiarity with the common controls/indicators?

The screen would not resize.

It seems that generally speaking there is an opinion that in LabVIEW it just isn’t easy or worthwhile to design a nicely laid out, resizable UI. There aren’t very many good examples or documentation available, but it is really quite simple to accomplish. Resizable UI’s give a great feel to clients and give your software added professionalism at very little cost to developers. There is one caveat to this though, it should be considered up front at design time. Completing software without this in mind and trying to convert a UI to become resizable is typically a nightmare and should be avoided when possible. This is most especially true with complex UIs.

So, how is it done?

(After reading this please check out my follow up blog: Advanced Resizable UIs: Multicolumn Listboxes)

Planning

The most important step in making a UI resizable is some up front planning. Typically, we do some mock ups of how we anticipate the user interface to look and feel. This is a good time to plan which aspects you want to resize, and which you do not.

Elements to Scale

Elements you wish to resize or not resize should be grouped into sections.

In a LabVIEW application, the following elements typically should resize:

  • Graphs/Charts
  • Multicolumn Listboxes (extra code often required)
  • Image Acquisition
  • Tab Controls
  • Subpanels (extra code often required)

The following elements generally should not resize:

  • Text, Numeric, Boolean controls/indicators
  • Buttons
  • Static images
  • Enums, Ring control/indicators

Keep in mind these are just general recommendations, not rules. See the image below for my sample layout. Notice I have grouped elements such as text inputs, Boolean indicators, and buttons which I do not want to change size.

In this example, the only element I want to scale as the UI resizes is the graph.

1.png

Splitters

Now it’s time to add one of the more underutilized elements on the front panel palette – splitters. These can be found under the “Containers” palette in both Modern and System sections. Adding a splitter to your VI will create a hierarchy of “Panes” on your front panel. Each pane can be considered a section of your front panel that can have separate resizing settings from the rest of the UI.

2.png

There are horizontal and vertical splitters, and which you choose first is more important than you might think. It depends on your intended layout, but using my example it is obvious we want all of my text inputs to stay on the left as well I may want to leave some room below for future additions. As well, I want to keep my digital indicators in line with the left side of the graph. In order to keep the entire left side usable and clean, we should start with a vertical splitter.

Drag a splitter onto the front panel and section off the left text boxes from the graph as shown below. At this point, it’s going to look a little sloppy with scroll bars everywhere. Simply right click on the splitter bar, drill down to the pane you are concerned with and turn off each scrollbar to clean things up.

3.png

Repeat the same process for a horizontal splitter to section off the bottom digital inputs and buttons. Your screen should look as shown below when you are done:

4.png

Looks better now, but the splitters are a bit thick by default. It’s a little tricky to do, but you can shrink down the splitters to be about 1 pixel wide and almost invisible by grabbing the resize terminals in the middle of the splitter when you hover the mouse over it.

The next step that was not obvious before is relating to the buttons. We really would like the buttons to stay on the right side of the screen as it resizes, and keep the digital indicators on the left side of the screen in line with the graph. That will keep things looking clean as it resizes. How can we accomplish this? Add another splitter. Drop a vertical splitter just to the left of the buttons.

Next we need to define which way each pane sticks, grows, and shrinks. This is all configurable from the right click menus on each splitter. By default, each pane will stick to the top left corner and will not resize when dragged. These default settings are good for our left pane, and our digital indicator pane. For the buttons, we want slightly different behaviour to keep the buttons on the right side of the screen.

Configure all the splitters as listed below:

  • Right click on the left splitter and select Splitter Sizing -> Splitter Sticks Left
  • Right click on the bottom horizontal splitter and select Splitter Sizing -> Splitter Sticks Bottom
  • Right click on the bottom vertical splitter and select Splitter Sizing -> Splitter Sticks Right

5.png

If you resize the screen now you’ll see the desired behaviour. There is one last step, which allows the graph to resize. In order to do this, simply right click on the graph and select “Fit Control to Pane”.

That’s it. Now resize the screen all you want, it will always lay out nicely. To add more controls and indicators with their own behaviour, just keep adding splitters as necessary.

Your screen should now look like this:

6.png

Minimum Screen Size

Once you have set up your UI, it’s generally a good idea to compress it down until it’s as small as possible while still being usable and set a minimum screen size. This will ensure users don’t make the window smaller than you ever intended (which can introduce some odd bugs in the LabVIEW layout).

Accomplish this with the following steps:

  • Shrink the window down as small as reasonably possible without covering up any controls/indicators/labels
  • Go into VI Properties -> Window Size and click “Set to Current Panel Size” and click OK.

7.png

8.png

Conclusions and Next Steps

This was a simple demonstration for creating a simple, professional looking and scalable user interface. These concepts can be extended into much more complex interfaces involving tab controls, subpanels, XControls, etc. These more advanced topics are covered in my next blog: Advanced Resizable UIs: Multicolumn Listboxes.

Graham Beauregard

Prolucid Logo.gif

http://www.prolucid.ca

Comments
Active Participant

Great post.

I'd just add a warning about the usage of Tab control in resizable ui. It's really an headache to have resizing behavior working right with this control. So I'd advice to avoid the use of it. As you said in conclusion, I'd prefer to use subpanel to manage things that could be done with a Tab control.

Olivier

Olivier JOURDAN

SAPHIR | Certified LabVIEW Architect | Topaze on NI Community | LabVIEW add-ons on NI Community |
Member

One additional trick if you really want to hide splitters - set the splitter style to classic, and then you can color it to be the same as your panel background, making it hidden when in run-time to the user.  I use this often to space out buttons without it looking like panes.

Active Participant

While we're talking about hiding splitters, please go vote for this idea!

http://forums.ni.com/t5/LabVIEW-Idea-Exchange/Allow-0pixel-size-splitter-bars/idi-p/1229909

Active Participant

Excellent post. It's true, we all expect a UI to be resizable.

We also expect it to remember its size AND its last screen position when you start it again.

I've added the suggestion to the LabVIEW Idea Exchange.

Remember user selected window position and size

Troy - CLD
Each snowflake in an avalanche pleads not guilty. - Stanislaw J. Lec // I haven't failed, I've found 10,000 ways that don't work - Thomas Edison
The greatest of faults is to be conscious of none. - Thomas Carlyle // Beware of the man who won't be bothered with details. - William Feather
Member

Hi, Is it possible to share the controls pack of the controls that you used in the above vi screenshots.

Member

hi monohar,

Those controls are from LabVIEW silver palette. If you have LabVIEW 2011 or higher you could see it. This was brought out for NI's 25th anniversary.

Member

Thanks RuchiG for the info, Will install LabVIEW 2011 soon to explore it.

Active Participant

Another tip when you build your ui: you can easily test resizing behavior using "CTRL + M" to switch from Edit to Run mode.

Olivier JOURDAN

SAPHIR | Certified LabVIEW Architect | Topaze on NI Community | LabVIEW add-ons on NI Community |
Member

Nice tip.

Thanks, Graham.

Member

Nice article.  However, the title has that common mistake -- plurality confused with possessive form contraction.

It is UIs, as in User Interfaces.  It is NOT the User Interface's [what -- note that there is no what].

Member

Nice work, Graham.