Company Events Academic Community Support Solutions Products & Services Contact NI MyNI

Designing User Interfaces

LabVIEW 2013 Help

Edition Date: June 2013

Part Number: 371361K-01

»View Product Info

If a VI serves as a user interface or dialog box, front panel appearance and layout are important. Design front panels to resemble instruments or other devices so users easily can identify which actions to perform. Use front panel controls and indicators, splitter bars and panes, window settings, and so on to improve the usability of the front panel. You also can use events to enhance the functionality of user interfaces.

Designing Front Panel Controls and Indicators

The main components of the front panel are controls and indicators. Use the following guidelines to design the front panel to serve as a user interface:

  • Consider how users interact logically with the VI. Group controls and indicators accordingly.
  • Place related controls in clusters or add decorative borders around them.
  • Use the decorations located on the Decorations palette to group or separate objects with boxes, lines, or arrows.
  • Do not place objects too closely together. Leave some blank space between objects to make the front panel easier to read. Blank space also prevents users from accidentally clicking the wrong control or button.
  • Do not place objects on top of other objects. Even partially covering a control or indicator with a label or other object slows down screen updates and can make the control or indicator flicker.
  • Assign specific names to buttons such as Start, Stop, and Save. Use common terminology.

You also can improve the usability of user interfaces by configuring system fonts and colors.

LabVIEW uses fonts already installed on the computer. For example, LabVIEW defines its built-in fonts as the default system fonts. When you move VIs between platforms, LabVIEW automatically updates its built-in fonts so that they match the default system font of the current platform. Additionally, if you attempt to open a VI that uses an unavailable font, LabVIEW substitutes the closest match. For example, if you attempt to open a VI that uses the Arial font on a computer that does not have the Arial font, LabVIEW substitutes a similar, installed font. LabVIEW also substitutes colors similarly to how it substitutes fonts. If one of the colors of the VI is unavailable, LabVIEW replaces it with the closest match.

If you use system colors for objects, the front panel background, or the background of the block diagram workspace, then the appearance of the VI varies across systems. To view the available system colors in the color picker, select Tools»Options and select Environment from the Category list. Remove the checkmark from the Use default colors checkbox and click one of the eight color boxes to display the color picker. You can view the available system colors in the lower right corner of the color picker. The system colors vary across computers, so any VI that uses system colors reflects the specific system colors of the current computer. The system colors define the appearance of Panel & Object, Window, and Highlight, as well as the color of the text that appears on top of these system colors. To change the system colors that appear in the color picker, use the color utility on the operating system of the computer.

Refer to the NI Developer Zone at ni.com/zone for more information about system colors.

Using Splitter Bars and Panes

You can use splitter bars, such as toolbars or status bars, to create professional user interfaces in the front panel window. You can create a splitter bar to separate the front panel into multiple regions, called panes. Each pane acts similarly to a unique front panel, with its own sets of pane coordinates and controls and indicators on it. You can scroll each pane individually. The splitter bar separates the controls on one pane from those on another pane, yet the terminals for all controls are on the same block diagram.

When you create a new, blank VI, the front panel has a single pane that fills the window. The front panel owns this pane and is the pane's parent. When you place a splitter bar on a pane, the splitter bar replaces the pane in the front panel object hierarchy and creates two new child panes. The front panel owns the splitter bar, and the splitter bar owns the two child panes. If you place a new splitter bar on one of the child panes, the new splitter bar replaces that pane and becomes the parent of the two new child panes. This hierarchy forms a binary tree, and the front panel owns the top pane.

Refer to the Resizable Panel with Splitter Bars VI in the labview\examples\Controls and Indicators\Containers for an example of using splitter bars and panes.

Configuring Splitter Bars

