Company Events Academic NI Developer Zone Support Solutions Products & Services Contact NI MyNI

Designing User Interfaces

LabVIEW 8.5 Help
August 2007

NI Part Number:
371361D-01

»View Product Info

If a VI serves as a user interface or a dialog box, front panel appearance and layout are important. Design the front panel so users can easily identify which actions to perform. You can design front panels that look similar to instruments or other devices.

You can use events to enhance the functionality of user interfaces.

Using Front Panel Controls and Indicators

Controls and indicators are the main components of the front panel. When you design the front panel, consider how users interact logically with the VI and group controls and indicators. If several controls are related, add a decorative border around them or put them in a cluster. Use the decorations located on the Decorations palette to group or separate objects on a front panel with boxes, lines, or arrows. The objects on the Decorations palette do not display data.

Do not place front panel 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.

Avoid placing 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 and use common terminology. Use specific names like Start, Stop, and Save instead of general names like OK. Specific button names make the VI easier to use.

LabVIEW uses fonts already installed on your computer. For instance, LabVIEW defines its built-in fonts as the default system font. 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 display a VI that uses a font that is unavailable, LabVIEW substitutes the closest match. For example, if you try to view a VI that uses the Arial font on a computer which does not have the Arial font, LabVIEW substitutes the Arial font with a similar, installed font. LabVIEW substitutes colors similarly to how it substitutes fonts. If one of the colors of the VI is unavailable, LabVIEW substitutes the closest match.

If you use system colors for the objects on the backgrounds of the front panel and block diagram, then the appearance of the VI varies across systems. To view the current available system colors in the color picker, select Tools»Options then choose Colors from the left-hand menu. Deselect the checkbox next to Use default colors and click one of the eight color boxes to show the color picker. You can view the six available system colors in the lower right-hand corner of the color picker. These six system colors vary across computers, so any VI that uses system colors reflects the specific system colors of the current computer. There are pairs of colors for panel and object, window, and highlight for items like menus. For example, if you use the Panel & Object system color for the background of a front panel, the front panel background appears white on a computer that has the Panel & Object system color set as white, and it appears gray on a computer that has the Panel & Object system color set as gray. To change the six system colors that appear in the color picker, use the color utility on the operating system of your computer.

Refer to the NI Developer Zone for more information about system colors.

Using Splitter Bars and Panes

You can use splitter bars to create professional user interfaces on the front panel, such as toolbars or status bars. 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. Each pane has its own set of pane coordinates and, and you can scroll each pane individually. Each pane has its own set of controls and indicators on it. 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 Multi-Panel Front Panel using Splitter Bars VI in the labview\examples\general\controls\splitter.llb 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—Places the label for the splitter bar on 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 programmatically configure the splitter bar.
  • 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 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 splitter bars.

  • Visible Items—Places the label for the pane on 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 programmatically configure the pane.
  • 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.
  • 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 and select Window Appearance from the Category pull-down menu 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 undo operation or keyboard shortcut <Ctrl-Z> while a VI is running. This can cause unexpected behavior in dialog boxes, such as a closed box reopening. To avoid this behavior, you can add an event structure to the VI and configure the Key Down event to filter out 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.


Resources


 

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