Designing User Interfaces

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 Panels

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.
• Leave 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.
• Avoid placing objects on top of other objects. 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.
• Use the Align Objects and Distribute Objects pull-down menus to create a uniform layout.

Configuring Fonts and Colors

You also can improve the usability of user interfaces by configuring fonts and colors. 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 fonts of the current platform. Additionally, if you attempt to open a VI that uses an unavailable font, LabVIEW substitutes the closest match. 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. 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 also define the appearance of Panel & Object, Window, and Highlight, and the color of the text that appears on top of these system colors. You can configure user-defined colors and view system colors in the Options dialog box.

Refer to the following example at ni.com 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.

Open example� Find related examples

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.

Consider making the window as small as possible without crowding controls or sacrificing a clear layout. Some displays have a limited resolution, especially LCD displays and touchscreens.

Also, configure front panels to open in the upper-left corner of the screen for the convenience of users with small screens. Place sets of VIs that are often opened together so the user can see at least a small part of each. Place front panels that open automatically in the center of the screen. Centering the front panels makes the VI easier to read for users on monitors of various sizes.

In 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.