Right-click a splitter bar and select one of the following shortcut menu options to configure splitter bars:

  • Visible Items—Adds the label for the splitter bar to the front panel. LabVIEW hides the splitter bar label by default.
  • Create—Allows you to create a Property Node, VI Server reference, or Invoke Node to configure the splitter bar programmatically.
  • Remove Entire Splitter Hierarchy—Removes the splitter bar you select and any splitter bars that are children of the splitter bar in the hierarchy. The objects remain in the same screen position on the front panel. If you select a splitter bar that is not another splitter bar's parent, LabVIEW disables this option.
  • Remove with Adjoining Splitters—Removes the splitter bar you select and any splitter bars with ends that touch the selected splitter bar.
  • Splitter Sizing—Allows you to control how resizing the window affects panes. By selecting an option in the Splitter Sizing shortcut menu, you can set a pane to remain the same size, or stick, while the other pane grows or shrinks as you resize the windows. You can also choose Splitter Sizes Proportionally to allow both panes to grow or shrink together when you resize the window.
  • Locked—Locks the splitter bar in the current position.
  • Splitter Style—Allows you to customize the style of the splitter bar.
  • Upper Pane/Lower Pane/Left Pane/Right Pane—Allows you to configure the selected pane. When you select a pane, a new shortcut menu opens with options for configuring the selected pane. Refer to the Configuring Panes section of this topic for more information about configuring panes.

You also can use the Splitter properties to configure splitter bars programmatically.

Configuring Panes

Right-click a scroll bar in the pane, or right-click a splitter bar and select the pane you want to configure and select one of the following shortcut menu options to configure panes:

  • Visible Items—Adds the label for the pane to the front panel. LabVIEW hides the pane label by default.
  • Create—Allows you to create a Property Node, VI Server reference, or Invoke Node to configure the pane programmatically.
  • Horizontal Scrollbar—Allows you to select if the horizontal scroll bar is always visible, never visible, or not visible while the VI is running.
  • Vertical Scrollbar—Allows you to select if the vertical scroll bar is always visible, never visible, or not visible while the VI is running.
Note  If you turn off the horizontal or vertical scroll bar by right-clicking the scroll bar in the front panel window, you can display the scroll bar again by enabling the Show horizontal scroll bar option or the Show vertical scroll bar option in the Customize Window Appearance dialog box.
  • Pane Sizing—Allows you to control how resizing the window affects panes. You can choose to have the objects in the resized pane remain at the bottom, top, left, or right of the pane. You also can choose to scale the objects in the pane when you resize the window.

If there are no splitter bars on the front panel, you can configure some properties of the single pane in the VI Properties dialog box. However, if you add a splitter bar to the front panel, LabVIEW limits the menu options in the VI Properties dialog box because the configurations cannot apply to all panes. You must configure each pane individually. For example, adding a splitter bar to the front panel dims the Scale all objects on front panel as the window resizes checkbox on the Window Size page of the VI Properties dialog box.

You also can use the Pane properties to configure panes programmatically.

Designing Dialog Boxes

Select File»VI Properties, select Window Appearance from the Category pull-down menu, and select the Dialog option to hide the menu bar and scroll bars and to create VIs that look and behave like standard dialog boxes for each platform.

If a VI contains consecutive dialog boxes that appear in the same screen location, organize them so that the buttons in the first dialog box do not directly line up with the buttons in the next dialog box. Users might double-click a button in the first dialog box and unknowingly click a button in the subsequent dialog box.

Users also might attempt to use the keyboard shortcut <Ctrl-Z> to perform an undo operation while a VI is running. This can cause unexpected behavior in dialog boxes, such as a closed dialog box reopening. To avoid this behavior, you can create a custom menu that does not include the Edit»Undo option, or you can add an Event structure to the VI and configure the Menu Selection (App) event to handle the command.

Use the system controls located on the System palette in dialog boxes you create.

Selecting the Screen Size

When you design a VI, consider whether the front panel can display on computers with different screen resolutions. Select File»VI Properties, select Window Size in the Category pull-down menu, and place a checkmark in the Maintain proportions of window for different monitor resolutions checkbox to maintain front panel window proportions relative to the screen resolution.


 

Your Feedback! poor Poor  |  Excellent excellent   Yes No
 Document Quality? 
 Answered Your Question? 
Add Comments 1 2 3 4 5 submit