LabVIEW Splitter Bars

Jun 26th, 2010 by Christina in LabVIEW, User Interface

VI with splitter bars

I recently saw a discussion on info-labview about scaling objects when you resize the panel.

There are several options for how to do this, with different strengths and weaknesses.

  1. Handle the panel resize event and programmatically resize and position everything. Flexible and powerful, but it’s a lot of work and the resulting code is brittle (which means it “breaks” easily – whenever you change your UI, you have to update your diagram).
  2. Scale all objects on front panel as the window resizes (in VI Properties>>Window Size). Easy, but rarely does what you want. In most cases, you probably want some (but not all) of the controls to scale with the window. Also, this option has problems when the panel gets very small and then large again in that controls don’t return to their original size and position. If you use this setting, make sure you set a reasonable minimum panel size in VI Properties.
  3. Scale Object with Pane (in control’s right-click menu). Easy, but limited to a single scaling object per panel unless you use splitter bars.
  4. Splitter bars combined with object scaling options. This is a fairly easy, powerful technique. I’ll go over this one in more detail.

What are Splitter Bars?

Splitter bars let you divide your front panel into multiple panes. You can make the bars operable, which lets you move the splitter while the VI is running and choose which side gets more space. You can also lock them so they cannot be moved at run-time, which lets you easily isolate areas of your panels for things like toolbars and status bars.

You can further sub-divide each pane using more splitters.

Resizing with Splitter Bars and Panes

When you resize the VI front panel, splitter bars can “stick” to one side or the other, or move proportionally. You configure the Splitter Sizing behavior by right-clicking on the splitter bar.

To make a control fill a pane and resize with it, right click on the object and select Fit Control to Pane. This command resizes the control and sets Scale Object with Pane. You can also use Scale Object with Pane separately, although I expect this would be less common.

It can take a little experimentation to find the best way to divide your panel into panes so that the resize behavior is what you want, but the results can be quite good.

Making Splitter Bars Invisible

If you do not want the splitter bars to be visible in your final, running VI, use the “Classic” style splitter bars (either by placing them from the Classic palette or by right-clicking and selecting the Splitter Style). Color the splitter bar the same color as your panel. Note that, if the splitter is not visible, you should probably lock it so that it cannot be moved when the VI is running. (You lock it via the right-click menu). Otherwise you will see a cursor change when you mouse over the invisible splitter bar on your running VI.

View a demo video of me adding splitter bars to a VI: YouTube or QuickTime

Download my splitter bar demo VI (LabVIEW 2009 or later): Splitter Demo VI

7 Comments

  • Nice article. To many people still don’t know about the splitter bars and the powers within.

    This reminded me about two Ideas about wanting to be able to use them also in tab pages.

    http://forums.ni.com/t5/LabVIEW-Idea-Exchange/quot-Fit-to-pane-quot-for-tabpages-Tabpages-handled-as-panes/idi-p/1098417

    http://forums.ni.com/t5/LabVIEW-Idea-Exchange/Tab-Controls-with-Splitter-Bars/idi-p/990693

  • Also, adding to the making-them-invisible part – you can also make them narrower using their resizing handles (which appear in the middle of the splitter) so that they take up less space.

    Note that at least in 2009, the horizontal splitter seems to only allow going below its original thickness if you resize it using the top handle. If you use the lower one, it will stop at its original size. This is probably a bug.

  • Hi Christina,
    nice video, one of the very cool things is ‘Scale while resizing’ option for a pane.
    I adjusted your VI in a video posted at screencast Rescale while resize.

    Another video is located hereon the creation of splitter bars and there (invisible) behaviour.

  • Jeffrey – Those are both good ideas; thanks for using Idea Exchange! As a workaround in the meantime, I think you could put a subpanel in the tab control and then use Scale All Objects with Pane. (Assuming you made a pane with just the tab control in it). I haven’t tested this, though, so if you try it, please let me know if it works! (Of course, it does mean your tab contents are actually in a separately running VI, so that might be too difficult to work with).

    Yair – Good point, resizing the splitter bars is very important, especially to get the invisible ones out of the way. I’m not seeing the lower handle resize problem in LV2009SP1 – perhaps it was fixed? Or maybe there is another factor in the issue?

    Ton – Thanks for mentioning the Scale Objects While Resizing option! You’re right that it does make the resizing look much better.

    To make sure everyone catches these tips:

    • Resize Splitter Thickness – Use the grab handles in the middle of the splitter bar to adjust their thickness.
    • Smooth Scaling while Resizing – Right-click on the splitter bar and select Upper (or Lower) Pane >> Pane Sizing >>Scale Objects While Resizing.
  • Is there a way to customize the look of the splitter bar? The labels seem to be immovable. Specifically, is there a way to add the symbols seen in other apps that look like greater than, less than symbols: “<<"
    Not sure what they're called but they show the direction of collapse if a user was to double click the splitter bar. The splitter bars don't have a "double click" event but it would be cool next step.

    • The only customizations (that I’m aware of) are the Splitter Style (Modern, Classic or System) and the color. However, I have seen people make UIs like you describe by using two parallel splitter bars and putting decorations in the pane between them.

  • […] This post was mentioned on Twitter by labview, Christina Rogers. Christina Rogers said: Eyes on VIs blog: "LabVIEW Splitter Bars" http://bit.ly/chYWdP #LabVIEW […]

 

Comments have been closed for this post.